/* ============================================================
   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á.
   ============================================================ */

:root{
  /* ---- Identidad ---- */
  --tinta:#3A2D23;        /* todo el texto, títulos, importes          */
  --bosque:#2C3B31;       /* la barra de arriba                         */
  --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:#A4472F;     /* óxido: freno, reversa, nota de crédito     */
  --gris:#6E645A;         /* etiquetas, excluidos, lo secundario        */
  --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:#EDE4D3;         /* fondo de todas las pantallas               */
  --papel:#FCFBF7;        /* tarjetas, filas, formularios               */
  --junta:#DDCCAC;        /* bordes y reglas                            */
  --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 ----
     La segunda mitad del rediseño: menos borde y más aire. Hasta acá
     lo que separaba una tarjeta del fondo era una línea de 1px; ahora
     la separa la elevación, y el borde queda como un filo que casi no
     está. La escala de radios se anida: cada nivel usa uno más chico
     que el que lo contiene, porque si no la esquina de adentro se ve
     más blanda que la de afuera y la tarjeta parece hundida.        */
  --r-xs:.375rem;      /* casillas, badges                          */
  --r-sm:.55rem;       /* botones, campos, selects                  */
  --r-md:.8rem;        /* bloques internos, avisos, tablas          */
  --r-lg:1.15rem;      /* tarjetas y paneles                        */
  --r-pastilla:999px;  /* chips, avatar, rieles                     */

  /* ---- Vidrio ----
     La tarjeta deja de ser papel opaco y pasa a ser un cristal
     apoyado sobre la atmósfera del fondo. Tres cosas lo hacen, y
     ninguna sola alcanza:
       · el fondo semitransparente, que deja pasar lo de atrás;
       · el desenfoque, que es lo que convierte «transparente» en
         «esmerilado» — sin él se ve una tarjeta lavada;
       · el brillo de 1px en el borde de arriba, que es el canto del
         vidrio agarrando la luz. Es el detalle que más hace.
     Y encima de todo, la sombra: sin ella el cristal no flota, queda
     dibujado.                                                       */
  --vidrio:rgba(252,251,247,.72);
  --vidrio-hundido:rgba(237,228,211,.55);
  --vidrio-borde:rgba(255,255,255,.72);
  --brillo:inset 0 1px 0 rgba(255,255,255,.88);
  --desenfoque:saturate(1.45) blur(16px);

  /* La sombra es cálida, derivada de la tinta, no gris. El fondo tiene
     amarillo adentro — más ahora que es arena — y un gris neutro encima
     se lee como suciedad y no como profundidad.                      */
  --filo:rgba(58,45,35,.07);   /* el borde que casi no está          */
  /* Tres capas y no una: el contacto que apoya la tarjeta contra el
     fondo, la penumbra corta que le da el canto, y la larga y difusa
     que la levanta. Con una sola capa la tarjeta se ve pegada a una
     mancha; con tres se ve arriba del papel.                        */
  --sombra-0:0 1px 2px rgba(58,45,35,.07), 0 2px 5px -2px rgba(58,45,35,.10);
  --sombra-1:0 1px 2px rgba(58,45,35,.07),
             0 4px 9px -3px rgba(58,45,35,.12),
             0 11px 22px -11px rgba(58,45,35,.20);
  --sombra-2:0 2px 4px rgba(58,45,35,.08),
             0 8px 18px -6px rgba(58,45,35,.15),
             0 22px 40px -18px rgba(58,45,35,.26);

  /* ---- Tipografía ---- */
  --display:'Jost',system-ui,sans-serif;
  --texto:'Instrument Sans',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,'Cascadia Mono',monospace;
}

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

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

body{
  margin:0;
  background-color:var(--lino);
  background-image:
    radial-gradient(1000px 560px at  8% -12%, rgba(106,129,110,.34), transparent 58%),
    radial-gradient( 820px 480px at 96%   0%, rgba(193,160,106,.30), transparent 56%),
    radial-gradient( 720px 560px at 55% 104%, rgba( 74, 95, 78,.24), transparent 58%),
    radial-gradient( 560px 380px at 78%  52%, rgba(164, 71, 47,.07), transparent 62%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--tinta);
  font-family:var(--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}

/* 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
   ------------------------------------------------------------
   Verde bosque, no marrón: es el verde puesto en el lugar del
   negro, no en el del acento. Así el pino queda libre para lo
   único que tiene que resaltar, que es el botón que emite.
   ============================================================ */

.barra-sistema{
  /* Teñida y translúcida, pero SIN desenfoque, y eso es a propósito.

     Dos elementos con `backdrop-filter` se pelean por el orden de
     pintado: cada uno abre su propia raíz de fondo, 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 y aunque
     el clic sí llegara al menú. Se veía en Usuarios y en Alta de
     cliente. Comprobado quitándoselo a uno y al otro: con el de la
     barra afuera, el menú vuelve arriba.

     Se eligió sacárselo a la barra y no a las tarjetas porque el vidrio
     se lee en las tarjetas —flotan sobre la atmósfera clara— y casi no
     se lee sobre un verde oscuro. La translucidez se queda.

     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;
  background:rgba(44,59,49,.93);
  color:var(--sobre-bosque);
  padding:.7rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07),
             0 10px 28px -14px rgba(58,45,35,.55);
}


.cab-fila{display:flex; align-items:center; gap:1rem; min-width:0}

/* ---- La marca ---- */
/* El lockup horizontal. Cuelga de `.marca` y no de `.barra-sistema`
   porque la portada pública tiene su propia barra y tenía todas estas
   reglas copiadas: se quedó con la versión vieja del centrado de la S
   mientras las diez pantallas de adentro llevaban la corregida.
   `.marca-vertical` —el lockup apilado de entrar y de la invitación—
   no lleva esta clase, así que no lo alcanza. */
.marca{
  display:inline-flex; align-items:center; gap:0;
  white-space:nowrap;
}
/* El lockup 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 y el navegador muestre a dónde va.
   Y hereda cuerpo y color: la regla general de los enlaces de la barra
   los deja en .78rem, que le comería el lockup. */
.barra-sistema a.marca,
.barra-sistema a.marca:hover{
  font-size:inherit; color:inherit; text-decoration:none;
}
.barra-sistema a.marca:hover .marca-bajada{color:var(--sobre-bosque-enlace)}
.barra-sistema a.marca:focus-visible{outline-offset:4px}
.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.
   `align-self:baseline` con un solo item que lo pida no alinea contra
   nada —el grupo de linea base tiene un solo participante— y el flex lo
   manda al borde de arriba: se lee como un exponente. Hace falta que el
   nombre pida la linea base tambien, y ahi si los dos comparten una.
   Va acotado a la barra: en el lockup apilado el contenedor es una
   columna, donde `baseline` querria decir otra cosa. */
.marca .marca-nombre{align-self:baseline}
/* La S y SIGNATA, centrados entre sí.

   No se alinean solos y no es un descuido del navegador: el símbolo se
   centra por su CAJA y la palabra por su LÍNEA BASE. El centro óptico
   de la palabra está a media altura de mayúscula por encima de la
   base; el del símbolo, a media caja. Con la S midiendo 1,4rem y
   SIGNATA .86rem —altura de mayúscula .727 de eso, medida sobre la
   Jost real, no estimada— la diferencia da 1,2 px, y así estuvo desde
   que existe la barra.

   Va en rem y no en px para que siga cuadrando si alguien agranda el
   texto del navegador: los dos cuerpos salen del mismo rem. */
.marca .marca-s{align-self:center; transform:translateY(-.075rem)}

/* Y pegado a la A, sin hueco. Son dos espacios distintos y hay que
   sacar los dos: el `gap` del flex, y el que deja el propio tracking
   de SIGNATA —`letter-spacing` se aplica DESPUES de cada letra,
   incluida la ultima, asi que el nombre termina con .17em de aire
   invisible—. El margen negativo esta en `em` a proposito: se mide
   contra la tipografia del nombre, que es donde nacio ese aire, y
   sigue cuadrando si manana cambia el cuerpo. Encima de esa
   correccion van 4 px de aire y nada mas: lo justo para que se lean
   como dos palabras y no como una sola. */
.marca .marca-s{margin-right:.5rem}
.marca .marca-nombre{margin-right:calc(-.17em + .25rem)}
/* Algunas pantallas cuelgan su nombre del lockup («Signata · Usuarios»).
   Va separado por un filete dorado, que es lo que une el nombre con la
   bajada en toda la identidad. */
.marca-sufijo{
  font-size:.78rem; color:var(--sobre-bosque-enlace);
  padding-left:.6rem; margin-left:.2rem;
  border-left:1px solid var(--laton);
}

/* ---- Entorno ---- */
.chip{
  font-family:var(--mono); font-size:.68rem;
  padding:.22rem .6rem; border:1px solid var(--borde-bosque);
  border-radius:var(--r-pastilla);
  color:var(--sobre-bosque-tenue);
  white-space:nowrap; letter-spacing:.04em;
}
.chip.prod{border-color:var(--ladrillo); color:#E8A08D}

/* ---- Enlaces ---- */
.barra-sistema a{
  color:var(--sobre-bosque-enlace); text-decoration:none;
  font-size:.78rem; white-space:nowrap;
}
.barra-sistema a:hover{color:var(--sobre-bosque); text-decoration:underline}

.cab-enlaces{
  display:flex; align-items:center; gap:1.1rem;
  flex-wrap:wrap; margin-left:auto;
}

/* ============================================================
   Los menús de la barra
   ------------------------------------------------------------
   Lo de todos los días va suelto —inicio, cierre, 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}

.cab-menu-boton{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .1rem;
  background:none; border:0; box-shadow:none;
  color:var(--sobre-bosque-enlace);
  font-family:var(--texto); font-size:.78rem; font-weight:400;
  white-space:nowrap; cursor:pointer;
}
.cab-menu-boton:hover{background:none; color:var(--sobre-bosque)}
.cab-menu.abierto > .cab-menu-boton{color:var(--sobre-bosque)}

/* La flecha se da vuelta al abrir. Es la única señal de que eso es
   un menú y no un enlace más. */
.cab-flecha{
  width:0; height:0; flex:0 0 auto;
  border-left:.26rem solid transparent;
  border-right:.26rem solid transparent;
  border-top:.28rem solid currentColor;
  transition:transform .15s;
}
.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% + .5rem); left:0; z-index:60;
  min-width:12rem; padding:.4rem;
  /* Casi opaco, a diferencia de las tarjetas. El vidrio de una
     tarjeta deja ver el fondo de la página, que no dice nada; el de
     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:rgba(252,251,247,.96);
  -webkit-backdrop-filter:saturate(1.5) blur(22px);
  backdrop-filter:saturate(1.5) blur(22px);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--r-md);
  box-shadow:var(--brillo), var(--sombra-2);
}
@supports not (backdrop-filter:blur(1px)){
  .cab-menu-caja{background:var(--papel)}
}
.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. La regla de `.barra-sistema a` los
   dejaría en el crema de la barra, ilegibles sobre el papel.

   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` —fondo pino, borde, sombra— o queda un botón verde
   metido en una lista. */
.barra-sistema .cab-menu-caja a,
.barra-sistema .cab-menu-caja button.salir{
  display:block; padding:.5rem .65rem;
  color:var(--tinta); font-size:.85rem; border-radius:var(--r-xs);
  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(--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. Medido, no estimado: 32 contra 36. */
  line-height:1.5;
}
.barra-sistema .cab-menu-caja a:hover{
  background:var(--fondo-ok); color:var(--pino); text-decoration:none;
}
.barra-sistema .cab-menu-caja a.salir,
.barra-sistema .cab-menu-caja button.salir{color:var(--ladrillo)}
.barra-sistema .cab-menu-caja a.salir:hover,
.barra-sistema .cab-menu-caja button.salir:hover{
  background:var(--fondo-alarma); color:var(--error-texto);
}
/* 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:.35rem .65rem .5rem;
  font-size:.72rem; color:var(--gris);
  border-bottom:1px solid var(--junta-clara); margin-bottom:.3rem;
}

/* El avatar es el botón del menú, así que hereda su caja. */
.cab-menu-boton.avatar-enlace{
  padding:.25rem .6rem .25rem .3rem;
  border:1px solid var(--borde-bosque);
  border-radius:var(--r-pastilla);
  background:none;
}
.cab-menu-boton.avatar-enlace:hover,
.cab-menu.abierto > .cab-menu-boton.avatar-enlace{background:var(--bosque-hover)}

/* ---- Avatar ----
   Dorado y no salvia: sobre el verde de la barra un círculo
   salvia desaparece. Es el único lugar del sistema donde el
   dorado no le compite a un estado. */
.avatar-enlace{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.25rem .7rem .25rem .3rem;
  border:1px solid var(--borde-bosque);
  border-radius:var(--r-pastilla);
}
.avatar-enlace:hover{background:var(--bosque-hover); text-decoration:none !important}
.avatar-mini{
  width:1.6rem; height:1.6rem; border-radius:50%; flex:0 0 auto;
  background:var(--laton); color:var(--bosque);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.02em;
}
.avatar-nombre{font-size:.78rem; color:var(--sobre-bosque-enlace)}
.avatar-enlace:hover .avatar-nombre{color:var(--sobre-bosque)}

/* En angosto los enlaces bajan de renglón y se separan con una
   regla, en vez de apretarse contra la marca. */
@media (max-width:58rem){
  /* Pegada arriba, no. En el teléfono la barra mide 200px —marca,
     comercio y seis enlaces en tres renglones—: dejarla fija es
     regalarle un cuarto de la pantalla a la navegación en la pantalla
     donde menos sobra. Se desplaza con la página como todo lo demás. */
  .barra-sistema{padding:.7rem 1rem; position:static; box-shadow:none}
  /* Centrado, no pegado a la izquierda: en el teléfono la barra es
     una fila propia de punta a punta y los enlaces alineados a un
     costado dejan el hueco de un renglón vacío del otro. */
  .cab-enlaces{
    margin-left:0; justify-content:center; gap:.55rem 1rem;
    padding-top:.55rem; border-top:1px solid var(--borde-bosque);
    width:100%;
  }
  .cab-fila.cab-titulo{justify-content:center; width:100%}
  .cab-nav{flex-direction:column; align-items:center; width:100%}
  .cab-cliente{width:100%; text-align:center}
  /* 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%);
  }
  .marca-s{width:.95rem; height:1.26rem}
  .marca-nombre{font-size:.78rem; letter-spacing:.15em}
  .marca-bajada{font-size:.46rem; letter-spacing:.3em}
  .marca-sufijo{font-size:.72rem}
}

/* ============================================================
   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 apoyado sobre el lino, no una caja dibujada encima. El filo
   de 1px sigue estando porque sin él, en una pantalla con poco
   contraste o con el brillo bajo, la tarjeta se funde con el fondo:
   la sombra sola no alcanza. Lo que se fue es la línea que se veía. */
.tarjeta, .vidrio{
  background:var(--vidrio);
  -webkit-backdrop-filter:var(--desenfoque);
  backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--r-lg);
  box-shadow:var(--brillo), var(--sombra-1);
}

/* Donde no hay `backdrop-filter` —Firefox con la opción apagada, un
   navegador viejo del mostrador— el fondo translúcido dejaría ver el
   texto de atrás. Ahí la tarjeta vuelve a ser papel opaco: se pierde
   el vidrio, no la legibilidad. */
@supports not (backdrop-filter:blur(1px)){
  .tarjeta, .vidrio{background:var(--papel)}
}
.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(--vidrio);
  -webkit-backdrop-filter:var(--desenfoque);
  backdrop-filter:var(--desenfoque);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--brillo), var(--sombra-1);
  border-radius:var(--r-lg);
}
.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(--r-sm);
  background:var(--papel); font-family:var(--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}
@media (max-width:46rem){ .logo-vista{width:100%} }

/* ---- 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(--texto);
  font-size:.85rem; font-weight:600;
  border:1px solid var(--pino); background:var(--pino);
  color:var(--papel); cursor:pointer;
  border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--sombra-0);
  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; border-radius:var(--r-xs)}
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(--filo); border-left:3px solid;
  border-radius:var(--r-md); box-shadow:var(--brillo), var(--sombra-0);
}
.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 lockup vertical ----
   Las pantallas de acceso (entrar, invitación) presentan la marca en
   vez de solo llevarla: ahí va el símbolo a color y apilado. Adentro
   del sistema va la silueta de una tinta en la barra, que a 18 px es
   lo único que se distingue. */
.marca-vertical{
  display:flex; flex-direction:column; align-items:center;
  gap:.3rem; margin:0 0 1.6rem;
}
.marca-s-color{width:2.6rem; height:3.45rem; display:block}
.marca-vertical .marca-nombre{
  font-size:1.3rem; color:var(--tinta); margin-top:.5rem;
}
.marca-vertical .marca-bajada{
  align-self:auto; padding-left:.42em; color:var(--pino);
}