/* ============================================================
   Signata Gestión — tokens e identidad compartida
   ------------------------------------------------------------
   Esta hoja existe por un motivo concreto: hasta acá la paleta
   estaba copiada quince veces, una por template, y cada cambio
   de color eran quince ediciones — que es como se olvidó una y
   aparecieron los últimos bugs de UI. Lo que vive acá es lo que
   es igual en TODAS las pantallas. Lo que es de una pantalla
   sola se queda en su <style>, pero usando estos tokens.

   Regla: ningún template vuelve a escribir un color en hexa.
   Si hace falta uno que no está acá, se agrega acá.
   ============================================================ */

/* ============================================================
   La identidad nueva — tokens (tarjeta A3, 17/10/2026)
   ------------------------------------------------------------
   Copiados tal cual de `bocetos/Signata Design System/tokens/`
   (colors.css, modes.css y los radios de spacing.css), que desde
   el 17/10 dicen lo mismo que el boceto A1. Si cambian allá, se
   cambian acá: `pruebas/t110_tokens_nuevos.py` compara los dos.

   Cada pantalla se pasa en su tarjeta (A8), con su vista previa en
   los dos temas; la primera fue el panel. Mientras
   tanto los nombres viejos de abajo apuntan a estos (`--tinta:
   var(--negro)`) cuando el color es el mismo papel; los que en la
   identidad nueva se parten en dos —el pino es «apretá» y
   «salió bien»; el latón, filete y foco— o no tienen par —el
   verde de marca no va sobre claro— quedan como estaban hasta A8.

   El tema: por defecto, el del equipo (`prefers-color-scheme`);
   `data-modo="claro"` u `"oscuro"` en el <html> lo fija (lo
   escribirá el servidor, A14) y en un contenedor lo fija para
   ese pedazo. Al imprimir, siempre claro. `color-scheme` (los
   controles nativos en oscuro) se declara solo en las pantallas
   que ya pasaron, las de `<body class="sigue-tema">` (al final de
   esta hoja): en las demás pintaría campos oscuros sobre papel claro.
   ============================================================ */

:root{
  --verde:#41E67C;
  --amarillo:#E6C640;
  --rojo:#E64640;
  --azul:#4044E6;
  --negro:#272727;
  --blanco:#FCFBF7;
  --crema:#F2EFE8;
  --dorado:#DDCCAC;
  --verde-texto:#1A6B3C;
  --amarillo-texto:#7A6000;
  --rojo-texto:#B8322D;
  --azul-oscuro:#8A8DF5;
  --rojo-oscuro:#F07A75;
  --gris:#6B6B6B;
  --gris-oscuro:#A8A8A8;
  --oscuro-fondo:#272727;
  --oscuro-superficie:#323232;
  --oscuro-borde:#3D3D3D;
  --negro-puro:#000000;
  --blanco-puro:#FFFFFF;
  --win-barra-clara:#F3F3F3;
  --win-barra-oscura:#202020;

  /* Radios, los de A1 (los usa A5) */
  --radio-0:0;
  --radio-1:8px;
  --radio-2:12px;
  --radio-3:14px;
  --radio-pastilla:999px;
  --radio-icono:18.5%;

  /* Alias del tema claro */
  --fondo:var(--crema);
  --superficie:var(--blanco);
  --campo:var(--crema);
  --borde:var(--dorado);
  --borde-control:var(--gris);
  --texto:var(--negro);
  --texto-2:var(--gris);
  --rotulo:var(--gris);
  --accion:var(--azul);
  --accion-hover:#3337C4;
  --accion-sobre:var(--blanco);
  --foco:var(--azul);
  --foco-barra:var(--azul-oscuro);
  --ok-relleno:var(--verde);
  --ok-sobre:var(--negro);
  --ok-texto:var(--verde-texto);
  --atencion-relleno:var(--amarillo);
  --atencion-sobre:var(--negro);
  --atencion-texto:var(--amarillo-texto);
  --alarma-relleno:var(--rojo-texto);
  --alarma-hover:#9E2A26;
  --alarma-sobre:var(--blanco);
  --alarma-texto:var(--rojo-texto);
  --alarma-forma:var(--rojo);
  --deshabilitado-relleno:var(--crema);
  --deshabilitado-texto:var(--gris);
  --deshabilitado-borde:var(--dorado);
  --marca:var(--negro);
  --sombra-chica:0 1px 2px rgba(39,39,39,.07),0 14px 30px -14px rgba(39,39,39,.28);
  --sombra-caja:0 1px 2px rgba(39,39,39,.08),0 28px 56px -18px rgba(39,39,39,.34);
}
/* El tema oscuro: el del equipo, salvo que se pida claro */
@media (prefers-color-scheme:dark){
  :root:not([data-modo="claro"]){
    --fondo:var(--oscuro-fondo);
    --superficie:var(--oscuro-superficie);
    --campo:var(--oscuro-fondo);
    --borde:var(--oscuro-borde);
    --borde-control:var(--gris-oscuro);
    --texto:var(--blanco);
    --texto-2:var(--gris-oscuro);
    --rotulo:var(--dorado);
    --accion:#A3A5F7;
    --accion-hover:#BBBDF9;
    --accion-sobre:var(--negro);
    --foco:var(--azul-oscuro);
    --ok-relleno:var(--verde);
    --ok-sobre:var(--negro);
    --ok-texto:var(--verde);
    --atencion-relleno:var(--amarillo);
    --atencion-sobre:var(--negro);
    --atencion-texto:var(--amarillo);
    --alarma-relleno:var(--rojo-oscuro);
    --alarma-hover:#F39490;
    --alarma-sobre:var(--negro);
    --alarma-texto:var(--rojo-oscuro);
    --alarma-forma:var(--rojo);
    --deshabilitado-relleno:var(--oscuro-superficie);
    --deshabilitado-texto:var(--gris-oscuro);
    --deshabilitado-borde:var(--oscuro-borde);
    --marca:var(--verde);
    --sombra-chica:0 14px 30px rgba(0,0,0,.35);
    --sombra-caja:0 30px 60px rgba(0,0,0,.45);
  }
}
[data-modo="oscuro"]{
  --fondo:var(--oscuro-fondo);
  --superficie:var(--oscuro-superficie);
  --campo:var(--oscuro-fondo);
  --borde:var(--oscuro-borde);
  --borde-control:var(--gris-oscuro);
  --texto:var(--blanco);
  --texto-2:var(--gris-oscuro);
  --rotulo:var(--dorado);
  --accion:#A3A5F7;
  --accion-hover:#BBBDF9;
  --accion-sobre:var(--negro);
  --foco:var(--azul-oscuro);
  --ok-relleno:var(--verde);
  --ok-sobre:var(--negro);
  --ok-texto:var(--verde);
  --atencion-relleno:var(--amarillo);
  --atencion-sobre:var(--negro);
  --atencion-texto:var(--amarillo);
  --alarma-relleno:var(--rojo-oscuro);
  --alarma-hover:#F39490;
  --alarma-sobre:var(--negro);
  --alarma-texto:var(--rojo-oscuro);
  --alarma-forma:var(--rojo);
  --deshabilitado-relleno:var(--oscuro-superficie);
  --deshabilitado-texto:var(--gris-oscuro);
  --deshabilitado-borde:var(--oscuro-borde);
  --marca:var(--verde);
  --sombra-chica:0 14px 30px rgba(0,0,0,.35);
  --sombra-caja:0 30px 60px rgba(0,0,0,.45);
}
[data-modo="claro"]{
  --fondo:var(--crema);
  --superficie:var(--blanco);
  --campo:var(--crema);
  --borde:var(--dorado);
  --borde-control:var(--gris);
  --texto:var(--negro);
  --texto-2:var(--gris);
  --rotulo:var(--gris);
  --accion:var(--azul);
  --accion-hover:#3337C4;
  --accion-sobre:var(--blanco);
  --foco:var(--azul);
  --foco-barra:var(--azul-oscuro);
  --ok-relleno:var(--verde);
  --ok-sobre:var(--negro);
  --ok-texto:var(--verde-texto);
  --atencion-relleno:var(--amarillo);
  --atencion-sobre:var(--negro);
  --atencion-texto:var(--amarillo-texto);
  --alarma-relleno:var(--rojo-texto);
  --alarma-hover:#9E2A26;
  --alarma-sobre:var(--blanco);
  --alarma-texto:var(--rojo-texto);
  --alarma-forma:var(--rojo);
  --deshabilitado-relleno:var(--crema);
  --deshabilitado-texto:var(--gris);
  --deshabilitado-borde:var(--dorado);
  --marca:var(--negro);
  --sombra-chica:0 1px 2px rgba(39,39,39,.07),0 14px 30px -14px rgba(39,39,39,.28);
  --sombra-caja:0 1px 2px rgba(39,39,39,.08),0 28px 56px -18px rgba(39,39,39,.34);
}
/* Al imprimir, claro siempre: el cierre del día impreso no sale negro.
   Mismos selectores que el oscuro para ganarle por orden, no por peso. */
@media print{
  :root,:root:not([data-modo="claro"]),[data-modo]{
    --fondo:var(--crema);
    --superficie:var(--blanco);
    --campo:var(--crema);
    --borde:var(--dorado);
    --borde-control:var(--gris);
    --texto:var(--negro);
    --texto-2:var(--gris);
    --rotulo:var(--gris);
    --accion:var(--azul);
    --accion-hover:#3337C4;
    --accion-sobre:var(--blanco);
    --foco:var(--azul);
    --foco-barra:var(--azul-oscuro);
    --ok-relleno:var(--verde);
    --ok-sobre:var(--negro);
    --ok-texto:var(--verde-texto);
    --atencion-relleno:var(--amarillo);
    --atencion-sobre:var(--negro);
    --atencion-texto:var(--amarillo-texto);
    --alarma-relleno:var(--rojo-texto);
    --alarma-hover:#9E2A26;
    --alarma-sobre:var(--blanco);
    --alarma-texto:var(--rojo-texto);
    --alarma-forma:var(--rojo);
    --deshabilitado-relleno:var(--crema);
    --deshabilitado-texto:var(--gris);
    --deshabilitado-borde:var(--dorado);
    --marca:var(--negro);
    --sombra-chica:0 1px 2px rgba(39,39,39,.07),0 14px 30px -14px rgba(39,39,39,.28);
    --sombra-caja:0 1px 2px rgba(39,39,39,.08),0 28px 56px -18px rgba(39,39,39,.34);
  }
}

:root{
  /* ---- Identidad ---- */
  --tinta:var(--negro);   /* todo el texto, títulos, importes. Era #3A2D23 */
  --bosque:var(--negro);  /* la barra de arriba: negra, en los dos temas. Era #2C3B31 */
  --pino:#4A5F4E;         /* acción y estado «emitido». 5,5:1 sobre arena */
  --salvia:#6A816E;       /* marca y superficies grandes. NO texto chico */
  --laton:#C1A06A;        /* dorado: filetes, foco, avatar. NUNCA un estado */
  --ladrillo:var(--rojo-texto); /* freno, reversa, nota de crédito. Era #A4472F */
  /* --gris (etiquetas, excluidos, lo secundario) lo define arriba la
     identidad nueva con el mismo nombre: #6B6B6B. Era #6E645A.      */
  --apagado:#9A9184;      /* dato ausente, texto deshabilitado          */

  /* ---- La arena ----
     El fondo es un beige cálido y no el crudo casi blanco de antes. El
     token se sigue llamando `lino` porque renombrarlo eran cien
     ediciones para no ganar nada.

     Arena es una elección medida, no un gusto: es **el beige más oscuro
     que no obliga a mover ningún otro color**. Un paso más abajo
     —greda, #E8DCC6— el gris de las etiquetas cae a 4,3, el dorado a 4,5
     y el óxido a 4,4, o sea por debajo del mínimo legible, y hay que
     oscurecer los tres. Sobre arena quedan en 4,6 / 4,8 / 4,7 tal como
     están, así que la identidad no se toca.

     Eso es lo que hay que mirar antes de bajar un fondo: lo que se
     escribe encima pierde contraste sin que nada falle, y el síntoma no
     es un error — es una etiqueta que no se lee.

     Los cinco de abajo no se eligieron a ojo. Cada uno tenía una
     distancia de luminancia contra el lino, y esa distancia ES lo que
     significa — una cabecera de tabla dice «hundido» porque está 0,048
     por debajo. Se conservó la distancia y se movió el tono a la
     familia nueva (39°, 42%), con `scratchpad/_familia_arena.py`.

     De yapa, el vidrio de las tarjetas se lee bastante mejor: contra el
     crudo la diferencia de luminancia con el papel era 0,10 y ahora es
     0,18, así que la tarjeta se despega en vez de confundirse con el
     fondo.                                                            */
  --lino:var(--crema);    /* fondo de todas las pantallas. Era #EDE4D3  */
  --papel:var(--blanco);  /* tarjetas, filas, formularios (mismo valor) */
  --junta:var(--dorado);  /* bordes y reglas (mismo valor)              */
  --junta-clara:#E6D9C1;  /* separador interno, más suave que junta     */
  --lino-hundido:#E9DDC8; /* cabecera de tabla, fondo de campo apagado  */

  /* Fondos de aviso, derivados de los tres semánticos.

     No bajaron con el fondo a propósito: un aviso casi nunca se dibuja
     sobre la pantalla pelada, se dibuja adentro de una tarjeta, y el
     papel de las tarjetas no cambió. Moverlos para «hacer juego» con el
     fondo los habría dejado al ras del papel, que es donde de verdad se
     apoyan. */
  --fondo-alarma:#FBF1EE;
  --borde-alarma:#E6C8BF;
  --fondo-atencion:#F7F1E2;
  --fondo-pendiente:#E5D8C0;
  --fondo-ok:#EDF1EC;
  --error-texto:#7C2E1D;   /* 8,3:1 sobre fondo-alarma */

  /* Estados de control */
  --pino-hover:#3C4E40;
  --apagado-fondo:#E3D6BC;
  --apagado-borde:#D8C5A1;

  /* ---- Sobre la barra (bosque) ----
     El texto sobre bosque no puede salir de la paleta clara: el
     crema da 10:1 pero los grises cálidos quedan por debajo de
     4,5:1. Estos tres están medidos contra #2C3B31.            */
  /* Este era el mismo valor que el lino, y dejó de serlo cuando el
     fondo bajó a greda. Se queda en el crema claro a propósito: está
     medido contra el bosque de la barra, no contra el fondo de la
     página, y bajarlo con el fondo le sacaba contraste al único texto
     que se lee sobre oscuro.                                          */
  --sobre-bosque:#F2EFE8;         /* 10,1:1 */
  --sobre-bosque-enlace:#D3DCD4;  /*  8,3:1 */
  --sobre-bosque-tenue:#9DAF9F;   /*  5,0:1 */
  --borde-bosque:#46594C;
  --bosque-hover:#38473C;

  /* ---- Sobre la tinta ----
     La portada tiene secciones oscuras en tinta, no en bosque:
     ahi el texto necesita su propia escala clara y calida.  */
  --sobre-tinta:#D8D1C4;        /*  9,0:1 sobre tinta */
  --sobre-tinta-tenue:#B9AF9F;  /*  6,1:1 sobre tinta */
  --laton-texto:#7A5E1E;        /*  4,8:1 sobre arena */

  /* ---- Formas (A5) ----
     Sin vidrio, sin atmósfera y sin difuminado: la tarjeta es papel
     liso sobre el fondo, con el borde y la sombra del boceto A1. Los
     radios y las sombras son los del sistema (arriba): 8 en controles y
     avisos, 12 en menús, 14 en tarjetas, diálogos y la caja de entrar,
     pastilla en insignias y chips, 0 en barras.

     Los nombres viejos se quedan como alias porque las plantillas los
     usan más de 150 veces; cada uno apunta a su par nuevo.
     Los colores van por los nombres viejos —papel, junta, lino— y no
     por --superficie, --borde y --campo, que valen lo mismo en claro
     pero se dan vuelta en oscuro: hasta que cada pantalla pase al tema
     oscuro (A8), una tarjeta oscura sobre una página clara se lee mal. */
  --r-xs:var(--radio-1);
  --r-sm:var(--radio-1);
  --r-md:var(--radio-1);
  --r-lg:var(--radio-3);
  --r-pastilla:var(--radio-pastilla);

  --vidrio:var(--papel);
  --vidrio-hundido:var(--lino);
  --vidrio-borde:var(--junta);
  --filo:var(--junta);
  /* Una sombra vacía y no `none`: van en listas («var(--brillo),
     var(--sombra-1)») y un `none` en una lista invalida la regla.   */
  --brillo:0 0 0 transparent;
  --desenfoque:none;
  --sombra-0:0 0 0 transparent;
  --sombra-1:var(--sombra-chica);
  --sombra-2:var(--sombra-caja);
  /* Lo que queda detrás de una ventana abierta. */
  --velo-ventana:color-mix(in srgb, var(--negro) 45%, transparent);

  /* ---- Tipografía ----
     Las del sistema de diseño (tokens/typography.css), que carga
     templates/_fuentes.html. Los tres nombres viejos apuntan a ellas,
     así que ninguna plantilla tuvo que cambiar de nombre (A4):
     --display es el título, --fuente-texto el texto (se llamaba
     --texto, que en la identidad nueva es el color) y --mono los
     importes, CAE y CUIT, que van en Archivo porque Poppins y Noticia
     Text no responden a las cifras tabulares.                       */
  --font-titulos:"Archivo",system-ui,sans-serif;
  --font-texto:"Poppins",system-ui,sans-serif;
  --font-cifras:"Noticia Text",Georgia,serif;
  --font-importes:"Archivo",system-ui,sans-serif;
  --display:var(--font-titulos);
  --fuente-texto:var(--font-texto);
  --mono:var(--font-importes);
}

/* ---- La portada (A10) ----
   Lo que solo usa `templates/inicio.html`: la acción del escenario
   negro —la del tema oscuro, que sobre el negro da 5,67 en los dos
   temas— y el borde de la terminal y la impresora dibujadas, un paso
   más claro que --oscuro-borde para que el aparato se despegue del
   escenario. */
:root{
  --accion-escenario:#A3A5F7;
  --accion-escenario-hover:#BBBDF9;
  --aparato-borde:#454545;
}

/* ============================================================
   Base
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background-color:var(--lino);
  color:var(--tinta);
  font-family:var(--fuente-texto);
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
}

/* Todo importe, CAE, CUIT, punto de venta e identificador. Las
   cifras tabulares importan: sin ellas una columna de pesos no
   se puede comparar de un vistazo. */
.num{font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums;
     font-feature-settings:"tnum" 1,"lnum" 1}

/* Los enlaces del contenido. Trece plantillas no tenian ninguna regla
   `a`, asi que lo que no llevaba clase salia en el azul del navegador
   y subrayado: en «Mi perfil», el nombre del comercio. Ese azul no
   esta en la paleta y no se parece a nada mas del sistema.

   Va con la especificidad mas baja que existe —un selector de tipo— y
   en la hoja compartida, que carga antes: cualquier regla de cualquier
   plantilla le gana sin tener que pelear. */
a{color:var(--pino); text-underline-offset:2px}
a:hover{color:var(--tinta)}

/* ============================================================
   Cabecera
   ------------------------------------------------------------
   Negra, de 56 px, en los dos temas (A6, boceto A1): el iso verde
   y las letras blancas. Los colores van por nombre fijo —negro,
   blanco, gris oscuro— y no por los alias que se dan vuelta con
   el tema, porque la barra no cambia. El menú que se abre va en
   papel, junta y lino como el resto de la página, salvo en las
   pantallas que ya siguen el tema (al final de esta hoja).

   Todas las reglas cuelgan de `.barra-sistema`. Hay plantillas
   que todavía traen reglas viejas para `header` y `.cab-*`
   (`index`; alta, usuarios y perfil las perdieron con A8) y, con
   el mismo peso, gana la de la plantilla porque carga después.
   ============================================================ */

.barra-sistema{
  /* Sin `backdrop-filter`, y es a propósito: dos elementos con
     desenfoque se pelean por el orden de pintado, y un menú que
     cuelga de la barra desenfocada quedaba DEBAJO de una tarjeta
     desenfocada aunque la barra tuviera el z-index más alto (se veía
     en Usuarios y en Alta de cliente).

     Y queda pegada al desplazarse: en un cierre de treinta y dos
     ventas, volver arriba para cambiar de comercio eran dos pantallas
     de scroll. El z-index queda por debajo del 50 de la capa del
     modal, que tiene que taparla. */
  position:sticky; top:0; z-index:40;
  min-height:56px; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:0 1.5rem; flex-wrap:wrap;
  background:var(--negro); color:var(--blanco);
  border-bottom:1px solid var(--oscuro-borde);
  font-family:var(--fuente-texto); font-size:14px; line-height:1.4;
}
.barra-sistema > .cab-fila{
  display:flex; align-items:center; gap:0 1rem; min-width:0;
  padding:0; border:0;
}

/* El foco, en el azul de oscuro en los dos temas: el azul de claro
   sobre el negro da 2,27:1 y hace falta 3 (A2, decidido el 17/10). */
.barra-sistema :focus-visible{outline:2px solid var(--foco-barra); outline-offset:2px}

/* ---- La marca ----
   El logotipo lleva al inicio. Es lo que hace todo el mundo con el
   logotipo de un sistema, y acá además ahorra el único camino que no
   existía: desde una pantalla de configuración, volver era buscar
   «Inicio» entre seis enlaces. Va como enlace de verdad —un <a>, no
   un onclick— para que el clic del medio abra en pestaña nueva. */
.barra-sistema .marca-barra{
  display:flex; align-items:center; height:56px; flex:0 0 auto;
  --l-iso:var(--verde); --l-letras:var(--blanco); --logo-alto:32px;
}
/* El nombre de la pantalla, separado por un filete. */
.barra-sistema .marca-sufijo{
  padding-left:1rem; border-left:1px solid var(--oscuro-borde);
  line-height:24px; color:var(--gris-oscuro);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* ---- Entorno ----
   En producción, la pastilla amarilla con letra negra; en pruebas,
   solo el contorno. Siempre con la palabra. */
.barra-sistema .chip{
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  border:1px solid var(--gris-oscuro); border-radius:var(--radio-pastilla);
  color:var(--gris-oscuro); white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.barra-sistema .chip.prod{background:var(--amarillo); border-color:var(--amarillo); color:var(--negro)}

/* ---- El cliente ---- */
.barra-sistema .cab-cliente{min-width:0}
.barra-sistema .cab-cliente form{margin:0}
.barra-sistema .cab-cliente select{
  height:36px; max-width:16rem; padding:0 2rem 0 .75rem;
  background-color:var(--oscuro-superficie); color:var(--blanco);
  border:1px solid var(--gris-oscuro); border-radius:var(--radio-1);
  font-family:var(--fuente-texto); font-size:14px;
  color-scheme:dark; box-shadow:none;
}

/* ---- Enlaces ---- */
.barra-sistema .cab-enlaces{
  display:flex; align-items:center; gap:0 .25rem; flex-wrap:wrap;
  margin-left:auto;
}
.barra-sistema .cab-enlaces > a,
.barra-sistema .cab-menu-boton{
  display:inline-flex; align-items:center; gap:6px;
  height:56px; padding:0 .75rem;
  background:none; border:0; border-radius:0; box-shadow:none;
  color:var(--gris-oscuro); text-decoration:none; white-space:nowrap;
  font-family:var(--fuente-texto); font-size:14px; font-weight:400;
  cursor:pointer;
}
.barra-sistema .cab-enlaces > a:hover,
.barra-sistema .cab-menu-boton:hover,
.barra-sistema .cab-menu.abierto > .cab-menu-boton{background:none; color:var(--blanco)}

/* ============================================================
   Los menús de la barra
   ------------------------------------------------------------
   Lo de todos los días va suelto —inicio, comprobantes— y lo de
   cada tanto va acá adentro. No es sólo por espacio: con ocho
   enlaces en fila, el que se usa cada mañana pesa igual que el que
   se toca una vez por mes, y a la vista todos valen lo mismo.
   ============================================================ */

.cab-menu{position:relative}

/* La flecha se da vuelta al abrir. Es la única señal de que eso es
   un menú y no un enlace más. Es «desplegar», de los íconos del
   diseñador (B9), a 14 px: va pegada a su palabra. */
.cab-flecha{
  display:inline-flex; flex:0 0 auto;
  transition:transform .15s;
}
.cab-flecha .icono-ui{width:14px; height:14px}
.cab-menu.abierto .cab-flecha{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .cab-flecha{transition:none} }

.cab-menu-caja{
  display:none;
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  min-width:15rem; padding:6px;
  /* Opaco: un menú deja ver el contenido de la página, y lo que se
     lee es un renglón mezclado con otro. Un menú tiene que tapar. */
  background:var(--papel); color:var(--tinta);
  border:1px solid var(--junta);
  border-radius:var(--radio-2);
  box-shadow:var(--sombra-caja);
}
.cab-menu-caja.a-la-derecha{left:auto; right:0}
.cab-menu.abierto .cab-menu-caja{display:block}

/* Los de adentro son del sistema, no de la barra: fondo claro,
   tinta, cuerpo de lectura. Adentro el foco vuelve al azul de la
   página: el de la barra, sobre papel, no llega a 3:1.

   El botón de salir entra acá con los enlaces: es un botón porque
   manda un POST con token, pero adentro del menú tiene que verse un
   renglón más. Hay que apagarle a mano lo que le da la regla global
   de `button` o queda un botón metido en una lista. */
.barra-sistema .cab-menu-caja a,
.barra-sistema .cab-menu-caja button.salir{
  display:block; padding:10px 12px;
  color:var(--tinta); font-size:14px; border-radius:var(--radio-1);
  text-decoration:none; white-space:nowrap;
}
.barra-sistema .cab-menu-caja button.salir{
  width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; box-shadow:none;
  font-family:var(--fuente-texto); font-weight:400;
  /* El navegador le pone `line-height:normal` a los botones y no lo
     hereda del cuerpo, así que este renglón salía 4px más bajo que el
     de «Mi perfil» justo al lado. */
  line-height:1.4;
}
.barra-sistema .cab-menu-caja :focus-visible{outline-color:var(--azul)}
.barra-sistema .cab-menu-caja a:hover{background:var(--lino); color:var(--tinta)}
.barra-sistema .cab-menu-caja button.salir{color:var(--rojo-texto)}
.barra-sistema .cab-menu-caja button.salir:hover{
  background:color-mix(in srgb, var(--rojo-texto) 10%, var(--papel));
}
/* «Mi perfil» y «Salir» llevan su ícono (B9): el renglón sigue entero,
   con el dibujo antes de la palabra. */
.barra-sistema .cab-menu-caja :is(a, button).con-icono{display:flex; justify-content:flex-start}
/* El formulario no dibuja nada: existe para llevar el token. */
.barra-sistema .cab-menu-caja .salir-form{margin:0}
/* Quién sos, arriba del menú tuyo. El nombre entero: en la barra
   va sólo el primero, y con dos Nicolás en la cuenta eso no
   alcanza para saber con cuál estás adentro. */
.cab-menu-quien{
  display:block; padding:6px 12px 10px;
  font-size:12px; color:var(--gris);
  border-bottom:1px solid var(--junta); margin-bottom:4px;
}
/* «Configuración» (CP1): cada entrada con su rótulo, que es el título
   de la página que abre, y debajo qué hay ahí. Más ancho que los otros
   y con renglones que pueden partirse: la segunda línea es una frase. */
.barra-sistema .cab-config .cab-menu-caja{width:min(20rem, calc(100vw - 2rem))}
.barra-sistema .cab-config .cab-menu-caja a{white-space:normal}
.barra-sistema .cab-config .cab-menu-caja a strong{display:block; font-weight:600}
.cab-menu-sub{display:block; margin-top:2px; font-size:12px; color:var(--gris)}
/* El alta es del proveedor y no de un cliente: va separada de las cuatro. */
.barra-sistema .cab-menu-caja a.cab-menu-aparte{position:relative; margin-top:9px}
.barra-sistema .cab-menu-caja a.cab-menu-aparte::before{
  content:""; position:absolute; left:0; right:0; top:-5px;
  border-top:1px solid var(--junta);
}
.cab-menu-nota{
  margin:4px 0 0; padding:10px 12px 6px; border-top:1px solid var(--junta);
  font-size:12px; line-height:1.45; color:var(--gris); white-space:normal;
}
/* La entrada en la que estás (pedido del titular, 24/10/2026): hundida y
   con la raya de la acción a la izquierda, como la pestaña elegida la
   lleva abajo. Es forma y no solo color: la raya se ve aunque no se
   distinga el azul (5,74:1 sobre el lino). La marca `aria-current`, que
   también la dice a quien no la ve. */
.barra-sistema .cab-menu-caja a[aria-current="page"]{
  background:var(--lino); box-shadow:inset 3px 0 0 var(--azul);
}
/* Y el botón del menú, cuando la página es una de sus entradas: la
   palabra en blanco y una raya abajo. En el azul del foco de la barra: el
   de la acción, sobre el negro, no llega a 3:1 (este da 5,13). */
.barra-sistema .cab-menu-boton.en-seccion{
  color:var(--blanco); box-shadow:inset 0 -3px 0 var(--foco-barra);
}

/* ---- La persona ----
   Las iniciales en un cuadrado con el verde de la marca, y el nombre
   al lado, siempre: la regla de la palabra junto al ícono vale
   también acá, y en el teléfono no se esconde. */
.barra-sistema .cab-menu-boton.avatar-enlace{
  height:40px; margin-left:.5rem; padding:0 8px 0 4px;
  border-radius:var(--radio-1); color:var(--blanco);
}
.barra-sistema .cab-menu-boton.avatar-enlace:hover,
.barra-sistema .cab-menu.abierto > .cab-menu-boton.avatar-enlace{background:var(--oscuro-superficie)}
.avatar-mini{
  width:32px; height:32px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:var(--radio-1);
  background:var(--oscuro-superficie); border:1px solid var(--oscuro-borde);
  color:var(--verde);
  font-family:var(--font-titulos); font-size:12px; font-weight:700; letter-spacing:.06em;
}
.avatar-nombre{font-size:14px}

/* En angosto la marca queda arriba con el entorno, y el cliente y los
   enlaces bajan a su propia fila, separados por un filete. */
@media (max-width:58rem){
  /* Pegada arriba, no. En el teléfono la barra ocupa tres renglones:
     dejarla fija es regalarle un cuarto de la pantalla a la
     navegación en la pantalla donde menos sobra. */
  .barra-sistema{position:static; padding:0 1rem; gap:0}
  .barra-sistema > .cab-fila.cab-titulo{width:100%; min-height:56px}
  .barra-sistema .chip{margin-left:auto}
  .barra-sistema > .cab-fila.cab-nav{
    flex-direction:column; align-items:stretch;
    margin:0 -1rem; padding:0 1rem; width:calc(100% + 2rem);
    border-top:1px solid var(--oscuro-borde);
  }
  .barra-sistema .cab-cliente{padding-top:10px}
  .barra-sistema .cab-cliente select{width:100%; max-width:none; height:40px}
  .barra-sistema .cab-enlaces{margin-left:-.75rem}
  .barra-sistema .cab-enlaces > a,
  .barra-sistema .cab-menu-boton{height:48px}
  .barra-sistema .cab-menu-boton.avatar-enlace{height:40px; margin-left:.75rem}
  /* El menú se abre centrado bajo su botón y no colgando de un borde
     que puede estar contra el filo de la pantalla. */
  .cab-menu-caja, .cab-menu-caja.a-la-derecha{
    left:50%; right:auto; transform:translateX(-50%);
  }
  /* Salvo «Configuración», que es ancho: centrado bajo su botón, que en
     el teléfono queda a la izquierda, se salía por el borde. Cuelga de
     la fila entera de la barra, con el margen de la página a cada lado. */
  .barra-sistema > .cab-fila.cab-nav{position:relative}
  .barra-sistema .cab-config{position:static}
  .barra-sistema .cab-config .cab-menu-caja{left:1rem; right:1rem; width:auto; transform:none}
}

/* En el teléfono, dos renglones y no tres: la persona sube al de la
   marca, a la derecha, y los enlaces entran en uno solo. Con tres, la
   barra eran 154 px de 844 antes de ver nada del cierre (25/10/2026).
   La fila de navegación y la de los enlaces dejan de ser cajas
   (`display:contents`) para que sus piezas se acomoden en la barra; el
   filete entre los dos renglones lo dibuja `::after`, y el menú de
   «Configuración» cuelga de la barra entera. Sigue sin quedar pegada
   arriba: es la regla de 58rem. */
@media (max-width:30rem){
  /* En fila aunque la pantalla diga otra cosa: comprobantes, la ficha del
     cliente y la del comercio traen un `header{flex-direction:column}`
     viejo que, con las piezas sueltas, ponía cada enlace en su renglón. */
  .barra-sistema{position:relative; justify-content:flex-start;
                 flex-direction:row; flex-wrap:wrap}
  .barra-sistema > .cab-fila.cab-titulo{width:auto; flex:1 1 0; min-width:0}
  .barra-sistema > .cab-fila.cab-nav,
  .barra-sistema .cab-enlaces{display:contents}
  .barra-sistema .cab-yo{order:1}
  .barra-sistema::after{
    content:""; order:2; flex:0 0 calc(100% + 2rem); margin:0 -1rem;
    border-top:1px solid var(--oscuro-borde);
  }
  .barra-sistema .cab-cliente{order:3; flex:0 0 100%; padding-bottom:4px}
  .barra-sistema .cab-enlaces > a,
  .barra-sistema .cab-enlaces > .cab-menu:not(.cab-yo){order:4}
  /* A 13 px y con .35rem de cada lado los cuatro entran en 375 px (medido
     en 390 y en 375); por debajo de eso, «Configuración» baja sola a
     otro renglón. Ninguno queda de menos de 44 px. */
  .barra-sistema .cab-enlaces > a,
  .barra-sistema .cab-menu-boton{height:44px; padding:0 .35rem; font-size:13px}
  .barra-sistema .cab-enlaces > a:first-child{margin-left:-.35rem}
  .barra-sistema .cab-menu-boton.avatar-enlace{font-size:14px}
  .barra-sistema .cab-menu-boton.avatar-enlace{height:40px; margin-left:.5rem; padding:0 6px 0 4px}
  /* La persona queda contra el borde derecho: su menú cuelga de ese
     borde y no centrado, que se salía de la pantalla. */
  .barra-sistema .cab-yo .cab-menu-caja{left:auto; right:0; transform:none}
}

/* ---- La marca de la portada ----
   La portada pública tiene su propia barra y su lockup viejo, con la S
   y «SIGNATA GESTIÓN», hasta A10. Estas reglas son solo de ella. */
.marca{
  display:inline-flex; align-items:center; gap:0;
  white-space:nowrap;
}
.marca-s{
  width:1.05rem; height:1.4rem; flex:0 0 auto;
  fill:var(--sobre-bosque);
}
.marca-nombre{
  font-family:var(--display); font-size:.86rem; font-weight:500;
  letter-spacing:.17em; color:var(--sobre-bosque);
}
.marca-bajada{
  font-family:var(--display); font-size:.5rem; font-weight:400;
  letter-spacing:.34em; color:var(--sobre-bosque-tenue);
  align-self:baseline;
}
/* GESTIÓN se apoya en la MISMA línea que SIGNATA, no arriba: con un
   solo item que pida `baseline` el flex lo manda al borde de arriba. */
.marca .marca-nombre{align-self:baseline}
/* La S y SIGNATA, centrados entre sí: el símbolo se centra por su caja
   y la palabra por su línea base; la diferencia, medida sobre la Jost
   real, es 1,2 px. */
.marca .marca-s{align-self:center; transform:translateY(-.075rem)}
/* Y pegado a la A: se saca el `gap` y el tracking que SIGNATA deja
   después de la última letra, y quedan 4 px de aire. */
.marca .marca-s{margin-right:.5rem}
.marca .marca-nombre{margin-right:calc(-.17em + .25rem)}
@media (max-width:58rem){
  .marca-s{width:.95rem; height:1.26rem}
  .marca-nombre{font-size:.78rem; letter-spacing:.15em}
  .marca-bajada{font-size:.46rem; letter-spacing:.3em}
}

/* ============================================================
   Foco
   ------------------------------------------------------------
   Dorado en todo el sistema. Es visible sobre el lino y sobre
   el bosque, y no se confunde con ningún estado.
   ============================================================ */

:focus-visible{outline:2px solid var(--laton); outline-offset:2px}

/* ============================================================
   Componentes
   ------------------------------------------------------------
   Todo lo que estaba escrito igual en muchos templates. Los
   avisos estaban nueve veces, las tarjetas ocho, los campos
   siete. Lo que es de una pantalla sola sigue en su <style>.
   ============================================================ */

/* ---- Tarjeta ----
   Papel liso sobre el fondo, con un filo dorado y la sombra chica del
   sistema. En claro el fondo es crema y la tarjeta blanca, para que lo
   que está arriba sea más claro, como en oscuro. */
.tarjeta, .vidrio{
  background:var(--papel);
  border:1px solid var(--junta);
  border-radius:var(--radio-3);
  box-shadow:var(--sombra-chica);
}
.cuerpo{padding:1.4rem}

/* ---- Paso ----
   La tarjeta con cabecera que usan casi todas las pantallas. Estaba
   escrita siete veces palabra por palabra: index, comercio, local,
   manual, nota de crédito, usuarios y alta. Cada ajuste de estilo eran
   siete ediciones, y así es como se olvida una.

   La cabecera ya no se separa del cuerpo con una línea: la separa el
   espacio. El número va en pastilla y sigue estando porque acá es
   información — traer, revisar, cuadrar y emitir es una secuencia de
   verdad, no una decoración numerada. */
.paso{
  margin-bottom:1.1rem;
  background:var(--papel);
  border:1px solid var(--junta);
  box-shadow:var(--sombra-chica);
  border-radius:var(--radio-3);
}
.paso > .cab{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:1.15rem 1.4rem .15rem;
}
.paso .orden{
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  color:var(--pino); letter-spacing:.06em;
  background:var(--fondo-ok); border-radius:var(--r-pastilla);
  padding:.2rem .55rem; flex:0 0 auto;
}
.paso h2{font-size:1.02rem; font-weight:600; margin:0; letter-spacing:-.015em}
.paso .nota{font-size:.78rem; color:var(--apagado); margin-left:auto}
@media (max-width:58rem){
  .paso > .cab{padding:.95rem 1rem .1rem; gap:.4rem}
  .paso .nota{margin-left:0; width:100%; font-size:.75rem}
}

/* ---- Campos ---- */
label{
  display:block; font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600;
  color:var(--gris); margin-bottom:.4rem;
}
input, select, textarea{
  padding:.6rem .8rem; border:1px solid var(--junta);
  border-radius:var(--radio-1);
  background:var(--lino); font-family:var(--fuente-texto);
  font-size:.9rem; color:var(--tinta); max-width:100%;
  transition:border-color .15s, box-shadow .15s;
}
/* El foco es dorado en todo el sistema: se ve sobre el lino y sobre
   el bosque, y no se confunde con ningún estado. */
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--laton); outline-offset:1px;
  border-color:var(--pino);
}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem}
.ayuda{font-size:.78rem; color:var(--gris); margin:.3rem 0 0}

/* ---- El logo de la ticketera ----
   Lo usan dos pantallas —la del cliente y la de cada comercio— y son el
   mismo widget, así que vive acá. El fondo es blanco y no papel: es el
   color del rollo, y lo que se muestra ahí es cómo va a salir impreso.
   Sirve además para que se note si la imagen trae un damero pegado, que
   es como vino la primera: lo que parecía transparencia eran píxeles
   grises de verdad. */
.logo-caja{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap}
.logo-vista{
  width:9rem; min-height:5rem; display:flex; align-items:center;
  justify-content:center; padding:.5rem; border:1px solid var(--junta);
  border-radius:var(--r-sm); background:#fff;
}
/* Punteado quiere decir «este no es suyo, lo hereda del cliente». */
.logo-vista.heredado{border-style:dashed}
.logo-vista img{max-width:100%; height:auto; display:block;
                image-rendering:crisp-edges}
.logo-acciones{display:flex; flex-direction:column; gap:.5rem; flex:1 1 14rem}
/* En el teléfono, el campo de elegir archivo medía 368 px como mínimo y
   ensanchaba la página a 399 en uno de 375: se achica con su columna. */
@media (max-width:46rem){
  .logo-vista{width:100%}
  .logo-acciones{min-width:0}
  .logo-acciones input[type=file]{width:100%; min-width:0}
}

/* ---- Botones ----
   Pino es «esto emite»: uno solo por pantalla. Óxido anula o revierte
   algo ya emitido y nunca es el primario. El apagado va siempre con el
   motivo al lado: un botón gris sin explicación es una pared. */
button{
  padding:.58rem 1.15rem; font-family:var(--fuente-texto);
  font-size:.85rem; font-weight:600;
  border:1px solid var(--pino); background:var(--pino);
  color:var(--papel); cursor:pointer;
  border-radius:var(--radio-1);
  transition:background .15s, border-color .15s, box-shadow .15s;
}
button:hover{background:var(--pino-hover); border-color:var(--pino-hover)}
button.sec{background:transparent; color:var(--pino)}
button.sec:hover{background:var(--pino); color:var(--papel)}
button.chico{padding:.3rem .7rem; font-size:.76rem}
button.peligro{background:transparent; border-color:var(--ladrillo); color:var(--ladrillo)}
button.peligro:hover{background:var(--ladrillo); color:var(--papel)}
button:disabled, button:disabled:hover{
  background:var(--apagado-fondo); border-color:var(--apagado-borde);
  color:var(--apagado); cursor:not-allowed; box-shadow:none;
}

/* ---- Tablas ---- */
table{width:100%; border-collapse:collapse; font-size:.86rem}
th{
  text-align:left; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--gris); font-weight:600; padding:.45rem .55rem;
  background:var(--lino-hundido); border-bottom:1px solid var(--junta);
}
td{padding:.45rem .55rem; border-bottom:1px solid var(--junta-clara); vertical-align:middle}

/* ---- Avisos ----
   El aviso dice qué hacer, no solo qué falló. Y lleva de qué comercio
   es: un cartel rojo en la pantalla del comercio que está al día es
   como se aprende a no leer los carteles. */
.aviso{
  padding:.8rem 1rem; font-size:.85rem; margin:.9rem 0;
  background:var(--papel);
  border:1px solid var(--junta); border-left:3px solid;
  border-radius:var(--radio-1);
}
.aviso.info, .aviso.ok{background:var(--fondo-ok); border-color:var(--filo); border-left-color:var(--pino)}
.aviso.alerta{background:var(--fondo-atencion); border-color:var(--filo); border-left-color:var(--laton)}
.aviso.error{
  background:var(--fondo-alarma); border-color:var(--borde-alarma);
  border-left-color:var(--ladrillo); color:var(--error-texto);
}

.oculto{display:none !important}

/* ---- Títulos ----
   Jost es la de la marca: en los títulos ata cada pantalla al logotipo.
   No baja al texto corrido, y es a propósito — una geométrica a 13 px en
   una tabla se lee peor que una humanista, y acá lo que se lee son
   importes. Solo familia y tracking: el tamaño y el peso los sigue
   eligiendo cada pantalla, que sabe cuánto aire tiene. */
h1, h2, h3, h4{
  font-family:var(--display);
  letter-spacing:-.01em;
}

/* ---- El logotipo ----
   `_marca.html`, en la barra y en las pantallas de acceso. El color lo
   pone quien lo incluye; el ancho sale del alto. */
.logotipo{display:block; height:var(--logo-alto, 20px); width:auto; aspect-ratio:1015 / 206; flex:0 0 auto}
/* «Signata Facturación» (B8), el de todas desde el 31/10: casi 3 a 1,
   con «Facturación» abajo de «signata». `--logo-alto` es el alto del
   dibujo entero, así que el iso queda en el 87 % de eso y «Facturación»,
   de mayúscula a pie, en el 23 %: por eso va a 32 px en la barra y no a
   los 20 del de antes. Si no entra —la caja de entrar en un teléfono—,
   se achica entero en vez de salirse. */
.logotipo-sub{height:auto; width:calc(var(--logo-alto, 32px) * 369.98 / 85.92); max-width:100%; aspect-ratio:369.98 / 85.92}

/* ---- Los íconos de interfaz ----
   `_iconos_interfaz.html` (B9). Van siempre con su palabra al lado: el
   que los lleva se pone `con-icono`, y el aire entre los dos lo da el
   `gap`, no un espacio. A 16 px, el tamaño más chico al que el pedido al
   diseñador exigió que se leyeran. El trazo y el color, del dibujo. */
.icono-ui{display:block; width:16px; height:16px; flex:0 0 auto}
.con-icono{display:inline-flex; align-items:center; justify-content:center; gap:.45em}
.logotipo-iso{fill:var(--l-iso, currentColor)}
.logotipo-letras{fill:var(--l-letras, currentColor)}

/* ---- El logotipo de las pantallas de acceso ----
   Entrar e invitación presentan la marca en vez de solo llevarla: el
   logotipo de `_marca.html` a 48 px, centrado y negro, como en el boceto
   A1. En oscuro, iso verde y letras blancas: lo pone el bloque de las
   pantallas que siguen el tema, al final. */
.marca-vertical{
  display:flex; justify-content:center; margin:0 0 1.6rem;
  --logo-alto:48px; --l-iso:var(--negro); --l-letras:var(--negro);
}

/* ---- Los dias sin cerrar ----
   La ventana que aparece al prender el automatico o soltar un freno, si
   quedaron ventas sin facturar de dias anteriores. La arma
   `static/dias_sin_cerrar.js` y la usan tres pantallas, por eso vive aca
   y no en ninguna de ellas. Es la misma caja que el modal del cierre. */
.dsc-capa{
  position:fixed; inset:0; background:var(--velo-ventana);
  display:grid; place-items:center; padding:1.5rem; z-index:60;
  overflow-y:auto;
}
.dsc-modal{
  background:var(--papel);
  border:1px solid var(--junta);
  border-radius:var(--radio-3); box-shadow:var(--sombra-caja);
  padding:1.6rem; width:100%; max-width:40rem; color:var(--tinta);
}
.dsc-modal h3{margin:0 0 .35rem; font-size:1.15rem; font-weight:600;
              text-wrap:balance}
.dsc-modal p.sub{margin:0 0 1rem; font-size:.86rem; color:var(--tinta)}
.dsc-nota{font-size:.8rem; color:var(--gris); margin:.8rem 0 0; max-width:62ch}
.dsc-modal .acciones{display:flex; gap:.6rem; justify-content:flex-end;
                     flex-wrap:wrap; margin-top:1.1rem}

/* Las tres decisiones: botones grandes, con su consecuencia escrita
   abajo. Una decision fiscal no se toma leyendo un rotulo de dos
   palabras. El unico en pino es el que emite todo. */
.dsc-opciones{display:flex; flex-direction:column; gap:.55rem; margin-top:1rem}
.dsc-opcion{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  text-align:left; width:100%; padding:.75rem 1rem; min-height:44px;
}
.dsc-opcion-tit{font-size:.9rem; font-weight:600}
.dsc-opcion-det{font-size:.78rem; font-weight:400; opacity:.85}

.dsc-tabla{width:100%; font-size:.84rem}
.dsc-tabla td.n, .dsc-tabla th.n{text-align:right; white-space:nowrap;
  font-family:var(--mono); font-variant-numeric:tabular-nums}
.dsc-tabla td.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.dsc-tabla-caja{border:1px solid var(--junta); border-radius:var(--r-md);
  overflow:hidden; background:var(--papel)}
.dsc-otra{color:var(--ladrillo); font-weight:600}
.dsc-mal{color:var(--ladrillo)}

/* La lista para elegir: en su propia ventana, con la cabecera pegada
   arriba. Pueden ser cientos de ventas. */
.dsc-filtros{display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  align-items:flex-end; justify-content:space-between}
.dsc-filtros label{display:flex; flex-direction:column; gap:.2rem;
  font-size:.72rem; color:var(--gris); text-transform:uppercase;
  letter-spacing:.08em; font-weight:600}
.dsc-filtros select{font-family:inherit; font-size:1rem; min-height:44px;
  padding:.4rem .6rem; border:1px solid var(--junta);
  border-radius:var(--r-sm); background:var(--papel); color:var(--tinta);
  text-transform:none; letter-spacing:0}
.dsc-filtros-botones{display:flex; gap:.4rem; flex-wrap:wrap}
.dsc-cabecera{font-size:.8rem; color:var(--gris); margin:.8rem 0 .35rem}
.dsc-lista{max-height:min(48vh, 26rem); overflow:auto;
  border:1px solid var(--junta); border-radius:var(--r-md);
  background:var(--papel)}
.dsc-lista th{position:sticky; top:0; z-index:1}
.dsc-tilde{width:2.6rem; text-align:center}
.dsc-tilde input{width:1.15rem; height:1.15rem; accent-color:var(--pino);
  margin:0; cursor:pointer}
.dsc-resumen{font-size:.86rem; margin:.7rem 0 0; font-weight:600}
.dsc-sr{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}
.dsc-solo-angosto{display:none}

@media (max-width:36rem){
  .dsc-capa{padding:.8rem; place-items:start center}
  .dsc-modal{padding:1.1rem}
  .dsc-detalle{display:none}
  .dsc-solo-angosto{display:block}
  .dsc-modal .acciones{flex-direction:column-reverse}
  .dsc-modal .acciones button{width:100%; min-height:44px}
}

/* ============================================================
   Las pantallas que siguen el tema (A8)
   ------------------------------------------------------------
   Los alias de arriba —fondo, superficie, texto— ya se dan vuelta
   con el tema del equipo, pero hasta A8 ninguna pantalla los usa
   para pintar: van en papel, junta y lino, que son fijos. Una
   pantalla pasa al oscuro cuando su <body> dice `class="sigue-tema"`,
   y recién ahí:

   - `color-scheme` se declara, y el navegador dibuja en oscuro la
     barra de desplazamiento y los controles nativos. Se declara en
     el <html> que tiene ese <body>, nunca en general: en una
     pantalla sin pasar pintaría campos oscuros sobre papel claro.
   - El fondo, el texto, los enlaces, el foco, los botones y los
     avisos de esta hoja toman los alias. Las reglas de abajo pesan
     lo mismo que las de arriba (`:where` no suma) y ganan por venir
     después; la barra pesa más y no se entera, salvo su menú, que
     se pinta acá a propósito.

   Lo de cada pantalla sigue en su <style>, con los alias y no con
   papel, junta ni lino: `t110` lo vigila. Una pantalla nueva que pase
   y use algo de esta hoja que todavía no está acá, lo agrega acá.
   ============================================================ */

:root:has(> body.sigue-tema){color-scheme:light}
@media (prefers-color-scheme:dark){
  :root:not([data-modo="claro"]):has(> body.sigue-tema){color-scheme:dark}
}
:root[data-modo="oscuro"]:has(> body.sigue-tema){color-scheme:dark}
@media print{
  :root:has(> body.sigue-tema),
  :root:not([data-modo="claro"]):has(> body.sigue-tema),
  :root[data-modo]:has(> body.sigue-tema){color-scheme:light}
}

body.sigue-tema{background-color:var(--fondo); color:var(--texto)}

/* Adentro de <main>: la barra queda afuera, con sus reglas. */
:where(.sigue-tema main) a{color:var(--accion)}
:where(.sigue-tema main) a:hover{color:var(--texto)}
:where(.sigue-tema main) :focus-visible{outline:2px solid var(--foco); outline-offset:2px}

/* ---- Botones ----
   La acción en azul, uno por tarjeta; el secundario, contorno del
   color del texto. El verde no es un botón: es «salió bien». */
:where(.sigue-tema main) :is(button, .boton){
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--radio-1);
  background:var(--accion); color:var(--accion-sobre); border:1px solid var(--accion);
  font:600 14px/1.2 var(--fuente-texto); text-decoration:none; text-align:center;
  cursor:pointer; box-shadow:none;
}
:where(.sigue-tema main) :is(button, .boton):hover{
  background:var(--accion-hover); border-color:var(--accion-hover); color:var(--accion-sobre);
}
:where(.sigue-tema main) :is(button, .boton).sec{
  background:transparent; color:var(--texto); border-color:var(--texto); font-weight:500;
}
:where(.sigue-tema main) :is(button, .boton).sec:hover{
  background:color-mix(in srgb, var(--texto) 8%, transparent); color:var(--texto);
}
:where(.sigue-tema main) :is(button, .boton).chico{min-height:36px; padding:0 14px; font-size:13px}
:where(.sigue-tema main) :is(button, .boton).peligro{
  background:transparent; color:var(--alarma-texto); border-color:var(--alarma-texto);
}
:where(.sigue-tema main) :is(button, .boton).peligro:hover{
  background:var(--alarma-relleno); border-color:var(--alarma-relleno); color:var(--alarma-sobre);
}
:where(.sigue-tema main) :is(button, .boton):disabled,
:where(.sigue-tema main) :is(button, .boton):disabled:hover{
  background:transparent; color:var(--deshabilitado-texto);
  border:1px dashed var(--borde-control); cursor:not-allowed;
}
@media (pointer:coarse){ :where(.sigue-tema main) :is(button, .boton).chico{min-height:44px} }

/* ---- Insignias ----
   Forma y palabra, nunca solo color: lleno con un cuadrado, punteado
   con un cuadrado hueco, y la alarma con una cruz. */
:where(.sigue-tema) .ins{
  display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px;
  border-radius:var(--radio-pastilla); white-space:nowrap;
  font-size:13px; font-weight:500; line-height:1;
}
:where(.sigue-tema) .ins::before{content:""; width:8px; height:8px; flex:none; box-sizing:border-box}
:where(.sigue-tema) .ins.ok{background:var(--ok-relleno); color:var(--ok-sobre); border:1px solid var(--ok-relleno)}
:where(.sigue-tema) .ins.ok::before{background:currentColor}
:where(.sigue-tema) .ins.atencion{color:var(--atencion-texto); border:1px dashed var(--atencion-texto)}
:where(.sigue-tema) .ins.atencion::before{border:1.5px solid currentColor}
:where(.sigue-tema) .ins.alarma{background:var(--alarma-relleno); color:var(--alarma-sobre); border:2px solid var(--alarma-relleno)}
:where(.sigue-tema) .ins.alarma::before{width:10px; height:10px; background:
  linear-gradient(45deg,transparent 40%,currentColor 40%,currentColor 60%,transparent 60%),
  linear-gradient(-45deg,transparent 40%,currentColor 40%,currentColor 60%,transparent 60%)}

/* ---- Avisos ----
   La forma del error de entrar: la caja con una franja a la
   izquierda. Sobre la página va en superficie; adentro de una
   tarjeta, en el fondo, hundida. */
/* `:is(*, …)` le da a todos el peso de `.aviso.error`, que arriba
   trae fondo y letra propios: sin eso, el error de arriba ganaba. */
:where(.sigue-tema) .aviso:is(*, .info, .ok, .alerta, .error){
  background:var(--superficie); color:var(--texto);
  border:1px solid var(--borde); border-left:5px solid var(--borde-control);
  border-radius:var(--radio-1);
}
:where(.sigue-tema) :is(.tarjeta, .paso, .caja-suelta) .aviso:is(*, .info, .ok, .alerta, .error){background:var(--fondo)}
:where(.sigue-tema) :is(.aviso.info, .aviso.ok){border-left-color:var(--ok-texto)}
/* La franja en el amarillo de texto: el de relleno da 1,46:1 sobre crema. */
:where(.sigue-tema) .aviso.alerta{border-left-color:var(--atencion-texto)}
:where(.sigue-tema) .aviso.error{border-left-color:var(--alarma-forma)}

/* ---- El menú de la barra ----
   La barra es negra en los dos temas; lo que se abre de ella, no:
   sigue el tema como la página que tapa. */
.sigue-tema .barra-sistema .cab-menu-caja{
  background:var(--superficie); color:var(--texto); border-color:var(--borde);
}
.sigue-tema .barra-sistema .cab-menu-caja a{color:var(--texto)}
.sigue-tema .barra-sistema .cab-menu-caja a:hover{background:var(--fondo); color:var(--texto)}
.sigue-tema .barra-sistema .cab-menu-caja :focus-visible{outline-color:var(--foco)}
.sigue-tema .barra-sistema .cab-menu-caja button.salir{color:var(--alarma-texto)}
/* Al pasar, el fondo de los otros renglones y no el tinte rojo del
   claro: en oscuro, el rojo sobre su tinte da 4,08 y hace falta 4,5. */
.sigue-tema .barra-sistema .cab-menu-caja button.salir:hover{background:var(--fondo)}
/* La entrada en la que estás: el fondo de la página y la raya de la
   acción, que se dan vuelta con el tema (en oscuro, 6,60:1). */
.sigue-tema .barra-sistema .cab-menu-caja a[aria-current="page"]{
  background:var(--fondo); box-shadow:inset 3px 0 0 var(--accion);
}
.sigue-tema .cab-menu-quien{color:var(--texto-2); border-bottom-color:var(--borde)}
.sigue-tema .cab-menu-sub,
.sigue-tema .cab-menu-nota{color:var(--texto-2)}
.sigue-tema .cab-menu-nota,
.sigue-tema .barra-sistema .cab-menu-caja a.cab-menu-aparte::before{border-top-color:var(--borde)}

/* ---- Campos y tablas (los trajo Comprobantes) ----
   Como en A1: el rótulo en mayúsculas, el campo hundido con el borde
   del control —el gris, que es el que llega a 3:1— y el foco en el
   azul. La cabecera de una tabla, con una raya del color del texto
   y opaca: va pegada arriba cuando la tabla se desplaza. */
:where(.sigue-tema main) label{color:var(--rotulo)}
:where(.sigue-tema main) :is(input, select, textarea){
  background:var(--campo); color:var(--texto); border:1px solid var(--borde-control);
  border-radius:var(--radio-1);
}
:where(.sigue-tema main) :is(input, select, textarea):focus{
  outline:2px solid var(--foco); outline-offset:1px; border-color:var(--foco);
}
:where(.sigue-tema main) th{
  background:var(--superficie); color:var(--rotulo); border-bottom:1px solid var(--texto);
}
:where(.sigue-tema main) td{border-bottom-color:var(--borde)}

/* ---- El paso, la ayuda y el logo (los trajo la ficha del cliente) ----
   El paso es la tarjeta con cabecera: superficie, borde y la nota en el
   gris de segunda línea. El recuadro del logo sigue blanco en los dos
   temas —es el color del rollo, y lo de adentro es cómo sale impreso—;
   solo su borde pasa al del control. */
:where(.sigue-tema) .paso{background:var(--superficie); color:var(--texto); border-color:var(--borde)}
:where(.sigue-tema) .paso .nota{color:var(--texto-2)}
:where(.sigue-tema main) .ayuda{color:var(--texto-2)}
:where(.sigue-tema) .logo-vista{border-color:var(--borde-control)}
/* «sin logo» va adentro del recuadro blanco: en oscuro, el gris de segunda
   línea daba 2,38 sobre blanco. El gris fijo del claro da 5,33 en los dos
   temas (decidido por el titular el 18/10/2026). */
:where(.sigue-tema) .logo-vista .ayuda{color:var(--gris)}

/* ---- Los días sin cerrar (los trajo la ficha del cliente) ----
   La ventana de `static/dias_sin_cerrar.js`. En la ficha se abre adentro
   de la ventana de pasarelas, así que los botones, los campos y la tabla
   ya los pone el bloque de arriba; acá, la caja y sus textos. Que salga
   con otra fecha es atención; sin fecha posible, no se emite. */
:where(.sigue-tema) .dsc-modal{background:var(--superficie); color:var(--texto); border-color:var(--borde)}
:where(.sigue-tema) .dsc-modal p.sub{color:var(--texto)}
:where(.sigue-tema) :is(.dsc-nota, .dsc-cabecera){color:var(--texto-2)}
:where(.sigue-tema) :is(.dsc-tabla-caja, .dsc-lista){background:var(--superficie); border-color:var(--borde)}
:where(.sigue-tema) .dsc-filtros label{color:var(--rotulo)}
:where(.sigue-tema) .dsc-filtros select{background:var(--campo); color:var(--texto); border-color:var(--borde-control)}
:where(.sigue-tema) .dsc-tilde input{accent-color:var(--accion)}
:where(.sigue-tema) .dsc-otra{color:var(--atencion-texto)}
:where(.sigue-tema) .dsc-mal{color:var(--alarma-texto)}

/* ---- El número del paso (lo trajo el alta) ----
   Arriba va en pino sobre su tinte, que no se dan vuelta: en oscuro,
   una pastilla clara. Acá, el texto sobre el fondo, hundido en el paso. */
:where(.sigue-tema) .paso .orden{color:var(--texto); background:var(--fondo)}

/* ---- Las pantallas sueltas (las trajeron entrar, la invitación, salir y mp_vuelta) ----
   Las que no llevan la barra: una caja sola en el medio, la de entrar
   del boceto A1. En superficie —blanca en claro, gris en oscuro— con
   la franja de la marca arriba, negra o verde, y la sombra de las
   cajas. El ancho y el aire los pone cada pantalla. */
:where(.sigue-tema) .caja-suelta{
  background:var(--superficie); color:var(--texto);
  border:1px solid var(--borde); border-top:6px solid var(--marca);
  border-radius:var(--radio-3); box-shadow:var(--sombra-caja);
}
/* El título con la raya amarilla, como «Entrar al sistema». */
:where(.sigue-tema) .caja-suelta h1{display:flex; align-items:center; gap:10px}
:where(.sigue-tema) .caja-suelta h1::before{content:""; flex:none; width:20px; height:3px; background:var(--amarillo)}
/* El logotipo de entrar y de la invitación: la marca y el texto. */
:where(.sigue-tema) .marca-vertical{--l-iso:var(--marca); --l-letras:var(--texto)}

/* La trama 1 del manual, la de las aperturas: solo en entrar y en la
   invitación. Dorado al 40 % sobre crema; en oscuro, #3D3D3D sobre
   negro, como en A1. Va en un `::before` detrás de la caja y deja ver
   el fondo por los huecos: ninguna plantilla escribe el fondo del body. */
:where(.sigue-tema).con-trama{
  position:relative; isolation:isolate;
  --trama:color-mix(in srgb, var(--dorado) 40%, transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-modo="claro"]) :where(.sigue-tema).con-trama{--trama:var(--oscuro-borde)}
}
:root[data-modo="oscuro"] :where(.sigue-tema).con-trama{--trama:var(--oscuro-borde)}
:where(.sigue-tema).con-trama::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--trama);
  -webkit-mask:url("trama-1.svg") 0 0 / 75.74px 95.06px repeat;
          mask:url("trama-1.svg") 0 0 / 75.74px 95.06px repeat;
}
@media print{ :where(.sigue-tema).con-trama::before{content:none} }

/* ---- Las pestañas y la miga de «Configuración» (las trajo CP1) ----
   La fila de pestañas pasa de una página de «Configuración» a otra sin
   reabrir el menú: la elegida, en el color del texto, con la raya de la
   acción abajo; las demás, en el gris de segunda línea. Se desplaza de
   costado si no entra, y no se parte: cuatro pestañas en dos renglones
   ya no se leen como una fila. Cada una mide 44 px de alto, para el dedo.
   La miga dice de qué lista es la página en la que estás, como el boceto
   del comercio: «Mis comercios › Patagonia». */
:where(.sigue-tema) .pestanas-config{
  display:flex; gap:4px; overflow-x:auto; margin:0 0 1.5rem;
  border-bottom:1px solid var(--borde);
}
:where(.sigue-tema) .pestanas-config a{
  flex:none; display:inline-flex; align-items:center; min-height:44px;
  padding:0 14px; color:var(--texto-2); text-decoration:none;
  white-space:nowrap; font-size:14px;
}
:where(.sigue-tema) .pestanas-config a:hover{color:var(--texto)}
:where(.sigue-tema) .pestanas-config a[aria-current="page"]{
  color:var(--texto); font-weight:600; box-shadow:inset 0 -3px 0 var(--accion);
}
/* Adentro de una caja que se desplaza, el contorno de afuera se corta. */
:where(.sigue-tema) .pestanas-config a:focus-visible{outline-offset:-2px}
:where(.sigue-tema) .miga{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  margin:0 0 .4rem; font-size:.85rem; color:var(--texto-2);
}
:where(.sigue-tema) .miga a{color:var(--accion); font-weight:600; text-decoration:none}
:where(.sigue-tema) .miga a:hover{color:var(--accion); text-decoration:underline}

/* ---- La agenda de compradores de la Factura A (el paso 8) ----
   La lista que sugiere debajo del campo del CUIT —la ventana de la A del
   cierre, la factura manual y la tanda (`static/compradores.js`)— y lo que
   se dice debajo: de dónde salió la razón social y lo que contestó ARCA.
   La lista cuelga del campo (`.cmp-ancla`): así se mueve con él, también
   adentro de una ventana fija. Cada opción mide 44 px, para el dedo. En
   rojo, lo que no deja salir la A; en amarillo, lo que hay que mirar. */
.cmp-ancla{position:relative}
/* Por lo menos 18rem, aunque el campo sea más angosto (el de la tanda): si
   se sale por la derecha, `compradores.js` la corre a la izquierda. */
.cmp-lista{
  position:absolute; left:0; top:calc(100% + 4px); z-index:60;
  width:max(100%, 18rem); max-width:calc(100vw - 2rem); box-sizing:border-box;
  margin:0; padding:4px; list-style:none; max-height:16rem; overflow-y:auto;
  background:var(--superficie); color:var(--texto);
  border:1px solid var(--borde-control); border-radius:var(--radio-2);
  box-shadow:var(--sombra-caja); text-align:left;
}
/* El nombre y el CUIT en una línea si entran; si no, el CUIT abajo. El
   nombre se corta entre palabras, nunca adentro de una. */
.cmp-lista li{
  display:flex; flex-wrap:wrap; gap:0 .75rem;
  align-items:baseline; min-height:44px; padding:6px 10px;
  border-radius:var(--radio-1); cursor:pointer;
}
.cmp-lista li.activa, .cmp-lista li:hover{
  background:var(--fondo); box-shadow:inset 3px 0 0 var(--accion);
}
.cmp-lista .cmp-nombre{flex:1 1 9rem; min-width:0; font-size:.88rem; font-weight:600;
                       overflow-wrap:break-word}
.cmp-lista .cmp-cuit{flex:0 0 auto; font-family:var(--mono); font-size:.82rem;
                     white-space:nowrap; color:var(--texto-2)}
.cmp-lista .cmp-de{flex:1 0 100%; font-size:.74rem; color:var(--texto-2)}
.cmp-lista .cmp-de:empty{display:none}
.cmp-caja{margin-top:.35rem}
.cmp-linea{margin:.25rem 0 0; font-size:.8rem; line-height:1.4; color:var(--texto-2)}
.cmp-linea strong{color:var(--texto); font-weight:600}
.cmp-linea.mal{color:var(--alarma-texto)}
.cmp-linea.atencion{color:var(--atencion-texto)}
/* Dos veces la clase: el `label` de las ventanas pesa lo mismo y va después. */
label.cmp-confirma.cmp-confirma{
  display:flex; align-items:center; gap:.5rem; min-height:44px; margin:.2rem 0 0;
  font-size:.82rem; font-weight:500; color:var(--texto);
  text-transform:none; letter-spacing:0;
}
.cmp-confirma input{width:1.1rem; height:1.1rem; margin:0; accent-color:var(--accion)}
.cmp-boton{
  display:inline-flex; align-items:center; min-height:32px; padding:0 10px;
  margin-left:.25rem; background:transparent; color:var(--accion);
  border:1px solid var(--accion); border-radius:var(--radio-1);
  font:600 .78rem/1 var(--fuente-texto); cursor:pointer; vertical-align:baseline;
}
.cmp-boton:hover{background:color-mix(in srgb, var(--accion) 10%, transparent)}
@media (pointer:coarse){ .cmp-boton{min-height:44px} }