/* =========================================================================
   DESPACHO · Informe anual
   -------------------------------------------------------------------------
   El portal se compone como un informe anual auditado en estilo tipográfico
   internacional: papel blanco, tinta casi negra, una sola familia (Public
   Sans) y una retícula. Las secciones abren con una regla de tinta de 2px;
   los renglones se separan con filetes de 1px. Nada de tarjetas ni sombras:
   la jerarquía la dan el tamaño, el peso y la posición.

   Marca blanca de dos papeles (lo imprime el servidor en el <head>):
     --acc   principal · estructura: acción primaria, enlaces, foco
     --cian  acento    · energía: reglas activas, indicadores, selección
   Los colores de estado NO dependen de la marca: un "vencido" se lee rojo
   aunque el despacho sea guinda o marino.
   ========================================================================= */

:root{
  /* --- marca (el servidor y marca.js la reescriben) --- */
  --acc:#9f2241; --acc-2:#7c1a33; --acc-3:#c14a66; --acc-ink:#72182f;
  --acc-soft:rgba(159,34,65,.10); --acc-tint:rgba(159,34,65,.05);
  --acc-on:#fff;
  --cian:var(--acc); --cian-2:var(--acc-2); --cian-soft:var(--acc-soft);
  --cian-tint:var(--acc-tint); --cian-ink:#fff;

  /* --- papel y tinta --- */
  --paper:#fff;
  --paper-2:#f4f4f2;          /* segunda capa: riel, campos de solo lectura */
  --paper-3:#e8e8e5;          /* presionado */
  --ink:#141414;
  --ink-2:#3b3b39;
  --muted:#65655f;            /* 5.8:1 sobre blanco, 5.3:1 sobre --paper-2 */
  --faint:#9b9b96;            /* sólo no-texto o deshabilitado */
  --rule:#141414;
  --line:#dddcd7;
  --line-2:#ededea;
  --line-ctl:#8a8a85;         /* borde de control: 3.4:1 */

  /* --- estados, separados de la marca --- */
  --bad:#b3261e;  --bad-bg:#fcecea;
  --warn:#8a5300; --warn-bg:#fcf2dd;
  --ok:#1d6b3c;   --ok-bg:#e7f2ea;

  /* --- tipografía: una familia, escala 1.2 --- */
  --f:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:17px;
  --t-lg:20px; --t-xl:26px; --t-2xl:34px; --t-3xl:44px;

  /* --- espacio (base 4) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  --gut:16px;

  /* --- forma: redondeada ---
     10px controles (botones, campos, pestañas, insignias), 14px bloques
     (avisos, zona de subida, ventanas, burbujas), 20px hojas inferiores.
     Marcadores de estado y avatares son círculos; barras con extremos redondos. */
  --r:10px; --r-sm:6px; --r-lg:14px; --r-hoja:20px; --r-full:999px;

  /* --- movimiento --- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:180ms;
  --sh-flota:0 18px 40px -12px rgba(20,20,20,.30),0 2px 6px rgba(20,20,20,.10);

  --side-w:248px;
  --page-w:1180px;            /* ancho de la hoja; crece en escritorio amplio */
  --aside-w:380px;            /* columna secundaria de .split */
  --top-h:56px;
  --tab-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
html.mini{--side-w:72px}
@media(min-width:600px){:root{--gut:24px}}
@media(min-width:900px){:root{--gut:40px;--top-h:68px}}
@media(min-width:1200px){:root{--gut:48px;--page-w:1520px}}

/* compatibilidad con nombres que aún usa algún script */
:root{--red:var(--bad);--rojo:var(--bad);--amber:var(--warn);--surface:var(--paper);
  --surface-2:var(--paper-2);--banda:var(--paper-2);--hair:var(--line);--e:var(--ease)}

/* =========================================================================
   BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 56px)}
body{
  font-family:var(--f);font-size:var(--t-base);line-height:1.55;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums;
  min-height:100dvh;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-weight:700;line-height:1.2;text-wrap:balance}
p{text-wrap:pretty}
b,strong{font-weight:650}
::selection{background:var(--cian-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.num{font-variant-numeric:tabular-nums lining-nums}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
input.sr:focus-visible + .btn{outline:2px solid var(--acc);outline-offset:2px}
.skip{position:fixed;left:8px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;
  border-radius:var(--r);text-decoration:none;font-weight:600}
.skip:focus{top:8px}
.ic{width:20px;height:20px;flex:none}
* {scrollbar-width:thin;scrollbar-color:#c4c4bf transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c4c4bf;border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* =========================================================================
   CARCASA · riel (escritorio) y barra inferior (teléfono)
   ========================================================================= */
.side{display:none}
.tabbar{display:none}

@media(min-width:900px){
  body{padding-left:var(--side-w)}
  .side{
    display:flex;flex-direction:column;
    position:fixed;left:0;top:0;bottom:0;z-index:40;width:var(--side-w);
    background:var(--paper-2);border-right:1px solid var(--line);
  }
}
.side-marca{display:flex;align-items:center;gap:var(--s3);min-height:var(--top-h);
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.mk{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r);
  background:var(--acc);color:var(--acc-on);font-size:13px;font-weight:800;letter-spacing:-.02em;overflow:hidden}
/* Con logotipo el cuadro es blanco y se ajusta al ancho del logo, completo. */
.mk:has(img){display:flex;align-items:center;justify-content:center;width:auto;min-width:32px;max-width:112px;
  background:#fff;padding:2px 4px;box-shadow:inset 0 0 0 1px var(--line)}
.mk img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.side-marca .mk:has(img){height:44px;max-width:120px}
.side-t{min-width:0;display:grid}
.side-t b{font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-t span{font-size:var(--t-xs);color:var(--muted);line-height:1.3;overflow-wrap:break-word}
.side-nav{flex:1;overflow-y:auto;padding:var(--s3) var(--s3) var(--s4)}
.side-grp{font-size:var(--t-xs);font-weight:600;color:var(--muted);padding:var(--s5) var(--s3) var(--s2)}
.side-grp:first-child{padding-top:var(--s2)}
.side-it{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:40px;
  padding:0 var(--s3);border-radius:var(--r);color:var(--ink-2);text-decoration:none;
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.side-it .ic{color:var(--muted)}
.side-it:hover{background:var(--paper-3);color:var(--ink);text-decoration:none}
.side-it.on{background:var(--paper);color:var(--ink);font-weight:650;box-shadow:inset 0 0 0 1px var(--line)}
.side-it.on .ic{color:var(--acc)}
.side-it.on::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--cian);border-radius:50%}
.side-it .lb{min-width:0;overflow:hidden;text-overflow:ellipsis}
.side-pie{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.av{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700}
.side-quien{flex:1;min-width:0;display:grid;line-height:1.3}
.side-quien b{font-size:13px;font-weight:600;line-height:1.25}
.side-quien span{font-size:var(--t-xs);color:var(--muted);line-height:1.3}
.demo-tag{font-size:11px;font-weight:700;color:var(--acc);letter-spacing:.02em}
.btn-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r);
  background:transparent;color:var(--ink-2);text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn-ic:hover{background:var(--paper-3);color:var(--ink)}
.side-fold{position:absolute;top:calc(var(--top-h) - 14px);right:-14px;z-index:2;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--muted);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.side-fold:hover{color:var(--ink);border-color:var(--line-ctl)}
.side-fold .ic{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
html.mini .side-fold .ic{transform:rotate(180deg)}

/* plegado: sólo iconos, con el nombre al pasar */
html.mini .side-marca{justify-content:center;padding:var(--s3) 0}
html.mini .side-t,html.mini .side-grp,html.mini .side-quien,html.mini .side-it .lb,
html.mini .side-it.on::after{display:none}
html.mini .side-nav{padding:var(--s3) 12px}
html.mini .side-it{justify-content:center;padding:0}
html.mini .side-it::before{
  content:attr(data-lb);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;padding:6px 10px;border-radius:var(--r-sm);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);z-index:5}
html.mini .side-it:hover::before,html.mini .side-it:focus-visible::before{opacity:1}
html.mini .side-it + .side-grp{display:block;font-size:0;padding:0;height:1px;background:var(--line);margin:var(--s3) 8px}
html.mini .side-pie{flex-direction:column;padding:var(--s3) 0}
html.mini .side-marca .mk:has(img){max-width:48px}

/* --- barra inferior: teléfono y tableta --- */
@media(max-width:899.98px){
  body{padding-bottom:calc(var(--tab-h) + var(--safe-b))}
  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);
    background:var(--paper);border-top:1px solid var(--line);
  }
}
.tb-it{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;color:var(--muted);text-decoration:none;
  font-size:11.5px;font-weight:600;line-height:1.1;padding:6px 2px;min-width:0}
.tb-it span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-it .ic{width:22px;height:22px}
.tb-it:hover{text-decoration:none;color:var(--ink)}
.tb-it:active{background:var(--paper-2)}
.tb-it.on{color:var(--acc)}
.tb-it.on::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;background:var(--cian);border-radius:0 0 3px 3px}

/* =========================================================================
   BARRA SUPERIOR (cada pantalla)
   ========================================================================= */
.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:var(--s3);
  min-height:calc(var(--top-h) + var(--safe-t));padding:var(--safe-t) var(--gut) 0;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.top-mk{flex:none;display:flex}
.top-mk .mk{width:30px;height:30px;font-size:12px}
.top-mk .mk:has(img){width:auto;height:36px;max-width:96px}
.top-t{flex:1;min-width:0}
.top-t h1{font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-t p{display:none;font-size:var(--t-sm);color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-acts{flex:none;display:flex;align-items:center;gap:var(--s2)}
.top-cuenta{border:0;padding:0;background:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-6px}
.top-cuenta .av{width:32px;height:32px}
@media(min-width:900px){
  .top-mk,.top-cuenta{display:none}
  .top-t p{display:block}
}

/* buscar: en la barra de cada pantalla; Ctrl+K lo abre desde cualquier lado */
.top-buscar{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s2);border:0;background:none;
  color:var(--ink-2);font:inherit;font-size:var(--t-sm);cursor:pointer;border-radius:var(--r)}
.top-buscar .ic{width:22px;height:22px}
.top-buscar .lb,.top-buscar kbd{display:none}
.top-buscar:hover{background:var(--paper-2);color:var(--ink)}
.top-buscar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
kbd{font:inherit;font-size:11px;font-weight:600;color:var(--muted);padding:1px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
@media(min-width:900px){
  .top-buscar{min-width:260px;justify-content:flex-start;padding:0 var(--s2) 0 var(--s3);min-height:38px;
    border:1px solid var(--line-ctl);background:var(--paper);color:var(--muted)}
  .top-buscar .ic{width:18px;height:18px}
  .top-buscar .lb{display:inline;flex:1;text-align:left}
  .top-buscar kbd{display:inline}
}
dialog.dlg.busca{width:min(640px,calc(100vw - 32px));max-height:min(72dvh,640px);margin:12vh auto auto}
.busca-cab{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.busca-cab .ic{width:20px;height:20px;color:var(--muted);flex:none}
.busca-cab input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;color:var(--ink);min-height:40px}
.busca-cab input::-webkit-search-cancel-button{display:none}
.busca-res{overflow:auto;padding:var(--s2) var(--s2) var(--s3);flex:1}
.busca-g{font-size:var(--t-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:var(--s3) var(--s3) var(--s1)}
.busca-it{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r);color:var(--ink);text-decoration:none;min-height:48px}
.busca-it .ic{width:18px;height:18px;color:var(--muted);flex:none}
.busca-it b{display:block;font-weight:600;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-it span span{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-it > span{min-width:0;flex:1}
.busca-it[aria-selected="true"]{background:var(--acc-tint)}
.busca-it[aria-selected="true"] .ic{color:var(--acc)}
.busca-mas{font-size:var(--t-xs);color:var(--muted);padding:2px var(--s3) var(--s2)}
.busca-nada{padding:var(--s5) var(--s3);color:var(--ink-2);font-size:14px;line-height:1.55}
.busca-pie{padding:var(--s2) var(--s4);border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--muted)}
@media(max-width:699.98px){
  dialog.dlg.busca{width:100vw;max-width:100vw;max-height:88dvh;margin:0 0 auto;border-radius:0 0 var(--r-hoja) var(--r-hoja);
    padding-top:var(--safe-t);padding-bottom:0}
  dialog.dlg.busca[open]{animation:aparece 200ms var(--ease)}
  .busca-pie{display:none}
}

/* selector de empresa: para el dueño con varias */
.emp{display:flex;align-items:center;gap:var(--s2);min-width:0}
.emp > span{font-size:var(--t-sm);color:var(--muted);font-weight:500}
.emp select{max-width:44vw;height:36px;font-size:14px;font-weight:600}
@media(max-width:599.98px){.emp > span{display:none}.top:has(.emp) .top-mk{display:none}}
@media(min-width:900px){.emp select{max-width:260px}}

/* =========================================================================
   PÁGINA
   ========================================================================= */
main,.page{display:block}
.page{max-width:var(--page-w);margin:0 auto;padding:var(--s6) var(--gut) var(--s9)}
.page.estrecha{max-width:820px}
.ph{margin-bottom:var(--s7)}
.ph-t{font-size:var(--t-xl);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.ph-p{font-size:var(--t-base);color:var(--ink-2);margin-top:var(--s3);max-width:62ch}
.ph-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
@media(min-width:900px){
  .page{padding-top:var(--s7)}
  .ph-t{font-size:30px;letter-spacing:-.025em}
  .ph-p{margin-top:var(--s2)}
}
/* En escritorio el encabezado es un renglón: título y explicación a la
   izquierda, las acciones de la pantalla a la derecha, a la altura del texto. */
@media(min-width:1100px){
  .ph{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s8);align-items:end}
  .ph > *{grid-column:1}
  .ph > .ph-acts{grid-column:2;grid-row:1 / span 2;margin-top:0;justify-content:flex-end;align-self:end}
}

.ph + .split > :first-child{margin-top:0}
/* Dos columnas en escritorio: el trabajo principal a la izquierda y lo que lo
   acompaña (alta, vista previa, plantillas) en una columna fija a la derecha.
   En teléfono todo va en una sola columna y en el orden del documento. */
@media(min-width:1200px){
  .split{display:grid;grid-template-columns:minmax(0,1fr) var(--aside-w);grid-template-rows:auto auto auto auto 1fr;
    column-gap:var(--s9);align-items:start}
  .split > *{grid-column:1;min-width:0}
  .split > .aside{grid-column:2;grid-row:1 / -1}
  .split > :first-child,.split > .aside,.split > .aside:first-child + *,.aside > :first-child{margin-top:0}
}

/* Sección: abre con la regla de tinta */
.sec{margin-top:var(--s8);border-top:2px solid var(--rule);padding-top:var(--s3)}
.sec:first-child,.ph + .sec{margin-top:0}
.sec-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-bottom:var(--s4)}
.sec-h h3{font-size:var(--t-md);font-weight:700;letter-spacing:-.01em;flex:1 1 auto}
.sec-h .aux{font-size:var(--t-sm);color:var(--muted)}
.sec-p{font-size:14px;color:var(--ink-2);max-width:66ch;margin:-4px 0 var(--s4)}
.duo{display:grid;gap:0 var(--s8)}
.duo > .sec:first-child{margin-top:0}
.ph + .duo,.figs + .duo{margin-top:0}
@media(min-width:1280px){.duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--s9)}.duo > .sec{margin-top:0}
  .duo + .sec,.duo + .duo{margin-top:var(--s8)}}
.fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.fila.sep{margin-top:var(--s5)}
.meta{font-size:var(--t-sm);color:var(--muted)}
.pie{font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:72ch;margin-top:var(--s5)}
.pie b{color:var(--ink-2)}

/* =========================================================================
   CIFRAS CLAVE · renglón de cifras con filetes, sin cajas
   ========================================================================= */
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 var(--s7);border-top:1px solid var(--line)}
.fig{min-width:0;padding:var(--s3) var(--s3) var(--s4) 0;border-bottom:1px solid var(--line)}
.fig:nth-child(2n){padding-left:var(--s4);border-left:1px solid var(--line)}
.fig dt,.fig .l{font-size:var(--t-sm);color:var(--muted);font-weight:500}
.fig dd,.fig .v{font-size:clamp(19px,5.6vw,26px);font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-top:var(--s1);
  white-space:nowrap}
.fig .s{font-size:var(--t-sm);color:var(--muted);margin-top:2px;font-weight:400;letter-spacing:0;line-height:1.35;white-space:normal}
.fig .v.bad,.fig dd.bad{color:var(--bad)}
.fig .v.warn,.fig dd.warn{color:var(--warn)}
.fig .v.ok,.fig dd.ok{color:var(--ok)}
.figs.impar .fig:last-child{grid-column:1/-1;border-left:0;padding-left:0}
@media(min-width:760px){
  .figs{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-bottom:1px solid var(--line)}
  .fig,.fig:nth-child(2n){padding:var(--s3) var(--s4) var(--s4);border-bottom:0;border-left:1px solid var(--line)}
  .fig:first-child{border-left:0;padding-left:0}
  .figs.impar .fig:last-child{grid-column:auto;border-left:1px solid var(--line);padding-left:var(--s4)}
  .fig dd,.fig .v{font-size:28px}
}

/* Estado de cuenta: renglones clave-valor y un total que se deriva a la vista */
.edo{display:grid}
.edo .r{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:10px 0;border-bottom:1px solid var(--line-2);font-size:var(--t-base)}
.edo .r .k{color:var(--ink-2)}
.edo .r .k small{color:var(--muted);font-size:var(--t-sm)}
.edo .r .v{font-weight:550;white-space:nowrap}
.edo .r.tot{border-top:2px solid var(--rule);border-bottom:3px double var(--rule);margin-top:-1px;padding:var(--s3) 0}
.edo .r.tot .k{color:var(--ink);font-weight:700}
.edo .r.tot .v{font-size:var(--t-lg);font-weight:800}
.edo .r .v.ok{color:var(--ok)}

/* Titular: la cifra que manda en la pantalla (una por pantalla) */
.titular{margin-bottom:var(--s7)}
.titular .l{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.titular .v{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:var(--s2)}
.titular .d{font-size:14px;color:var(--ink-2);margin-top:var(--s2)}
.titular .d b{font-weight:650;color:var(--ink)}
.titular .m{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s1)}
@media(min-width:900px){.titular .v{font-size:var(--t-3xl)}}

/* =========================================================================
   ESTADOS COMO PALABRAS
   ========================================================================= */
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:650;color:var(--muted);white-space:nowrap}
.st::before{content:"";width:8px;height:8px;background:currentColor;flex:none;border-radius:50%}
.st.bad{color:var(--bad)} .st.warn{color:var(--warn)} .st.ok{color:var(--ok)}
.st.acc{color:var(--acc)} .st.neutro{color:var(--ink-2)}
.st.hueco::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.li-main span.st,.li-main .st{display:inline-flex}

/* Nota / aviso: campo tinteado, palabra de estado al frente */
.aviso{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);margin-bottom:var(--s4);
  background:var(--paper-2);border-radius:var(--r-lg);font-size:14px;line-height:1.5;color:var(--ink-2);max-width:78ch}
.aviso .ic{width:18px;height:18px;margin-top:2px;color:var(--ink-2)}
.aviso b{color:var(--ink);font-weight:650}
.aviso.warn{background:var(--warn-bg)} .aviso.warn .ic,.aviso.warn b:first-child{color:var(--warn)}
.aviso.bad{background:var(--bad-bg)} .aviso.bad .ic,.aviso.bad b:first-child{color:var(--bad)}
.aviso.ok{background:var(--ok-bg)} .aviso.ok .ic,.aviso.ok b:first-child{color:var(--ok)}
.aviso.acc{background:var(--acc-tint)} .aviso.acc .ic{color:var(--acc)}

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:40px;padding:0 var(--s4);border-radius:var(--r);
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font-size:14px;font-weight:600;line-height:1.15;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn .ic{width:18px;height:18px}
.btn:hover{background:var(--paper-2);text-decoration:none}
.btn:active{background:var(--paper-3)}
.btn.acc{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
.btn.acc:hover{background:var(--acc-2);border-color:var(--acc-2)}
.btn.acc:active{background:var(--acc-ink)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--acc);padding:0 var(--s2)}
.btn.ghost:hover{background:var(--acc-tint)}
.btn.danger,.btn.no{border-color:var(--bad);color:var(--bad)}
.btn.danger:hover,.btn.no:hover{background:var(--bad-bg)}
.btn.ok{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
.btn.ok:hover{background:var(--acc-2)}
.btn.sm{min-height:32px;padding:0 var(--s3);font-size:13px}
.btn.full{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn.busy{cursor:progress}
@media(pointer:coarse){.btn{min-height:44px}.btn.sm{min-height:40px}}
.enlace{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--acc);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.enlace:hover{text-decoration-thickness:2px}
@media(pointer:coarse){.enlace{min-height:32px}}

/* =========================================================================
   CAMPOS
   ========================================================================= */
.fld{display:grid;align-content:start;gap:6px;margin-bottom:var(--s4);min-width:0}
.fld > label,.fld > .lbl,.lbl{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.fld .ayuda{font-size:var(--t-sm);color:var(--muted);line-height:1.45}
.ctl,.fld input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),
.fld select,.fld textarea{
  width:100%;min-height:44px;padding:0 var(--s3);
  font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-ctl);border-radius:var(--r);outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.fld textarea,textarea.ctl{padding:10px var(--s3);min-height:88px;line-height:1.5;resize:vertical}
select.ctl,.fld select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center}
.ctl:hover,.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--ink-2)}
.ctl:focus,.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.ctl::placeholder,.fld input::placeholder,.fld textarea::placeholder{color:var(--muted)}
.ctl:disabled,.fld input:disabled,.fld select:disabled{background:var(--paper-2);color:var(--muted);cursor:not-allowed}
input,textarea{caret-color:var(--acc)}
input[type=file]{font-size:14px;max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13px;margin-right:12px;
  padding:8px 12px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--acc);width:18px;height:18px;flex:none}
input[type=color]{width:56px;height:44px;padding:3px;border:1px solid var(--line-ctl);border-radius:var(--r);background:var(--paper);cursor:pointer}
.rejilla{display:grid;gap:0 var(--s4);grid-template-columns:1fr}
@media(min-width:600px){.rejilla{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.upper input{text-transform:uppercase}

/* Opción marcable (casillas en lista) */
.opcion{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.opcion:first-child{border-top:1px solid var(--line-2)}
.opcion input{margin-top:2px}
.opcion b{display:block;font-size:14px;font-weight:600}
.opcion span{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.45}
.opcion:has(input:checked) b{color:var(--acc)}

/* Conmutador segmentado: opciones pocas, todas visibles */
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:var(--r);overflow:hidden;max-width:100%}
.seg button,.seg label{flex:1;min-height:36px;padding:0 var(--s3);border:0;border-left:1px solid var(--ink);
  background:var(--paper);font-size:13px;font-weight:600;white-space:nowrap;display:grid;place-items:center;cursor:pointer}
.seg > :first-child{border-left:0}
.seg [aria-pressed="true"],.seg input:checked + span{background:var(--ink);color:#fff}
@media(pointer:coarse){.seg button{min-height:40px}}

/* Interruptor con su estado impreso */
.sw{display:inline-flex;align-items:center;gap:var(--s2);border:0;background:none;padding:4px 0;min-height:44px;
  font-size:var(--t-sm);font-weight:650;color:var(--muted)}
.sw .track{position:relative;width:40px;height:24px;border-radius:12px;background:var(--line-ctl);transition:background-color var(--dur) var(--ease)}
.sw .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--dur) var(--ease)}
.sw[aria-checked="true"],.sw.on{color:var(--ok)}
.sw[aria-checked="true"] .track,.sw.on .track{background:var(--ok)}
.sw[aria-checked="true"] .knob,.sw.on .knob{transform:translateX(16px)}

/* Zona de subida */
.drop{display:flex;align-items:center;gap:var(--s4);width:100%;padding:var(--s5);
  border:1px dashed var(--line-ctl);border-radius:var(--r-lg);background:var(--paper);text-align:left;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.drop:hover{border-color:var(--ink);background:var(--paper-2)}
.drop.hot{border-style:solid;border-color:var(--acc);background:var(--acc-tint)}
.drop .ic{width:28px;height:28px;color:var(--acc)}
.drop b{display:block;font-size:var(--t-base);font-weight:650}
.drop span{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.drop .sel{color:var(--ok);font-weight:600}
.drop input{display:none}
.solo-tactil{display:none !important}
@media(pointer:coarse){.solo-tactil{display:inline !important}.solo-raton{display:none !important}}

/* =========================================================================
   PESTAÑAS
   ========================================================================= */
.tabs-bar{position:sticky;top:calc(var(--top-h) + var(--safe-t));z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:var(--s5);max-width:var(--page-w);margin:0 auto;padding:0 var(--gut);
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:6px;min-height:48px;padding:0;
  border:0;background:none;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;
  transition:color var(--dur) var(--ease)}
.tab:last-child{margin-right:28px}
.tab:hover{color:var(--ink)}
.tab.on,.tab[aria-selected="true"]{color:var(--ink)}
.tab.on::after,.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--cian);border-radius:3px 3px 0 0}
.tab .cnt{font-weight:700;color:var(--acc)}
.tab .cnt:empty{display:none}
/* En teléfono las pestañas se acomodan en renglones: todas quedan a la vista,
   ninguna escondida tras un desplazamiento lateral sin aviso. */
@media(max-width:699.98px){
  .tabs-bar{position:static}
  .tabs{flex-wrap:wrap;gap:0 var(--s5);overflow:visible;-webkit-mask-image:none;mask-image:none}
  .tab{min-height:44px}
  .tab:last-child{margin-right:0}
}
.view{display:none}
.view.on{display:block}

/* =========================================================================
   LISTAS CON FILETES
   ========================================================================= */
.lista{border-top:1px solid var(--line)}
.li{display:flex;align-items:flex-start;gap:var(--s3) var(--s4);flex-wrap:wrap;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.li-main{flex:1 1 220px;min-width:0}
.li-main b,.li-t{display:block;font-size:var(--t-base);font-weight:650;line-height:1.35;overflow-wrap:break-word}
.li-main span,.li-s{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:2px;line-height:1.45}
.li-aux{flex:none;text-align:right;display:grid;justify-items:end;gap:2px}
.li-aux .n{font-weight:650;font-size:var(--t-base);white-space:nowrap}
.li-acts{display:flex;flex-wrap:wrap;gap:var(--s2);flex-basis:100%}
@media(min-width:760px){.li-acts{flex-basis:auto;margin-left:auto}}
.li.apagado{opacity:.55}
.li.boton{width:100%;border-left:0;border-right:0;border-top:0;background:none;text-align:left;cursor:pointer;
  transition:background-color var(--dur) var(--ease)}
.li.boton:hover{background:var(--paper-2)}
.li.act{background:var(--acc-tint)}
.tipo{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-ctl);border-radius:var(--r);
  font-size:11px;font-weight:750;color:var(--ink-2);letter-spacing:.02em;background:var(--paper)}

/* Barra de magnitud: cuadrada, sin adorno */
.meter{display:block;height:6px;background:var(--line-2);overflow:hidden;min-width:60px;border-radius:var(--r-full)}
.meter > i{display:block;height:100%;background:var(--ink-2);border-radius:inherit}
.meter > i.bad{background:var(--bad)} .meter > i.warn{background:var(--warn)} .meter > i.ok{background:var(--ok)}
.meter > i.acc{background:var(--acc)}

/* =========================================================================
   TABLAS · la hoja de datos
   ========================================================================= */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
table{border-collapse:collapse;width:100%;font-size:14px}
thead th{font-size:var(--t-xs);font-weight:650;color:var(--ink-2);text-align:left;vertical-align:bottom;
  padding:0 var(--s4) var(--s2) 0;border-bottom:2px solid var(--rule);white-space:nowrap}
tbody td{padding:10px var(--s4) 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
tbody tr:hover{background:var(--paper-2)}
td.num,th.num,.tbl .n{text-align:right;white-space:nowrap}
td.num{font-weight:500}
/* total: regla sencilla arriba, doble abajo, como en un estado financiero */
tfoot td{padding:var(--s3) var(--s4) var(--s3) 0;font-weight:750;border-top:2px solid var(--rule);border-bottom:3px double var(--rule)}
tfoot td:last-child{padding-right:0}
/* primera columna fija en tablas anchas */
.tabla-fija td:first-child,.tabla-fija th:first-child{position:sticky;left:calc(-1 * var(--gut));background:var(--paper);z-index:1;
  box-shadow:1px 0 0 var(--line)}
.tabla-fija tbody tr:hover td:first-child{background:var(--paper-2)}
/* Tabla apilada: en teléfono cada renglón se vuelve un bloque con rótulos */
@media(max-width:699.98px){
  table.apila,table.apila tbody,table.apila tr,table.apila td{display:block;width:100%}
  table.apila thead{display:none}
  table.apila tr{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  table.apila tbody td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:var(--s4);text-align:right}
  table.apila tbody td::before{content:attr(data-l);font-size:var(--t-sm);color:var(--muted);text-align:left;font-weight:500}
  table.apila tbody td.cab{display:block;text-align:left;font-weight:650;padding-bottom:6px}
  table.apila tbody td.cab::before{display:none}
  table.apila tbody td.largo{display:block;text-align:left}
  table.apila tbody td.largo::before{display:block;margin-bottom:2px}
  table.apila td,table.apila th{position:static !important;box-shadow:none !important}
  table.apila tfoot,table.apila tfoot tr{display:block}
  table.apila tfoot td{display:flex;justify-content:space-between;border:0;padding:3px 0}
  table.apila tfoot tr{border-top:2px solid var(--rule);padding-top:var(--s2)}
  table.apila tfoot td::before{content:attr(data-l);font-weight:500;color:var(--muted);font-size:var(--t-sm)}
  table.apila tfoot td:empty{display:none}
}

/* =========================================================================
   RETROALIMENTACIÓN · carga, vacío, fallo, aviso breve
   ========================================================================= */
.skel{display:grid;gap:10px;padding:var(--s4) 0}
.skel i{display:block;height:14px;background:var(--line-2);border-radius:var(--r-sm);animation:pulso 1.4s ease-in-out infinite}
.skel i:nth-child(1){width:38%;height:22px}
.skel i:nth-child(2){width:92%} .skel i:nth-child(3){width:76%} .skel i:nth-child(4){width:84%}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.45}}
.spin{display:inline-block;width:16px;height:16px;flex:none;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.vacio{padding:var(--s6) 0 var(--s7);max-width:56ch}
.vacio b,.vacio h4{display:block;font-size:var(--t-md);font-weight:700;margin-bottom:var(--s2)}
.vacio p{font-size:14px;color:var(--ink-2);line-height:1.55}
.vacio .fila{margin-top:var(--s4)}
.vacio.fallo b{color:var(--bad)}

.toast{position:fixed;left:50%;bottom:calc(var(--s5) + var(--safe-b));z-index:90;transform:translate(-50%,16px);
  max-width:min(92vw,520px);padding:12px var(--s4);border-radius:var(--r-lg);
  background:var(--ink);color:#fff;font-size:14px;font-weight:500;line-height:1.4;box-shadow:var(--sh-flota);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease),transform 240ms var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad)}
@media(max-width:899.98px){.toast{bottom:calc(var(--tab-h) + var(--safe-b) + var(--s3))}}

/* =========================================================================
   DIÁLOGOS · hoja inferior en teléfono, caja al centro en escritorio
   ========================================================================= */
dialog.dlg{
  margin:auto;               /* el reinicio "*{margin:0}" le quitaba el centrado */
  padding:0;border:0;color:var(--ink);background:var(--paper);
  width:min(480px,calc(100vw - 32px));max-height:min(86dvh,760px);
  border-radius:var(--r-lg);box-shadow:var(--sh-flota);overflow:hidden;
}
dialog.dlg.ancho{width:min(920px,calc(100vw - 48px))}
dialog.dlg[open]{display:flex;flex-direction:column;animation:aparece 200ms var(--ease)}
dialog.dlg::backdrop{background:rgba(20,20,20,.42);animation:fondo 200ms var(--ease)}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fondo{from{opacity:0}to{opacity:1}}
.dlg-cab{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.dlg-cab h2{flex:1;font-size:var(--t-md);font-weight:700;min-width:0}
.dlg-cpo{padding:var(--s5);overflow:auto;flex:1;font-size:var(--t-base);line-height:1.55}
.dlg-cpo > p{color:var(--ink-2)}
.dlg-cpo .fld:last-child{margin-bottom:0}
.dlg-pie{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s5) var(--s4);border-top:1px solid var(--line)}
@media(max-width:699.98px){
  dialog.dlg,dialog.dlg.ancho{width:100vw;max-width:100vw;max-height:90dvh;margin:auto 0 0;
    border-radius:var(--r-hoja) var(--r-hoja) 0 0;padding-bottom:var(--safe-b)}
  dialog.dlg[open]{animation:sube 260ms var(--ease)}
  .dlg-pie{flex-direction:column-reverse}
  .dlg-pie .btn{width:100%}
  .dlg-cab::before{content:"";position:absolute;left:50%;top:6px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line)}
  .dlg-cab{position:relative;padding-top:var(--s4)}
}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}

/* Menú de navegación en hoja (Más / Cuenta) */
.hoja-nav{display:grid}
.hoja-nav .side-grp{padding:var(--s4) 0 var(--s2)}
.hoja-nav .side-grp:first-child{padding-top:0}
.hoja-it{display:flex;align-items:center;gap:var(--s3);min-height:52px;border-bottom:1px solid var(--line-2);
  color:var(--ink);text-decoration:none;font-size:var(--t-base);font-weight:550}
.hoja-it .ic{color:var(--muted)}
.hoja-it:hover{text-decoration:none;background:var(--paper-2)}
.hoja-it.on{color:var(--acc);font-weight:700}
.hoja-it.on .ic{color:var(--acc)}
.cuenta-cab{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s4);margin-bottom:var(--s2);border-bottom:1px solid var(--line)}
.cuenta-cab .av{width:44px;height:44px;font-size:15px}
.cuenta-cab b{display:block;font-size:var(--t-md)}
.cuenta-cab div > span{display:block;font-size:var(--t-sm);color:var(--muted)}
.cuenta-cab div > .demo-tag{color:var(--acc);font-weight:700;margin-top:2px}

/* =========================================================================
   BARRA DE GRABACIÓN
   ========================================================================= */
#recbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--s5) + var(--safe-b));z-index:80;
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);width:min(720px,calc(100vw - 24px));
  padding:var(--s3) var(--s3) var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--ink);color:#fff;box-shadow:var(--sh-flota)}
@media(min-width:900px){#recbar{left:calc(50% + var(--side-w) / 2)}}
@media(max-width:899.98px){#recbar{bottom:calc(var(--tab-h) + var(--safe-b) + var(--s3))}}
#recbar .dot{width:10px;height:10px;border-radius:50%;background:#ff4d42;flex:none}
#recbar .rb-txt{flex:1 1 200px;min-width:0;display:grid}
#recbar .rb-txt b{font-size:14px;font-weight:650}
#recbar .rb-txt span{font-size:var(--t-sm);color:#d6d6d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#recbar .btn{min-height:40px;border-color:#fff;background:transparent;color:#fff}
#recbar .btn:hover{background:rgba(255,255,255,.12)}
#recbar .btn.acc{background:#fff;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Movimiento (ui.js): las barras crecen desde la izquierda al aparecer. */
.meter i{transform-origin:left center;transition:transform .8s var(--ease)}
.meter i.crece{transform:scaleX(0)}
@media(prefers-reduced-motion:reduce){.meter i{transition:none}.meter i.crece{transform:none}}