/* ===================================================
   ELEVÉ BARBERÍA — Negocio › Alianzas
   Usa los tokens de style.css.
   =================================================== */

.alianzas-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.alianzas-cab > div { flex: 1 1 280px; min-width: 0; }
.alianzas-cab .boton-primario { flex-shrink: 0; }

.alianza-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  background: var(--c-superficie);
}
.alianza-form[hidden] { display: none; }
.alianza-form__titulo { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--c-primario); }
.alianza-form textarea.form-input { resize: vertical; min-height: 64px; font-family: inherit; }
.alianza-form__acciones { display: flex; justify-content: flex-end; gap: 0.5rem; }
.alianza-form .campo-imagen [hidden] { display: none; }

.alianzas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.alianzas-lista__vacio {
  padding: 1.25rem;
  border: 1px dashed var(--c-borde);
  border-radius: var(--r-md);
  color: var(--c-secundario);
  font-size: 0.8125rem;
  text-align: center;
}

.alianza-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  background: var(--c-superficie);
}
.alianza-item--pausada .alianza-item__logo,
.alianza-item--pausada .alianza-item__textos { opacity: 0.55; }

.alianza-item__logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--c-borde);
  background: #fff;
  object-fit: contain;
}
.alianza-item__logo--iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primario);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.alianza-item__textos { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.alianza-item__nombre { font-size: 0.875rem; font-weight: 600; color: var(--c-primario); }
.alianza-item__beneficio { font-size: 0.8125rem; color: var(--c-texto); }
.alianza-item__detalle { font-size: 0.75rem; color: var(--c-secundario); }

.alianza-item__estado { flex-shrink: 0; }
.alianza-item__acciones { display: flex; gap: 0.35rem; flex-shrink: 0; }