/*
  Estilos de la navegación y del resumen del panel admin.
  
  Viven aparte de `admin2.css` porque los escribió otro agente con su propia
  familia de clases (`a2-*`), mientras la hoja principal usa las suyas. Se
  extraen aquí desde la maqueta: al integrar los fragmentos en `admin.php` el
  <style> de la maqueta se quedaba fuera y la página salía sin diseño.
*/

/* ═══════════════════════════════════════════════════════════════════════
   PROVISIONAL — borrar cuando admin2.css cubra estas clases.
   Está aquí solo para que la maqueta se pueda mirar en el navegador hoy.
   Usa la paleta del POS del BRIEF, sin gradientes ni neón.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f8fafc; --sup:#ffffff; --sup2:#f1f5f9; --sup3:#fafbfc;
  --t1:#0f172a; --t2:#475569;
  /* #94a3b8 no llegaba al contraste mínimo para leerse sobre blanco. */
  --t3:#64748b;
  --bd:#e2e8f0; --bd2:#cbd5e1;
  --verde:#047857; --verde-bg:#ecfdf5;
  --ambar:#92400e; --ambar-bg:#fef3c7;
  --rojo:#991b1b;  --rojo-bg:#fee2e2;
  --violeta:#6d28d9; --violeta-bg:#ede9fe;
  --r:12px; --mono:'DM Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
/* Phosphor pinta con fill, no con stroke. Se declara explícito para que un
   `svg{fill:none;stroke:currentColor}` heredado no deje los iconos invisibles. */
.a2-ico{fill:currentColor;stroke:none;flex:none;display:block}
body{margin:0;background:var(--bg);color:var(--t1);
     font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}

/* ── Topbar y navegación ─────────────────────────────────────────────── */
.a2-topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1.5px solid var(--bd)}
.a2-topbar-inner{max-width:1180px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:14px}
.a2-brand{display:flex;align-items:center;gap:7px;font-weight:800;letter-spacing:-.02em}
.a2-brand small{font-weight:600;color:var(--t3);font-size:11px;
  border:1.5px solid var(--bd);border-radius:6px;padding:1px 6px}
.a2-brand-dot{width:9px;height:9px;border-radius:50%;background:var(--verde)}

/* SIN overflow: la barra mide 38px de alto y el desplegable 124, asi que
   `overflow-x:auto` lo recortaba — el menu se marcaba como abierto pero no se
   veia nada. Un contenedor con overflow recorta a sus hijos absolutos por mucho
   z-index que tengan. Si la barra no cupiera en pantallas estrechas, se resuelve
   con el menu hamburguesa (por debajo de 860px), no dejandola desplazarse. */
.a2-nav{display:flex;align-items:center;gap:4px;margin-left:10px;flex:1;min-width:0}
.a2-navtop{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:11px;
  font-size:13px;font-weight:600;color:var(--t2);white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;list-style:none;flex:none}
.a2-navtop::-webkit-details-marker{display:none}
.a2-navtop:hover{background:var(--sup2);color:var(--t1)}
.a2-navtop.on{background:var(--verde-bg);color:var(--verde);border-color:#a7f3d0}
.a2-navtop-here{font-style:normal;font-size:11px;font-weight:700;
  background:#fff;border:1.5px solid #a7f3d0;border-radius:999px;padding:1px 8px}
.a2-navtop-arrow{display:flex;opacity:.55}
.a2-navgroup{position:relative}
.a2-navgroup[open] .a2-navtop-arrow{transform:rotate(180deg)}
.a2-navmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;z-index:60;
  background:var(--sup);border:1.5px solid var(--bd);border-radius:14px;padding:6px;
  box-shadow:0 12px 28px rgba(15,23,42,.10)}
.a2-navitem{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;color:var(--t2)}
.a2-navitem:hover{background:var(--sup2);color:var(--t1)}
.a2-navitem.on{background:var(--verde-bg);color:var(--verde)}
.a2-navitem-ico{display:flex;margin-top:1px;opacity:.75}
.a2-navitem-txt b{display:block;font-size:13px;font-weight:700}
.a2-navitem-txt small{display:block;font-size:11.5px;color:var(--t3);font-weight:500}
.a2-topbar-right{display:flex;align-items:center;gap:9px;margin-left:auto}
.a2-credit{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t2);
  border:1.5px solid var(--bd);border-radius:999px;padding:5px 11px}
.a2-credit b{font-family:var(--mono)}
.a2-avatar{width:32px;height:32px;border-radius:50%;background:var(--t1);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px}
.a2-logout{color:var(--t3);padding:6px;border-radius:9px}
.a2-logout:hover{color:var(--rojo);background:var(--rojo-bg)}
.a2-crumb{max-width:1180px;margin:16px auto 0;padding:0 18px;
  display:flex;gap:7px;font-size:12px;color:var(--t3)}

/* ── Hamburguesa + panel móvil (patrón de index.html) ────────────────── */
.a2-ham{display:none;width:38px;height:38px;background:var(--sup);
  border:1.5px solid var(--bd2);border-radius:10px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4.5px;
  flex-shrink:0;padding:10px}
.a2-ham span{display:block;width:15px;height:1.5px;background:var(--t1);
  border-radius:2px;transition:all .22s}
.a2-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.a2-ham.open span:nth-child(2){opacity:0}
.a2-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.a2-mob{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;z-index:49;
  overflow-y:auto;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);
  border-top:1.5px solid var(--bd);padding:12px 16px 30px;
  flex-direction:column;gap:4px;box-shadow:0 14px 40px rgba(15,23,42,.10)}
/* Sin JavaScript el panel se queda desplegado: la navegación sigue funcionando. */
html.a2-js .a2-mob{display:none}
html.a2-js .a2-mob.open{display:flex}
.a2-mob-grupo{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.a2-mob-titulo{font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t3);padding:10px 10px 4px}
.a2-mob-link{display:flex;align-items:center;gap:12px;padding:12px 10px;
  border-radius:11px;color:var(--t2)}
.a2-mob-link b{display:block;font-size:15px;font-weight:600;color:var(--t1)}
.a2-mob-link small{display:block;font-size:12px;color:var(--t3)}
.a2-mob-link:active{background:var(--sup2)}
.a2-mob-link.on{background:var(--verde-bg)}
.a2-mob-link.on b{color:var(--verde)}
.a2-mob-ico{width:24px;display:grid;place-items:center;color:var(--t3);flex:none}
.a2-mob-link.on .a2-mob-ico{color:var(--verde)}
.a2-mob-div{height:1.5px;background:var(--bd);margin:10px 0}
.a2-mob-salir b{color:var(--rojo)}
.a2-mob-salir .a2-mob-ico{color:var(--rojo)}

/* ── Estructura ──────────────────────────────────────────────────────── */
.a2-main{max-width:1180px;margin:0 auto;padding:22px 18px 70px}
.a2-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px}
.a2-hero-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t3)}
.a2-hero-title{font-size:27px;font-weight:800;letter-spacing:-.03em;margin:3px 0 2px}
.a2-hero-sub{color:var(--t2);font-size:13.5px}

.a2-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.a2-chip{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--t2);
  background:var(--sup);border:1.5px solid var(--bd);border-radius:999px;padding:6px 13px}
.a2-chip b{font-family:var(--mono);font-size:14px;color:var(--t1)}
.a2-chip--rojo{background:var(--rojo-bg);border-color:#fecaca;color:var(--rojo)}
.a2-chip--rojo b{color:var(--rojo)}
.a2-chip--ambar{background:var(--ambar-bg);border-color:#fde68a;color:var(--ambar)}
.a2-chip--ambar b{color:var(--ambar)}
.a2-chip--verde{background:var(--verde-bg);border-color:#a7f3d0;color:var(--verde)}
.a2-chip--verde b{color:var(--verde)}
.a2-chip--violeta{background:var(--violeta-bg);border-color:#ddd6fe;color:var(--violeta)}
.a2-chip--violeta b{color:var(--violeta)}

.a2-panel{background:var(--sup);border:1.5px solid var(--bd);border-radius:16px;
  padding:18px;margin-bottom:18px}
.a2-panel-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;margin-bottom:14px}
.a2-panel-title{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.a2-panel-sub{font-size:12.5px;color:var(--t2);margin-top:3px}
.a2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.a2-vacio{padding:26px;text-align:center;color:var(--t3);font-size:13px;
  background:var(--sup3);border-radius:12px}

/* ── Filas accionables ───────────────────────────────────────────────────
   Sin fondos de color: la fila es blanca y se separa con una línea de 1px.
   La urgencia se lee por el ORDEN (lo más urgente arriba) y por el color de
   la cifra, no por semáforos de fondo. Alto de fila ≈ 54px.               */
.a2-lista{border-top:1px solid var(--bd)}
/* Flex, no grid: hay filas de 3 celdas (uso) y de 4 (cobros) y con columnas
   fijas las de 3 se cortaban. Las acciones se van siempre a la derecha. */
.a2-fila{display:flex;align-items:center;gap:14px;padding:8px 6px;
  border-bottom:1px solid var(--bd)}
.a2-fila:hover{background:var(--sup3)}
.a2-fila-quien{flex:1 1 auto;min-width:140px}
.a2-fila-dato{flex:0 0 auto;min-width:104px;white-space:nowrap}
.a2-fila-acciones{margin-left:auto}
.a2-fila-nombre{display:block;font-weight:600;font-size:13.5px;line-height:1.25;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2-fila-nombre:hover{color:var(--verde)}
.a2-fila-meta{font-size:11px;line-height:1.35;color:var(--t3);margin-top:1px;
  display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2-fila-dato small{display:block;font-size:10.5px;line-height:1.3;color:var(--t3)}
.a2-fila-dato--dinero{text-align:right;min-width:88px}
.a2-fila-acciones{display:flex;gap:5px;justify-content:flex-end;flex:none}
.a2-inline{display:inline}
.a2-num{font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:1.3}
.a2-num--verde{color:var(--verde)}
.a2-num--rojo{color:var(--rojo);font-weight:600}
.a2-num--ambar{color:var(--ambar);font-weight:600}
.a2-num--tenue{color:var(--t3);font-size:12px}
.a2-lista-mas{margin-top:10px;text-align:center;font-size:12.5px;font-weight:600;color:var(--verde)}

/* ── Botones y etiquetas ─────────────────────────────────────────────── */
.a2-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  background:var(--sup);border:1.5px solid var(--bd2);color:var(--t1)}
.a2-btn:hover{border-color:var(--t3);background:var(--sup2)}
.a2-btn--sm{padding:5px 9px;font-size:11.5px;border-radius:8px}
.a2-btn--primary{background:var(--verde);border-color:var(--verde);color:#fff}
.a2-btn--verde{background:var(--verde-bg);border-color:#a7f3d0;color:var(--verde)}
.a2-btn--ghost{background:transparent;border-color:var(--bd);color:var(--t2);font-weight:600}
.a2-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;
  background:var(--sup2);color:var(--t2);border:1.5px solid var(--bd)}
.a2-badge--ok,.badge-active{background:var(--verde-bg);color:var(--verde);border-color:#a7f3d0}
.a2-badge--err,.badge-suspended{background:var(--rojo-bg);color:var(--rojo);border-color:#fecaca}
.badge-expired{background:var(--rojo-bg);color:var(--rojo);border-color:#fecaca}
.badge-trialing,.a2-badge--pend{background:var(--ambar-bg);color:var(--ambar);border-color:#fde68a}
.badge-pending{background:var(--violeta-bg);color:var(--violeta);border-color:#ddd6fe}
.a2-hb{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;
  background:var(--sup2);color:var(--t2);border:1.5px solid var(--bd)}
.hb--ok{background:var(--verde-bg);color:var(--verde);border-color:#a7f3d0}
.hb--build{background:var(--violeta-bg);color:var(--violeta);border-color:#ddd6fe}
.hb--watch{background:var(--ambar-bg);color:var(--ambar);border-color:#fde68a}
.hb--off{background:var(--sup2);color:var(--t3)}
.a2-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.u-dot--ok{background:#10b981}.u-dot--warn{background:#f59e0b}
.u-dot--bad{background:#ef4444}.u-dot--never{background:var(--bd2)}

/* ── Dinero ──────────────────────────────────────────────────────────── */
.a2-mes-cifra{font-family:var(--mono);font-size:32px;font-weight:500;letter-spacing:-.03em}
.a2-mes-comp{display:flex;align-items:center;gap:9px;margin-top:5px}
.a2-delta{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:var(--sup2);color:var(--t2)}
.a2-delta--up{background:var(--verde-bg);color:var(--verde)}
.a2-delta--down{background:var(--rojo-bg);color:var(--rojo)}
.a2-mes-comp small{font-size:12px;color:var(--t3)}
.a2-mes-pie{font-size:12.5px;color:var(--t2);margin-top:9px;padding-top:9px;border-top:1.5px solid var(--bd)}
.a2-barras{display:flex;align-items:flex-end;gap:10px;height:132px;margin-top:16px}
.a2-barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:5px;height:100%}
.a2-barra-fill{width:100%;max-width:46px;border-radius:8px 8px 4px 4px;background:#a7f3d0}
.a2-barra--hoy .a2-barra-fill{background:var(--verde)}
.a2-barra-val{font-family:var(--mono);font-size:10px;color:var(--t3)}
.a2-barra-lbl{font-size:11px;color:var(--t3);font-weight:600}

/* ── Tablas ──────────────────────────────────────────────────────────── */
.a2-tabla-wrap{overflow-x:auto}
.a2-tabla{width:100%;border-collapse:collapse;font-size:13px}
.a2-tabla th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t3);font-weight:700;padding:6px 10px;border-bottom:1.5px solid var(--bd)}
.a2-tabla td{padding:9px 10px;border-bottom:1px solid var(--bd)}
.a2-tabla tr:last-child td{border-bottom:none}
.a2-der{text-align:right}
.a2-recorta{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2-err{font-size:11px;color:var(--rojo)}

/* ── Plegable de sistema ─────────────────────────────────────────────── */
.a2-plegable{border:1.5px solid var(--bd);border-radius:16px;background:var(--sup3);overflow:hidden}
.a2-plegable-head{cursor:pointer;padding:15px 18px;display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:14px;list-style:none}
.a2-plegable-head::-webkit-details-marker{display:none}
.a2-plegable-head span{display:flex;align-items:center;gap:8px}
.a2-plegable-head small{font-weight:500;color:var(--t3);font-size:12px}
.a2-plegable-caret{margin-left:auto;color:var(--t3);display:flex;transition:transform .2s}
.a2-plegable[open] .a2-plegable-caret{transform:rotate(180deg)}
.a2-plegable-body{padding:0 14px 14px}
.a2-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.a2-mini-item{background:var(--sup);border:1.5px solid var(--bd);border-radius:12px;padding:12px 14px}
.a2-mini-item span{display:block;font-size:11.5px;color:var(--t3);font-weight:600}
.a2-mini-item b{font-family:var(--mono);font-size:20px;font-weight:500}
.a2-grid-saldos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.a2-saldo{border:1.5px solid var(--bd);border-radius:13px;padding:14px}
.a2-saldo--on{border-color:#a7f3d0;background:var(--verde-bg)}
.a2-saldo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.a2-saldo-name{font-weight:700;font-size:13px}
.a2-saldo-val{font-family:var(--mono);font-size:23px;color:var(--verde)}
.a2-saldo-val small{font-size:12px;color:var(--t3)}
.a2-saldo-cop{font-size:12px;color:var(--t2)}
.a2-saldo-key{font-family:var(--mono);font-size:10px;color:var(--t3);margin-top:7px}
.a2-eventos{display:flex;flex-direction:column;gap:2px}
.a2-evento{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-bottom:1px solid var(--bd);font-size:13px}
.a2-evento:last-child{border-bottom:none}
.a2-evento-punto{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--bd2);flex:none}
.a2-ev--dinero .a2-evento-punto{background:var(--verde)}
.a2-ev--malo .a2-evento-punto{background:#ef4444}
.a2-ev--aviso .a2-evento-punto{background:#f59e0b}
.a2-ev--bueno .a2-evento-punto{background:#10b981}
.a2-evento-quien{color:var(--verde);font-weight:600;margin-left:5px}
.a2-evento-fecha{font-size:11px;color:var(--t3);margin-top:2px}

/* ── Móvil ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  /* La barra con grupos no cabe: manda el hamburguesa.
     Créditos y salir se van dentro del panel (ver propuesta.md). */
  .a2-nav,.a2-credit,.a2-avatar,.a2-logout{display:none}
  .a2-ham{display:flex}
  .a2-crumb{margin-top:12px}
}
@media (max-width:760px){
  .a2-hero{flex-direction:column;align-items:stretch}
  .a2-hero-title{font-size:23px}
  /* La fila se parte en tres pisos: quien / datos / acciones. Sin esto los
     botones se salen por la derecha y el nombre se encoge hasta desaparecer. */
  .a2-fila{flex-wrap:wrap;gap:6px 12px;padding:11px 4px}
  .a2-fila-quien{flex:1 0 100%}
  .a2-fila-dato{min-width:0}
  .a2-fila-dato--dinero{text-align:left;min-width:0;margin-left:auto}
  .a2-fila-acciones{flex:1 0 100%;flex-wrap:wrap;justify-content:flex-start;margin-left:0}
  .a2-panel{padding:14px}
  .a2-panel-head{flex-wrap:wrap}
  .a2-main{padding:18px 14px 60px}
}

/* ══ Pulido visual ═══════════════════════════════════════════════════
   Microinteracciones. Todas van dentro de la consulta que comprueba que el
   sistema NO pide movimiento reducido: quien tenga esa opción activada en
   Windows o macOS no verá ninguna, y así debe ser. Si no ves animaciones, mira
   Configuración → Accesibilidad → Efectos visuales.

   El criterio es que el movimiento explique algo —que una fila responde, que
   algo acaba de cambiar, que una tarjeta se puede pulsar— y no que decore.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Filas y tarjetas: el fondo entra suave en vez de saltar. */
  .a2-fila, .cli-fila, .tabla tbody tr, .tarjeta {
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  }

  /* Las tarjetas de métrica se levantan un pelo al pasar por encima: basta
     para que se lean como una unidad y no como texto suelto. */
  .a2-kpi, .metrica, .tarjeta--pulsable {
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
  }
  .a2-kpi:hover, .metrica:hover, .tarjeta--pulsable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15,23,42,.07);
  }

  /* Botones: el hundido al pulsar da la sensación de que respondió, sobre todo
     en acciones que tardan (mandar un correo, extender un mes). */
  .boton, .btn, .a2-btn, .cli-btn { transition: background-color .14s ease, border-color .14s ease, transform .08s ease; }
  .boton:active, .btn:active, .a2-btn:active, .cli-btn:active { transform: scale(.97); }

  /* Los desplegables del menú bajan en vez de aparecer de golpe: así se ve de
     dónde salen y no se confunden con un cambio de página. */
  .a2-navgroup[open] .a2-navmenu { animation: a2-bajar .16s cubic-bezier(.2,.7,.3,1); }
  @keyframes a2-bajar {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Un aviso que aparece tras una acción se anuncia: si entrara sin más, con la
     vista en otro punto de la pantalla, pasaría desapercibido. */
  .aviso, .a2-flash { animation: a2-entrar .22s ease both; }
  @keyframes a2-entrar {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Las etiquetas de estado y los puntos, al pasar por la fila. */
  .estado, .a2-estado, .cli-estado { transition: filter .15s ease; }
  .a2-fila:hover .estado, .cli-fila:hover .cli-estado { filter: saturate(1.15); }
}

/* El foco de teclado NO es decoración y no se desactiva nunca: es cómo se sabe
   dónde estás cuando navegas con el tabulador. */
.boton:focus-visible, .btn:focus-visible, .a2-navtop:focus-visible,
.cli-barra select:focus-visible, a:focus-visible {
  outline: 2px solid var(--verde, #047857);
  outline-offset: 2px;
}