/* ═══════════════════════════════════════════════════════════════════
   UNIFICACIÓN DE MÓDULOS

   El inicio se rediseñó y los otros quince módulos quedaron con la
   estética anterior: al cambiar de pestaña se notaba el salto. En vez de
   rehacer quince módulos, se unifican las familias de componentes que
   todos comparten —panel, encabezado, botones, tarjetas de datos, cifras,
   formularios y pestañas—, medidas sobre admin.html.

   Los tokens ya existen en #admin-app.admin-dashboard-v2, que envuelve
   todo el admin, así que acá solo se los aplica. Va al final del archivo
   a propósito: es una capa de armonización, no una reescritura, y así se
   puede quitar de una pieza si algo no cierra.
   ══════════════════════════════════════════════════════════════════ */
#admin-app.admin-dashboard-v2{
  /* admin.css acumulo varios sistemas de tokens de rediseños anteriores
     —--ux-radius, --crm-radius— y sus reglas compiten entre si. En vez de
     pelearle a la cascada con selectores cada vez mas especificos, se
     reapuntan esos tokens al sistema actual: asi las reglas viejas producen
     la estetica nueva sin tocarlas. */
  --ux-radius:var(--admin-radius);
  --crm-radius:var(--admin-radius);
  /* crm360 traia un azul de otra paleta: el anillo de foco se veia azul
     dentro de un admin verde. */
  --crm-blue:var(--green);
  --crm-border:var(--admin-line);

  --adm-pad:1.15rem;
  --adm-gap:.7rem;
  --adm-radio-chico:10px;
  --adm-linea-suave:color-mix(in srgb, var(--admin-line) 70%, transparent);
}

/* ── Panel de módulo ─────────────────────────────────────────────── */
#admin-app.admin-dashboard-v2 .admin-section{
  background:var(--admin-surface);
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius);
  box-shadow:var(--admin-shadow);
  padding:var(--adm-pad) 1.25rem 1.35rem;
  margin-top:1.15rem;
}

/* ── Encabezados ─────────────────────────────────────────────────── */
#admin-app.admin-dashboard-v2 .section-head{
  padding-bottom:.85rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--adm-linea-suave);
}
#admin-app.admin-dashboard-v2 .section-kicker{
  color:var(--admin-muted);font-size:.68rem;letter-spacing:.12em;font-weight:700;
}
#admin-app.admin-dashboard-v2 .section-title{
  font-size:1.22rem;letter-spacing:-.01em;color:var(--admin-text);
}
#admin-app.admin-dashboard-v2 .section-sub{color:var(--admin-muted);font-size:.85rem}

/* ── Botones: los cuatro estados, que antes no existían ──────────── */
#admin-app.admin-dashboard-v2 .btn-sm{
  border:1px solid var(--admin-line);
  border-radius:var(--adm-radio-chico);
  padding:.44rem .85rem;font-size:.8rem;font-weight:700;
  background:var(--admin-surface);color:var(--admin-text);
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
#admin-app.admin-dashboard-v2 .btn-sm:hover:not(:disabled){
  border-color:var(--admin-line-strong,var(--admin-line));
  background:var(--admin-active);
}
#admin-app.admin-dashboard-v2 .btn-sm:active:not(:disabled){transform:translateY(1px)}
#admin-app.admin-dashboard-v2 .btn-sm:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;
}
#admin-app.admin-dashboard-v2 .btn-sm:disabled{opacity:.5;cursor:not-allowed}
#admin-app.admin-dashboard-v2 .btn-approve{
  background:var(--green);border-color:var(--green);color:#fff;
}
/* Faltaba .btn-reject, así que la regla base de .btn-sm de más arriba le
   ganaba por especificidad y "Eliminar" salía idéntico a "Editar": mismo
   fondo, mismo texto, mismo borde. Lo usa toda acción destructiva del panel
   —rechazar, eliminar, suspender, dar de baja— y también data-tone="danger"
   de las tablas. No va en rojo pleno: es un borde y un texto de alerta, que
   alcanza para distinguirlo sin gritar en cada fila. */
#admin-app.admin-dashboard-v2 .btn-reject{
  background:var(--danger-bg);border-color:var(--danger);color:var(--danger);
}
#admin-app.admin-dashboard-v2 .btn-reject:hover{
  background:var(--danger);border-color:var(--danger);color:#fff;
}
#admin-app.admin-dashboard-v2 .btn-approve:hover:not(:disabled){
  background:var(--green-deep);border-color:var(--green-deep);
}
#admin-app.admin-dashboard-v2 .btn-expire{
  background:var(--admin-surface);border-color:var(--admin-line);color:var(--admin-muted);
}

/* ── Bloques de datos ────────────────────────────────────────────── */
#admin-app.admin-dashboard-v2 .analytics-card,
#admin-app.admin-dashboard-v2 .analytics-box,
#admin-app.admin-dashboard-v2 .campaign-stat,
#admin-app.admin-dashboard-v2 .social-card,
#admin-app.admin-dashboard-v2 .news-admin-box,
#admin-app.admin-dashboard-v2 .owner-request-card{
  background:var(--admin-surface);
  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius);
  box-shadow:none;
}
/* Los números alineados en columna: sin esto bailan al cambiar de cifra. */
#admin-app.admin-dashboard-v2 .analytics-row span:last-child,
#admin-app.admin-dashboard-v2 .campaign-stat strong,
#admin-app.admin-dashboard-v2 .analytics-card strong{
  font-variant-numeric:tabular-nums;
}
#admin-app.admin-dashboard-v2 .analytics-row{
  padding:.5rem 0;border-top:1px solid var(--adm-linea-suave);
}
#admin-app.admin-dashboard-v2 .analytics-list > .analytics-row:first-child,
#admin-app.admin-dashboard-v2 .analytics-row-block:first-child .analytics-row{
  border-top:0;
}

/* ── Formularios: misma altura y foco visible ────────────────────── */
#admin-app.admin-dashboard-v2 .form-field input,
#admin-app.admin-dashboard-v2 .form-field select,
#admin-app.admin-dashboard-v2 .form-field textarea{
  border:1px solid var(--admin-line);
  border-radius:var(--adm-radio-chico);
  background:var(--admin-surface);
  padding:.55rem .7rem;font-family:inherit;font-size:.88rem;
  min-height:40px;
}
#admin-app.admin-dashboard-v2 .form-field textarea{min-height:96px}
#admin-app.admin-dashboard-v2 .form-field input:focus-visible,
#admin-app.admin-dashboard-v2 .form-field select:focus-visible,
#admin-app.admin-dashboard-v2 .form-field textarea:focus-visible{
  outline:2px solid var(--green);outline-offset:1px;border-color:var(--green);
}
#admin-app.admin-dashboard-v2 .form-field label{
  font-size:.74rem;font-weight:700;color:var(--admin-muted);
  letter-spacing:.04em;text-transform:uppercase;
}

/* ── Pestañas internas ───────────────────────────────────────────── */
#admin-app.admin-dashboard-v2 .module-tab,
#admin-app.admin-dashboard-v2 .wa-tab{
  border:1px solid transparent;border-radius:var(--adm-radio-chico);
  color:var(--admin-muted);font-weight:700;
}
#admin-app.admin-dashboard-v2 .module-tab.active,
#admin-app.admin-dashboard-v2 .wa-tab.active{
  background:var(--admin-active);color:var(--green-deep);border-color:transparent;
}
#admin-app.admin-dashboard-v2 .module-tab:focus-visible,
#admin-app.admin-dashboard-v2 .wa-tab:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;
}

/* ── Estados vacíos ──────────────────────────────────────────────── */
#admin-app.admin-dashboard-v2 .owner-request-empty{
  border:1px dashed var(--admin-line);border-radius:var(--admin-radius);
  background:var(--admin-canvas);color:var(--admin-muted);
}

/* ── Jerarquía de encabezados ─────────────────────────────────────
   Los 17 títulos de sección eran <div>: no figuraban en el esquema de
   encabezados, así que quien navega con lector de pantalla saltando de
   encabezado en encabezado se los perdía por completo. Pasaron a <h2>,
   que es lo que son. Estas reglas neutralizan los márgenes que el
   navegador le da a un h2 para que el aspecto no cambie. */
#admin-app.admin-dashboard-v2 h2.section-title{
  margin:0;font-family:inherit;
}

/* ── Pestañas de módulo ───────────────────────────────────────────────
   Mismo tratamiento visual que las pestañas de WhatsApp, con clases
   propias: `.wa-tab` está reclamada por un controlador que apaga el
   estado activo de cualquier otra pestaña que comparta la clase. */
#admin-app.admin-dashboard-v2 .admin-tabs{
  display:flex;gap:.15rem;flex-wrap:nowrap;overflow-x:auto;
  border-bottom:1px solid var(--admin-line);
  margin:0 0 1rem;padding:0 .2rem;
}
#admin-app.admin-dashboard-v2 .admin-tab{
  flex:0 0 auto;white-space:nowrap;
  background:none;border:0;border-bottom:2px solid transparent;
  border-radius:var(--admin-radius) var(--admin-radius) 0 0;
  padding:.55rem .85rem;font:inherit;font-size:.86rem;font-weight:600;
  color:var(--admin-muted);cursor:pointer;
}
#admin-app.admin-dashboard-v2 .admin-tab:hover{
  background:var(--admin-hover,#F8FAFC);color:var(--green-deep);
}
#admin-app.admin-dashboard-v2 .admin-tab.active{
  color:var(--green-deep);border-bottom-color:var(--green);
}
#admin-app.admin-dashboard-v2 .admin-tab:focus-visible{
  outline:2px solid var(--green);outline-offset:-2px;
}
#admin-app.admin-dashboard-v2 .admin-tabpanel-sub{
  margin:0 0 1rem;font-size:.83rem;color:var(--admin-muted);
}

/* ── Listas de análisis ───────────────────────────────────────────────
   Con el módulo repartido en pestañas ya no hay que comprimir todo en una
   pantalla. Estas listas mostraban 212 px de un contenido que medía hasta
   714: se veía menos de un tercio de los datos. */
#admin-app.admin-dashboard-v2 .analytics-insight-grid .analytics-list,
#admin-app.admin-dashboard-v2 .analytics-columns .analytics-list,
#admin-app.admin-dashboard-v2 #analytics-navigation{
  max-height:420px;
}

/* Tarjetas secundarias sin movimiento: siguen legibles, pero dejan de
   competir con las que sí tienen dato. */
#admin-app.admin-dashboard-v2 .analytics-cards-secondary .analytics-card.is-vacia{
  border-left-color:var(--admin-line);
}
#admin-app.admin-dashboard-v2 .analytics-cards-secondary .analytics-card.is-vacia strong{
  color:var(--admin-muted);
}

/* ── Aviso de envíos fallidos en secuencias ───────────────────────────
   Una secuencia puede fallar entera sin que se note: la tarjeta muestra
   "en curso" y barras de progreso mientras los correos rebotan. El motivo
   vivía solo en la tabla de eventos. */
#admin-app.admin-dashboard-v2 .seq-note.is-fallo{
  background:var(--danger-bg);
  border-color:var(--danger);
  color:#7F1D1D; /* .seq-note fija texto azul; sobre rojo no se lee */
}
#admin-app.admin-dashboard-v2 .seq-note.is-fallo strong{
  color:var(--danger);
}