/* ============================================================
   Abonos CrediVale — tokens y componentes base

   Clon de: /Users/redbaron/Documents/COBRANZA/ABONOSCREDIVALE/docs/mapeo/identidad-visual.md:1020-1299
     («5.4 abonos.css — base lista para copiar») · md5 del origen 965af6de9fe68f4a3a801adecf1b137a · 28-sep-2026
   Cambios:
     SE COPIA   los tokens completos (:root), base, tarjeta, pastilla única, tabla, botones,
                campos, diálogo, avisos y toast.
     SE QUITA   pestañas inferiores y sidebar (DISENO §9.2 regla 1 manda barra superior
                idéntica en todas las pantallas, en dos renglones en teléfono); KPI, tarjeta
                de origen, etiqueta de fuente, píldoras de filtro, cola y línea de tiempo:
                llegan con la etapa que los pinta.
     SE CAMBIA  · la barra es sticky y no fixed: mide dos renglones y así no hay que
                  reservarle alto en el body.
                · los controles miden 44 px en todo ancho; el origen los bajaba a 38 px
                  desde 1024 px.
                · el placeholder usa --ab-muted: --ab-faint no pasa AA como texto.
                · la tabla se vuelve tarjetas por debajo de 640 px (.ab-tbl--fichas).
                · el diálogo lleva título <h2> y candado de scroll del documento.
     PENDIENTE  las fuentes. La CSP (style-src 'self', sin font-src) no deja cargar Google
                Fonts. Mientras Instrument Sans e Inter no se sirvan desde assets/ con
                @font-face, se pinta con la pila del sistema que sigue en --ab-font.

   Misma familia que cobranza.tradeinstyle.com.mx (zinc · Instrument Sans)
   Móvil primero · cortes en 640 y 1024 · sin !important
   ============================================================ */
:root{
  /* — Tipografía (idéntica al legacy) — */
  --ab-font: 'Instrument Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ab-font-num: 'Inter',var(--ab-font);
  --ab-font-mono: ui-monospace,Menlo,Consolas,monospace;
  --ab-t-xs:12px; --ab-t-sm:13px; --ab-t-md:14px; --ab-t-lg:16px;
  --ab-t-xl:18px; --ab-t-2xl:22px; --ab-t-3xl:28px;

  /* — Zinc (idéntico al legacy) — */
  --ab-fg:#18181b;        /* texto principal, primario */
  --ab-fg-hover:#27272a;
  --ab-fg-2:#3f3f46;      /* texto de apoyo que SÍ se lee */
  --ab-fg-3:#52525b;      /* cabecera de tabla */
  --ab-muted:#71717a;     /* texto secundario: el más claro permitido para texto */
  --ab-faint:#a1a1aa;     /* SOLO iconos y puntos; nunca texto */
  --ab-line-strong:#d4d4d8;
  --ab-line:#e4e4e7;      /* borde */
  --ab-line-soft:#ececee; /* línea entre filas */
  --ab-hover:#f0f0f2;
  --ab-subtle:#f4f4f5;    /* cabecera de tabla, chip neutro */
  --ab-bg:#fafafa;        /* fondo de la app */
  --ab-side:#fbfbfb;
  --ab-card:#ffffff;
  --ab-primary:#18181b; --ab-primary-fg:#fafafa;
  --ab-accent:#2563eb;    /* foco, enlaces */

  /* — Estado (opción B). Cada uno: texto · borde · fondo · punto — */
  --ab-ok:#047857;    --ab-ok-line:#a7f3d0;   --ab-ok-bg:#ecfdf5;   --ab-ok-dot:#059669;   /* terminado */
  --ab-pend:#b45309;  --ab-pend-line:#fde68a; --ab-pend-bg:#fffbeb; --ab-pend-dot:#f59e0b; /* pendiente */
  --ab-bad:#b91c1c;   --ab-bad-line:#fecaca;  --ab-bad-bg:#fef2f2;  --ab-bad-dot:#dc2626;  /* requiere atención */
  --ab-wait:#71717a;  --ab-wait-line:#ececee; --ab-wait-bg:#fafafa; --ab-wait-dot:#d4d4d8; /* espera evento externo */
  --ab-info:#1d4ed8;  --ab-info-line:#bfdbfe; --ab-info-bg:#eff6ff; --ab-info-dot:#2563eb;
  --ab-note:#be185d;  --ab-note-line:#fbcfe8; --ab-note-bg:#fdf2f8;                        /* aviso que no es error */

  /* — Fuente del pago (solo bordes y puntos de las tarjetas de origen) — */
  --ab-src-wa:#059669; --ab-src-ck:#2563eb; --ab-src-ox:#d97706; --ab-src-bx:#7c3aed;
  --ab-src-app:#0f766e;

  /* — Forma — */
  --ab-r-pill:6px; --ab-r:0.625rem; --ab-r-sheet:16px; --ab-r-full:999px;
  --ab-shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
  --ab-shadow-btn:0 1px 2px rgba(0,0,0,.04);
  --ab-shadow-pop:0 20px 60px rgba(0,0,0,.25);
  --ab-focus:0 0 0 3px rgba(37,99,235,.12);
  --ab-scrim:rgba(0,0,0,.45);

  /* — Espaciado (base 4) — */
  --ab-1:4px; --ab-2:8px; --ab-3:12px; --ab-4:16px; --ab-5:20px; --ab-6:24px; --ab-8:32px;

  /* — Medidas — */
  --ab-tap:44px; --ab-tap-lg:48px;
  --ab-top-h:56px;
  --ab-wrap:1200px;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.ab-con-dialogo{ overflow:hidden; }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--ab-bg); color:var(--ab-fg); font-family:var(--ab-font);
  font-size:var(--ab-t-md); line-height:1.5; overflow-wrap:anywhere; }
h1{ font-family:var(--ab-font-num); font-weight:800; font-size:var(--ab-t-2xl); letter-spacing:-.02em;
  line-height:1.2; margin:0 0 var(--ab-4); }
h2{ font-size:var(--ab-t-lg); font-weight:700; line-height:1.3; margin:0 0 var(--ab-2); }
p{ margin:0 0 var(--ab-3); }
a{ color:var(--ab-accent); }
[hidden]{ display:none; }
.ab-num{ font-family:var(--ab-font-num); font-weight:800; font-variant-numeric:tabular-nums; }
.ab-mono{ font-family:var(--ab-font-mono); }
.ab-muted{ color:var(--ab-muted); }
.ab-wrap{ width:100%; max-width:var(--ab-wrap); margin:0 auto; padding:var(--ab-4); flex:1 0 auto; }
.ab-wrap:focus{ outline:none; }
.ab-wrap--angosto{ max-width:640px; }
:focus-visible{ outline:2px solid var(--ab-accent); outline-offset:2px; }
.ab-oculto{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.ab-salta{ position:absolute; left:var(--ab-2); top:-100px; z-index:400; padding:12px 16px;
  background:var(--ab-primary); color:var(--ab-primary-fg); border-radius:var(--ab-r); font-weight:700; }
.ab-salta:focus{ top:var(--ab-2); }

/* ---------- Pila y rejilla ---------- */
.ab-pila{ display:grid; gap:var(--ab-4); }
.ab-dos{ display:grid; gap:var(--ab-4); }
@media (min-width:1024px){ .ab-dos{ grid-template-columns:1fr 1fr; align-items:start; } }
.ab-encabezado{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--ab-3); margin-bottom:var(--ab-4); }
.ab-encabezado h1{ margin:0; }

/* ---------- Barra superior: dos renglones, idéntica en todo ancho ---------- */
.ab-top{ position:sticky; top:0; z-index:100; background:var(--ab-card); border-bottom:1px solid var(--ab-line); }
.ab-top__fila{ display:flex; align-items:center; gap:var(--ab-3); min-height:var(--ab-top-h);
  padding:0 var(--ab-4); max-width:var(--ab-wrap); margin:0 auto; }
.ab-top__fila--2{ min-height:var(--ab-tap-lg); border-top:1px solid var(--ab-line-soft); }
.ab-logo{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
  font-weight:700; font-size:13px; letter-spacing:.02em; color:#fff; background:var(--ab-primary); }
.ab-brand{ display:inline-flex; align-items:center; gap:10px; flex:none; min-height:var(--ab-tap);
  font-size:15.5px; font-weight:600; color:var(--ab-fg); text-decoration:none; }
.ab-brand b{ color:var(--ab-accent); font-weight:700; }
.ab-brand__txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ab-top__quien{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.ab-top__nombre{ max-width:100%; font-weight:700; font-size:var(--ab-t-sm);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-top__rol{ max-width:100%; font-size:var(--ab-t-xs); color:var(--ab-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-top__salir{ flex:none; margin:0; }
.ab-nav{ display:flex; gap:var(--ab-1); flex:1 1 0; min-width:0; overflow-x:auto; scrollbar-width:none; }
.ab-nav::-webkit-scrollbar{ display:none; }
.ab-nav a{ flex:none; display:inline-flex; align-items:center; min-height:var(--ab-tap); padding:0 14px;
  border-radius:var(--ab-r); color:var(--ab-fg-2); text-decoration:none; font-size:var(--ab-t-md); font-weight:600; }
.ab-nav a:hover{ background:var(--ab-hover); color:var(--ab-fg); }
.ab-nav a[aria-current="page"]{ background:var(--ab-primary); color:#fff; }
.ab-senales{ display:flex; gap:var(--ab-2); flex:none; list-style:none; margin:0; padding:0; overflow-x:auto; }
@media (min-width:640px){
  .ab-brand__txt{ position:static; width:auto; height:auto; overflow:visible; clip:auto; }
}

/* ---------- Pie ---------- */
.ab-pie{ flex:none; padding:var(--ab-4); text-align:center; font-size:var(--ab-t-xs); color:var(--ab-muted); }

/* ---------- Tarjeta ---------- */
.ab-card{ background:var(--ab-card); border:1px solid var(--ab-line); border-radius:var(--ab-r);
  box-shadow:var(--ab-shadow); }
.ab-card--pad{ padding:var(--ab-4); }
@media (min-width:640px){ .ab-card--pad{ padding:var(--ab-5); } }
.ab-card__t{ font-size:var(--ab-t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ab-fg-3); margin:0 0 var(--ab-3); }

/* Ficha de datos: rótulo y valor */
.ab-datos{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:var(--ab-t-md); }
.ab-datos dt{ color:var(--ab-muted); }
.ab-datos dd{ margin:0; font-weight:700; min-width:0; }

/* Lista con pastilla al frente */
.ab-lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--ab-3); }
.ab-lista li{ display:grid; grid-template-columns:auto 1fr; gap:var(--ab-3); align-items:start;
  font-size:var(--ab-t-md); color:var(--ab-fg-2); }

/* ---------- Pastilla de estado (una sola forma) ---------- */
.ab-st{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid transparent;
  border-radius:var(--ab-r-pill); padding:3px 9px; font-size:var(--ab-t-xs); font-weight:700; letter-spacing:.02em; }
.ab-st::before{ content:''; width:7px; height:7px; border-radius:50%; flex:none; background:currentColor; }
.ab-st--ok  { color:var(--ab-ok);   background:var(--ab-ok-bg);   border-color:var(--ab-ok-line); }
.ab-st--ok::before{ background:var(--ab-ok-dot); }
.ab-st--pend{ color:var(--ab-pend); background:var(--ab-pend-bg); border-color:var(--ab-pend-line); }
.ab-st--pend::before{ background:var(--ab-pend-dot); }
.ab-st--bad { color:var(--ab-bad);  background:var(--ab-bad-bg);  border-color:var(--ab-bad-line); }
.ab-st--bad::before{ background:var(--ab-bad-dot); box-shadow:0 0 0 3px rgba(220,38,38,.15); }
.ab-st--wait{ color:var(--ab-wait); background:var(--ab-wait-bg); border-color:var(--ab-wait-line); }
.ab-st--wait::before{ background:var(--ab-wait-dot); }
.ab-st--info{ color:var(--ab-info); background:var(--ab-info-bg); border-color:var(--ab-info-line); }
.ab-st--info::before{ background:var(--ab-info-dot); }
.ab-st--na  { color:var(--ab-muted); padding-left:0; }
.ab-st--na::before{ background:var(--ab-line); }
.ab-st--late::before{ animation:ab-pulse 1.6s infinite; }     /* solo lo que espera a una persona */
@keyframes ab-pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion:reduce){ .ab-st--late::before{ animation:none; } }
.ab-pastillas{ display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- Tabla ---------- */
.ab-vacio{ text-align:center; color:var(--ab-muted); padding:34px 14px; }
.ab-tbl{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--ab-card); }
.ab-tbl th{ text-align:left; background:var(--ab-subtle); color:var(--ab-fg-3); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; padding:10px; border-bottom:1px solid var(--ab-line-soft); white-space:nowrap; }
.ab-tbl td{ padding:11px 10px; border-bottom:1px solid var(--ab-line-soft); vertical-align:middle; }
.ab-tbl td.n, .ab-tbl th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ab-tbl tbody tr:hover{ background:var(--ab-bg); }
.ab-tbl__nom{ display:block; font-weight:700; }
.ab-tbl__sub{ display:block; font-size:var(--ab-t-xs); color:var(--ab-muted); }
.ab-tbl-caja{ overflow:hidden; }

/* En pantalla angosta cada renglón es una tarjeta y cada celda dice su rótulo (data-rotulo) */
@media (max-width:639.98px){
  .ab-tbl-caja{ background:none; border:0; box-shadow:none; border-radius:0; overflow:visible; }
  .ab-tbl--fichas{ background:none; }
  .ab-tbl--fichas, .ab-tbl--fichas tbody{ display:block; }
  .ab-tbl--fichas thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ab-tbl--fichas tr{ display:block; margin-bottom:var(--ab-3); padding:var(--ab-2) var(--ab-4);
    background:var(--ab-card); border:1px solid var(--ab-line); border-radius:var(--ab-r); box-shadow:var(--ab-shadow); }
  .ab-tbl--fichas td{ display:grid; grid-template-columns:96px 1fr; gap:var(--ab-3); align-items:center;
    padding:10px 0; font-size:var(--ab-t-md); }
  .ab-tbl--fichas td:last-child{ border-bottom:0; }
  .ab-tbl--fichas td::before{ content:attr(data-rotulo); font-size:var(--ab-t-xs); font-weight:600;
    text-transform:uppercase; letter-spacing:.04em; color:var(--ab-fg-3); }
  .ab-tbl--fichas td.ab-tbl__acc{ display:block; }
  .ab-tbl--fichas td.ab-tbl__acc::before{ content:none; }
  .ab-tbl--fichas td.ab-tbl__acc .ab-btn{ width:100%; }
}

/* ---------- Botones ---------- */
.ab-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--ab-tap);
  padding:0 16px; border:1px solid var(--ab-line); border-radius:var(--ab-r); background:#fff; color:var(--ab-fg);
  font:600 var(--ab-t-md)/1.2 var(--ab-font); cursor:pointer; box-shadow:var(--ab-shadow-btn);
  text-decoration:none; text-align:center; touch-action:manipulation; }
.ab-btn:hover{ background:var(--ab-subtle); }
.ab-btn--primary{ background:var(--ab-primary); border-color:var(--ab-primary); color:var(--ab-primary-fg); }
.ab-btn--primary:hover{ background:var(--ab-fg-hover); }
.ab-btn--danger{ background:var(--ab-bad-bg); border-color:var(--ab-bad-line); color:var(--ab-bad); }
.ab-btn--danger:hover{ background:var(--ab-bad-line); }
.ab-btn--lg{ min-height:var(--ab-tap-lg); font-size:var(--ab-t-lg); font-weight:700; }
.ab-btn--block{ width:100%; }
.ab-btn:disabled, .ab-btn[aria-busy="true"]{ opacity:.5; cursor:not-allowed; }

/* ---------- Campos ---------- */
.ab-form{ display:grid; gap:var(--ab-4); margin:0; }
.ab-form__pie{ display:flex; flex-wrap:wrap; gap:var(--ab-3); }
.ab-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ab-field label{ font-size:var(--ab-t-sm); color:var(--ab-fg-3); font-weight:500; }
.ab-field__ayuda{ font-size:var(--ab-t-sm); color:var(--ab-muted); margin:0; }
.ab-input{ width:100%; min-height:var(--ab-tap); padding:0 14px; border:1px solid var(--ab-line);
  border-radius:var(--ab-r); background:#fff; color:var(--ab-fg);
  font:400 16px/1.2 var(--ab-font); }                 /* 16px: evita el zoom de iOS */
select.ab-input{ padding-right:8px; }
.ab-input::placeholder{ color:var(--ab-muted); }
.ab-input:focus{ border-color:var(--ab-accent); box-shadow:var(--ab-focus); outline:none; }
.ab-input[aria-invalid="true"]{ border-color:var(--ab-bad-dot); }
.ab-field__err{ font-size:var(--ab-t-sm); font-weight:600; color:var(--ab-bad); margin:0; }
.ab-field__err:empty{ display:none; }

/* ---------- Acceso ---------- */
.ab-acceso{ flex:1 0 auto; display:grid; place-items:center; padding:var(--ab-6) var(--ab-4); }
.ab-acceso__caja{ width:100%; max-width:400px; }
.ab-acceso__marca{ display:flex; align-items:center; gap:var(--ab-3); margin-bottom:var(--ab-5); }
.ab-acceso__marca .ab-logo{ width:44px; height:44px; border-radius:11px; font-size:var(--ab-t-lg); }
.ab-acceso__nombre{ display:block; font-size:var(--ab-t-xl); font-weight:700; line-height:1.2; }
.ab-acceso__nombre b{ color:var(--ab-accent); }
.ab-acceso__grupo{ display:block; font-size:var(--ab-t-xs); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ab-muted); }
.ab-acceso__salir{ margin-top:var(--ab-4); }

/* Fondo de la pantalla de acceso (la eligió Pedro, 28-sep-2026). Se engancha por data-ab-pagina
   para no tocar login.php. El color de fondo es el respaldo si la imagen no carga: el texto
   claro de la marca se sigue leyendo. La imagen trae su propio pie escrito; el velo de abajo
   lo tapa para que no se encime con el pie de la página. */
/* En teléfono se ve la mitad izquierda de la imagen: la cara arriba y la tarjeta abajo. El velo
   sube hasta tapar los avisos del teléfono, que si no se enciman con el nombre de la marca. */
body[data-ab-pagina="login"]{ position:relative; background:#060b26 url(img/fondo-acceso.webp) left top / cover no-repeat; }
body[data-ab-pagina="login"]::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to top, rgba(4,8,30,.96) 0, rgba(4,8,30,.94) 58%, rgba(4,8,30,0) 76%); }
body[data-ab-pagina="login"] > *{ position:relative; z-index:1; }
body[data-ab-pagina="login"] .ab-acceso{ place-items:end center; padding-bottom:var(--ab-4); }
body[data-ab-pagina="login"] .ab-acceso__marca .ab-logo{ background:#fff; color:var(--ab-fg); }
body[data-ab-pagina="login"] .ab-acceso__nombre{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55); }
body[data-ab-pagina="login"] .ab-acceso__nombre b{ color:#93c5fd; }
body[data-ab-pagina="login"] .ab-acceso__grupo{ color:#d4d4d8; text-shadow:0 1px 8px rgba(0,0,0,.55); }
body[data-ab-pagina="login"] .ab-card{ box-shadow:0 20px 60px rgba(0,0,0,.45); }
body[data-ab-pagina="login"] .ab-pie{ color:#d4d4d8; }
body[data-ab-pagina="login"] .ab-salta{ position:absolute; }
@media (min-width:640px){
  /* Aquí la imagen se ve entera y su pie dice lo mismo que el de la página: el de la página
     se deja solo para lectores de pantalla y no hace falta velo. */
  body[data-ab-pagina="login"]{ background-position:center; }
  body[data-ab-pagina="login"]::before{ background:none; }
  body[data-ab-pagina="login"] .ab-acceso{ place-items:center; padding-bottom:var(--ab-6); }
  body[data-ab-pagina="login"] .ab-pie{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; }
}
@media (min-width:900px){
  /* En pantalla ancha la mujer queda a la izquierda y la bolsa a la derecha: la tarjeta va
     sobre el hueco del centro, corrida a la derecha para no tapar los avisos del teléfono. */
  body[data-ab-pagina="login"] .ab-acceso{ place-items:center start; padding-left:calc(60% - 200px); }
}

/* ---------- Tablero, cola y bandeja ---------- */
.ab-fresco{ font-size:var(--ab-t-sm); color:var(--ab-muted); margin:0 0 var(--ab-4); }
.ab-sigue{ display:grid; }
.ab-sigue a{ display:flex; align-items:center; gap:var(--ab-3); min-height:var(--ab-tap-lg); padding:10px 0;
  border-top:1px solid var(--ab-line-soft); color:var(--ab-fg); text-decoration:none; }
.ab-sigue a:first-child{ border-top:0; font-size:var(--ab-t-xl); font-weight:700; }
.ab-sigue a:hover span:nth-child(2){ text-decoration:underline; }
.ab-sigue__quien{ margin-left:auto; flex:none; font-size:var(--ab-t-sm); font-weight:400; color:var(--ab-muted); }
.ab-punto{ width:10px; height:10px; border-radius:var(--ab-r-full); flex:none; background:var(--ab-wait-dot); }
.ab-punto--pend{ background:var(--ab-pend-dot); }
.ab-punto--bad{ background:var(--ab-bad-dot); }
.ab-punto--ok{ background:var(--ab-ok-dot); }
.ab-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ab-3); }
.ab-kpi{ display:grid; gap:2px; padding:var(--ab-4); background:var(--ab-card); border:1px solid var(--ab-line);
  border-radius:var(--ab-r); box-shadow:var(--ab-shadow); color:var(--ab-fg); text-decoration:none; min-width:0; }
.ab-kpi:hover{ border-color:var(--ab-line-strong); }
.ab-kpi__r{ font-size:var(--ab-t-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ab-muted); }
.ab-kpi__n{ font-family:var(--ab-font-num); font-weight:800; font-size:var(--ab-t-2xl); line-height:1.2;
  font-variant-numeric:tabular-nums; }
.ab-kpi__s{ font-size:var(--ab-t-sm); color:var(--ab-muted); }
.ab-kpi--pend .ab-kpi__n{ color:var(--ab-pend); }
.ab-kpi--bad .ab-kpi__n{ color:var(--ab-bad); }
.ab-kpi--ok .ab-kpi__n{ color:var(--ab-ok); }
.ab-sig{ display:grid; gap:var(--ab-5); }
.ab-sig__nom{ font-size:var(--ab-t-xl); font-weight:700; line-height:1.25; margin:0; }
.ab-sig__imp{ font-family:var(--ab-font-num); font-weight:800; font-size:34px; line-height:1.1;
  font-variant-numeric:tabular-nums; margin:var(--ab-2) 0 var(--ab-4); }
.ab-sig__acc{ display:grid; gap:var(--ab-3); align-content:start; }
.ab-filtros{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ab-3); align-items:end;
  margin-bottom:var(--ab-4); }
.ab-filtros .ab-field{ margin:0; }
.ab-tbl a{ text-decoration:none; }
@media (min-width:760px){
  .ab-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ab-kpi__n{ font-size:var(--ab-t-3xl); }
  .ab-sig{ grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
}
@media (min-width:1000px){
  .ab-filtros{ grid-template-columns:2fr repeat(4,minmax(0,1fr)) auto; }
}

/* ---------- Diálogo ---------- */
.ab-scrim{ position:fixed; inset:0; z-index:200; background:var(--ab-scrim); display:none;
  align-items:flex-end; justify-content:center; }
.ab-scrim[data-open="1"]{ display:flex; }
.ab-dlg{ width:100%; max-height:90vh; overflow:auto; background:#fff;
  border-radius:var(--ab-r-sheet) var(--ab-r-sheet) 0 0; box-shadow:var(--ab-shadow-pop);
  padding-bottom:env(safe-area-inset-bottom); }
.ab-dlg form{ margin:0; }
.ab-dlg__h{ margin:0; padding:16px 18px; border-bottom:1px solid var(--ab-line); font-size:var(--ab-t-lg); font-weight:700; }
.ab-dlg__b{ padding:18px; }
.ab-dlg__b p:last-child{ margin-bottom:0; }
.ab-dlg__b .ab-field{ margin:var(--ab-3) 0; }
.ab-dlg__f{ display:grid; gap:10px; padding:0 18px 18px; }
.ab-valor{ padding:14px; background:var(--ab-subtle); border:1px solid var(--ab-line); border-radius:var(--ab-r);
  font-size:var(--ab-t-xl); font-weight:700; text-align:center; letter-spacing:.04em; user-select:all; }
.ab-valor:has(code:empty){ display:none; }
@media (min-width:640px){
  .ab-scrim{ align-items:center; padding:20px; }
  .ab-dlg{ max-width:440px; border-radius:14px; padding-bottom:0; }
  .ab-dlg__f{ grid-template-columns:1fr 1fr; }
}

/* ---------- Avisos ---------- */
.ab-aviso{ padding:11px 14px; border:1px solid; border-radius:var(--ab-r); font-size:var(--ab-t-sm); line-height:1.5; }
.ab-aviso--ok  { color:var(--ab-ok);   background:var(--ab-ok-bg);   border-color:var(--ab-ok-line); }
.ab-aviso--pend{ color:#92400e;        background:var(--ab-pend-bg); border-color:var(--ab-pend-line); }
.ab-aviso--bad { color:var(--ab-bad);  background:var(--ab-bad-bg);  border-color:var(--ab-bad-line); }
.ab-aviso--note{ color:var(--ab-note); background:var(--ab-note-bg); border-color:var(--ab-note-line); }
.ab-aviso--info{ color:var(--ab-info); background:var(--ab-info-bg); border-color:var(--ab-info-line); }

/* ---------- Toast ---------- */
.ab-toast{ position:fixed; left:16px; right:16px; z-index:300;
  bottom:calc(env(safe-area-inset-bottom) + 16px);
  background:var(--ab-primary); color:var(--ab-primary-fg); border-radius:var(--ab-r);
  padding:12px 16px; font-size:var(--ab-t-md); font-weight:700; text-align:center;
  opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none; }
.ab-toast[data-on="1"]{ opacity:1; transform:none; }
@media (min-width:1024px){ .ab-toast{ left:auto; right:20px; bottom:20px; text-align:left; } }
@media (prefers-reduced-motion:reduce){ .ab-toast{ transition:none; } }

/* =====================================================================================
   Vidrio líquido (29-sep-2026). Lo pidió Pedro con una maqueta: menú lateral oscuro, cabecera
   con su imagen, y tarjetas translúcidas. Va todo bajo body.ab-app, que solo llevan las
   páginas con sesión: la pantalla de acceso no cambia.
   ===================================================================================== */
body.ab-app{
  --ab-bg:#eef2f9; --ab-card:rgba(255,255,255,.72); --ab-line:rgba(15,23,42,.10); --ab-line-soft:rgba(15,23,42,.07);
  --ab-subtle:rgba(15,23,42,.035); --ab-hover:rgba(37,99,235,.06);
  --ab-primary:#2563eb; --ab-primary-fg:#ffffff; --ab-r:16px;
  --ab-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(15,23,42,.08);
  --ab-azul:linear-gradient(135deg,#3b82f6 0%,#2563eb 60%,#1d4ed8 100%);
  --ab-noche:#060b26;
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(59,130,246,.20), rgba(59,130,246,0) 60%),
    radial-gradient(900px 520px at 4% 108%, rgba(124,58,237,.14), rgba(124,58,237,0) 60%),
    radial-gradient(700px 420px at 60% 55%, rgba(14,165,233,.08), rgba(14,165,233,0) 60%),
    #eef2f9;
  background-attachment:fixed;
}
.ab-ico{ flex:none; }

/* ----- Menú: arriba en teléfono, lateral en computadora ----- */
.ab-lado{ display:flex; align-items:center; gap:var(--ab-3); padding:10px var(--ab-4); color:#cbd5e1;
  background:linear-gradient(180deg,#0b1434 0%,var(--ab-noche) 100%); }
.ab-lado .ab-brand{ color:#fff; font-size:15px; line-height:1.15; }
.ab-lado .ab-brand b{ color:#60a5fa; }
.ab-lado .ab-logo{ background:#fff; color:#0b1434; }
.ab-brand__grupo{ display:none; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#94a3b8; }
.ab-lado .ab-nav a{ gap:10px; color:#cbd5e1; border-radius:12px; font-weight:600; }
.ab-lado .ab-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.ab-lado .ab-nav a[aria-current="page"]{ background:var(--ab-azul); color:#fff; box-shadow:0 8px 22px rgba(37,99,235,.45); }
.ab-nav__n{ margin-left:auto; min-width:26px; padding:1px 8px; border-radius:var(--ab-r-full); background:#ef4444; color:#fff;
  font-size:12px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.ab-lado__pie{ display:none; }

body.ab-app .ab-top{ background:rgba(255,255,255,.62); border-bottom:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6); }
body.ab-app .ab-top__fila{ max-width:none; }
.ab-busca{ flex:1 1 0; min-width:0; max-width:460px; display:flex; align-items:center; gap:8px; padding:0 14px;
  min-height:var(--ab-tap); border:1px solid var(--ab-line); border-radius:14px; background:rgba(255,255,255,.8); color:var(--ab-muted); }
.ab-busca input{ flex:1 1 0; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:var(--ab-fg); }
.ab-busca:focus-within{ border-color:var(--ab-accent); box-shadow:var(--ab-focus); }
body.ab-app .ab-top__quien{ margin-left:auto; }
body.ab-app .ab-wrap{ max-width:1480px; }

/* ----- Vidrio ----- */
body.ab-app .ab-card, body.ab-app .ab-kpi, .ab-pestanas a{
  background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 100%);
  border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:var(--ab-shadow); }
body.ab-app .ab-card{ border-radius:18px; }
body.ab-app .ab-card--pad{ padding:var(--ab-5); }
body.ab-app .ab-card .ab-card{ background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
body.ab-app .ab-tbl{ background:transparent; }
body.ab-app .ab-tbl th{ background:transparent; border-bottom:1px solid var(--ab-line); }
body.ab-app .ab-tbl tbody tr:hover{ background:var(--ab-hover); }
body.ab-app .ab-input{ background:rgba(255,255,255,.85); border-radius:12px; }
body.ab-app .ab-btn{ border-radius:12px; }
body.ab-app .ab-btn--primary{ background:var(--ab-azul); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.32); }
body.ab-app .ab-btn--primary:hover{ filter:brightness(1.06); }
.ab-btn--chico{ min-height:40px; padding:0 14px; font-size:var(--ab-t-sm); white-space:nowrap; }
.ab-btn--suave{ gap:8px; background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.28); color:#1d4ed8; font-weight:700; }
.ab-btn--suave:hover{ background:rgba(37,99,235,.16); }
.ab-titulo2{ margin:var(--ab-6) 0 var(--ab-3); }

/* ----- Cabecera del tablero ----- */
.ab-hero{ display:grid; gap:var(--ab-4); align-items:end; min-height:170px; padding:var(--ab-5); margin-bottom:var(--ab-4);
  border-radius:22px; color:#fff; overflow:hidden; box-shadow:0 18px 44px rgba(6,11,38,.28);
  background:linear-gradient(90deg, rgba(6,11,38,.94) 0%, rgba(6,11,38,.78) 42%, rgba(6,11,38,.30) 100%),
    var(--ab-noche) url(img/fondo-acceso.webp) right 6% / cover no-repeat; }
.ab-hero h1{ margin:0 0 4px; font-size:var(--ab-t-3xl); color:#fff; }
.ab-hero p{ margin:0; color:#dbe4f5; }
.ab-hero__dato{ display:grid; gap:2px; padding:12px 16px; border-radius:14px; font-size:var(--ab-t-sm); color:#e2e8f0;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); }
.ab-hero__dato strong{ font-size:var(--ab-t-md); color:#fff; }

/* ----- Indicadores ----- */
body.ab-app .ab-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:var(--ab-4); }
body.ab-app .ab-kpi{ position:relative; border-radius:18px; padding:var(--ab-4) var(--ab-4) 18px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease; }
body.ab-app .ab-kpi:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 16px 36px rgba(15,23,42,.12); }
/* Las barras van en su propio renglón, abajo: encimadas tapaban la cifra en tarjetas angostas. */
.ab-barras{ display:flex; align-items:flex-end; gap:4px; height:44px; margin-top:var(--ab-3); color:#94a3b8; }
.ab-bar{ display:block; flex:1 1 0; max-width:14px; height:3px; border-radius:3px; background:currentColor; opacity:.9; }
.ab-bar--0{ opacity:.28; } .ab-bar--1{ height:7px; } .ab-bar--2{ height:11px; } .ab-bar--3{ height:15px; } .ab-bar--4{ height:19px; }
.ab-bar--5{ height:23px; } .ab-bar--6{ height:27px; } .ab-bar--7{ height:31px; } .ab-bar--8{ height:35px; } .ab-bar--9{ height:40px; }
.ab-bar--10{ height:44px; }
.ab-kpi--info .ab-barras{ color:#3b82f6; } .ab-kpi--bad .ab-barras{ color:#ef4444; }
.ab-kpi--pend .ab-barras{ color:#f59e0b; } .ab-kpi--ok .ab-barras{ color:#10b981; }

/* ----- El embudo ----- */
.ab-proceso{ list-style:none; margin:var(--ab-3) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ab-4) 0; }
.ab-paso{ position:relative; display:grid; justify-items:center; gap:4px; text-align:center; color:#2563eb; }
.ab-paso::before{ content:""; position:absolute; top:23px; left:-50%; width:100%; height:2px; background:var(--ab-line); }
.ab-paso:first-child::before{ content:none; }
.ab-paso__i{ position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:var(--ab-r-full);
  background:#fff; border:1.5px solid currentColor; box-shadow:0 6px 16px rgba(15,23,42,.08); }
.ab-paso__r{ font-size:var(--ab-t-sm); color:var(--ab-fg-2); }
.ab-paso__n{ font-family:var(--ab-font-num); font-weight:800; font-size:var(--ab-t-lg); color:var(--ab-fg); font-variant-numeric:tabular-nums; }
.ab-paso--pend{ color:#d97706; } .ab-paso--pend .ab-paso__n{ color:var(--ab-pend); }
.ab-paso--ok{ color:#059669; }
.ab-paso--pend .ab-paso__i, .ab-paso--ok .ab-paso__i{ background:currentColor; }
.ab-paso--pend .ab-paso__i .ab-ico, .ab-paso--ok .ab-paso__i .ab-ico{ color:#fff; }

/* ----- Pestañas ----- */
.ab-pestanas{ display:flex; gap:8px; margin:var(--ab-4) 0; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.ab-pestanas::-webkit-scrollbar{ display:none; }
.ab-pestanas a{ flex:none; display:inline-flex; align-items:center; min-height:var(--ab-tap); padding:0 16px; border-radius:12px;
  color:var(--ab-fg-2); font-weight:600; text-decoration:none; }
.ab-pestanas a:hover{ color:var(--ab-fg); }
.ab-pestanas a[aria-current="true"]{ background:var(--ab-azul); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.32); }

@media (min-width:640px){
  .ab-hero{ grid-template-columns:minmax(0,1fr) auto; padding:var(--ab-6) var(--ab-8); }
  .ab-proceso{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .ab-paso:nth-child(4)::before{ content:""; }
  body.ab-app .ab-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:639px){
  .ab-paso:nth-child(4)::before{ content:none; }
  .ab-busca{ max-width:none; }
  body.ab-app .ab-top__quien{ display:none; }
}
@media (min-width:1024px){
  body.ab-app{ display:grid; grid-template-columns:256px minmax(0,1fr); grid-template-rows:auto 1fr auto; }
  .ab-lado{ grid-column:1; grid-row:1 / -1; position:sticky; top:0; height:100vh; flex-direction:column; align-items:stretch;
    gap:var(--ab-5); padding:var(--ab-4) var(--ab-3) var(--ab-4); overflow-y:auto; }
  .ab-lado .ab-brand{ padding:6px 8px 0; }
  .ab-lado .ab-logo{ width:44px; height:44px; border-radius:12px; font-size:var(--ab-t-lg); }
  .ab-brand__grupo{ display:block; }
  .ab-brand__txt{ font-size:17px; }
  .ab-lado .ab-nav{ flex:none; flex-direction:column; gap:4px; overflow:visible; }
  .ab-lado .ab-nav a{ min-height:50px; padding:0 14px; font-size:15px; }
  .ab-lado__pie{ display:flex; flex-direction:column; justify-content:flex-end; gap:2px; margin-top:auto; min-height:250px;
    padding:var(--ab-4); border-radius:18px; color:#fff; font-weight:700; font-size:var(--ab-t-lg); line-height:1.25;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(to top, rgba(6,11,38,.96) 0%, rgba(6,11,38,.55) 42%, rgba(6,11,38,0) 75%),
      var(--ab-noche) url(img/fondo-acceso.webp) -34px -14px / 830px auto no-repeat; }
  .ab-lado__pie b{ font-size:var(--ab-t-2xl); font-style:italic; color:#f87171; }
  body.ab-app .ab-top, body.ab-app .ab-wrap, body.ab-app .ab-pie{ grid-column:2; }
  body.ab-app .ab-wrap{ padding:var(--ab-5) var(--ab-6); margin:0; }
  body.ab-app .ab-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1500px){
  body.ab-app .ab-kpis{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  body.ab-app .ab-kpi__n{ font-size:var(--ab-t-2xl); }
}
/* Sin desenfoque de fondo, el vidrio se vuelve blanco liso: se lee igual. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.ab-app .ab-card, body.ab-app .ab-kpi, .ab-pestanas a, body.ab-app .ab-top{ background:#fff; }
}
@media (prefers-reduced-motion:reduce){ body.ab-app .ab-kpi{ transition:none; } }

/* ----- Captura de banco ----- */
.ab-subir{ margin-bottom:var(--ab-4); }
.ab-subir .ab-form{ display:grid; gap:var(--ab-3); justify-items:start; }
.ab-subir .ab-field{ width:100%; max-width:520px; margin:0; }
.ab-input--archivo{ padding:10px; height:auto; }

/* ----- Bitácora del día ----- */
.ab-dia__ir{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ab-dia__ir .ab-input{ width:auto; }
.ab-bitacora{ list-style:none; margin:0; display:grid; gap:0; }
.ab-bitacora li{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--ab-3); padding:var(--ab-3) 0;
  border-top:1px solid var(--ab-line-soft); }
.ab-bitacora li:first-child{ border-top:0; }
.ab-bitacora p{ margin:0 0 6px; }
.ab-bitacora__h{ font-family:var(--ab-font-num); font-weight:800; font-variant-numeric:tabular-nums; color:var(--ab-fg-2); }
.ab-bitacora__des{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; }
.ab-bitacora__des .ab-input{ flex:1 1 220px; max-width:420px; }

/* ----- Por identificar ----- */
.ab-resumen{ margin:0 0 var(--ab-4); }
.ab-sig__acc .ab-form{ display:grid; gap:var(--ab-2); }
.ab-sig__acc .ab-field{ margin:0; }
.ab-sig__acc .ab-form + .ab-form{ padding-top:var(--ab-3); border-top:1px solid var(--ab-line-soft); }

/* Banco: el logo de Banamex en el título, como en Cobranza (estados_cuenta.php) */
.ab-banco-t{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ab-banco-logo{ height:32px; width:auto; max-width:190px; object-fit:contain; display:block; align-self:center; }

/* Ciclo de pago, como en Appia: del corte a la fecha límite con la marca de HOY */
.ab-ciclo{ margin:0 0 18px; --ab-ciclo-c:var(--ab-info-dot); --ab-ciclo-bg:var(--ab-info-bg); --ab-ciclo-fg:var(--ab-info); }
.ab-ciclo--bad{ --ab-ciclo-c:#e11d48; --ab-ciclo-bg:#fff1f2; --ab-ciclo-fg:#be123c; }
.ab-ciclo--wait{ --ab-ciclo-c:#a1a1aa; --ab-ciclo-bg:var(--ab-subtle); --ab-ciclo-fg:var(--ab-muted); }
.ab-ciclo__cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.ab-ciclo__cab > div{ flex:1 1 auto; min-width:0; }
.ab-ciclo__eti{ margin:0 0 6px; font-size:var(--ab-t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ab-muted); }
.ab-ciclo__frase{ margin:0; font-size:var(--ab-t-lg); line-height:1.4; color:var(--ab-fg); }
.ab-ciclo__chip{ flex:none; padding:6px 12px; border-radius:var(--ab-r-full); background:var(--ab-ciclo-bg); color:var(--ab-ciclo-fg);
  font-size:var(--ab-t-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.ab-ciclo__linea{ position:relative; height:44px; margin:22px 10px 4px; }
.ab-ciclo__riel,.ab-ciclo__lleno{ position:absolute; left:0; top:26px; height:8px; border-radius:var(--ab-r-full); }
.ab-ciclo__riel{ right:0; background:var(--ab-line); }
.ab-ciclo__lleno{ background:var(--ab-ciclo-c); }
.ab-ciclo__pto{ position:absolute; top:20px; width:20px; height:20px; margin-left:-10px; border-radius:50%; background:#fff;
  border:3px solid var(--ab-ciclo-c); box-sizing:border-box; }
.ab-ciclo__pto--ini{ left:0; background:var(--ab-ciclo-c); box-shadow:inset 0 0 0 3px #fff; }
.ab-ciclo__pto--fin{ left:100%; }
.ab-ciclo__hoy{ position:absolute; top:0; bottom:4px; width:3px; margin-left:-1px; background:var(--ab-ciclo-fg); border-radius:2px; }
.ab-ciclo__hoy span{ position:absolute; bottom:100%; left:50%; transform:translate(-50%,-2px); font-size:11px; font-weight:800;
  letter-spacing:.1em; color:var(--ab-ciclo-fg); white-space:nowrap; }
.ab-ciclo__ext{ display:flex; justify-content:space-between; font-size:var(--ab-t-sm); color:var(--ab-muted); }
.ab-ciclo__ext b{ display:block; color:var(--ab-fg); font-weight:600; }
.ab-ciclo__der{ text-align:right; }
.ab-ciclo__nota{ margin:10px 0 0; font-size:var(--ab-t-sm); color:var(--ab-muted); }
.ab-ciclo__nota strong{ color:var(--ab-fg); }
@media (max-width:640px){ .ab-ciclo__cab{ flex-direction:column; } .ab-ciclo__frase{ font-size:var(--ab-t-md); } }
.ab-ciclo--p0 .ab-ciclo__lleno{ width:0%; } .ab-ciclo--p0 .ab-ciclo__hoy{ left:0%; }
.ab-ciclo--p5 .ab-ciclo__lleno{ width:5%; } .ab-ciclo--p5 .ab-ciclo__hoy{ left:5%; }
.ab-ciclo--p10 .ab-ciclo__lleno{ width:10%; } .ab-ciclo--p10 .ab-ciclo__hoy{ left:10%; }
.ab-ciclo--p15 .ab-ciclo__lleno{ width:15%; } .ab-ciclo--p15 .ab-ciclo__hoy{ left:15%; }
.ab-ciclo--p20 .ab-ciclo__lleno{ width:20%; } .ab-ciclo--p20 .ab-ciclo__hoy{ left:20%; }
.ab-ciclo--p25 .ab-ciclo__lleno{ width:25%; } .ab-ciclo--p25 .ab-ciclo__hoy{ left:25%; }
.ab-ciclo--p30 .ab-ciclo__lleno{ width:30%; } .ab-ciclo--p30 .ab-ciclo__hoy{ left:30%; }
.ab-ciclo--p35 .ab-ciclo__lleno{ width:35%; } .ab-ciclo--p35 .ab-ciclo__hoy{ left:35%; }
.ab-ciclo--p40 .ab-ciclo__lleno{ width:40%; } .ab-ciclo--p40 .ab-ciclo__hoy{ left:40%; }
.ab-ciclo--p45 .ab-ciclo__lleno{ width:45%; } .ab-ciclo--p45 .ab-ciclo__hoy{ left:45%; }
.ab-ciclo--p50 .ab-ciclo__lleno{ width:50%; } .ab-ciclo--p50 .ab-ciclo__hoy{ left:50%; }
.ab-ciclo--p55 .ab-ciclo__lleno{ width:55%; } .ab-ciclo--p55 .ab-ciclo__hoy{ left:55%; }
.ab-ciclo--p60 .ab-ciclo__lleno{ width:60%; } .ab-ciclo--p60 .ab-ciclo__hoy{ left:60%; }
.ab-ciclo--p65 .ab-ciclo__lleno{ width:65%; } .ab-ciclo--p65 .ab-ciclo__hoy{ left:65%; }
.ab-ciclo--p70 .ab-ciclo__lleno{ width:70%; } .ab-ciclo--p70 .ab-ciclo__hoy{ left:70%; }
.ab-ciclo--p75 .ab-ciclo__lleno{ width:75%; } .ab-ciclo--p75 .ab-ciclo__hoy{ left:75%; }
.ab-ciclo--p80 .ab-ciclo__lleno{ width:80%; } .ab-ciclo--p80 .ab-ciclo__hoy{ left:80%; }
.ab-ciclo--p85 .ab-ciclo__lleno{ width:85%; } .ab-ciclo--p85 .ab-ciclo__hoy{ left:85%; }
.ab-ciclo--p90 .ab-ciclo__lleno{ width:90%; } .ab-ciclo--p90 .ab-ciclo__hoy{ left:90%; }
.ab-ciclo--p95 .ab-ciclo__lleno{ width:95%; } .ab-ciclo--p95 .ab-ciclo__hoy{ left:95%; }
.ab-ciclo--p100 .ab-ciclo__lleno{ width:100%; } .ab-ciclo--p100 .ab-ciclo__hoy{ left:100%; }

.ab-ciclo__cifras{ margin:16px 0 0; }

/* Avance del corte por plaza */
.ab-plazas{ margin:18px 0 0; }
.ab-plaza{ margin:12px 0 0; }
.ab-plaza__cab{ display:flex; justify-content:space-between; gap:12px; font-size:var(--ab-t-md); }
.ab-plaza__cab span{ color:var(--ab-muted); } .ab-plaza__cab b{ color:var(--ab-fg); }
.ab-plaza__barra{ position:relative; height:10px; margin:6px 0 4px; border-radius:var(--ab-r-full); background:var(--ab-line); overflow:hidden; }
.ab-plaza__barra span{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--ab-r-full); background:var(--ab-ok-dot); }
.ab-plaza__pie{ margin:0; font-size:var(--ab-t-sm); color:var(--ab-muted); }
.ab-pct--0 span{ width:0%; }
.ab-pct--5 span{ width:5%; }
.ab-pct--10 span{ width:10%; }
.ab-pct--15 span{ width:15%; }
.ab-pct--20 span{ width:20%; }
.ab-pct--25 span{ width:25%; }
.ab-pct--30 span{ width:30%; }
.ab-pct--35 span{ width:35%; }
.ab-pct--40 span{ width:40%; }
.ab-pct--45 span{ width:45%; }
.ab-pct--50 span{ width:50%; }
.ab-pct--55 span{ width:55%; }
.ab-pct--60 span{ width:60%; }
.ab-pct--65 span{ width:65%; }
.ab-pct--70 span{ width:70%; }
.ab-pct--75 span{ width:75%; }
.ab-pct--80 span{ width:80%; }
.ab-pct--85 span{ width:85%; }
.ab-pct--90 span{ width:90%; }
.ab-pct--95 span{ width:95%; }
.ab-pct--100 span{ width:100%; }
/* Barra por plaza en dos tramos (Pedro, 30-sep-2026): verde lo que entró por banco o pasarela,
   morado lo cobrado en la caja de una tienda. El ancho va en clases: la CSP no deja estilos en línea. */
.ab-plaza__barra--dos{ display:flex; }
.ab-plaza__barra--dos span{ position:static; flex:none; border-radius:0; }
.ab-plaza__barra--dos span:first-child{ border-radius:var(--ab-r-full) 0 0 var(--ab-r-full); }
.ab-plaza__barra--dos span:last-child{ border-radius:0 var(--ab-r-full) var(--ab-r-full) 0; }
.ab-plaza__barra--dos span:only-child{ border-radius:var(--ab-r-full); }
.ab-plaza__barra--dos .ab-plaza__banco{ background:var(--ab-ok-dot); }
.ab-plaza__barra--dos .ab-plaza__tienda{ background:#7c3aed; }
.ab-plaza__ley{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:4px 0 0; font-size:var(--ab-t-sm); color:var(--ab-muted); }
.ab-plaza__ley i{ display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:3px; vertical-align:-1px; }
.ab-plaza__ley .ab-plaza__banco{ background:var(--ab-ok-dot); }
.ab-plaza__ley .ab-plaza__tienda{ background:#7c3aed; }
.ab-plaza__pie .ab-plaza__t{ color:#6d28d9; font-weight:600; }
body.ab-app .ab-kpi--tienda .ab-kpi__n{ color:#6d28d9; }
.ab-w--0{ width:0%; }
.ab-w--1{ width:1%; }
.ab-w--2{ width:2%; }
.ab-w--3{ width:3%; }
.ab-w--4{ width:4%; }
.ab-w--5{ width:5%; }
.ab-w--6{ width:6%; }
.ab-w--7{ width:7%; }
.ab-w--8{ width:8%; }
.ab-w--9{ width:9%; }
.ab-w--10{ width:10%; }
.ab-w--11{ width:11%; }
.ab-w--12{ width:12%; }
.ab-w--13{ width:13%; }
.ab-w--14{ width:14%; }
.ab-w--15{ width:15%; }
.ab-w--16{ width:16%; }
.ab-w--17{ width:17%; }
.ab-w--18{ width:18%; }
.ab-w--19{ width:19%; }
.ab-w--20{ width:20%; }
.ab-w--21{ width:21%; }
.ab-w--22{ width:22%; }
.ab-w--23{ width:23%; }
.ab-w--24{ width:24%; }
.ab-w--25{ width:25%; }
.ab-w--26{ width:26%; }
.ab-w--27{ width:27%; }
.ab-w--28{ width:28%; }
.ab-w--29{ width:29%; }
.ab-w--30{ width:30%; }
.ab-w--31{ width:31%; }
.ab-w--32{ width:32%; }
.ab-w--33{ width:33%; }
.ab-w--34{ width:34%; }
.ab-w--35{ width:35%; }
.ab-w--36{ width:36%; }
.ab-w--37{ width:37%; }
.ab-w--38{ width:38%; }
.ab-w--39{ width:39%; }
.ab-w--40{ width:40%; }
.ab-w--41{ width:41%; }
.ab-w--42{ width:42%; }
.ab-w--43{ width:43%; }
.ab-w--44{ width:44%; }
.ab-w--45{ width:45%; }
.ab-w--46{ width:46%; }
.ab-w--47{ width:47%; }
.ab-w--48{ width:48%; }
.ab-w--49{ width:49%; }
.ab-w--50{ width:50%; }
.ab-w--51{ width:51%; }
.ab-w--52{ width:52%; }
.ab-w--53{ width:53%; }
.ab-w--54{ width:54%; }
.ab-w--55{ width:55%; }
.ab-w--56{ width:56%; }
.ab-w--57{ width:57%; }
.ab-w--58{ width:58%; }
.ab-w--59{ width:59%; }
.ab-w--60{ width:60%; }
.ab-w--61{ width:61%; }
.ab-w--62{ width:62%; }
.ab-w--63{ width:63%; }
.ab-w--64{ width:64%; }
.ab-w--65{ width:65%; }
.ab-w--66{ width:66%; }
.ab-w--67{ width:67%; }
.ab-w--68{ width:68%; }
.ab-w--69{ width:69%; }
.ab-w--70{ width:70%; }
.ab-w--71{ width:71%; }
.ab-w--72{ width:72%; }
.ab-w--73{ width:73%; }
.ab-w--74{ width:74%; }
.ab-w--75{ width:75%; }
.ab-w--76{ width:76%; }
.ab-w--77{ width:77%; }
.ab-w--78{ width:78%; }
.ab-w--79{ width:79%; }
.ab-w--80{ width:80%; }
.ab-w--81{ width:81%; }
.ab-w--82{ width:82%; }
.ab-w--83{ width:83%; }
.ab-w--84{ width:84%; }
.ab-w--85{ width:85%; }
.ab-w--86{ width:86%; }
.ab-w--87{ width:87%; }
.ab-w--88{ width:88%; }
.ab-w--89{ width:89%; }
.ab-w--90{ width:90%; }
.ab-w--91{ width:91%; }
.ab-w--92{ width:92%; }
.ab-w--93{ width:93%; }
.ab-w--94{ width:94%; }
.ab-w--95{ width:95%; }
.ab-w--96{ width:96%; }
.ab-w--97{ width:97%; }
.ab-w--98{ width:98%; }
.ab-w--99{ width:99%; }
.ab-w--100{ width:100%; }


/* ===== Menú en bloques (30-sep-2026) =====
   Un <details> por bloque: funciona sin JavaScript. El bloque de la página abierta sale abierto. */
.ab-nav__grupo{ flex:none; display:flex; align-items:center; }
.ab-nav__grupo > summary{ display:inline-flex; align-items:center; gap:6px; min-height:var(--ab-tap); padding:0 12px; cursor:pointer;
  list-style:none; border-radius:var(--ab-r-full); font-weight:700; font-size:var(--ab-t-sm); color:var(--ab-muted); white-space:nowrap; }
.ab-nav__grupo > summary::-webkit-details-marker{ display:none; }
.ab-nav__grupo > summary .ab-ico{ width:16px; height:16px; transition:transform .15s ease; }
.ab-nav__grupo[open] > summary .ab-ico{ transform:rotate(90deg); }
.ab-nav__grupo[open] > summary .ab-nav__suma{ display:none; }
.ab-nav__hijos{ display:flex; gap:var(--ab-1); }
.ab-lado .ab-nav__grupo > summary{ color:#94a3b8; }
.ab-lado .ab-nav__grupo > summary:hover{ color:#fff; }
.ab-nav__grupo > summary:focus-visible{ outline:2px solid var(--ab-azul, #2563eb); outline-offset:2px; }
@media (min-width:1024px){
  .ab-lado .ab-nav__grupo{ display:block; margin-top:10px; }
  .ab-lado .ab-nav__grupo > summary{ display:flex; width:100%; min-height:34px; padding:0 14px; border-radius:10px;
    font-size:var(--ab-t-xs); letter-spacing:.08em; text-transform:uppercase; }
  .ab-lado .ab-nav__grupo > summary .ab-nav__titulo{ flex:1 1 auto; }
  .ab-lado .ab-nav__grupo > summary .ab-nav__suma{ margin-left:0; }
  .ab-lado .ab-nav__hijos{ flex-direction:column; gap:4px; margin-top:4px; }
  .ab-lado .ab-nav a.ab-nav__abajo{ position:relative; margin-top:26px; }
  .ab-lado .ab-nav a.ab-nav__abajo::before{ content:""; position:absolute; left:14px; right:14px; top:-13px; border-top:1px solid rgba(255,255,255,.14); }
}

/* Vinculación de la línea central (whatsapp.php), con la disposición de Cobranza */
.ab-vinc{ margin:0 0 var(--ab-5, 24px); }
.ab-vinc__chip{ margin:0 0 var(--ab-3); }
.ab-vinc__chip .ab-st{ font-size:var(--ab-t-sm); padding:6px 14px; }
.ab-vinc__rejilla{ display:grid; gap:var(--ab-4); grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .ab-vinc__rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ab-vinc__qr{ display:grid; place-items:center; min-height:360px; margin:var(--ab-3) 0; padding:12px; background:#fff;
  border:1px solid var(--ab-line); border-radius:14px; }
.ab-vinc__qr img, .ab-vinc__qr canvas{ max-width:100%; height:auto; }
.ab-vinc__nota{ display:grid; gap:4px; text-align:center; color:var(--ab-muted); }
.ab-vinc__nota strong{ color:var(--ab-fg); font-size:var(--ab-t-lg); }
.ab-vinc__botones{ display:flex; flex-wrap:wrap; gap:10px; }
.ab-vinc__botones .ab-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.ab-vinc__msg{ margin:var(--ab-3) 0 0; color:var(--ab-muted); }
.ab-vinc__bitacora{ min-height:300px; max-height:360px; overflow:auto; margin:var(--ab-3) 0; padding:16px; border-radius:14px;
  background:#0b1434; color:#e2e8f0; font-family:var(--ab-font-mono); font-size:var(--ab-t-sm); line-height:1.5; white-space:pre-wrap; }

/* La duda de un pago en la cola: lo que el ERP abonó por otro importe y el PDF de la clienta */
.ab-duda{ margin:0 0 var(--ab-3); }
.ab-duda p{ margin:0 0 6px; }
.ab-duda p:last-child{ margin:8px 0 0; }

/* Banco: ventana con el contenido de una carga */
.ab-dlg.ab-dlg--ancho{ max-width:min(1200px, 96vw); }
.ab-dlg__tabla{ max-height:62vh; overflow:auto; border:1px solid var(--ab-line); border-radius:12px; }
.ab-dlg__tabla .ab-tbl{ font-size:var(--ab-t-sm); }
/* Encabezado fijo con fondo blanco sólido: al desplazarse no se encima con las filas */
body .ab-dlg .ab-dlg__tabla .ab-tbl thead th{ position:sticky; top:0; z-index:2; background:#fff; box-shadow:inset 0 -1px 0 var(--ab-line); }
.ab-tbl tr.ab-tbl__nueva td:first-child{ box-shadow:inset 3px 0 0 var(--ab-info-dot); }
.ab-dlg__cab{ display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--ab-line); }
.ab-dlg__cab .ab-dlg__h{ flex:1 1 auto; border-bottom:0; }
.ab-dlg__x{ flex:none; width:40px; height:40px; margin-right:12px; border:1px solid var(--ab-line); border-radius:10px; background:#fff;
  color:var(--ab-muted); font-size:24px; line-height:1; cursor:pointer; }
.ab-dlg__x:hover{ background:var(--ab-hover, #f4f4f5); color:var(--ab-fg); }
.ab-dlg__x:focus-visible{ outline:2px solid var(--ab-azul, #2563eb); outline-offset:2px; }
.ab-dlg--ancho .ab-dlg__b{ padding:16px 20px 20px; }
.ab-dlg__tabla td, .ab-dlg__tabla th{ padding:10px 12px; vertical-align:middle; }
.ab-dlg__tabla td:nth-child(-n+3), .ab-dlg__tabla td:nth-child(5), .ab-dlg__tabla td:last-child{ white-space:nowrap; }

/* La cifra de banco y pasarelas en verde, como la de tienda en morado (3-oct-2026) */
.ab-plaza__pie .ab-plaza__b{ color:#047857; font-weight:600; }
.ab-ciclo__cierre{ margin:4px 0 0; color:var(--ab-muted); }
.ab-ciclo__cierre strong{ color:var(--ab-fg); }

/* Tablas anchas: se desplazan en vez de apretar la columna de la clienta letra por letra (3-oct-2026) */
@media (min-width:640px){
  .ab-tbl-caja{ overflow-x:auto; }
  .ab-tbl td[data-rotulo="Clienta"]{ min-width:220px; }
  .ab-tbl td[data-rotulo="Fecha"]{ min-width:104px; }
  .ab-tbl td[data-rotulo="Fuente"]{ min-width:110px; }
  .ab-tbl td .ab-st{ white-space:nowrap; }
  .ab-tbl td.ab-tbl__acc{ white-space:nowrap; }
}
.ab-duda__liga{ text-decoration:none; }
.ab-duda__pdf{ margin-left:6px; font-size:var(--ab-t-xs); font-weight:700; color:var(--ab-bad); white-space:nowrap; }

/* Bandeja: pastillas por estado y páginas (3-oct-2026) */
.ab-estados{ flex-wrap:wrap; margin:0 0 var(--ab-3); }
.ab-paginas{ display:flex; align-items:center; justify-content:center; gap:14px; margin:var(--ab-4) 0; }

.ab-tbl td[data-rotulo="Folio"]{ white-space:nowrap; }

/* La consulta de Banxico (14-oct-2026): la pastilla es botón y la ventana es una tabla de dos columnas, como en Banxico. */
.ab-st--boton{ cursor:pointer; border:0; font:inherit; }
.ab-st--boton:hover{ text-decoration:underline; }
.ab-st--boton:focus-visible{ outline:2px solid var(--ab-azul, #2563eb); outline-offset:2px; }
.ab-bx-tabla{ width:100%; margin:12px 0; border:1px solid var(--ab-line); }
body .ab-dlg .ab-bx-tabla th{ text-align:right; font-weight:700; color:var(--ab-muted); width:52%; padding:8px 12px; border-bottom:1px solid var(--ab-line);
  text-transform:none; letter-spacing:0; font-size:var(--ab-t-sm, 14px); background:transparent; position:static; }
body .ab-dlg .ab-bx-tabla td{ text-align:center; font-size:var(--ab-t-sm, 14px); padding:8px 12px; border-bottom:1px solid var(--ab-line); font-variant-numeric:tabular-nums; }
.ab-bx-tabla tr:nth-child(even){ background:var(--ab-hover, #f4f6fb); }

/* El botón verde de WhatsApp (14-oct-2026). */
.ab-btn--verde{ background:#16a34a; border-color:#16a34a; color:#fff; }
.ab-btn--verde:hover{ background:#15803d; border-color:#15803d; color:#fff; }
.ab-btn--verde:focus-visible{ outline:2px solid #15803d; outline-offset:2px; }
.ab-dlg__f form{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin:0; }