/* ═══════════════════════════════════════════════════════════════════════════
   Aplicación de vencimientos — el panel del equipo
   ═══════════════════════════════════════════════════════════════════════════

   SEGUNDA VERSIÓN (3 nov 2026). La primera —blanco y gris, filos finos, iconos
   de línea— la rechazó David: «no la veo profesional ni atractiva… apóyate
   más en el diseño que hicimos para el dashboard de La Malteadería… tampoco
   se ve con la estructura de Treinta, que tiene íconos claros».

   LO QUE SE TOMA DE CADA REFERENCIA
   · Del tablero v4 de La Malteadería (aprobado por David): fondo tenue con
     tarjetas blancas muy redondeadas, un anillo de 1 px casi invisible y una
     sombra suave tintada con la marca; UNA sola pieza por pantalla llena con
     el degradado de la marca y círculos translúcidos; mini indicadores con el
     icono en ficha de color y la cifra grande; control de periodo segmentado;
     aparición escalonada sutil; barra inferior en el celular.
   · De Treinta (lo que el equipo usa hoy): barra lateral con iconos claros y
     grupos; accesos grandes con icono en el inicio; vacíos con ilustración y
     un botón; todo obvio, nada que haya que aprender.
   · De la marca (marca/tokens.css): el morado #771571 como único acento, el
     morado vivo y el morado tinta solo dentro del degradado, el teal de apoyo
     en fichas de dinero. Ningún botón con un color ajeno; el rojo solo para
     problemas.

   CÓMO ENTRA. Esta hoja se carga la ÚLTIMA (después de sistema, app y cine):
   reescribe los tokens que leen todas las reglas de app.css y pone el
   esqueleto y las piezas de src/ui.js. Cambiar un componente cambia todas las
   pantallas: ninguna escribe colores propios.

   SIN MODO OSCURO. Todas las páginas llevan `data-tema="claro"`.

   CONTRASTE, fórmula WCAG 2.2 (texto normal ≥ 4,5:1), calculado y luego
   medido en el navegador con herramientas/capturas-panel.mjs:
     --tinta  #1B1420 sobre el lienzo #F7F4FA 16,51:1 · sobre blanco 17,9:1
     --suave  #4A4352 sobre el lienzo  8,70:1
     --tenue  #5E5768 sobre el lienzo  6,34:1 · sobre blanco 6,91:1
     morado   #771571 sobre el lienzo  9,05:1 · sobre su ficha #F4E8F3 8,30:1
     teal     #0A7276 sobre su ficha #E3F3F3 4,99:1
     blanco sobre el morado #771571 9,86:1 · sobre el morado vivo #A32B9C 6,21:1
     (el texto del degradado va a la izquierda, sobre su parte más oscura)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · Tokens ───────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --fondo:#F7F4FA;          /* el lavado lila detrás de las tarjetas */
  --fondo2:#EFEAF4;         /* hundido: pistas de controles, código */
  --papel:#FFFFFF;
  --papel2:#FFFFFF;

  --tinta:#1B1420;          /* la tinta de la marca */
  --suave:#4A4352;
  --tenue:#5E5768;

  --filete:#E6E0EC;
  --filete2:#EFEAF3;
  --filo-doble:inset 0 0 0 1px #EAE4EF;
  --cristal-tarjeta:linear-gradient(#FFFFFF,#FFFFFF);
  --cristal:#FFFFFF;
  --cristal-bd:#FFFFFF;

  /* Sombras tintadas con el morado tinta de la marca, no con negro: es lo que
     le da a la tarjeta blanca su «está encima» sin ensuciarla. */
  --s1:0 1px 2px rgba(61,10,58,.04), 0 4px 14px -6px rgba(61,10,58,.08);
  --s2:0 1px 2px rgba(61,10,58,.05), 0 12px 28px -14px rgba(61,10,58,.16);
  --s3:0 2px 6px -2px rgba(61,10,58,.08), 0 22px 44px -20px rgba(61,10,58,.24);
  --s4:0 6px 16px -6px rgba(61,10,58,.12), 0 36px 72px -28px rgba(61,10,58,.30);

  --deg-morado:linear-gradient(#771571,#771571);

  /* La pieza de marca: del morado vivo arriba a la derecha al morado tinta. */
  --pan-degradado:radial-gradient(120% 110% at 100% 0%, #A32B9C 0%, #771571 46%, #3D0A3A 100%);
  --pan-anillo:0 0 0 1px rgba(61,10,58,.06);

  --pan-lateral:264px;
  --pan-activo:#F4E8F3;     /* ficha y lavado morado */
  --pan-activo2:#EAD3E8;
  --pan-teal:#E3F3F3;       /* ficha teal */
  --pan-teal-txt:#0A7276;
  --pan-hover:#F6F2F8;
  --pan-borde:#E6E0EC;
  /* El borde de los CAMPOS no es el de las tarjetas: WCAG 1.4.11 le pide 3:1
     contra el fondo. Este da 3,29:1 sobre blanco. */
  --pan-campo:#8F8C99;
  --pan-tabla-cab:#FAF8FC;
  --pan-r:22px;             /* tarjetas */
  --pan-r2:14px;            /* controles y fichas */
  --pan-abajo:76px;         /* alto que reserva la barra inferior del celular */
  --pan-rebote:cubic-bezier(.34,1.56,.64,1);
}
/* La letra del panel, un paso más grande que la de la web: es una
   herramienta que se lee ocho horas al día. Cuerpo ≥ 15 px. */
body.pan{
  --t-b:16px; --t-s:15px; --t-xs:13.5px; --t-m:18px;
  --app-tabla:15px; --app-mini:12px;
}

/* ── 2 · Iconos (Material Symbols Rounded, ver src/ui.js) ─────────────────── */
.ms{
  font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  font-size:20px; width:1em; height:1em; line-height:1; flex:none;
  display:inline-block; overflow:hidden; vertical-align:middle;
  /* La ligadura casa el texto EXACTO: nada que herede mayúsculas, espaciado
     o dirección puede tocarlo (pasó en La Malteadería: «TWO__WHEELER»). */
  text-transform:none; letter-spacing:normal; white-space:nowrap; word-wrap:normal; direction:ltr;
  font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing:antialiased; user-select:none;
}
.btn .ms{ font-size:19px; width:1em; height:1em }

/* ── 3 · Esqueleto ────────────────────────────────────────────────────────── */
body.pan{ background:var(--fondo); color:var(--tinta) }
.pan-marco{
  flex:1; display:grid; grid-template-columns:var(--pan-lateral) minmax(0,1fr);
  min-height:100vh; min-height:100dvh;
}
.pan-principal{ display:flex; flex-direction:column; min-width:0 }
@media (min-width:961px){
  .pan-marco{ background:linear-gradient(90deg, var(--papel) calc(var(--pan-lateral) - 1px),
    var(--pan-borde) calc(var(--pan-lateral) - 1px), var(--pan-borde) var(--pan-lateral),
    transparent var(--pan-lateral)) }
}
.pan-lienzo{
  flex:1; width:100%; max-width:1320px; margin-inline:auto;
  padding:clamp(22px,2.8vw,36px) clamp(16px,3vw,40px) 64px;
  view-transition-name:principal;
}
.pan-lienzo:focus, .pan-lienzo h1:focus{ outline:none }
/* Entre bloques del lienzo, un solo ritmo. */
.pan-lienzo > * + *{ margin-top:clamp(16px,1.8vw,22px) }
.pan-lienzo > .app-titulo + *{ margin-top:0 }
.pan-pie{
  padding:18px clamp(16px,3vw,40px) 24px; font-size:var(--t-xs); color:var(--tenue);
  border-top:1px solid var(--filete2); background:transparent;
}
.pan-barra, .pan-velo, .pan-abajo{ display:none }

/* ── 4 · Barra lateral ────────────────────────────────────────────────────── */
.pan-lateral{
  position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  background:var(--papel); border-right:1px solid var(--pan-borde);
  padding:18px 14px 14px;
  view-transition-name:lateral;
  scrollbar-width:thin;
}
.pan-lateral__cab{ display:flex; align-items:center; justify-content:space-between; padding:0 8px 10px }
.pan .cin-logo, .ent .cin-logo{ background:none; box-shadow:none; padding:0; border-radius:0 }
.pan .cin-logo:hover, .ent .cin-logo:hover{ transform:none }
.pan-lateral__marca .cin-logo img{ height:40px; width:auto }
.pan-cerrar{ display:none }

/* El negocio, como la tarjeta de comercio de Treinta. */
.pan-negocio{
  display:flex; align-items:center; gap:11px; margin:0 0 8px;
  padding:10px 12px; border-radius:16px; background:var(--fondo);
}
.pan-avatar{
  flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--pan-degradado); color:#fff; font-size:13.5px; font-weight:800; letter-spacing:.02em;
}
.pan-negocio__t{ display:grid; min-width:0; line-height:1.3 }
.pan-negocio__t b{ font-size:13.5px; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pan-negocio__t span{ font-size:12.5px; color:var(--tenue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.pan-nav{ display:grid; gap:14px; flex:1; align-content:start }
.pan-grupo__t{
  margin:0 0 6px; padding:0 12px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tenue);
}
.pan-lateral ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.pan-enlace{
  display:flex; align-items:center; gap:12px; min-height:42px; padding:0 12px;
  border-radius:12px; font-size:15px; font-weight:600; color:#3E3746;
  transition:background-color var(--t-sale) var(--sal), color var(--t-sale) var(--sal);
}
.pan-enlace .pan-ico{ font-size:22px; color:#6A6274;
  transition:font-variation-settings var(--t-sale) var(--sal) }
.pan-enlace:hover{ background:var(--pan-hover); color:var(--tinta) }
.pan-enlace:hover .pan-ico{ color:var(--acento) }
/* La sección activa: lavado morado, texto morado y el icono RELLENO (eje
   FILL). Tres señales: el lavado solo es muy claro y con poco brillo se pierde. */
.pan-enlace[aria-current]{
  background:var(--pan-activo); color:var(--acento); font-weight:700;
  view-transition-name:nav-activa;
}
.pan-enlace[aria-current] .pan-ico{ color:var(--acento);
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 }
.pan-lateral__pie{ border-top:1px solid var(--filete2); padding-top:10px; margin-top:6px }
.pan-lateral__pie .pan-enlace{ min-height:38px; font-weight:500; font-size:14.5px }

/* ── 5 · Encabezado de la pantalla ────────────────────────────────────────── */
.pan .app-titulo{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px 20px;
  flex-wrap:wrap; margin:0 0 clamp(18px,2.2vw,26px);
}
.pan .app-titulo h1{ font-size:clamp(26px,2.5vw,32px); font-weight:800;
  letter-spacing:-.03em; line-height:1.12; color:var(--tinta) }
.pan .app-titulo h1 em{ font-style:normal; color:var(--acento) }
.pan .app-titulo p{ margin:6px 0 0; color:var(--suave); font-size:var(--t-b); max-width:72ch }
.pan .app-titulo .app-rotulo{ margin:0 0 8px; color:var(--acento) }
.pan .app-titulo .app-rotulo::before{ background:var(--acento) }
.pan-cabeza__acciones,
.pan .app-titulo > .btn, .pan .app-titulo > div:last-child:not(:first-child){
  display:flex; flex-wrap:wrap; gap:10px; align-items:center }

/* ── 6 · Botones ──────────────────────────────────────────────────────────── */
.pan .btn, .ent .btn{ border-radius:var(--pan-r2); font-weight:700; min-height:44px; gap:8px }
.pan .btn--sm{ min-height:38px; border-radius:12px }
.pan .btn--pri, .ent .btn--pri{
  background:var(--acento); background-image:none; color:#fff;
  box-shadow:0 1px 2px rgba(61,10,58,.2), 0 8px 18px -10px rgba(119,21,113,.7);
}
.pan .btn--pri:hover, .ent .btn--pri:hover{ background:var(--acento-os); transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(61,10,58,.2), 0 12px 22px -10px rgba(119,21,113,.75) }
.pan .btn--pri:active{ transform:translateY(0) scale(.98) }
.pan .btn--sec, .ent .btn--sec{
  background:var(--papel); color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--pan-campo);
}
.pan .btn--sec:hover, .ent .btn--sec:hover{ color:var(--acento); background:var(--pan-activo);
  box-shadow:inset 0 0 0 1px var(--acento); transform:none }
.pan .btn--fan{ box-shadow:inset 0 0 0 1px var(--pan-campo) }
.pan .btn:not(.btn--pri):not(.btn--sec):not(.btn--fan):not(.btn--mal){
  background:var(--papel); color:var(--tinta); box-shadow:inset 0 0 0 1px var(--pan-campo) }
.pan .btn:not(.btn--pri):not(.btn--sec):not(.btn--fan):not(.btn--mal):hover{
  color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento) }
.pan .btn--mal:hover{ transform:none }

/* ── 7 · Tarjetas y notas ─────────────────────────────────────────────────── */
.pan .app-tarjeta{
  background:var(--papel); background-image:none; border-radius:var(--pan-r);
  box-shadow:var(--pan-anillo), var(--s1);
  padding:clamp(18px,2vw,24px);
}
.pan .app-tarjeta::before{ display:none }
.pan .app-tarjeta > h2, .pan .app-tarjeta h2:first-child{ font-size:var(--t-m); font-weight:700; letter-spacing:-.01em }
.pan .app-tarjeta--plana{ background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px var(--pan-borde) }
.pan .app-nota{ border-radius:16px; padding-left:18px }
.pan .app-nota::before{ border-radius:16px 0 0 16px }
.pan .eta--omitido .eta__n{ background:var(--papel) }
/* Encabezado de tarjeta con una acción a la derecha (título + segmento). */
.pan-tarjeta-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px;
  flex-wrap:wrap; margin:0 0 16px }
.pan-tarjeta-cab h2{ margin:0; font-size:var(--t-m) }

/* ── 8 · Las cifras de antes (.app-cifra: Operación, ficha del vencimiento) ── */
.pan .app-cifras{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px }
.pan .app-cifra{
  background:var(--papel); background-image:none; border-radius:var(--pan-r);
  box-shadow:var(--pan-anillo), var(--s1); padding:18px 20px 16px;
}
.pan .app-cifra:hover{ transform:none; box-shadow:var(--pan-anillo), var(--s2) }
.pan .app-cifra::before{ inset:20px 20px auto auto; width:9px; height:9px; border-radius:50% }
.pan .app-cifra__v{ font-size:30px; font-weight:800; letter-spacing:-.03em }
.pan .app-cifra__e{ letter-spacing:.06em }

/* ── 9 · Mini indicadores y la pieza de marca (src/ui.js → resumen) ─────── */
.pan-resumenes{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.pan-lienzo > .pan-resumenes{ margin-bottom:0 }
@media (min-width:1180px){
  .pan-resumenes--marca{ grid-template-columns:minmax(300px,1.45fr) repeat(auto-fit,minmax(190px,1fr)) }
}
.pan-resumen{
  --tono:var(--acento); --tono-lav:var(--pan-activo);
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; align-content:start;
  align-items:center; column-gap:12px; row-gap:8px; min-width:0;
  background:var(--papel); border-radius:var(--pan-r); padding:18px 20px;
  box-shadow:var(--pan-anillo), var(--s1);
  transition:box-shadow .2s var(--sal), transform .2s var(--sal);
}
.pan-resumen__ico{ grid-row:1; width:42px; height:42px; border-radius:13px; display:grid;
  place-items:center; background:var(--tono-lav); color:var(--tono) }
.pan-resumen__ico .ms{ font-size:22px; font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 }
.pan-resumen__e{ grid-row:1; font-size:14px; font-weight:600; color:var(--suave); line-height:1.3 }
.pan-resumen__v{ grid-column:1/-1; margin-top:4px; font-size:clamp(26px,2.3vw,32px); font-weight:800;
  letter-spacing:-.035em; line-height:1.05; color:var(--tinta); overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums }
.pan-resumen__d{ grid-column:1/-1; font-size:13.5px; color:var(--tenue); line-height:1.4 }
.pan-resumen--neutro  { --tono:var(--suave);  --tono-lav:var(--fondo2) }
.pan-resumen--positivo{ --tono:var(--ok);     --tono-lav:var(--ok-lav) }
.pan-resumen--negativo{ --tono:var(--alerta); --tono-lav:var(--alerta-lav) }
.pan-resumen--aviso   { --tono:var(--aviso);  --tono-lav:var(--aviso-lav) }
.pan-resumen--acento  { --tono:var(--acento); --tono-lav:var(--pan-activo) }
.pan-resumen--positivo .pan-resumen__v{ color:var(--ok) }
.pan-resumen--negativo .pan-resumen__v{ color:var(--alerta) }
a.pan-resumen:hover{ transform:translateY(-2px); box-shadow:var(--pan-anillo), var(--s3) }
a.pan-resumen:hover .pan-resumen__e{ color:var(--tinta) }

/* La pieza de marca: la única llena de la pantalla. */
.pan-resumen--marca{
  background:var(--pan-degradado); color:#fff; padding:22px 24px;
  box-shadow:0 26px 50px -24px rgba(61,10,58,.7);
}
.pan-resumen--marca .pan-resumen__ico{ background:rgba(255,255,255,.14); color:#fff }
.pan-resumen--marca .pan-resumen__e{ color:rgba(255,255,255,.9) }
.pan-resumen--marca .pan-resumen__v{ color:#fff; font-size:clamp(30px,3vw,40px) }
.pan-resumen--marca .pan-resumen__d{ color:rgba(255,255,255,.88) }
a.pan-resumen--marca:hover{ box-shadow:0 30px 56px -24px rgba(61,10,58,.8) }
a.pan-resumen--marca:hover .pan-resumen__e{ color:#fff }
/* Los dos círculos translúcidos del tablero de La Malteadería. */
.pan-circulos{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.pan-circulos i{ position:absolute; border-radius:50%; background:rgba(255,255,255,.08) }
.pan-circulos i:first-child{ width:220px; height:220px; right:-70px; top:-90px }
.pan-circulos i:last-child{ width:96px; height:96px; right:28px; bottom:-40px; background:rgba(255,255,255,.06) }

/* ── 10 · Accesos rápidos (src/ui.js → accesos) ──────────────────────────── */
.pan-accesos{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) }
.pan-acceso{
  --ficha:var(--pan-activo); --ficha-txt:var(--acento);
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  min-height:128px; padding:16px; border-radius:20px; color:var(--tinta);
  background:var(--papel); box-shadow:var(--pan-anillo), var(--s1);
  transition:transform .22s var(--pan-rebote), box-shadow .2s var(--sal);
}
.pan-acceso:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px var(--acento), var(--s3) }
.pan-acceso:active{ transform:scale(.97) }
.pan-acceso__ico{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--ficha); color:var(--ficha-txt) }
.pan-acceso__ico .ms{ font-size:28px; font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 32 }
.pan-acceso__t{ display:grid; gap:3px; line-height:1.25 }
.pan-acceso__t b{ font-size:16px; font-weight:700; letter-spacing:-.01em }
.pan-acceso__t span{ font-size:13.5px; color:var(--tenue) }
.pan-acceso--teal{ --ficha:var(--pan-teal); --ficha-txt:var(--pan-teal-txt) }
/* La acción principal del día: su ficha va llena de morado. Una sola. */
.pan-acceso--lleno{ --ficha:var(--acento); --ficha-txt:#fff }

/* ── 11 · Inicio ──────────────────────────────────────────────────────────── */
.ini-pastilla{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 8px 6px 12px;
  border-radius:999px; background:var(--papel); box-shadow:var(--pan-anillo), var(--s1);
  font-size:13.5px; color:var(--suave);
}
.ini-pastilla .ms{ color:var(--aviso); font-size:19px }
.ini-pastilla b{ padding:4px 10px; border-radius:999px; background:var(--pan-activo); color:var(--acento);
  font-size:13px; white-space:nowrap }
.ini-pastilla:hover b{ background:var(--acento); color:#fff }

.ini-cabeza{ display:grid; gap:clamp(16px,1.8vw,22px); grid-template-columns:minmax(0,1fr) }
@media (min-width:1100px){ .ini-cabeza{ grid-template-columns:minmax(340px,5fr) minmax(0,7fr) } }

.ini-heroe{
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column;
  min-height:300px; padding:clamp(22px,2.4vw,30px); border-radius:26px; color:#fff;
  background:var(--pan-degradado); box-shadow:0 28px 56px -26px rgba(61,10,58,.75);
}
.ini-heroe .pan-circulos i:first-child{ width:300px; height:300px; right:-90px; top:-120px }
.ini-heroe .pan-circulos i:last-child{ width:130px; height:130px; right:40px; bottom:-60px }
.ini-heroe__e{ display:flex; align-items:center; gap:10px; margin:0; font-size:15px; font-weight:600;
  color:rgba(255,255,255,.92) }
.ini-heroe__ico{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.14) }
.ini-heroe__ico .ms{ font-size:22px; font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 }
.ini-heroe__v{ margin:18px 0 4px; font-size:clamp(56px,6vw,76px); font-weight:800; line-height:.95;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums }
.ini-heroe__d{ margin:0; font-size:15.5px; line-height:1.5; color:rgba(255,255,255,.9); max-width:36ch }
.ini-heroe__d b{ color:#fff }
/* La cadena de avisos dibujada: lo que hace el producto, sin palabras. */
.ini-cadena{ position:relative; list-style:none; margin:auto 0 0; padding:22px 0 0;
  display:flex; justify-content:space-between; max-width:380px }
.ini-cadena::before{ content:""; position:absolute; left:16px; right:16px; bottom:16px; height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.7)) }
.ini-cadena li{ position:relative; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:#5A1155; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
  font-size:11.5px; font-weight:700; color:#fff }
.ini-cadena li:last-child{ width:auto; padding:0 10px; border-radius:999px; background:#fff; color:var(--acento) }
.ini-heroe__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:22px }
.ini-heroe__btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:var(--pan-r2); background:#fff; color:var(--acento); font-weight:700; font-size:15px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.45); transition:transform .2s var(--pan-rebote);
}
.ini-heroe__btn:hover{ transform:translateY(-2px) }
.ini-heroe__btn .ms{ transition:transform .2s var(--sal) }
.ini-heroe__btn:hover .ms{ transform:translateX(3px) }
.ini-heroe__link{ display:inline-flex; align-items:center; min-height:44px; color:#fff; font-weight:600;
  font-size:15px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.5) }
.ini-heroe__link:hover{ text-decoration-color:#fff }

.ini-accesos{ min-width:0 }
.ini-accesos h2{ margin:0 0 12px; font-size:var(--t-m); font-weight:700 }
.ini-accesos .pan-accesos{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:1099px) and (min-width:601px){ .ini-accesos .pan-accesos{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.ini-atender{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.ini-atender > div{ flex:1 1 280px }
.ini-atender h2{ margin:0 0 4px }
.ini-atender p{ margin:0; color:var(--suave) }
.ini-atender__ico{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:var(--alerta-lav); color:var(--alerta) }
.ini-atender__ico .ms{ font-size:24px; font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 }

/* ── 12 · Tablas ──────────────────────────────────────────────────────────── */
.pan .app-tabla{ font-size:var(--app-tabla) }
.pan .app-tabla th{
  background:var(--pan-tabla-cab); padding:12px 12px; color:var(--tenue);
  font-size:12px; letter-spacing:.07em; box-shadow:inset 0 -1px 0 var(--pan-borde);
}
.pan .app-tabla td{ padding:14px 12px; box-shadow:inset 0 -1px 0 var(--filete2); vertical-align:middle }
.pan .app-tabla td .sub{ font-size:13.5px }
.pan .app-tabla td > a.n, .pan .app-tabla td > strong{ font-weight:700; color:var(--tinta) }
.pan .app-tabla td > a.n:hover{ color:var(--acento) }
.pan .app-tabla tbody tr:hover{ background:#FBF7FB }
.pan .app-tarjeta > .app-tabla-marco:first-child{ margin-top:calc(-1 * clamp(18px,2vw,24px)) }
.pan .app-tarjeta > .app-tabla-marco:first-child th:first-child{ border-top-left-radius:var(--pan-r) }
.pan .app-tarjeta > .app-tabla-marco:first-child th:last-child{ border-top-right-radius:var(--pan-r) }
.pan .app-tabla-marco{ margin-inline:calc(-1 * clamp(18px,2vw,24px)); padding-inline:0 }
.pan .app-tabla-marco:last-child{ margin-bottom:calc(-1 * clamp(18px,2vw,24px)) }
.pan .app-tabla-marco:last-child tbody tr:last-child td:first-child{ border-bottom-left-radius:var(--pan-r) }
.pan .app-tabla-marco:last-child tbody tr:last-child td:last-child{ border-bottom-right-radius:var(--pan-r) }
.pan .app-tabla th:first-child,.pan .app-tabla td:first-child{ padding-left:clamp(18px,2vw,24px) }
.pan .app-tabla th:last-child,.pan .app-tabla td:last-child{ padding-right:clamp(18px,2vw,24px) }
.pan .app-tabla tbody tr:last-child td{ box-shadow:none }
.pan .app-paginas{ margin-top:clamp(18px,2vw,24px) }
.pan-num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
/* La persona de cada fila con su círculo de iniciales, como la lista de
   clientes de Treinta: la fila se reconoce antes de leerla. */
.pan-quien{ display:flex; align-items:center; gap:12px; min-width:0 }
.pan-quien > span:last-child{ display:grid; min-width:0 }
.pan-inicial{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--pan-activo); color:var(--acento); font-size:13px; font-weight:800; letter-spacing:.02em }
.pan .app-tabla td .pan-quien a.n{ display:inline; min-height:0; padding:0 }
.pan-tarjeta-cab .pan-buscador{ margin:0; flex:1 1 320px }

/* ── 13 · Filtros, segmento y pestañas ───────────────────────────────────
   `.app-filtros` con enlaces es un control segmentado, como el selector de
   periodo del tablero de La Malteadería: una pista lila y la opción activa
   como una píldora blanca que flota sobre ella. */
.pan .app-filtros{ display:inline-flex; flex-wrap:wrap; background:var(--fondo2); border-radius:var(--pan-r2);
  padding:4px; gap:2px; box-shadow:none; margin-bottom:0 }
.pan .app-filtros a{ border-radius:11px; min-height:38px; padding:0 14px; color:var(--suave); font-weight:600;
  text-transform:none; letter-spacing:0; font-size:14.5px; box-shadow:none; background:transparent;
  transition:background-color .2s var(--sal), color .2s var(--sal), box-shadow .2s var(--sal) }
.pan .app-filtros a:hover{ background:rgba(255,255,255,.6); color:var(--tinta); box-shadow:none }
.pan .app-filtros a[aria-current]{ background:var(--papel); color:var(--acento); font-weight:700;
  box-shadow:0 1px 2px rgba(61,10,58,.08), 0 4px 10px -4px rgba(61,10,58,.18) }
.pan form.app-filtros{ background:transparent; box-shadow:none; padding:0; display:flex }
.pan-lienzo > .app-filtros{ margin-bottom:0 }

.pan-pestanas{
  display:flex; gap:4px; margin:0 0 20px; overflow-x:auto; scrollbar-width:none;
  padding:4px; border-radius:16px; background:var(--fondo2); width:max-content; max-width:100%;
}
.pan-pestanas a{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:12px;
  white-space:nowrap; font-size:15px; font-weight:600; color:var(--suave);
  transition:color .2s var(--sal), background-color .2s var(--sal), box-shadow .2s var(--sal);
}
.pan-pestanas a:hover{ color:var(--tinta); background:rgba(255,255,255,.6) }
.pan-pestanas a[aria-current]{ color:var(--acento); font-weight:700; background:var(--papel);
  box-shadow:0 1px 2px rgba(61,10,58,.08), 0 4px 10px -4px rgba(61,10,58,.18) }
.pan-pestanas__n{ font-size:12px; font-weight:700; padding:1px 8px; border-radius:99px;
  background:var(--papel); color:var(--suave) }
.pan-pestanas a[aria-current] .pan-pestanas__n{ background:var(--pan-activo); color:var(--acento) }

/* ── 14 · Buscador y filtro de fecha ──────────────────────────────────────── */
.pan-buscador{ position:relative; display:flex; gap:8px; align-items:center;
  flex-wrap:wrap; margin:0 0 16px; max-width:560px }
.pan-buscador > .pan-ico{ position:absolute; left:14px; top:12px; font-size:21px; color:var(--tenue); pointer-events:none }
.pan-buscador input[type="search"]{
  flex:1 1 220px; min-width:0; min-height:46px; padding:10px 14px 10px 44px;
  background:var(--papel); border:1px solid var(--pan-campo); border-radius:var(--pan-r2);
  font-size:var(--t-b);
}
.pan-buscador input:focus, .pan-fechas input:focus{ outline:none; border-color:var(--acento);
  box-shadow:0 0 0 4px rgba(119,21,113,.14) }
.pan-buscador .btn{ min-height:46px }

.pan-fechas{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin:0 0 4px }
.pan-fechas .app-filtros{ margin:0 }
.pan-fechas__rango{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end }
.pan-fechas__rango label{ display:grid; gap:4px }
.pan-fechas__rango label span{ font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tenue) }
.pan-fechas__rango input{ min-height:44px; padding:8px 12px; border:1px solid var(--pan-campo);
  border-radius:12px; background:var(--papel); font:inherit; font-size:15px }
.pan-fechas__rango .btn{ min-height:44px }

/* ── 15 · Campos ──────────────────────────────────────────────────────────── */
.pan .app-campo input,.pan .app-campo select,.pan .app-campo textarea,
.pan .app-filtros input,.pan .app-acciones input[type="text"],.pan .app-acciones input:not([type]),
.ent .app-campo input,.ent .app-campo select{
  border-color:var(--pan-campo); border-radius:12px; background:var(--papel); min-height:46px; font-size:16px;
}
.pan .app-campo input:hover,.pan .app-campo select:hover,.pan .app-campo textarea:hover,
.ent .app-campo input:hover{ border-color:#6F6A7B }
.pan .app-campo input:focus,.pan .app-campo select:focus,.pan .app-campo textarea:focus{
  border-color:var(--acento); box-shadow:0 0 0 4px rgba(119,21,113,.14); outline:none }
.pan .app-campo label, .ent .app-campo label{ letter-spacing:.05em; font-size:12px; color:var(--suave) }

/* ── 16 · Vacíos con ilustración ──────────────────────────────────────────
   Un círculo lila con el icono grande y dos puntos de la marca alrededor. Sin
   imágenes de banco: dibujo propio, el mismo para todas las pantallas, con el
   icono de cada caso. Los vacíos escritos a mano en src/index.js (sin la
   pieza) reciben uno genérico por ::before. */
.pan .app-vacio{ text-align:center; padding:clamp(28px,4vw,48px) 20px }
.pan .app-vacio h2{ font-size:var(--t-l); font-weight:700; color:var(--tinta); margin:0 0 8px }
.pan .app-vacio p{ margin:0 auto 16px; max-width:46ch; font-size:var(--t-b); color:var(--suave) }
.pan .app-vacio::before{ content:"inbox"; font-family:'Material Symbols Rounded'; font-size:40px; line-height:1;
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40;
  display:grid; place-items:center; width:92px; height:92px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle at 74% 22%, var(--apoyo) 0 6px, transparent 7px),
             radial-gradient(circle at 18% 80%, var(--pan-activo2) 0 9px, transparent 10px),
             var(--pan-activo);
  color:var(--acento); text-transform:none; letter-spacing:normal; overflow:hidden }
.pan .app-vacio.pan-vacio::before{ display:none }
.pan-vacio__ilus{ position:relative; display:grid; place-items:center; width:104px; height:104px;
  margin:0 auto 20px; border-radius:50%; background:var(--pan-activo); color:var(--acento) }
.pan-vacio__ilus::before, .pan-vacio__ilus::after{ content:""; position:absolute; border-radius:50% }
.pan-vacio__ilus::before{ width:14px; height:14px; right:4px; top:10px; background:var(--apoyo) }
.pan-vacio__ilus::after{ width:22px; height:22px; left:-4px; bottom:6px; background:var(--pan-activo2);
  box-shadow:0 0 0 5px var(--papel) }
.pan-vacio__ilus .ms{ font-size:46px; font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48 }
.pan-vacio__acc{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap }

/* ── 17 · Cajón lateral (src/ui.js → cajon) ──────────────────────────────── */
.pan-cajon{
  position:fixed; inset:0 0 0 auto; margin:0; padding:0; border:0;
  width:min(480px,100vw); height:100vh; height:100dvh; max-height:none; max-width:100vw;
  background:var(--papel); color:var(--tinta); box-shadow:var(--s4);
  display:none; flex-direction:column; border-radius:24px 0 0 24px;
}
.pan-cajon[open]{ display:flex }
.pan-cajon--centro{ inset:0; margin:auto; height:auto; max-height:min(86vh,720px);
  width:min(540px,calc(100vw - 32px)); border-radius:24px }
.pan-cajon::backdrop{ background:rgba(27,20,32,.42); backdrop-filter:blur(2px) }
.pan-cajon__cab{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--filete2) }
.pan-cajon__cab h2{ font-size:var(--t-m) }
.pan-cajon__cerrar{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--suave) }
.pan-cajon__cerrar .ms{ font-size:22px }
.pan-cajon__cerrar:hover{ background:var(--pan-hover); color:var(--tinta) }
.pan-cajon__cuerpo{ flex:1; overflow-y:auto; padding:22px }
@media all{ /* movimiento siempre encendido: David trabaja con los efectos de Windows apagados */
  .pan-cajon--derecha[open]{ animation:pan-cajon .28s var(--sal) both }
}
@keyframes pan-cajon{ from{ transform:translateX(28px); opacity:0 } }

/* ── 18 · Pantallas de entrada blancas (paginaEntradaBlanca, sin uso) ────── */
body.ent{ background:var(--papel); color:var(--tinta); margin:0 }
.ent-marco{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:100vh; min-height:100dvh }
.ent-forma{ display:flex; flex-direction:column; padding:24px clamp(20px,5vw,64px) }
.ent-cab{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.ent-cab .cin-logo img{ height:42px; width:auto }
.ent-volver{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border-radius:10px; font-size:var(--t-xs); font-weight:600; color:var(--suave);
  box-shadow:inset 0 0 0 1px var(--pan-campo) }
.ent-volver svg{ width:16px; height:16px }
.ent-volver:hover{ color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento) }
.ent-cuerpo{ flex:1; display:grid; place-items:center; padding:32px 0 }
.ent .app-caja{ max-width:420px; background:var(--papel); background-image:none; border-radius:16px;
  box-shadow:inset 0 0 0 1px var(--pan-borde), var(--s3) }
.ent .app-caja h1{ font-size:clamp(22px,2vw,26px); margin:0 0 8px }
.ent .app-caja > p{ color:var(--suave) }
.ent .app-caja .btn--pri{ min-height:46px }
.ent-pie{ margin:0; font-size:var(--t-xs); color:var(--tenue) }
.ent-lado{ display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:clamp(32px,6vw,88px); background:var(--fondo); border-left:1px solid var(--pan-borde) }
.ent-lema{ margin:0; font-size:clamp(36px,4.2vw,58px); font-weight:700; letter-spacing:-.045em;
  line-height:1.04; color:var(--tinta); text-wrap:balance }
.ent-lema em{ font-style:normal; color:var(--acento) }
.ent-sub{ margin:0; max-width:44ch; color:var(--suave); font-size:var(--t-b); line-height:1.6 }
.ent-cadena{ position:relative; list-style:none; margin:14px 0 0; padding:0;
  display:flex; justify-content:space-between; max-width:460px }
.ent-cadena::before{ content:""; position:absolute; left:22px; right:22px; top:50%;
  height:2px; background:linear-gradient(90deg,var(--pan-activo),var(--acento)); transform:translateY(-1px) }
.ent-cadena li{ position:relative; width:44px; height:44px; border-radius:50%; display:grid;
  place-items:center; background:var(--papel); box-shadow:inset 0 0 0 1.5px var(--acento);
  color:var(--acento); font-size:13px; font-weight:700 }
.ent-cadena li:last-child{ background:var(--acento); color:#fff }
@media (max-width:900px){
  .ent-marco{ grid-template-columns:minmax(0,1fr) }
  .ent-lado{ display:none }
  .ent-forma{ padding:16px }
  .ent-cuerpo{ padding:24px 0; align-items:start }
}

/* ── 19 · Celular y tableta ──────────────────────────────────────────────────
   Bajo 960 px la barra lateral sale de la pantalla y la abre el botón de menú
   o «Más» en la barra inferior. Cerrada lleva `visibility:hidden`: si no, sus
   enlaces seguirían en el orden del tabulador, invisibles. */
@media (max-width:960px){
  .pan-marco{ grid-template-columns:minmax(0,1fr) }
  .pan-barra{
    display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:60;
    min-height:60px; padding:8px 14px; background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid var(--pan-borde);
  }
  .pan-menu{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
    color:var(--tinta); background:var(--fondo) }
  .pan-menu .ms{ font-size:24px }
  .pan-menu:hover{ background:var(--pan-activo) }
  .pan-barra__marca .cin-logo img{ height:34px; width:auto }
  .pan-lateral{
    position:fixed; inset:0 auto 0 0; z-index:90; width:min(310px,86vw); height:100%;
    transform:translateX(-104%); visibility:hidden; box-shadow:var(--s4); border-radius:0 24px 24px 0;
    transition:transform .26s var(--sal), visibility 0s linear .26s;
    view-transition-name:none;
  }
  .pan--menu .pan-lateral, .pan-lateral:target{
    transform:none; visibility:visible; transition:transform .26s var(--sal), visibility 0s;
  }
  .pan-cerrar{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--suave) }
  .pan-cerrar .ms{ font-size:24px }
  .pan-cerrar:hover{ background:var(--pan-hover) }
  .pan-velo{ position:fixed; inset:0; z-index:85; background:rgba(27,20,32,.42) }
  .pan--menu .pan-velo, .pan-lateral:target ~ .pan-velo{ display:block }
  .pan-enlace{ min-height:46px }

  /* La barra inferior, flotante, como la de La Malteadería pero en blanco. */
  .pan-abajo{
    display:flex; position:fixed; z-index:70; left:10px; right:10px; max-width:520px; margin:0 auto;
    bottom:calc(10px + env(safe-area-inset-bottom)); height:66px; padding:6px 3px;
    justify-content:space-around; align-items:stretch; gap:2px;
    border-radius:24px; background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
    box-shadow:0 0 0 1px rgba(61,10,58,.08), 0 14px 34px -12px rgba(61,10,58,.35);
  }
  .pan-abajo .pan-enlace{
    flex:1 1 0; min-width:0; min-height:0; flex-direction:column; justify-content:center; gap:3px;
    padding:0; border-radius:18px; font-size:10.5px; letter-spacing:-.02em; font-weight:600; color:#5E5768;
    background:transparent; box-shadow:none;
  }
  .pan-abajo .pan-enlace span:not(.ms){ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .pan-abajo .pan-ico{ font-size:24px; width:56px; height:30px; display:grid; place-items:center;
    border-radius:999px; color:#5E5768; transition:background-color .2s var(--sal), transform .2s var(--pan-rebote) }
  .pan-abajo .pan-enlace:hover{ background:transparent }
  .pan-abajo .pan-enlace:active .pan-ico{ transform:scale(.9) }
  .pan-abajo .pan-enlace[aria-current], .pan-abajo .pan-abajo__mas[data-actual]{ color:var(--acento); font-weight:700; background:transparent }
  .pan-abajo .pan-enlace[aria-current] .pan-ico, .pan-abajo .pan-abajo__mas[data-actual] .pan-ico{
    background:var(--pan-activo); color:var(--acento);
    font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 }
  .pan--menu .pan-abajo{ visibility:hidden }
  /* El contenido y el pie no quedan debajo de la barra. */
  .pan-principal{ padding-bottom:calc(var(--pan-abajo) + env(safe-area-inset-bottom)) }
  .pan .guia-invita, .pan .guia-tarjeta--abajo{ bottom:calc(var(--pan-abajo) + 8px + env(safe-area-inset-bottom)) }
  .pan .neg-ir-pago{ bottom:calc(var(--pan-abajo) + 10px + env(safe-area-inset-bottom)) }
  .ini-accesos .pan-accesos{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:600px){
  .pan-lienzo{ padding:20px 16px 40px }
  .pan .app-titulo{ align-items:flex-start }
  .pan .app-titulo h1{ font-size:26px }
  .pan-cabeza__acciones{ width:100% }
  .pan-resumenes{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .pan-resumen{ padding:15px; row-gap:6px; column-gap:10px; border-radius:20px }
  .pan-resumen__ico{ width:36px; height:36px; border-radius:11px }
  .pan-resumen__ico .ms{ font-size:20px }
  .pan-resumen__e{ font-size:13px }
  .pan-resumen__v{ font-size:24px }
  .pan-resumen--marca{ grid-column:1 / -1 }
  .pan-resumen--marca .pan-resumen__v{ font-size:32px }
  .ini-accesos .pan-accesos, .pan-accesos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .pan-acceso{ min-height:116px; padding:14px; border-radius:18px }
  .pan-acceso__ico{ width:46px; height:46px; border-radius:14px }
  .pan-acceso__ico .ms{ font-size:25px }
  .pan-acceso__t b{ font-size:15px }
  .ini-heroe{ min-height:0; border-radius:24px }
  .ini-heroe__v{ font-size:60px }
  .ini-cadena{ max-width:none }
  .ini-pastilla{ width:100%; justify-content:space-between; border-radius:16px }
  .pan .app-filtros{ display:flex; width:100% }
  .pan .app-filtros a{ flex:1 0 auto; justify-content:center; padding:0 10px }
  .pan form.app-filtros{ flex-wrap:wrap }
  .pan-pestanas{ width:100% }
  .pan-tarjeta-cab .pan-segmento{ width:100% }
  .ent .app-caja{ padding:22px 18px; box-shadow:inset 0 0 0 1px var(--pan-borde) }
}

/* ── 20 · Aparición escalonada ────────────────────────────────────────────
   Las piezas del lienzo suben 8 px y aparecen en cascada, 40 ms entre una y
   otra: el tablero «se arma» en vez de saltar. Solo con el movimiento del
   sistema encendido y solo cuando el primer fotograma se pintó (cine-vivo):
   con la pestaña oculta todo se ve quieto y en su lugar. */
@media all{ /* movimiento siempre encendido: David trabaja con los efectos de Windows apagados */
  .cine-vivo .pan-lienzo > *, .cine-vivo .ini-cabeza > *,
  .cine-vivo .pan-resumenes > *, .cine-vivo .pan-accesos > *{
    animation:pan-aparece .5s var(--sal) both; animation-delay:calc(var(--i, 0) * 40ms) }
  .pan-lienzo > :nth-child(2), .pan-resumenes > :nth-child(2), .pan-accesos > :nth-child(2), .ini-cabeza > :nth-child(2){ --i:1 }
  .pan-lienzo > :nth-child(3), .pan-resumenes > :nth-child(3), .pan-accesos > :nth-child(3){ --i:2 }
  .pan-lienzo > :nth-child(4), .pan-resumenes > :nth-child(4), .pan-accesos > :nth-child(4){ --i:3 }
  .pan-lienzo > :nth-child(5), .pan-resumenes > :nth-child(5), .pan-accesos > :nth-child(5){ --i:4 }
  .pan-lienzo > :nth-child(n+6), .pan-resumenes > :nth-child(n+6), .pan-accesos > :nth-child(n+6){ --i:5 }
}
@keyframes pan-aparece{ from{ opacity:0; transform:translateY(8px) } }

/* ── 21 · Impresión ───────────────────────────────────────────────────────── */
@media print{
  .pan-lateral,.pan-barra,.pan-velo,.pan-pie,.pan-cajon,.pan-abajo{ display:none!important }
  .pan-marco{ display:block }
  .pan-lienzo{ max-width:none; padding:0 }
  .pan-resumen{ box-shadow:none; border:1px solid #BBB; break-inside:avoid }
  .pan-resumen--marca, .ini-heroe{ background:#fff; color:var(--tinta) }
}

/* Enviar recordatorio ahora (ficha del vencimiento) y atajos de fecha. */
.recordar { border-left: 4px solid var(--morado, #771571); }
.pan .recordar { border-left:0; box-shadow:inset 4px 0 0 var(--acento), var(--pan-anillo), var(--s1) }
.recordar__canales { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.recordar__canales li { padding-left: 22px; position: relative; }
.recordar__canales li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--morado, #771571); }
.atajos-fecha { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Navegación instantánea (publico/js/navegar.js): mientras llega la pantalla,
   una barra fina arriba y el centro atenuado. Solo si tarda más de 120 ms. */
.pan-cargando .pan-lienzo{ opacity:.55; transition:opacity .15s ease }
.pan-cargando body::before{ content:""; position:fixed; top:0; left:0; height:3px; width:100%; z-index:9999;
  background:linear-gradient(90deg,#771571,#A32B9C,#771571); background-size:200% 100%;
  animation:pan-barra 1s linear infinite }
@keyframes pan-barra{ to{ background-position:-200% 0 } }
.pan-lienzo.pan-entra{ animation:pan-entra .18s ease-out }
@keyframes pan-entra{ from{ opacity:.0; transform:translateY(4px) } to{ opacity:1; transform:none } }