/* AdmiNaz — sistema «planilla de control» (15-oct-26; reemplaza «Stripe sobrio» del 09-oct).
   Planilla densa + menú en tinta + un solo acento cobalto. Verde/rojo/ámbar solo con significado.
   Color SOLO vía variables. Reglas: .interface-design/system.md · referencias y decisiones: docs/DESIGN.md */
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  /* superficies: página gris papel; planillas, tarjetas y campos en blanco (--bg) */
  --page:#f3f3f0;--bg:#fff;--sub:#f8f8f6;--head:#efefeb;--hover:#efefeb;--borde:#e2e1dc;--borde-f:#cbc9c2;
  /* texto */
  --ink:#14171f;--txt:#14171f;--muted:#5d616b;--faint:#6b6f79;--zero:#77787d;
  /* acento único: cobalto */
  --azul:#2340c9;--azul-h:#1a33a8;--acc-l:#eef1fd;--acc-s:#dfe5fb;--acc-b:#b8c4f3;
  /* semánticos: palabra sobre pastel */
  --verde:#1b6e45;--verde-l:#dcf2e4;--verde-b:#a9d8bb;
  --rojo:#a8261c;--rojo-l:#fde0dc;--rojo-b:#f2b8b1;
  --ambar:#7a4a00;--ambar-l:#fbebc4;--ambar-b:#ecd08a;
  --info:#1f4f9a;--info-l:#dde9fb;
  /* color de cada cuenta en el cobro (fondo -l, borde -b; config.COLORES_MEDIO, Javi 26-oct-26) */
  --mc-verde-l:#d9f3e2;--mc-verde-b:#2e9a5c;--mc-rosa-l:#fde1ee;--mc-rosa-b:#e0559a;
  --mc-amarillo-l:#fff3b8;--mc-amarillo-b:#d9a900;--mc-celeste-l:#d8f0fc;--mc-celeste-b:#2a9fd6;
  --mc-naranja-l:#ffe3c7;--mc-naranja-b:#ee8320;--mc-lila-l:#ece2fb;--mc-lila-b:#9b74d6;--mc-payway-b:#6b2fa0;
  --mc-negro-l:#1d2026;--mc-negro-b:#000;
  /* menú en tinta */
  --s-bg:#14171f;--s-txt:#c9ccd4;--s-mut:#8a8f9b;--s-hover:#1d212b;--s-on:#232835;--s-linea:#262a35;--s-raya:#7d92ff;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --matrix:#00ff41;--matrix-g:rgba(0,255,65,.45);   /* «ver como» activo: borde de toda la página */
  --sombra:0 1px 2px rgba(20,23,31,.04);--sombra-l:0 12px 24px -8px rgba(20,23,31,.16);
  --r1:4px;--r2:6px;--r3:8px;--side-w:232px;--top-h:46px;
  /* alias de nombres viejos (módulos que todavía los usan) */
  --tit:var(--ink);--fondo:var(--bg);--gris:var(--faint);--naranja:var(--ambar);--chip:var(--acc-s);--top:var(--bg);--side:var(--sub);
  color-scheme:light;accent-color:var(--azul)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
[id]{scroll-margin-top:calc(var(--top-h) + 10px)}  /* un link a #ancla no queda tapado por la barra fija de arriba */
body{font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--txt);font-variant-numeric:tabular-nums;
  background:var(--page);-webkit-font-smoothing:antialiased}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-h)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--acc-b);outline-offset:1px}

/* ---------- armazón: sidebar fija + contenido que scrollea ---------- */
.side{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);background:var(--s-bg);color:var(--s-txt);
  z-index:30;display:flex;flex-direction:column}
.side .marca{display:flex;align-items:center;gap:10px;height:var(--top-h);padding:0 14px;border-bottom:1px solid var(--s-linea);flex:none}
.side .iso{width:28px;height:28px;border-radius:var(--r2);background:var(--azul);color:#fff;display:flex;align-items:center;
  justify-content:center;font:500 13px var(--mono);flex:none}
.side .marca b{display:block;color:#fff;font-size:13px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .marca small{display:block;color:var(--s-mut);font:12px var(--mono);line-height:1.2}
.side .nav{flex:1;overflow-y:auto;padding:10px 8px}
.side .cat,.side summary{position:relative;display:flex;align-items:center;gap:9px;height:30px;padding:0 8px;border-radius:var(--r2);color:var(--s-txt);
  font-weight:500;cursor:pointer;list-style:none;user-select:none}
.side summary::-webkit-details-marker{display:none}
.side summary::after{content:"";margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--s-mut);border-bottom:1.5px solid var(--s-mut);
  transform:rotate(-45deg);transition:transform .15s}
.side details[open]>summary::after{transform:rotate(45deg)}
.side .cat:hover,.side summary:hover{background:var(--s-hover);color:#fff}
.side .cat.on{background:var(--s-on);color:#fff}
.side summary.on{color:#fff;font-weight:600}
.side svg{width:16px;height:16px;flex:none;color:var(--s-mut)}
.side .on svg{color:var(--s-raya)}
/* activo = raya cobalto a la izquierda (Lightning) */
.side .cat.on::before,.side .items a.on::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:2px;background:var(--s-raya)}
.side .items{padding:2px 0 6px 25px}
.side .items a{position:relative;display:flex;align-items:center;height:27px;padding:0 8px 0 10px;border-radius:var(--r2);color:#a4a8b2;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .items a:hover{background:var(--s-hover);color:#fff}
.side .items a.on{background:var(--s-on);color:#fff;font-weight:500}
.side .side-pie{border-top:1px solid var(--s-linea);padding:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;flex:none}
.side .side-pie .yo{flex:1 1 100%;min-width:0;padding:0 6px;font-size:13px;color:#fff;line-height:1.25}
.side .side-pie .yo small{display:block;color:var(--s-mut);font-size:12px}
.side .side-pie .yo .cambiar{display:block;font-size:12px;color:var(--s-raya);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .side-pie .vc{display:grid;gap:3px;margin-top:4px}
.side .side-pie .vc select{width:100%;height:24px;font-size:12px;padding:0 2px;border:1px solid var(--s-linea);border-radius:var(--r1);background:var(--s-hover);color:var(--s-txt)}
.side .side-pie .vc select.on{border-color:var(--matrix);box-shadow:0 0 0 1px var(--matrix)}
body.ver-como::after{content:"";position:fixed;inset:0;border:4px solid var(--matrix);box-shadow:inset 0 0 18px var(--matrix-g),0 0 0 1px var(--matrix);pointer-events:none;z-index:2147483000}
.side .side-pie>a{width:32px;height:32px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:var(--s-mut)}
.side .side-pie>a:hover{background:var(--s-hover);color:#fff}
/* popup con iframe abierto: el fondo oscuro tapaba la barra y tocar el lápiz de MyC cerraba el popup (Naz 20-oct-26) */
body:has([data-marcar]):has(.cp-pop:not([hidden]),.an-pop:not([hidden]),.eq-pop:not([hidden]),.lev-pop:not([hidden])) .side{z-index:101}

.side .marca>div{flex:1;min-width:0}
.side .plegar{width:28px;height:28px;margin-right:-6px;border:0;border-radius:var(--r2);background:none;display:flex;align-items:center;justify-content:center;color:var(--s-mut);cursor:pointer;flex:none}
.side .plegar:hover{background:var(--s-hover);color:#fff}
.side .ir-pos{height:24px;padding:0 8px;border:1px solid var(--s-linea);border-radius:var(--r2);display:flex;align-items:center;color:#fff;font:600 12px var(--mono);text-decoration:none;flex:none}
.side .ir-pos:hover{background:var(--s-hover)}
@media (max-width:900px){.side .plegar{display:none}}
/* menú plegado a íconos (Ctrl+B), solo escritorio */
@media (min-width:901px){
  html.mini{--side-w:56px}
  html.mini .side .marca{padding:0;justify-content:center}html.mini .side .marca>div,html.mini .side .iso,html.mini .side .ir-pos{display:none}html.mini .side .plegar{margin:0}
  html.mini .side .nav{padding:10px 8px}
  html.mini .side .cat>span,html.mini .side summary>span,html.mini .side summary::after,html.mini .side .items,html.mini .side .side-pie .yo,html.mini .side a.puente::after{display:none}
  html.mini .side .cat,html.mini .side summary{justify-content:center;padding:0}
  html.mini .side .side-pie{flex-direction:column;gap:4px}
}
.contenido{margin-left:var(--side-w);height:calc(100 * var(--vh));overflow:auto}
.top{position:sticky;top:0;height:var(--top-h);background:var(--bg);border-bottom:1px solid var(--borde);display:flex;align-items:center;
  gap:10px;padding:0 20px;z-index:20;font-size:13px;color:var(--muted)}
.top .miga{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:12.5px var(--mono)}
.top .miga b{color:var(--ink);font-weight:500}
.top .miga i{font-style:normal;color:var(--borde-f);margin:0 6px}
.top .der{margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:8px}
.top .caja-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border:1px solid var(--borde);border-radius:var(--r2);
  color:var(--muted);font:12px var(--mono)}
.top .caja-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none}
a.caja-chip{text-decoration:none}
a.caja-chip:hover{border-color:var(--borde-f)}
.top .caja-chip b{color:var(--ink);font-weight:500}
.top .caja-chip span{overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.top .caja-chip.sin::before{background:var(--borde-f)}
@media (max-width:600px){.top .caja-chip span{display:none}}
.top .menu-btn{display:none;width:32px;height:32px;border:1px solid var(--borde-f);border-radius:var(--r2);background:var(--bg);
  color:var(--txt);align-items:center;justify-content:center;cursor:pointer;padding:0}
.top .menu-btn svg{width:16px;height:16px}
.main{padding:16px 22px 28px;min-width:0}
.velo{display:none}

/* ---------- piezas ---------- */
h1{font-size:21px;color:var(--ink);margin:0 0 12px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
h2{font-size:14px;color:var(--ink);margin:0 0 10px;font-weight:600}
.card{background:var(--bg);border:1px solid var(--borde);border-radius:var(--r3);box-shadow:var(--sombra)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r2);
  border:1px solid var(--azul);background:var(--azul);color:#fff;font-weight:500;font-size:13px;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s}
.btn:hover{background:var(--azul-h);border-color:var(--azul-h);color:#fff}
.btn.sec{background:var(--bg);color:var(--txt);border-color:var(--borde-f);font-weight:500}
.btn.sec:hover{background:var(--hover);color:var(--ink)}
.btn.rojo{background:var(--bg);color:var(--rojo);border-color:var(--rojo-b);font-weight:500}
.btn.rojo:hover{background:var(--rojo-l)}
.btn.verde{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.verde:hover{filter:brightness(.9)}
.btn:disabled{background:var(--hover);border-color:var(--borde);color:var(--faint);cursor:default}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--txt)}
.inp{height:32px;border:1px solid var(--borde-f);border-radius:var(--r2);padding:0 10px;background:var(--bg)}
textarea.inp{height:auto;padding:8px 10px}
.inp:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--acc-l)}
/* iPhone: la fecha vacía nativa ignora width y se sale del ancho → la página queda más ancha que la pantalla y Safari la achica (Prioridades, 27-oct-26) */
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}input::-webkit-date-and-time-value{text-align:left}}
.err{background:var(--rojo-l);color:var(--rojo);border:1px solid var(--rojo-b);border-radius:var(--r2);padding:8px 12px;margin-bottom:12px}
.ok{background:var(--verde-l);color:var(--verde);border:1px solid var(--verde-b);border-radius:var(--r2);padding:8px 12px;margin-bottom:12px}

/* tablas densas tipo Excel */
table.dense{border-collapse:separate;border-spacing:0;background:var(--bg);font-size:13px;border:1px solid var(--borde);border-radius:var(--r3)}
/* grilla completa de 1px (Carbon/Twenty), fila de 30px, cabecera gris, total al pie con raya de tinta (Odoo) */
table.dense th,table.dense td{height:30px;padding:4px 10px;border-bottom:1px solid var(--borde);border-right:1px solid var(--borde);white-space:nowrap;text-align:left}
table.dense th:last-child,table.dense td:last-child{border-right:0}
table.dense tr:last-child td{border-bottom:0}
table.dense th{background:var(--head);color:var(--muted);border-bottom-color:var(--borde-f);font-weight:600;font-size:12px;position:sticky;top:var(--top-h);z-index:2}
table.dense th:first-child{border-top-left-radius:var(--r3)}table.dense th:last-child{border-top-right-radius:var(--r3)}
table.dense td{max-width:420px;overflow:hidden;text-overflow:ellipsis}
table.dense td.n,table.dense th.n{text-align:right;font-variant-numeric:tabular-nums}
table.dense tbody tr:hover td{background:var(--sub)}
table.dense tbody tr.fila-on td{background:var(--acc-s);box-shadow:inset 0 1px 0 var(--acc-b),inset 0 -1px 0 var(--acc-b)}
table.dense tfoot td{background:var(--bg);font-weight:600;color:var(--ink);border-top:1.5px solid var(--ink)}
table.dense td.z,.z{color:var(--zero)}
.card table.dense{border:0;border-radius:0}
/* columnas con ancho a mano (static/col_ajustable.js) */
/* cada borde = dos mitades, cada una adentro de su th (col_ajustable.js): nada sobresale, porque el th vecino (otra capa
   sticky) la tapaba y el dedo caía ahí (probador 26-oct-26), y si sobresale la tabla mide más que su caja y base.html le pone barra */
table .col-tir{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;z-index:3;touch-action:none}
table .col-tir-izq{right:auto;left:0}
table th:last-child>.col-tir:not(.col-tir-izq){width:8px}
@media (pointer:coarse){table .col-tir{width:12px}table th:last-child>.col-tir:not(.col-tir-izq){width:24px}}
table .col-tir:hover,table.col-tirando .col-tir:active{background:linear-gradient(var(--azul),var(--azul)) right/2px 100% no-repeat}
table .col-tir-izq:hover,table.col-tirando .col-tir-izq:active{background-position:left}
table.col-fija{table-layout:fixed}
table.col-fija td{max-width:none}
table.col-fija th{overflow:hidden;text-overflow:ellipsis}
table.col-fija td .inp{width:100%!important;min-width:0}
table.col-fija td>div{overflow:hidden;text-overflow:ellipsis}
table.col-tirando{user-select:none;cursor:col-resize}
table th:first-child>.col-tir-izq{display:none}
/* orden de columnas arrastrando el título (col_ajustable.js): la columna alzada flota sobre las demás */
table.col-moviendo,table.col-moviendo th{user-select:none;cursor:grabbing}
table .col-alzada,table.dense th.col-alzada{z-index:4;background:var(--acc-l);box-shadow:0 0 0 1px var(--acc-b),0 6px 16px rgba(20,23,31,.14)}
table td.col-alzada{position:relative}
@media (pointer:coarse){table th{-webkit-touch-callout:none}}

/* resumen de cifras: una franja con celdas divididas por bordes (no tarjetas de colores) */
.kpis{display:flex;flex-wrap:wrap;margin-bottom:16px;border:1px solid var(--borde);border-radius:var(--r3);background:var(--bg);
  box-shadow:var(--sombra);overflow:hidden;width:fit-content;max-width:100%}
.kpi{padding:10px 18px;min-width:150px;border-right:1px solid var(--borde);color:var(--ink);background:none!important}
.kpi:last-child{border-right:0}
.kpi small{display:block;font-size:12px;color:var(--muted);line-height:1.3}
.kpi b{display:block;font-size:22px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;line-height:1.3;color:var(--ink);white-space:nowrap}
.kpi b+small{margin-top:1px;color:var(--faint)}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.filtros .inp{max-width:100%}
.st-ok{color:var(--verde);font-weight:600}.st-low{color:var(--ambar);font-weight:600}.st-no{color:var(--rojo);font-weight:600}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r1);font-size:12px;font-weight:500;line-height:1;background:var(--hover);color:var(--muted)}
.pill{white-space:nowrap}
.pill.ab,.pill.ok{background:var(--verde-l);color:var(--verde)}.pill.warn{background:var(--ambar-l);color:var(--ambar)}
.pill.err,.pill.falta{background:var(--rojo-l);color:var(--rojo)}.pill.off{background:var(--hover);color:var(--muted)}.pill.azul{background:var(--info-l);color:var(--info)}
.pill.ok,.pill.err{border:0;margin:0;padding:0 7px;border-radius:var(--r1)}
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--borde);margin:-4px 0 16px}
.tabs a{white-space:nowrap;padding:8px 12px 9px;color:var(--muted);font-weight:500;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);font-weight:600;border-color:var(--azul)}
.tabs.sub{margin-top:-12px;border-bottom:0}.tabs.sub a{font-size:12px;padding:6px 10px;border-radius:6px;border-bottom:0}.tabs.sub a.on{background:var(--acc-l);color:var(--azul)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;max-width:960px}
.form-grid label{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}
.form-grid .inp,.form-grid select{width:100%;margin-top:4px}
.acc{display:flex;gap:8px;margin-top:16px}
/* vistas que todavía abren AdmiNaz/GestioNaz en otra pestaña */
.side a.puente::after,.tabs a.puente::after,.indice a.puente::after{content:"↗";margin-left:5px;color:var(--faint);font-size:12px}
/* Inicio sin tablero: índice de secciones, una fila por categoría */
.indice{max-width:860px;padding:4px 16px}
.indice>div{display:flex;gap:16px;padding:9px 0;border-top:1px solid var(--borde)}
.indice>div:first-child{border-top:0}
.indice b{flex:0 0 110px;color:var(--ink);font-weight:600}
.indice span{display:flex;flex-wrap:wrap;gap:4px 18px}
/* «Ir a…» (Ctrl+K) */
.ir-btn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 8px 0 10px;border:1px solid var(--borde-f);border-radius:var(--r2);
  background:var(--bg);color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.ir-btn:hover{border-color:var(--faint);color:var(--ink)}
.ir-btn kbd{font:12px var(--mono);color:var(--faint);border:1px solid var(--borde);border-radius:var(--r1);padding:0 5px;margin-left:10px}
dialog.ir{width:min(520px,calc(100vw - 24px));margin-top:calc(12 * var(--vh));padding:0;border:1px solid var(--borde-f);border-radius:var(--r3);box-shadow:var(--sombra-l);
  background:var(--bg);color:var(--txt)}
dialog.ir::backdrop{background:rgba(20,23,31,.3)}
dialog.ir .inp{width:100%;height:44px;border:0;border-bottom:1px solid var(--borde);border-radius:0;font-size:15px;outline:0;padding:0 14px}
.ir-lista{max-height:min(380px,calc(60 * var(--vh)));overflow-y:auto;padding:6px}
.ir-lista a{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r2);color:var(--txt);text-decoration:none}
.ir-lista a[hidden]{display:none}
.ir-lista a small{margin-left:auto;color:var(--faint);font-size:12px}
.ir-lista a.on,.ir-lista a:hover{background:var(--acc-s);color:var(--ink)}

/* QA 07-oct: en pantallas chicas los textos largos de las tablas bajan de renglón en vez de sacar la página de ancho */
@media (max-width:1280px){table.dense td:not(.n){white-space:normal}table.dense td:not(.n) a{overflow-wrap:break-word}}
@media (max-width:1100px){table.dense th{white-space:normal}table.dense th,table.dense td{padding:4px 6px}}
/* móvil: sidebar como panel que se abre con el botón del encabezado */
@media (max-width:900px){
  .side{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sombra-l)}
  body.menu-abierto .side{transform:none}
  body.menu-abierto .velo{display:block;position:fixed;inset:0;background:rgba(20,23,31,.3);z-index:25}
  .contenido{margin-left:0}
  .top{padding:0 12px}.top .menu-btn{display:inline-flex}
  .ir-btn kbd,.ir-btn span{display:none}.ir-btn{padding:0 8px}.indice>div{display:block}.indice b{display:block;margin-bottom:3px}
  .main{padding:14px 12px 24px}
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--borde);width:100%}
  .kpi{min-width:0;border:0;background:var(--bg)!important}
  .kpi:last-child:nth-child(odd){grid-column:1/-1}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
.kpi.neg b{color:var(--rojo)}
a.kpi{text-decoration:none}a.kpi:hover{background:var(--hover)!important}
a.kpi.kpi-on{box-shadow:inset 0 -2px 0 var(--azul)}
.kpi i{display:block;font-style:normal;font-size:12.5px;color:var(--faint)}
.tabla-scroll{overflow:auto;max-height:calc(100 * var(--vh) - var(--top-h) - 40px);max-width:100%;border:1px solid var(--borde);border-radius:var(--r3)}
.tabla-scroll>table.dense{border:0;border-radius:0}
.tabla-scroll>table.dense th{top:0}

/* Personalizar (15-oct-26, pedido de Naz «como el de NazCode»): tema, letra y color de acento por navegador (localStorage.ajustes) */
:root{--matiz:229}
:root[data-acento]{--azul:hsl(var(--matiz) 59% 45%);--azul-h:hsl(var(--matiz) 62% 37%);--acc-l:hsl(var(--matiz) 64% 96%);
  --acc-s:hsl(var(--matiz) 60% 92%);--acc-b:hsl(var(--matiz) 61% 83%)}
:root[data-tema=gris]{--page:#e4e4df;--bg:#f7f7f4;--sub:#eeeeea;--head:#e6e6e1;--hover:#e3e3de;--borde:#d3d2cc;--borde-f:#bdbbb4}
:root[data-tema=oscuro]{--page:#101319;--bg:#161a22;--sub:#1c212b;--head:#1f2430;--hover:#262c38;--borde:#2f3644;--borde-f:#3d4555;--zero:#4a5160;
  --info:#8db4f0;--info-l:#1a2a44;--s-bg:#0b0d12;--s-hover:#171a22;--s-on:#1e222c;--s-linea:#1d212a;
  --ink:#eef1f6;--txt:#d3d8e1;--muted:#a3abb9;--faint:#9099a8;
  --azul:hsl(var(--matiz) 62% 52%);--azul-h:hsl(var(--matiz) 62% 44%);--acc-l:hsl(var(--matiz) 30% 19%);--acc-s:hsl(var(--matiz) 32% 25%);--acc-b:hsl(var(--matiz) 34% 40%);
  --verde:#4cc38a;--verde-l:#16301f;--verde-b:#2c5c40;--rojo:#f07167;--rojo-l:#3a1d1b;--rojo-b:#6b2f2a;
  --ambar:#e0a54a;--ambar-l:#33270f;--ambar-b:#6a4e1c;--sombra:0 1px 2px rgba(0,0,0,.4);--sombra-l:0 12px 24px -8px rgba(0,0,0,.6);color-scheme:dark}
/* alto de pantalla: usar var(--vh), nunca vh suelto — con zoom en <html> el alto vh mide 110 % y en el celu tapa la barra (POS sin botón Vender, 19-oct-26) */
:root{--vh0:1vh;--vh:var(--vh0)}
@supports (height:1dvh){:root{--vh0:1dvh}}
:root[data-letra=chica]{zoom:.92;--vh:calc(var(--vh0) / .92)}
:root[data-letra=grande]{zoom:1.1;--vh:calc(var(--vh0) / 1.1)}
.side .iso.logo{background:#fff}
.side .iso.logo svg{width:20px;height:20px;display:block}
.side .iso.logo img{max-width:22px;max-height:22px;display:block}
/* logo apaisado (wordmark): baldosa ancha y el nombre no se repite al lado */
.side .iso.logo.ancho{width:auto;max-width:132px;padding:0 8px}
.side .iso.logo.ancho img{max-width:116px;max-height:18px}
.side .marca .solo-sub>*{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pers{position:fixed;left:8px;bottom:56px;top:auto;right:auto;margin:0;width:260px;padding:10px 12px;border:1px solid var(--borde);
  border-radius:var(--r3);background:var(--bg);color:var(--txt);box-shadow:var(--sombra-l);z-index:60}
.pers .lbl{font-size:12px;color:var(--muted);margin:8px 0 4px}
.pers .lbl:first-child{margin-top:0}
.pers .seg{display:flex;border:1px solid var(--borde);border-radius:var(--r2);overflow:hidden}
.pers .seg button{flex:1;padding:5px 0;border:0;border-right:1px solid var(--borde);background:var(--bg);color:var(--txt);font:inherit;font-size:13px;cursor:pointer}
.pers .seg button:last-child{border-right:0}
.pers .seg button.on{background:var(--acc-s);color:var(--azul);font-weight:600}
.pers input[type=range]{width:100%;margin:2px 0;appearance:none;height:10px;border-radius:5px;cursor:pointer;
  background:linear-gradient(90deg,hsl(0 60% 50%),hsl(60 60% 50%),hsl(120 60% 50%),hsl(180 60% 50%),hsl(240 60% 50%),hsl(300 60% 50%),hsl(360 60% 50%))}
.pers .reset{border:0;background:none;color:var(--azul);font:inherit;font-size:12px;cursor:pointer;padding:0;float:right}
/* «Buscar por ARCA» al lado del número de documento, como Dux (Javi 27-oct-26) */
.arca-fila{display:flex;gap:8px;align-items:center;margin-top:4px}.form-grid .arca-fila .inp{flex:1;min-width:0;margin-top:0}.arca-fila .btn{flex:none;white-space:nowrap}
@media(min-width:960px){.form-grid .arca-ancho{grid-column:span 2}}   /* en el celular una columna: un span fijo crea columnas de más */
.arca-tit{margin:0;font-size:12.5px;color:var(--muted)}
/* atajo de gerencia (Alt+X dos veces, Naz 27-oct-26): ventanita de clave y franja «Estás como…» */
dialog.atajo{width:min(360px,calc(100vw - 24px));padding:16px;border:1px solid var(--borde-f);border-radius:var(--r3);box-shadow:var(--sombra-l)}
dialog.atajo::backdrop{background:rgba(20,23,31,.3)}
dialog.atajo form{display:grid;gap:10px}
dialog.atajo h2{margin:0;font-size:16px}
dialog.atajo .nota{margin:0;color:var(--muted);font-size:13px}
dialog.atajo label{display:grid;gap:4px;font-size:13px}
dialog.atajo .olvido{justify-self:center;font-size:13px;color:var(--muted)}
dialog.atajo .err{margin:0;padding:6px 8px;border-radius:var(--r1);background:var(--rojo-l);color:var(--rojo);font-size:13px}
dialog.atajo .acciones{display:flex;justify-content:flex-end;gap:8px}
.atajo-on{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);
  padding:6px 6px 6px 12px;background:var(--ambar-l);border:1px solid var(--ambar-b);border-radius:var(--r3);box-shadow:var(--sombra-l);color:var(--ambar);font-size:13px}
/* Novedad: cartel de un cambio publicado, una vez por persona (modulos/novedades.py) */
dialog.novedad{width:min(440px,calc(100vw - 24px));padding:18px;border:1px solid var(--borde-f);border-top:3px solid var(--azul);border-radius:var(--r3);box-shadow:var(--sombra-l)}
dialog.novedad::backdrop{background:rgba(20,23,31,.3)}
dialog.novedad small{color:var(--azul);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
dialog.novedad h2{margin:4px 0 8px;font-size:16px}
dialog.novedad p{margin:0 0 16px;font-size:14px;line-height:1.5;white-space:pre-line}
dialog.novedad .botones{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* Lector de códigos con la cámara (static/escaner.js): botón junto a un buscador, solo en pantallas táctiles o angostas */
.busca-cam{display:inline-flex;gap:6px;align-items:center;max-width:100%}
.btn-cam{display:none;padding:0 10px}.btn-cam svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (pointer:coarse),(max-width:900px){.btn-cam{display:inline-flex;height:36px}.busca-cam .inp{flex:1;min-width:0}}
.esc-dlg{border:1px solid var(--borde-f);border-radius:var(--r3);padding:12px;width:min(520px,94vw);background:var(--bg);color:var(--txt)}
.esc-dlg::backdrop{background:var(--ink);opacity:.7}
.esc-vid{position:relative;aspect-ratio:4/3;background:var(--ink);border-radius:var(--r2);overflow:hidden}
.esc-vid video{width:100%;height:100%;object-fit:cover;display:block}
.esc-mira{position:absolute;left:10%;right:10%;top:35%;bottom:35%;border:3px solid var(--azul);border-radius:var(--r3)}
.esc-msg{margin:10px 0;text-align:center}
.esc-cerrar{width:100%;height:40px}