/* FACT - styles.css

   Un solo archivo, en bloques marcados con `===== NOMBRE =====`. El orden NO es
   decorativo: el bloque de TELEFONO va al final a proposito, porque necesita
   ganarle a `.grupo-clase.crece`, que apilado convertia un ancho en un alto.
   Si se agrega una regla de telefono, va abajo de todo.

     ===== BASE .............. variables, tipografia, botones, formularios
     ===== ESCRITORIO ........ carga a la izquierda, papel de 80 mm a la derecha
     ===== EMISION ........... comprobante, periodo, detalle, botonera, totales
     ===== SESION ............ quien esta adentro y desde que puesto
     ===== TELEFONO .......... el bloque que tiene que quedar ultimo

   Ver MAPA.md para saber que archivo tocar segun lo que se quiera cambiar. */

:root{
  --fondo:#0f172a; --panel:#ffffff; --borde:#d8dee9; --texto:#1e293b;
  --suave:#64748b; --acento:#1d4ed8; --acento-suave:#eff6ff;
  --error:#b91c1c; --error-suave:#fef2f2; --ok:#15803d; --alerta:#b45309;
  /* La hoja del comprobante es el blanco puro; las cajas que van adentro bajan
     un escalon, para que se lean apoyadas encima y no fundidas con ella. */
  --hoja:#ffffff; --caja-en-hoja:#f8fafc;
}
*{box-sizing:border-box}
/* El [hidden] del navegador es display:none, pero cualquier display de autor
   —el flex de los label, el grid de los paneles— le gana. Poniendolo aca una
   vez, esconder algo desde el JS con .hidden = true funciona en todos lados. */
[hidden]{display:none !important}
body{margin:0;background:#f1f5f9;color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px}

.barra{display:flex;align-items:center;gap:14px;position:relative;
  background:var(--fondo);color:#fff;padding:10px 18px}
.marca{font-size:18px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.marca b{cursor:pointer;user-select:none}
.marca b:hover{opacity:.85}
.marca span{font-size:12px;font-weight:400;opacity:.65;margin-left:8px}
.barra-der{display:flex;align-items:center;gap:12px;margin-left:auto}
/* El globo cierra la barra, despues del ambiente y el punto de venta. */
.quien{flex:0 0 auto}

/* --- Las tres rayitas ---------------------------------------------------
   Las secciones dejaron de ocupar un renglon propio: viven en este menu. El
   renglon que ganamos es el que mas se nota en un telefono. */
.hamburguesa{display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:36px;height:34px;padding:0 8px;cursor:pointer;flex:0 0 auto;
  background:transparent;border:1px solid #334155;border-radius:7px}
/* El `width:100%` NO es decorativo. Chrome le pone `align-items:center` a todo
   `<button>` desde su hoja de estilos: en un flex en columna eso manda en el eje
   horizontal y las tres rayitas -que son `<span>` vacios, sin contenido que las
   ensanche- se achican a CERO. El boton queda como un cuadrado vacio y nadie
   encuentra el menu de secciones. Pasaba en el Chrome de escritorio y no en el
   Chromium con el que corren las pruebas, que es mas viejo. */
.hamburguesa span{display:block;width:100%;height:2px;background:#e2e8f0;
  border-radius:2px;transition:background .12s}
.hamburguesa:hover{border-color:#64748b}
.hamburguesa:hover span{background:#fff}
.hamburguesa[aria-expanded="true"]{border-color:#64748b;background:#1e293b}
.hamburguesa:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}

.menu-secciones{position:absolute;top:calc(100% - 4px);left:14px;z-index:60;
  display:flex;flex-direction:column;min-width:190px;padding:6px;
  background:#fff;border:1px solid var(--borde);border-radius:9px;
  box-shadow:0 10px 28px rgba(15,23,42,.22)}
.menu-secciones[hidden]{display:none}
.menu-secciones .tab{border:0;border-radius:6px;text-align:left;padding:9px 12px;
  font-size:14px;color:var(--texto);background:transparent;display:flex;align-items:center;gap:10px}
.menu-secciones .tab:hover{background:var(--acento-suave);color:var(--acento)}
.menu-secciones .tab.activa{background:var(--acento-suave);color:var(--acento);
  font-weight:600}
.icono-menu{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* En que seccion se esta. Con el menu cerrado, es lo unico que lo dice, y va al
   lado de la marca con el mismo estilo que tenia la bajada: no hacian falta dos
   textos ahi, uno fijo y otro que cambia. */
.marca span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;
  display:inline-block;vertical-align:baseline}
.enlace-demos{font-size:12px;color:#cbd5e1;text-decoration:none;border:1px solid #334155;
  padding:4px 10px;border-radius:999px;white-space:nowrap}
.enlace-demos:hover{color:#fff;border-color:#64748b}
.estado{font-size:12px;padding:4px 10px;border-radius:999px;background:#334155}
.estado.simulado{background:#b45309}
.estado.produccion{background:#15803d}
.estado.homologacion{background:#1d4ed8}

/* La barra de solapas ya no existe como renglon: las secciones estan en el menu
   de las tres rayitas y en el globo del usuario. Estas reglas quedan porque
   `.tab` se sigue usando adentro de los dos menus. */
.tabs{display:flex;gap:2px;background:#e2e8f0;padding:0 12px}
.tab{border:0;background:transparent;padding:11px 18px;cursor:pointer;font-size:14px;
  color:var(--suave);border-bottom:3px solid transparent}
.tab.activa{color:var(--acento);border-bottom-color:var(--acento);font-weight:600;background:#f8fafc}

/* --- Adentro de la plataforma de un cliente ------------------------------
   Violeta y no rojo: no es un error ni una caida, es un aviso de contexto. El
   riesgo de olvidarse es emitir en el CUIT de otro, que no se deshace, asi que
   la barra de arriba cambia de tono y se ve de reojo que este no es tu sistema.
   Habia ademas un cartel arriba de todo; se saco porque el color ya lo dice y el
   cartel ocupaba un renglon en todas las pantallas. */
.como-servicio .barra{background:#3b0764}

/* --- Sin conexion -------------------------------------------------------
   Rojo y ancho completo: es lo unico que importa mientras dura. Va pegado abajo
   de la barra y se queda ahi aunque se scrollee, porque el que esta cargando
   mira el detalle, no el techo de la pagina. */
.sin-conexion{position:sticky;top:0;z-index:45;display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap;justify-content:center;padding:9px 16px;
  background:var(--error);color:#fff;font-size:13px;
  box-shadow:0 6px 16px -10px rgba(15,23,42,.8)}
.sin-conexion b{letter-spacing:.8px}
/* Los botones trabados se ven trabados: si no, se aprieta y no pasa nada. */
.sin-red #btnEmitir:disabled{background:#f1f5f9;border-color:var(--borde);color:#94a3b8}

.panel{display:none;padding:16px;max-width:1180px;margin:0 auto}
#panel-nueva{max-width:1154px}
.panel.activo{display:block}

/* --- Las solapas de Configuracion ---------------------------------------
   Configuracion era una grilla de seis cajas apiladas: para cambiar la IP de la
   impresora habia que pasar por el emisor, ARCA y el resto. Ahora se ve una
   caja por vez y se elige aca. La pantalla no pasa de 800 px -el mismo ancho
   que la hoja del comprobante-: un formulario mas ancho que eso obliga al ojo a
   barrer de punta a punta para leer un renglon. */
#panel-config{max-width:800px}
/* Usuarios es una tabla ancha, no un formulario: con los 800 px de
   Configuración las columnas quedaban partidas en tres renglones cada una. */
#panel-usuarios{max-width:1100px}
.solapas{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;
  border-bottom:1px solid var(--borde)}
.solapa{border:0;background:transparent;padding:9px 15px;cursor:pointer;font-size:13px;
  color:var(--suave);border-bottom:3px solid transparent;border-radius:7px 7px 0 0;
  margin-bottom:-1px}
.solapa:hover{color:var(--acento);background:var(--acento-suave)}
.solapa.activa{color:var(--acento);border-bottom-color:var(--acento);font-weight:600;
  background:var(--panel)}
.solapa:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}

.grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.caja{background:var(--panel);border:1px solid var(--borde);border-radius:10px;
  padding:14px 16px;margin-bottom:14px}
.caja h2{margin:0 0 10px;font-size:15px;font-weight:600}
.nota{margin:-4px 0 10px;font-size:12px;color:var(--suave);line-height:1.4}
.pista{font-size:12px;color:var(--suave)}

.campos{display:flex;flex-wrap:wrap;gap:10px}
.campos-col{display:flex;flex-direction:column;gap:10px}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--suave);flex:1;min-width:130px}
label.ancho{width:100%}
input,select{font:inherit;padding:7px 9px;border:1px solid var(--borde);border-radius:6px;
  background:#fff;color:var(--texto);width:100%}
input:focus,select:focus{outline:2px solid var(--acento-suave);border-color:var(--acento)}

button{font:inherit;cursor:pointer;border-radius:6px}
.primario{background:var(--acento);color:#fff;border:0;padding:9px 18px;font-weight:600}
.primario:disabled{background:#94a3b8;cursor:not-allowed}
.grande{width:100%;padding:12px;font-size:15px;margin-top:10px}
/* Emitir tiene la forma y el tono de los conceptos del detalle -pildora, fondo
   claro, borde y texto del acento- y el tamano que ya tenia. Es la accion
   principal, asi que dentro de esa familia va un escalon mas marcada: el borde
   es de 2 px y el texto pesa mas. */
#btnEmitir{background:#f0fdf4;border:2px solid var(--ok);
  border-radius:999px;color:var(--ok);font-weight:700}
#btnEmitir:hover{background:#dcfce7;border-color:#166534;color:#166534}
#btnEmitir:disabled{background:#f1f5f9;border-color:var(--borde);color:#94a3b8}
.chico{background:#fff;border:1px solid var(--borde);padding:6px 12px;color:var(--texto)}
.chico:hover{border-color:var(--acento);color:var(--acento)}
.acciones{display:flex;align-items:center;gap:10px;margin-top:8px}
.acciones.fija{position:sticky;bottom:0;background:#f1f5f9;padding:10px 0}

.cabecera-items{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cabecera-items h2{margin:0}
.cabecera-items input{max-width:260px}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--suave);font-weight:600;padding:6px 4px;border-bottom:1px solid var(--borde)}
td{padding:4px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
th.der,td.der{text-align:right}
.items .col-cant{width:80px}
.items .col-pu{width:130px}
.items .col-imp{width:130px;text-align:right}
.items .col-x{width:34px}
.items td input,.items td select{padding:6px}
/* El ultimo renglon esta siempre en blanco y es el que agrega: se marca con el
   borde punteado, asi se lee que todavia no es parte del comprobante. */
.items tr.renglon-libre td{border-bottom:1px dashed var(--borde)}
.items tr.renglon-libre input::placeholder{color:#b6c2d2}
.items td.imp{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* El detalle arranca con lugar reservado aunque este vacio: con un solo renglon
   la caja quedaba mas chica que las de arriba y el bloque se veia desfondado.
   Es un piso, no un alto fijo: en cuanto los renglones lo superan, crece.

   El piso se estira con la ventana para que la hoja termine apoyada contra el
   borde de abajo de la pantalla y el TOTAL quede a la vista sin scrollear. Los
   360 px son todo lo demas medido: barra, caja del comprobante, el cierre con
   el total y el aire de los bordes; con ese numero la pagina entra justa y no
   aparece la barra de scroll. Si se toca el alto de alguna de esas partes hay
   que recalcularlo. El `max()` deja 240 px de piso para una pantalla baja.

   `--alto-aviso` lo pone el JS cuando aparece el cartel de venta recuperada, que
   se mete arriba de la hoja y la empujaria abajo del borde. Vale 0 el resto del
   tiempo.

   Va en la caja y no en el `tbody`: los elementos de tabla ignoran min-height
   -medido, el tbody se queda en su alto natural- asi que ahi no hacia nada. */
.caja.detalle{min-height:max(240px,calc(100vh - 360px - var(--alto-aviso, 0px)))}
.quitar{border:0;background:transparent;color:var(--suave);font-size:18px;line-height:1;padding:2px 6px}
.quitar:hover{color:var(--error)}

.listado td{font-size:13px}
.listado .mono{font-variant-numeric:tabular-nums;white-space:nowrap}

.errores{margin:0;padding-left:18px;color:var(--error);font-size:13px;line-height:1.5}
#cajaErrores{background:var(--error-suave);border-color:#fecaca}

.totales #detalleTotales div{display:flex;justify-content:space-between;padding:3px 0;
  font-variant-numeric:tabular-nums}
/* Sin linea arriba: el TOTAL ya se separa solo por tamano y peso, y con el
   renglon de Subtotal afuera no hay nada de lo que tenga que despegarse. */
/* El `gap` no es de adorno: cuando el importe es largo, el renglon llega al
   ancho del bloque y el `space-between` se queda sin lugar que repartir, asi que
   la palabra TOTAL le quedaba pegada al numero. */
.total-grande{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}

/* --- Cobrar y arquear ---------------------------------------------------
   La ventana de cobro y la seccion Caja. El numero que se mira en cada una -el
   total a cobrar y la diferencia del arqueo- va grande: son los dos momentos en
   los que alguien cuenta plata con la mano. */
.cobro-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 14px;margin:4px 0 14px;border-radius:10px;background:var(--acento-suave);
  font-variant-numeric:tabular-nums}
.cobro-total span{font-size:12px;letter-spacing:.6px;color:var(--suave);font-weight:600}
.cobro-total b{font-size:26px;color:var(--acento)}
.et-campo{font-size:12px;color:var(--suave)}
/* Los medios son botones grandes: en un mostrador se toca con el dedo y se
   elige de un vistazo, no de un desplegable. */
.medios{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.medio{border:1px solid var(--borde);background:#fff;color:var(--texto);
  padding:10px 16px;border-radius:999px;font-size:14px}
.medio:hover{border-color:var(--acento);color:var(--acento)}
.medio.elegido{border:2px solid var(--acento);background:var(--acento-suave);
  color:var(--acento);font-weight:600}
/* El vuelto y la diferencia no se escriben: se leen. Van en grande, verdes
   cuando esta bien y rojos cuando no. */
.vuelto{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
  background:#f8fafc;border-style:dashed}
.vuelto.ok{color:var(--ok);border-color:#86efac}
.vuelto.mal{color:var(--error);border-color:#fca5a5}
/* El arqueo se lee como se cuenta el cajon: el fondo arriba, el esperado
   marcado, y las tarjetas abajo -aparte, porque no estan en el cajon-. */
.arqueo td{padding:7px 4px;font-variant-numeric:tabular-nums}
.arqueo .fondo td{color:var(--suave)}
.arqueo .esperado td{font-weight:700;border-top:2px solid var(--borde);
  border-bottom:0;font-size:15px}
.arqueo .aparte td{color:var(--suave);font-size:12.5px;border-bottom-color:#f8fafc}
/* El titulo del grupo de abajo: lo que se cobro pero no esta en el cajon. Separa
   dos cosas que no se suman entre si. */
.arqueo .titulo-aparte td{padding:16px 4px 4px;border-bottom:0;color:var(--suave);
  font-size:11.5px}

/* --- La caja cerrada -----------------------------------------------------
   Un cartel de advertencia con un solo paso, centrado, y no un formulario mas.
   Antes eran dos renglones sueltos con un campo de ~990 px para escribir cinco
   digitos: no se leia como lo que es -que lo que se cobre ahora no va a entrar
   a ningun arqueo- y el boton quedaba lejos del numero. */
/* Sin turno abierto, la caja de la seccion desaparece y queda el cartel solo. */
.caja.sin-turno{border:0;background:transparent;padding:0}
.turno-cerrado{max-width:480px;margin:10px auto 6px;padding:22px 24px 24px;
  text-align:center;border:1px solid #fcd34d;border-radius:14px;background:#fffbeb}
.turno-cerrado h3{margin:12px 0 8px;font-size:19px;color:#7c2d12}
.tc-icono{display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin:0 auto;border-radius:50%;
  background:#fef3c7;color:var(--alerta);border:1px solid #fcd34d}
.tc-aviso{margin:0 auto;max-width:46ch;font-size:13.5px;line-height:1.5;color:#92400e}
/* El paso, en su propia tarjeta blanca: separa lo que hay que LEER de lo que hay
   que HACER, que es la mitad de lo que hace entendible un asistente. El numerito
   «1» se saco el 12/09/2026: numerar el unico paso que hay es decorar. */
.tc-paso{position:relative;margin:16px 0 4px;padding:16px 18px 14px;
  border:1px solid var(--borde);border-radius:11px;background:var(--panel)}
.tc-paso label{display:block;margin-bottom:9px;font-size:14px;font-weight:600;
  color:var(--texto)}
/* Un fondo inicial son cinco digitos y se escribe una vez por dia: va grande y
   centrado, que es donde cae la vista despues de leer la pregunta. */
.tc-paso input{width:170px;text-align:center;font-size:20px;font-weight:700;
  padding:10px 12px;font-variant-numeric:tabular-nums}
.tc-pista{margin:10px auto 0;max-width:46ch;font-size:12px;line-height:1.45;
  color:var(--suave)}
.turno-cerrado .grande{margin-top:16px}
@media (max-width: 700px){
  .turno-cerrado{padding:18px 14px 20px;margin-left:0;margin-right:0}
}

/* --- Las ventas del turno -------------------------------------------------
   La lista con la que el cajero repasa el dia antes de contar el cajon. Lo que
   se busca de un vistazo es la HORA y el IMPORTE -por ahi se engancha el "esta
   no la anote"-, asi que esas dos columnas son las que no se achican. */
.ventas-turno{margin-bottom:18px}
.ventas-turno h3,.titulo-totales{margin:0;font-size:14px}
.titulo-totales{margin:20px 0 4px;color:var(--texto);text-transform:none;
  letter-spacing:0;font-size:14px;font-weight:600}
.ventas-turno .cabecera-items{align-items:baseline}
.ventas-turno .cabecera-items .pista{margin-left:auto}
.ventas-caja .hora-venta{font-weight:700;font-size:14px}
.ventas-caja .lo-vendido{color:var(--suave);max-width:320px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Que papel se le dio al cliente, pegado al numero: una factura y un recibo del
   mostrador se cobran igual pero no son lo mismo, y el que revisa tiene que
   poder separarlos sin abrir nada. */
.et-cbte{display:block;font-size:11px;color:var(--suave);letter-spacing:.2px}
.et-cbte.sin-factura{color:var(--alerta);font-weight:600}
/* Una devolucion saca plata del cajon: se lee distinto o se suma mal. */
.ventas-caja tr.devolucion td:last-child{color:var(--error);font-weight:600}
/* Cobrada sin la caja abierta: esta plata existe y el cierre no la cuenta. */
.ventas-caja tr.fuera{background:#fffbeb}
.ventas-caja tr.fuera td{border-bottom-color:#fde68a}
/* En el telefono no entran cinco columnas, y las que no pueden faltar son la
   hora y el importe: con esas dos se coteja. Asi que la columna de lo vendido
   se cae y su texto pasa a un renglon abajo del numero, que es el unico lugar
   donde sobra lugar. */
.solo-chico{display:none}
@media (max-width: 700px){
  .ventas-caja .lo-vendido,.ventas-caja .medio-venta,
  .ventas-caja th:nth-child(3),.ventas-caja th:nth-child(4){display:none}
  /* `.tabla-scroll .listado` fija 520 px y esta declarada mas abajo: sin la
     clase de mas, esto pierde y la tabla sigue saliendose de la pantalla. */
  .tabla-scroll .listado.ventas-caja{min-width:0}
  /* `.listado .mono` es nowrap, y con el medio y lo vendido en el mismo renglon
     eso empujaba la columna del importe fuera de la pantalla. */
  .ventas-caja td.mono{white-space:normal}
  /* Menos el importe y la hora: un "$ 1.500,00" partido en dos renglones es
     justo el numero que se vino a mirar. */
  .ventas-caja td.der.mono,.ventas-caja .hora-venta{white-space:nowrap}
  .ventas-caja .solo-chico{display:block;margin-top:3px;font-family:inherit;
    font-size:12px;color:var(--suave);white-space:normal}
  .ventas-caja .chip-medio,.ventas-caja .chip{font-size:10.5px;padding:1px 6px}
}
.cierre-z{margin:12px 0}
.cierre-z div{display:flex;justify-content:space-between;padding:5px 0;
  font-variant-numeric:tabular-nums}
.cierre-z div:last-child{border-top:1px solid var(--borde);font-size:17px;margin-top:4px;
  padding-top:8px}
td.ok,.cierre-z .ok{color:var(--ok)}
td.mal,.cierre-z .mal{color:var(--error)}

.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;
  align-items:center;justify-content:center;padding:16px;z-index:50}
.modal-caja{background:#fff;border-radius:12px;padding:20px;max-width:460px;width:100%}
.modal-caja h3{margin:0 0 10px;font-size:17px}
.modal-caja h2{margin:0 0 8px;font-size:18px}
/* La clave recien generada: grande, monoespaciada y facil de dictar. Se puede
   seleccionar con el mouse, que es como la va a copiar la mayoria. */
.clave-generada{font-family:'DejaVu Sans Mono','Courier New',monospace;font-size:20px;
  font-weight:600;letter-spacing:.5px;text-align:center;margin:14px 0 4px;padding:14px;
  background:var(--acento-suave);border:1px dashed var(--acento);border-radius:10px;
  color:var(--acento);user-select:all;word-break:break-all}
.modal-caja .cae{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:1px;margin:6px 0}
.modal-caja .aviso{background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;
  padding:8px 10px;font-size:12.5px;color:var(--alerta);margin:10px 0}
.modal-caja .acciones{flex-wrap:wrap}

/* Contenedor para que una tabla ancha se corra de costado sola, sin arrastrar
   la pagina entera con ella. */
.tabla-scroll .listado{min-width:520px}

/* (Acá había una llave de cierre suelta, sin bloque que cerrar. El navegador la
   ignora, así que no rompía nada a la vista; lo que hacía era emparejar la
   cuenta de llaves del archivo y tapar que al final faltaba una de verdad.) */
.lista-ayuda{margin:12px 0;padding:0;list-style:none;display:grid;gap:7px}
.lista-ayuda li,.lista-ayuda>div{padding:9px 11px;border:1px solid var(--borde);
  border-radius:8px;font-size:13px;line-height:1.45}
.lista-ayuda li{padding-left:35px;position:relative}
.lista-ayuda li::before{content:counter(list-item);position:absolute;left:10px;top:9px;
  width:18px;height:18px;border-radius:50%;background:#e2e8f0;color:#475569;
  text-align:center;font-size:11px;font-weight:700;line-height:18px}
.lista-ayuda .ok{border-color:#86efac;background:#f0fdf4}
.lista-ayuda .falla{border-color:#fca5a5;background:#fef2f2}

/* ===== ESCRITORIO =====================================================
   Escritorio fiscal: carga a la izquierda, papel de 80 mm a la derecha ===
   El papel se queda fijo al hacer scroll: es la referencia permanente de lo que
   se va a imprimir. Abajo de 1000px se apila y va al final. */
/* El ancho de la columna de carga sale de los cuatro cuadrantes de arriba:
   cliente 250 + comprobante 122 + concepto 150 + periodo 150, con tres
   separaciones de 14 = 714, mas los 32 de padding de la caja = 746. Se le
   dejan 14 de aire para que un redondeo no tire el cuarto campo abajo. */
/* La columna de carga llega hasta 800 px, que es el tope de la hoja del
   comprobante: si fuera mas angosta la hoja nunca alcanzaria su ancho. */
.escritorio{display:grid;grid-template-columns:minmax(0,800px) 348px;gap:14px;
  align-items:start;justify-content:center}
/* Con el papel escondido queda solo la carga, centrada y con el mismo ancho. */
.escritorio.sin-papel{grid-template-columns:minmax(0,800px)}
.papel[hidden]{display:none}
.papel{animation:entra-papel .18s ease-out}
@keyframes entra-papel{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
/* Lengüeta pegada al borde derecho para traerlo de vuelta. */
.lengueta-papel{position:fixed;right:0;top:34%;z-index:40;writing-mode:vertical-rl;
  background:var(--fondo);color:#fff;border:0;border-radius:8px 0 0 8px;padding:14px 7px;
  font-size:12px;letter-spacing:.6px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(15,23,42,.6)}
.lengueta-papel:hover{background:var(--acento)}
.lengueta-papel[hidden]{display:none}
.ocultar-papel{padding:2px 9px;font-size:11px;text-transform:none;letter-spacing:0}
.carga{min-width:0}

/* --- La hoja del comprobante ---------------------------------------------
   Comprobante, Detalle y Total son un solo documento en tres partes: van
   adentro de una hoja con esquinas redondeadas, del tono mas claro, y las
   cajas de adentro se apoyan encima. Tope de 800 px: mas ancho que eso el
   renglon del detalle se estira y el ojo pierde la columna de importes. */
.hoja-comprobante{background:var(--hoja);border:2px solid var(--borde);
  border-radius:16px;padding:14px;max-width:800px;margin:0 auto 14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
/* Adentro de la hoja las cajas pierden el margen de abajo del ultimo, o la
   hoja queda con un hueco al pie. */
.hoja-comprobante .caja{background:var(--caja-en-hoja)}
.hoja-comprobante .caja:last-child{margin-bottom:0}
/* El aviso de errores vive afuera de la hoja -es sobre el comprobante, no una
   parte de el- pero alineado con ella. */
#cajaErrores{max-width:800px;margin-left:auto;margin-right:auto}
/* Lo mismo para el aviso de venta recuperada, que ademas va ARRIBA de la hoja:
   se lee antes de mirar lo que quedo cargado. En ambar, no en rojo: no es un
   error, es una explicacion. */
.aviso-recuperado{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:800px;margin:0 auto 10px;padding:8px 12px;font-size:13px;color:var(--alerta);
  background:#fffbeb;border:1px solid #fcd34d;border-radius:9px}
.papel{position:sticky;top:12px;display:flex;flex-direction:column;gap:8px}
.papel-cab{display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--suave);font-weight:600}
.papel-hoja{background:#e2e8f0;border:1px solid var(--borde);border-radius:10px;padding:12px;
  display:flex;justify-content:center;max-height:78vh;overflow-y:auto}
#vistaTicket{width:288px;border:0;background:#fff;display:block;min-height:320px;
  box-shadow:0 1px 0 #cbd5e1,0 12px 24px -16px rgba(15,23,42,.5)}
.nota.centrada{text-align:center;margin:0}

/* Cabecera del comprobante: recuadro de letra + campos */
/* Alineados por abajo: Cliente y Comprobante ya no llevan etiqueta -se leen
   solos: uno dice el nombre y el otro la clase y el codigo- y los que si la
   llevan son mas altos. Sin esto, los recuadros quedarian escalonados. */
.cab-comprobante{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.grupo-clase{display:flex;flex-direction:column;gap:4px}
.grupo-clase[hidden]{display:none}
.grupo-clase .et{font-size:12px;color:var(--suave)}
/* Recuadro desplegable: se ve UNO solo (el elegido) y al tocarlo bajan todas
   las combinaciones de clase y tipo. */
.comprobantes,.conceptos,.clientes,.periodos{display:flex;position:relative}

/* Período: el panel no es una grilla de opciones sino un calendario chico.
   Se elige el mes entero de un toque, o el rango exacto abajo. */
.cbte-btn.apagado{opacity:.5;cursor:not-allowed;background:#f8fafc}
.cbte-btn.apagado:hover{border-color:var(--borde)}
#conceptos .cbte-btn,
#periodos .cbte-btn{width:150px;padding:0 10px}
.panel-periodo{display:block;width:262px;padding:10px}
.panel-periodo[hidden]{display:none}
.periodo-anio{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:8px;font-size:14px}
.periodo-anio .chico{padding:2px 10px;line-height:1.2}
.meses{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mes-btn{font:inherit;font-size:12px;padding:6px 0;border:1px solid var(--borde);border-radius:6px;
  background:#fff;color:var(--texto);cursor:pointer}
.mes-btn:hover{border-color:var(--acento);color:var(--acento)}
.mes-btn[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:#fff;
  font-weight:600}
.periodo-rango{display:grid;gap:7px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--borde)}
.periodo-rango label{font-size:11px;flex-direction:row;align-items:center;justify-content:space-between;
  gap:8px}
.periodo-rango input{width:142px}
.periodo-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.periodo-pie .pista{color:var(--error)}

/* El cliente se queda con todo el ancho que sobra en la fila: es el dato mas
   largo y el que mas cambia. Si el nombre no entra se corta con puntos
   suspensivos, no rompe la fila.

   `flex-basis:0` y no `260px`: con una base de 260 el cliente reclamaba ese
   ancho antes de encogerse, y al angostar la ventana el comprobante no entraba
   y se caia al renglon de abajo. Con base 0 el cliente cede primero y el
   comprobante se queda arriba, que es donde tiene que estar. */
.grupo-clase.crece{flex:1 1 0;min-width:0}

/* El comprobante NUNCA baja de renglon: es el campo que dice que se esta por
   emitir y tiene que estar a la vista al lado del cliente, en cualquier ancho.
   No crece, no se estira, y colabora angostandose cuando hay poco lugar. */
#grupoComprobante{flex:0 0 auto}
#clientes{width:100%}
#clientes .cbte-btn{width:100%;padding:0 12px;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#clientes .cbte-btn .den{font-size:13px;font-weight:600;line-height:1.2;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clientes .cbte-btn .cod{font-size:10.5px;letter-spacing:0;opacity:.9}
/* El desplegable de clientes no es una grilla de recuadros como los demas:
   arriba el buscador —que se queda quieto— y abajo la lista, que es la que
   scrollea. Si scrolleara el panel entero el buscador se iria de la vista. */
#clientes .opciones{width:100%;min-width:290px;padding:0;gap:0;overflow:visible}
.buscador-cli{padding:8px;border-bottom:1px solid var(--borde)}
.buscador-cli input{font-size:13px}
.lista-cli{max-height:296px;overflow-y:auto;padding:6px;display:grid;gap:4px}
.opcion-cli{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;text-align:left;background:#fff;border:1px solid transparent;
  border-radius:6px;padding:6px 9px;color:var(--texto);font:inherit;cursor:pointer}
.opcion-cli .den{font-size:13px;font-weight:600;line-height:1.2;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opcion-cli .cod{font-size:10.5px;color:var(--suave);line-height:1.2;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opcion-cli:hover,.opcion-cli.marcado{background:var(--acento-suave);border-color:var(--acento)}
.opcion-cli[aria-pressed="true"]{border-color:var(--acento);background:var(--acento-suave)}
.opcion-cli[aria-pressed="true"] .den{color:var(--acento)}
/* Los dos primeros no se filtran nunca: el mostrador y el alta rapida tienen
   que estar siempre a un toque. */
.opcion-cli.fijo .den{font-weight:600}
.opcion-cli.nuevo .den{color:var(--acento)}
.separador-cli{height:1px;background:var(--borde);margin:3px 2px}
.vacio-cli{margin:6px 4px}
.error-cli{margin:0;font-size:12px;color:var(--error);min-height:15px}

/* El titulo, la fecha y el numero comparten renglon; la fecha queda centrada. */
.cabecera-comprobante{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;margin-bottom:10px}
.cabecera-comprobante h2{margin:0;font-size:15px;font-weight:600}
.cabecera-comprobante .numero-tentativo{text-align:right}
.cbte-btn.sin-letra .den{font-size:13px;font-weight:500;line-height:1.2}
.cbte-btn{background:#fff;border:2px solid var(--borde);border-radius:3px;
  width:122px;height:62px;display:grid;place-content:center;text-align:center;
  color:var(--suave);cursor:pointer;padding:0 8px;position:relative;gap:1px;font:inherit}
.cbte-btn b{font-size:19px;font-weight:700;line-height:1;display:block}
.cbte-btn .den{font-size:10.5px;line-height:1.15;display:block}
.cbte-btn .cod{font-size:8px;letter-spacing:.4px;display:block;opacity:.8}
.cbte-btn:hover{border-color:var(--acento)}
.cbte-btn.elegido{border-color:var(--acento);color:var(--acento);background:var(--acento-suave)}
.cbte-btn.elegido::after{content:"▾";position:absolute;right:4px;bottom:1px;font-size:10px;
  line-height:1;opacity:.6}
/* OJO: sin esta primera regla el panel no se oculta nunca. El `display:grid`
   de abajo es CSS de autor y le gana al [hidden]{display:none} del navegador,
   asi que poner el atributo desde el JS no alcanza. */
.opciones[hidden]{display:none}
.opciones{position:absolute;top:calc(100% + 6px);left:0;z-index:20;display:grid;gap:7px;
  background:#fff;border:1px solid var(--borde);border-radius:9px;padding:8px;
  box-shadow:0 12px 28px -12px rgba(15,23,42,.45)}
.opciones .cbte-btn[aria-pressed="true"]{border-color:var(--acento);color:var(--acento);
  background:var(--acento-suave)}
/* Los recuadros de la derecha abren hacia adentro. Anclados a la izquierda como
   los demas, el panel (mas ancho que el boton) se salia de la ficha. */
#comprobantes .opciones,#conceptos .opciones,#periodos .opciones,
#corrige .opciones{left:auto;right:0}

/* El comprobante que corrige una nota: mismo recuadro que los demas, con la
   lista abajo. Se ancla a la derecha para no salirse de la ficha. */
#corrige .cbte-btn{width:170px;padding:0 10px}
.panel-corrige{display:block;width:330px;max-height:320px;overflow-y:auto;padding:7px}
.panel-corrige[hidden]{display:none}
.lista-corrige{display:flex;flex-direction:column;gap:5px}
.opcion-corrige{font:inherit;text-align:left;background:#fff;border:1px solid var(--borde);
  border-radius:8px;padding:7px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.opcion-corrige:hover{border-color:var(--acento);background:var(--acento-suave)}
.opcion-corrige.marcado{border-color:var(--acento);background:var(--acento-suave)}
.opcion-corrige .den{font-size:13px;font-weight:600;color:var(--texto)}
.opcion-corrige .cod{font-size:11px;color:var(--suave)}

/* Botonera de conceptos: lo que se toca en vez de escribir. Renglon propio
   arriba del detalle, que envuelve si son muchos. */
.botonera{display:flex;flex-wrap:wrap;gap:6px}
.concepto{font:inherit;font-size:13px;line-height:1.15;padding:7px 13px;cursor:pointer;
  background:#fff;border:1px solid var(--borde);border-radius:999px;color:var(--texto)}
.concepto:hover{border-color:var(--acento);color:var(--acento);background:var(--acento-suave)}
/* Con color propio: los tres valores llegan juntos desde la paleta del backend,
   asi que el contraste esta garantizado. El hover sube el borde, no cambia el
   color: el boton tiene que seguir siendo reconocible. */
.concepto.con-color{background:var(--c-fondo);border-color:var(--c-borde);color:var(--c-texto)}
.concepto.con-color:hover{border-color:var(--c-texto);background:var(--c-fondo);
  color:var(--c-texto);box-shadow:0 0 0 2px var(--c-borde)}
/* La botonera ocupa el lugar del renglon libre: mismo borde punteado, para que
   se lea que todavia no es parte del comprobante. */
.items tr.renglon-botonera td{border-bottom:1px dashed var(--borde);padding:8px 4px}

/* Y su administracion en Configuracion. */
/* El renglon-tarjeta de cada concepto -`.preset`, `.den`, `.mover`, `.flecha`,
   `.color-preset`- se fue el 12/09/2026 con la pantalla que lo usaba: Conceptos
   ahora dibuja la botonera de verdad (`.botonera` + `.concepto`, mas abajo) y
   edita cada uno en una ficha. Las reglas quedaban sin un solo elemento que las
   usara. */

/* Alta de cliente: el renglon del padron y el cartel de la clase. */
.fila-padron{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 2px}
.pista.ok{color:var(--ok)}
.pista.alerta{color:var(--alerta)}
.clase-cliente{display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:8px;
  background:var(--acento-suave);border:1px solid var(--acento);flex-wrap:wrap}
.clase-cliente b{color:var(--acento);font-size:15px}
.clase-cliente span{font-size:12px;color:var(--suave)}
.clase-cliente.imposible{background:var(--error-suave);border-color:#fecaca}
.clase-cliente.imposible b{color:var(--error)}
.clase-cliente[hidden]{display:none}

/* Casilla de verificacion: el label general es columna, esta va en fila. */
label.casilla{flex-direction:row;align-items:flex-start;gap:8px;line-height:1.4}
label.casilla input{width:auto;margin-top:2px;flex:0 0 auto}
label.casilla b{color:var(--texto)}

/* La fecha vive en el renglon del titulo, como un texto mas: se ve plana y al
   tocarla abre el calendario. */
.fecha-texto{position:relative;border:0;background:transparent;padding:2px 6px;width:auto;
  text-align:center;font-weight:600;color:var(--texto);cursor:pointer;border-radius:6px}
.fecha-texto:hover{background:var(--acento-suave);color:var(--acento)}
.fecha-texto:focus{outline:2px solid var(--acento-suave)}
.fecha-texto::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer}
.fecha-caja{display:flex;flex-direction:column;align-items:center;gap:1px}
.fecha-caja .et{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--suave)}
.fecha-texto.fuera{color:var(--error);background:var(--error-suave)}

.campos.crece{flex:1;min-width:280px}
label.crece{flex:1;min-width:220px}
.acciones.sin-margen{margin-top:0;align-items:flex-end}
.separador{border-top:1px solid var(--borde);margin:12px 0}
.numero-tentativo{font-size:12px;color:var(--suave);font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Cierre: totales a la izquierda, emitir a la derecha */
/* Centrado, no alineado abajo: el boton mide 50 px y el TOTAL 26, asi que
   pegandolos por la base el numero quedaba hundido y el boton flotando.

   Los botones a la izquierda y el total contra el borde derecho. El total NO
   lleva `flex:1`: si se estirara, el renglon quedaria con la palabra TOTAL
   pegada a los botones y el numero lejisimos. Con un ancho acotado y el
   `margin-left:auto`, la palabra y el importe viajan juntos al borde derecho,
   que es donde el ojo busca la cifra. */
.cierre-comprobante{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.lado-totales{margin-left:auto;min-width:210px;max-width:340px}
.lado-emitir{display:flex;align-items:center;gap:10px}
/* `.grande` nace ancho y con aire arriba, que aca no va: son dos botones en
   fila, no uno solo abajo de un formulario. */
.lado-emitir .grande{width:auto;margin-top:0;padding:12px 20px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:9px}
/* Los iconos son trazo, no relleno: heredan el color del boton -verde, rojo o
   gris cuando esta apagado- sin tener que repetirlo en cada estado. */
.lado-emitir svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Cancelar es rojo y Emitir verde, los dos con la misma forma de pildora clara:
   el color dice que hace cada uno antes de leerlos. Emitir pesa un escalon mas
   -borde de 2 px y texto mas fuerte- porque es la accion principal. */
.btn-cancelar{background:var(--error-suave);border:2px solid #fca5a5;color:var(--error);
  border-radius:999px;font-weight:600}
.btn-cancelar:hover{background:#fee2e2;border-color:var(--error)}

/* --- El pre-vuelo de ARCA -----------------------------------------------
   Cada renglón es un control con su veredicto. El color no alcanza para
   distinguirlos —hay gente que no lo ve—, así que el estado va escrito en la
   marca de la izquierda y no sólo en el tono.
   Va antes de los @media: el bloque de teléfono tiene que quedar último. */
.prevuelo{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.prevuelo li{display:flex;gap:10px;align-items:baseline;padding:8px 10px;
  border:1px solid var(--borde);border-radius:8px;background:var(--caja-en-hoja);
  font-size:13px;line-height:1.45}
.prevuelo .marca-estado{flex:0 0 auto;font-weight:700;font-size:11px;
  letter-spacing:.6px;min-width:64px}
.prevuelo .que{font-weight:600}
.prevuelo .detalle{color:var(--suave)}
.prevuelo li.ok{border-color:#86efac}
.prevuelo li.ok .marca-estado{color:var(--ok)}
.prevuelo li.falla{border-color:#fca5a5;background:var(--error-suave)}
.prevuelo li.falla .marca-estado{color:var(--error)}
.prevuelo li.aviso{border-color:#fcd34d;background:#fffbeb}
.prevuelo li.aviso .marca-estado{color:var(--alerta)}
.prevuelo li.sin_datos .marca-estado{color:var(--suave)}
.prevuelo li.veredicto{background:var(--panel);font-size:14px}

@media (max-width:1000px){
  .escritorio{grid-template-columns:1fr}
  .papel{position:static;order:2}
  .papel-hoja{max-height:none}
}

/* Angostado progresivo del comprobante. No es un salto: a medida que sobra
   menos lugar el recuadro se achica, y el cliente -que ya cede primero- se
   queda con el resto. Asi el par cliente + comprobante entra siempre en el
   mismo renglon, que es de lo que se trata. */
@media (max-width:860px){
  #grupoComprobante .cbte-btn{width:104px;padding:0 6px}
  #grupoComprobante .cbte-btn .den{font-size:9.5px}
}
@media (max-width:740px){
  #grupoComprobante .cbte-btn{width:92px;padding:0 4px}
  #grupoComprobante .cbte-btn b{font-size:17px}
  #grupoComprobante .cbte-btn .den{font-size:9px}
  #grupoComprobante .cbte-btn .cod{font-size:7.5px}
}


/* ===== SESION =========================================================
   Quien esta adentro y desde que puesto -----------------------------------
   Todo vive en la barra negra de arriba: nombre, rol, punto de venta y salir.
   Es lo que hay que poder mirar de reojo sin abrir ninguna solapa. */
/* El usuario es un globo con su inicial. De ahi cuelgan solamente acciones
   personales, como cambiar la clave o salir; las secciones estan en las tres
   rayitas. */
.quien{display:flex;align-items:center;gap:8px;font-size:12px;color:#cbd5e1;
  position:relative}
.quien b{color:#fff;font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;cursor:pointer;
  display:grid;place-content:center;font:inherit;font-size:14px;font-weight:700;
  color:#fff;background:#334155;border:1px solid #475569;letter-spacing:0}
.avatar:hover{background:#475569;border-color:#94a3b8}
.avatar[aria-expanded="true"]{background:var(--acento);border-color:var(--acento)}
.avatar:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}

.menu-usuario{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  display:flex;flex-direction:column;min-width:210px;padding:6px;
  background:#fff;border:1px solid var(--borde);border-radius:9px;
  box-shadow:0 10px 28px rgba(15,23,42,.22)}
.menu-usuario[hidden]{display:none}
.mu-cabeza{display:flex;flex-direction:column;gap:2px;padding:8px 12px 10px;
  border-bottom:1px solid var(--borde);margin-bottom:5px}
.mu-cabeza b{color:var(--texto);font-size:14px}
/* Adentro del menu el rol es un chip chico y alineado a la izquierda, no una
   barra de lado a lado: el `.rol` general esta pensado para la barra oscura y
   ahi es un `display:block` que se estira. */
.mu-cabeza .rol{align-self:flex-start;display:inline-block;width:auto;
  font-size:10px;padding:2px 8px}
.mu-item{border:0;border-radius:6px;text-align:left;padding:9px 12px;font:inherit;
  font-size:14px;color:var(--texto);background:transparent;cursor:pointer;
  text-decoration:none;display:flex;align-items:center;gap:10px}
.mu-item:hover{background:var(--acento-suave);color:var(--acento)}
.mu-item.activa{background:var(--acento-suave);color:var(--acento);font-weight:600}
.mu-item[hidden]{display:none}
.mu-salir{margin-top:5px;border-top:1px solid var(--borde);border-radius:0 0 6px 6px;
  color:var(--suave)}
.mu-salir:hover{background:var(--error-suave);color:var(--error)}
.puesto{display:flex;flex-direction:row;align-items:center;gap:7px;font-size:11px;
  color:#94a3b8;min-width:0;flex:0 0 auto}
.puesto[hidden]{display:none}
.puesto select{width:auto;font-size:12px;padding:4px 8px;background:#1e293b;color:#fff;
  border-color:#334155}

/* El rol se lee de un golpe, en la barra y en la tabla de usuarios. */
.rol{font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:2px 8px;border-radius:999px;
  background:#334155;color:#e2e8f0;white-space:nowrap}
.rol.admin{background:#7c2d12;color:#fff}
.rol.facturador{background:#1d4ed8;color:#fff}
.rol.consulta{background:#475569;color:#fff}
/* El rol, adentro de la tabla, habla como los demas chips: tinta sobre fondo
   claro y un borde. Solido y saturado es para la barra oscura del menu, donde
   hace falta ese contraste; en una lista de cuatro personas eran cuatro carteles
   gritando al lado de un nombre. */
#cuerpoUsuarios .rol{display:inline-block;font-weight:600;letter-spacing:0;
  border:1px solid transparent}
#cuerpoUsuarios .rol.admin{background:#fef2f2;color:#9a3412;border-color:#fecaca}
#cuerpoUsuarios .rol.facturador{background:var(--acento-suave);color:var(--acento);
  border-color:#bfdbfe}
#cuerpoUsuarios .rol.consulta{background:#f1f5f9;color:#475569;border-color:#e2e8f0}

.tab[hidden]{display:none}
/* El cartel azul de arriba de Usuarios. Se llamaba `.aviso-sso` de cuando el
   login venia del Hub INDEX; el nombre quedo mintiendo dos meses. */
.aviso-usuarios{margin:0 0 12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;
  padding:9px 12px;color:#1e40af}
.aviso-usuarios a{color:inherit}

/* Lo que se avisa sin trabar nada: un permiso a medida, alguien sin ningun
   punto de venta. No es un error -se puede guardar igual- pero no puede pasar
   desapercibido, que es lo que pasaba. */
.aviso-flojo{color:#92400e}
.a-medida{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;
  background:#fef3c7;color:#92400e;border:1px solid #fde68a}

/* ---- La pantalla Usuarios -------------------------------------------------
   El alta vive en una ventana, no en un formulario clavado al costado de la
   tabla: asi no le come la mitad del ancho cuando no se esta dando de alta a
   nadie, que es casi siempre. La forma -barra con buscador y filtros, tabla
   ancha, ventana- es la misma que FF. */
/* La barra de Usuarios se fue el 12/09/2026: la pantalla usa la misma
   `.barra-tabla` que Emitidos, Clientes y Conceptos. */

/* El filtro vive DENTRO del titulo de la columna, como el autofiltro de Excel:
   el embudo al lado del nombre, y al tocarlo se abre la lista. No es una barra
   aparte ni un renglon abajo de la cabecera: es la cabecera. */
/* El embudo va pegado AL LADO del nombre, no contra el borde derecho de la
   celda: con columnas anchas, contra el borde queda mas cerca del titulo de la
   columna siguiente que del suyo, y se lee al reves. */
/* Titulo a la izquierda, embudo y orden a la derecha, como en la planilla y como
   en la bandeja de FF. Y la celda entera es el boton que abre el filtro. */
.th-titulo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.th-botones{display:inline-flex;align-items:center;gap:3px;flex:none}
th.filtrable{cursor:pointer;user-select:none}
th.filtrable:hover{background:var(--acento-suave)}

/* Ordenar por la columna. La flecha dice en que sentido esta ordenando, y "↕"
   que esa no es la columna por la que se ordena hoy. */
.orden{width:19px;height:19px;flex:none;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--borde);background:#fff;color:var(--suave);
  border-radius:5px;font-size:9px;line-height:1}
.orden:hover{background:var(--acento-suave);color:var(--acento);border-color:var(--acento)}
.orden.activo{background:var(--acento);color:#fff;border-color:var(--acento)}
.embudo{width:19px;height:19px;flex:none;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--borde);background:#fff;color:var(--suave);
  border-radius:5px}
.embudo svg{width:12px;height:12px;display:block}
.embudo:hover{background:var(--acento-suave);color:var(--acento);border-color:var(--acento)}
/* Una columna filtrada tiene que gritarlo: es lo unico que despues explica por
   que faltan filas. */
/* Una columna filtrada se marca en ROJO, no en el azul de la aplicacion: azul
   es "esto esta seleccionado" y aca lo que hay que decir es "esta tabla NO te
   esta mostrando todo". Es el mismo criterio que usa FF. */
.embudo.activo{background:#fee2e2;color:#b42318;border-color:#f4a9a2}
.embudo.activo:hover{background:#fecaca;color:#991b1b;border-color:#ef9a92}

.filtro-pop{position:fixed;z-index:60;width:250px;max-width:calc(100vw - 20px);
  background:#fff;border:1px solid var(--borde);border-radius:10px;padding:10px;
  box-shadow:0 14px 34px rgba(15,23,42,.22);text-transform:none;letter-spacing:0}
.filtro-pop-titulo{font-size:12px;font-weight:600;color:var(--texto);margin-bottom:7px}
.filtro-pop input{font-size:12.5px;padding:5px 8px;background:var(--caja-en-hoja);
  color:var(--texto)}
.filtro-pop-lista{max-height:230px;overflow-y:auto;margin:8px 0;display:grid;gap:1px}
.filtro-opcion{flex-direction:row;align-items:center;gap:7px;margin:0;padding:3px 4px;
  font-size:13px;color:var(--texto);min-width:0;border-radius:5px;cursor:pointer}
.filtro-opcion:hover{background:var(--acento-suave)}
.filtro-opcion input{width:auto;flex:none}
.filtro-opcion span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtro-pop-pie{display:flex;align-items:center;justify-content:space-between;gap:6px;
  border-top:1px solid var(--borde);padding-top:8px;flex-wrap:nowrap}
.filtro-pop-pie>span{display:flex;gap:4px;flex-wrap:nowrap}
.filtro-pop-pie .chico{white-space:nowrap;padding:3px 8px;font-size:12px}

/* El embudo de la columna abierta se marca, para saber de cual es el menu. */
.embudo[aria-expanded="true"]{background:var(--acento-suave);color:var(--acento);
  border-color:var(--acento)}

/* Cuatro acciones escritas son cuatro botones que se leen antes que el nombre
   de la persona. En icono, la fila vuelve a ser la persona. */
.acciones-fila{white-space:nowrap}
.icono{width:29px;height:29px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--borde);background:#fff;color:var(--suave);
  border-radius:7px;vertical-align:middle}
.icono + .icono{margin-left:4px}
.icono svg{width:15px;height:15px;display:block}
.icono:hover{background:var(--acento-suave);color:var(--acento);border-color:var(--acento)}
.icono:focus-visible{outline:2px solid var(--acento-suave)}
.icono.peligro:hover{background:#fff1f2;color:var(--error);border-color:#fca5a5}

/* La persona: la inicial, el nombre y abajo con que usuario entra. */
.persona{display:flex;align-items:center;gap:9px;min-width:0}
.persona .inicial{width:32px;height:32px;flex:none;border-radius:8px;display:grid;
  place-items:center;background:var(--acento-suave);color:var(--acento);
  font-weight:700;font-size:13px}
.persona b{display:block;color:var(--texto)}
.persona .pista{display:block;font-size:11px}

/* Un estado se lee de un vistazo o no se lee. */
.chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.chip.vivo{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.chip.apagado{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.chip.aviso{background:#fffbeb;color:#92400e;border-color:#fde68a}

#tablaUsuarios td{vertical-align:top}

/* La ventana del alta es mas ancha que las demas: adentro entran los ocho
   permisos y los puntos de venta, uno al lado del otro. Y con tope de alto, o
   en una pantalla baja el boton Guardar queda abajo de todo sin poder llegar. */
.modal-caja.ancha{max-width:760px;max-height:calc(100vh - 40px);overflow-y:auto}
.cabecera-modal{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cabecera-modal .nota{margin:2px 0 0}
.dos-columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;margin-top:12px}

/* El enlace de clave: la URL entera y el boton de copiar al lado. */
.fila-enlace{display:flex;gap:8px;align-items:center;margin:12px 0 8px}
.fila-enlace input{flex:1;min-width:0;font-size:12px;background:var(--caja-en-hoja);
  color:var(--texto)}
.fila-enlace .primario{white-space:nowrap}

/* Los permisos se tildan de a uno, con una linea abajo que dice que es cada uno:
   quien los reparte no tiene por que adivinarlo.

   OJO con el checkbox: la regla general `input,select` le pone `width:100%`, asi
   que sin `width:auto` se come el renglon entero y el texto se escapa de la
   caja. Es lo que le paso a este bloque el 09/09/2026, y es la misma linea que
   `.tilde-pv input` ya tenia aca abajo. */
.tilde-permisos{display:grid;gap:2px;border:1px solid var(--borde);border-radius:8px;padding:6px 8px}
.tilde-permiso{flex-direction:row;align-items:flex-start;gap:8px;font-size:13px;
  color:var(--texto);min-width:0;margin:0;padding:4px 2px;line-height:1.3;border-radius:6px}
.tilde-permiso:hover{background:var(--acento-suave)}
.tilde-permiso input{width:auto;flex:0 0 auto;margin-top:2px}
.tilde-permiso>span{flex:1;min-width:0}
.tilde-permiso b{font-weight:600}
.tilde-permiso .pista{display:block;font-size:11px;line-height:1.3}

/* Los puntos de venta de un usuario se tildan, no se escriben. */
.et-campo{display:block;font-size:12px;color:var(--suave);margin-bottom:4px}
.tilde-pvs{display:grid;gap:5px;border:1px solid var(--borde);border-radius:8px;padding:8px;
  max-height:150px;overflow-y:auto}
.tilde-pvs[hidden]{display:none}
.tilde-pv{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--texto);
  min-width:0;margin:0}
.tilde-pv input{width:auto;flex:0 0 auto}
.tilde-pv b{font-variant-numeric:tabular-nums}

/* Una fila dada de baja se ve apagada, pero se ve: no desaparece. */
.listado tr.baja td{opacity:.55}


/* ===================== TELEFONO =====================================
   La app es de mostrador: en el telefono lo que importa es cargar un
   comprobante con una mano y ver siempre el total y el boton de emitir.
   Todo lo demas se apila y se agranda. */
@media (max-width:640px){
  body{font-size:15px}
  .panel{padding:10px}

  /* Nadie escribe en un campo de 14px sin que el telefono le haga zoom solo:
     16px es el minimo que iOS acepta sin acercar la pantalla. */
  input,select,textarea{font-size:16px;padding:9px 11px}

  /* --- barra: rayitas, marca y globo arriba; puesto y ambiente abajo ---
     Con las secciones dentro del menu, el primer renglon entra completo en un
     telefono: tres rayitas, el nombre, y el globo del usuario. */
  .barra{flex-wrap:wrap;gap:8px;padding:9px 12px}
  .marca{font-size:16px}
  .marca span{display:none}
  .menu-secciones{left:10px;right:10px;min-width:0}
  /* Abajo el punto de venta y el ambiente; arriba, la marca y el globo. */
  .barra-der{width:100%;order:3;justify-content:space-between;gap:8px;flex-wrap:wrap;
    margin-left:0}
  .estado{font-size:10.5px;padding:4px 9px;order:3}
  /* El globo se queda arriba, pegado a la derecha: es de donde se sale. */
  .quien{position:static;order:1;gap:6px;margin-left:auto}
  .avatar{width:32px;height:32px;font-size:13px}
  .menu-usuario{position:absolute;top:52px;right:10px;left:auto;min-width:200px}
  .puesto{order:2}

  /* --- solapas: se corren de costado en vez de amontonarse --- */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 8px;
    scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;padding:11px 14px;flex:0 0 auto}
  /* Adentro de los menus el boton es un renglon, no una solapa que se corre. */
  .menu-secciones .tab,.mu-item{white-space:normal;flex:0 0 auto;padding:11px 13px}

  /* --- cabecera del comprobante: un campo por renglon, a lo ancho ---
     Ojo con `crece`: en fila era ancho, pero apilado en columna ese
     `flex:1 1 260px` pasa a ser ALTO y abre un hueco enorme debajo del
     cliente. En vertical cada grupo mide lo que mide. */
  .cab-comprobante{flex-direction:row;flex-wrap:wrap;gap:10px;align-items:flex-end}
  .grupo-clase,.grupo-clase.crece{width:100%;flex:0 0 auto}
  /* Cliente y Comprobante comparten renglon: el cliente se lleva el ancho que
     sobra y el comprobante lo justo, que es una letra y dos palabras. */
  #grupoCliente{flex:1 1 0;width:auto;min-width:0}
  #grupoComprobante{flex:0 0 108px;width:auto}
  #grupoComprobante .cbte-btn{padding:0 4px}
  #grupoComprobante .cbte-btn .den{font-size:10px}
  #grupoComprobante .cbte-btn .cod{font-size:7.5px}
  .comprobantes,.conceptos,.clientes,.periodos,.corrige{width:100%}
  #comprobantes .cbte-btn,#conceptos .cbte-btn,#periodos .cbte-btn,
  #corrige .cbte-btn,#clientes .cbte-btn{width:100%;height:56px}
  /* Los desplegables se anclan a la izquierda y nunca pasan el borde. */
  #comprobantes .opciones,#conceptos .opciones,#periodos .opciones,
  #corrige .opciones,#clientes .opciones{left:0;right:auto;width:100%;
    min-width:0;max-width:calc(100vw - 40px)}
  .panel-periodo,.panel-corrige{width:100%}
  .periodo-rango input{width:auto;flex:1}
  /* La hoja se ajusta: con su padding mas el de las cajas, el contenido
     perderia demasiado ancho en una pantalla de 360 px. */
  .hoja-comprobante{padding:8px;border-radius:12px}
  .cabecera-comprobante{grid-template-columns:1fr auto;gap:6px}
  .cabecera-comprobante .numero-tentativo{grid-column:1/-1;text-align:left;font-size:11px}

  /* --- detalle: cada renglon es una tarjeta, no una fila apretada ---
     La descripcion se lleva un renglon entero y abajo van cantidad, precio,
     importe y la cruz. Con cuatro columnas de tabla no entra nada. */
  .items thead{display:none}
  .items,.items tbody,.items tr,.items td{display:block;width:auto}
  /* La cruz sube al renglon de la descripcion, arriba a la derecha, y el importe
     se lleva lo que sobra del segundo renglon.

     Antes la cruz iba al final del segundo renglon, al lado del importe, con el
     importe en `min-width:80px` y `white-space:nowrap`: un importe de cinco
     cifras se pasaba de su columna y quedaba dibujado ENCIMA de la cruz
     (`$ 38.500,00x`). La regla que lo acomodaba vivia en el bloque de 380 px,
     asi que entre 381 y 640 -donde caen casi todos los telefonos de verdad- no
     la agarraba nadie. Ahora el importe es la columna elastica y no puede
     invadir a nadie; y de paso la cruz queda lejos del numero, que es donde
     tiene que estar una accion destructiva. */
  .items tr{border:1px solid var(--borde);border-radius:10px;padding:9px;
    margin-bottom:8px;display:grid;grid-template-columns:74px 104px 1fr 28px;
    gap:8px;align-items:center}
  .items tr.renglon-libre{border-style:dashed}
  .items td{border:0;padding:0}
  .items td:nth-child(1){grid-column:1/4;grid-row:1}   /* descripcion, arriba */
  .items td:nth-child(5){grid-column:4;grid-row:1;text-align:right}  /* la cruz */
  .items td:nth-child(2){grid-column:1;width:auto}     /* cantidad */
  .items td:nth-child(3){grid-column:2;width:auto}     /* precio */
  .items td input{width:100%}
  .items td.imp{grid-column:3/5;text-align:right;font-weight:600;min-width:0}
  /* El renglon libre no tiene cruz: la descripcion se lleva el ancho entero en
     vez de dejar el hueco de 28 px reservado para algo que no esta. */
  .items tr.renglon-libre td:nth-child(1){grid-column:1/-1}
  .items tr.renglon-botonera{display:block;padding:10px 9px}
  .items tr.renglon-botonera td{width:auto}
  .concepto{padding:9px 15px;font-size:14px}

  /* --- el cierre: total y emitir, siempre a la vista ---
     Queda pegado abajo mientras se cargan renglones. La columna lleva un
     colchon del alto del cierre para que el ultimo renglon no quede tapado. */
  .carga{padding-bottom:8px}
  /* Aca el total ya vive pegado abajo por su cuenta: el detalle vuelve a su
     piso fijo, o quedaria un hueco largo entre el ultimo renglon y el cierre. */
  .caja.detalle{min-height:240px}
  .caja.totales{position:sticky;bottom:8px;z-index:6;margin-bottom:0;
    box-shadow:0 -10px 26px -14px rgba(15,23,42,.5)}
  .cierre-comprobante{flex-direction:column;align-items:stretch;gap:12px}
  /* Apilado, el total va arriba: es lo que se mira antes de apretar nada. */
  .lado-totales{min-width:0;max-width:none;margin-left:0;order:-1}
  .lado-emitir{width:100%}
  /* Angosto, los dos se reparten el ancho; `Emitir ticket` no puede partirse en
     dos renglones, asi que se le sacan pixeles al padding y no a la palabra. */
  .lado-emitir .grande{flex:1;width:auto;padding:14px 10px}
  .total-grande{font-size:19px}

  /* --- el ticket no compite por lugar en una pantalla de 6 pulgadas --- */
  .lengueta-papel{display:none}
  .papel{display:none}

  /* --- fichas, listados y ventanitas --- */
  .grilla{grid-template-columns:1fr}
  .caja{padding:14px}
  .cabecera-items{flex-wrap:wrap}
  .cabecera-items input{max-width:none;width:100%}
  .acciones{flex-wrap:wrap}
  .acciones .primario,.acciones .grande{flex:1}
  label{min-width:0}
  .campos{flex-direction:column;gap:10px}
  .modal{align-items:flex-end;padding:0}
  .modal-caja{max-width:none;border-radius:14px 14px 0 0;max-height:92vh;
    overflow-y:auto;padding:18px}
}

/* Telefonos angostos: se le sacan los ultimos pixeles al aire. */
@media (max-width:380px){
  .panel{padding:8px}
  .caja{padding:11px}
  /* Mismo armado que arriba, con las dos columnas fijas mas angostas: lo unico
     que se achica es lo que se tipea, no el importe. */
  .items tr{grid-template-columns:64px 92px 1fr 26px}
  .items td:nth-child(3){width:auto}
}
/* ^ Esta llave faltaba. El bloque `@media (max-width:380px)` quedaba abierto
   hasta el final del archivo: el navegador lo cierra solo al terminar, asi que
   nunca se vio roto, pero TODO lo que se agregara despues caia adentro del
   media query y solo se aplicaba en pantallas de menos de 380 px. Es la trampa
   que se comio la primera version de los estilos de abajo. */


/* ===== AGREGADOS TANDA 1 ================================================
   Van al final a proposito: el bloque de TELEFONO tiene que seguir ganandole a
   `.grupo-clase.crece`, y esto no compite con nada de ahi. */

/* El importe que el arqueo ciego tapa. No es un error ni un dato que falta: es
   un dato que todavia no corresponde ver, y tiene que leerse asi. */
.tapado{color:var(--suave);font-size:12px;font-style:italic;
  font-variant-numeric:normal;
  /* La celda es `.mono` porque ahi van importes. Esto no es un importe: se
     escribe con la tipografia del texto para que no parezca un numero roto. */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* La rueda del boton mientras se pide el CAE.

   Contra ARCA son entre 1 y 4 segundos. Antes el boton solo cambiaba el texto a
   "Pidiendo CAE...", que en un mostrador con gente esperando se lee como que no
   paso nada y se vuelve a apretar. */
.primario.esperando svg{display:none}
.primario.esperando::before{content:"";width:16px;height:16px;flex:0 0 auto;
  /* `currentColor` con un tramo transparente: el boton de emitir es verde sobre
     blanco y el de cobrar es blanco sobre azul. Con un color fijo la rueda se
     volvia invisible en uno de los dos. */
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:girando .7s linear infinite}
@keyframes girando{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .primario.esperando::before{animation-duration:2.4s}
}

/* El aviso que reemplaza a los `alert()`: aparece abajo, no traba la pantalla y
   se va solo. Un `alert()` del navegador frena TODO hasta que alguien lo
   acepta, y el de la impresora ademas decia cuantos bytes se mandaron, que es
   un dato para el que programo, no para el que atiende. */
.aviso-flotante{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:90;max-width:calc(100vw - 32px);padding:11px 18px;border-radius:9px;
  background:#1e293b;color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 10px 30px rgba(15,23,42,.35);animation:aparece .18s ease-out}
.aviso-flotante.mal{background:var(--error)}
.aviso-flotante.ok{background:var(--ok)}
.aviso-flotante[hidden]{display:none}
@keyframes aparece{from{opacity:0;transform:translate(-50%,8px)}
                   to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.aviso-flotante{animation:none}}


/* ===== AGREGADOS TANDA 2 ================================================
   El mostrador: estado de la caja a la vista, cobro con menos tecleo y atajos.
   Va después del bloque de TELÉFONO, que ya cierra su @media. */

/* --- El chip de la caja en la barra ---------------------------------------
   Cerrada NO es un error -se puede vender igual- pero sí es algo que hay que
   resolver, así que va en ámbar y no en rojo. El rojo de la barra está
   reservado para lo que impide emitir. */
.chip-caja{font:inherit;font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid transparent}
.chip-caja[hidden]{display:none}
.chip-caja.abierta{background:#064e3b;color:#a7f3d0;border-color:#065f46}
.chip-caja.abierta:hover{background:#065f46}
.chip-caja.cerrada{background:#78350f;color:#fde68a;border-color:#92400e}
.chip-caja.cerrada:hover{background:#92400e}
.chip-caja:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}

/* --- El aviso de que no hay turno abierto, en la ventana de cobro ---------
   En efectivo la plata entra al cajón y no queda en ningún cierre: ahí el aviso
   es fuerte. En tarjeta o QR el dinero no pasa por el cajón y alcanza con
   mencionarlo, así que el mismo bloque baja de tono. */
.aviso-sin-caja{border:1px solid #fcd34d;background:#fffbeb;border-radius:9px;
  padding:10px 12px;margin:0 0 12px}
.aviso-sin-caja[hidden]{display:none}
.aviso-sin-caja p{margin:0;font-size:13px;line-height:1.45;color:#92400e}
.aviso-sin-caja.fuerte{border-color:var(--alerta);background:#fef3c7}
.aviso-sin-caja .abrir-aqui{display:flex;align-items:flex-end;gap:8px;margin-top:9px;
  flex-wrap:wrap}
.aviso-sin-caja .abrir-aqui label{font-size:11px;color:#92400e;gap:3px}
/* Un fondo inicial son cinco dígitos, no una frase: el campo mide lo que se
   escribe adentro. */
.aviso-sin-caja .abrir-aqui input{width:110px;font-variant-numeric:tabular-nums}

/* --- Con cuánto paga, de un toque ---------------------------------------- */
.billetes{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.billetes[hidden]{display:none}
.billete{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;
  border:1px solid var(--borde);border-radius:9px;background:var(--panel);
  color:var(--texto);cursor:pointer;font-variant-numeric:tabular-nums}
.billete:hover{border-color:var(--acento);color:var(--acento);
  background:var(--acento-suave)}
.billete:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
/* El primero es el importe justo: es el caso más común y se distingue. */
.billete:first-child{font-weight:700;border-color:var(--ok);color:var(--ok)}
.billete:first-child:hover{background:#f0fdf4;border-color:var(--ok)}

/* --- El tilde de imprimir ------------------------------------------------- */
.imprimir-al-cobrar{display:flex;align-items:flex-start;gap:9px;margin:12px 0 2px;
  font-size:13px;line-height:1.4;cursor:pointer}
.imprimir-al-cobrar.apagada{color:var(--suave);cursor:default}
.imprimir-al-cobrar input{margin-top:2px;flex:0 0 auto}

/* La pista de los atajos, al lado de los botones del cobro. Chiquita: es para
   el que ya sabe, no para el que recién llega. */
.atajo-pista{margin-left:auto;font-size:11px;color:var(--suave);white-space:nowrap}

/* --- Cómo fue la impresión, en el cartel del CAE --------------------------
   Con el tilde puesto el papel sale solo y el cartel se cierra solo. Si la
   impresión falla, esto se queda a la vista y el cartel NO se cierra: el
   comprobante ya tiene CAE y lo único inaceptable es que nadie se entere. */
.estado-impresion{margin:12px 0 0;font-size:13px;line-height:1.45}
.estado-impresion:empty{display:none}
.estado-impresion.yendo{color:var(--suave)}
.estado-impresion.ok{color:var(--ok);font-weight:600}
.estado-impresion.mal{color:var(--error);font-weight:600;background:var(--error-suave);
  border:1px solid #fca5a5;border-radius:8px;padding:9px 11px}

/* --- La lista de atajos --------------------------------------------------- */
.lista-atajos{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.lista-atajos li{display:flex;align-items:center;gap:12px;font-size:14px}
.lista-atajos kbd{flex:0 0 auto;min-width:44px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;
  padding:4px 8px;border:1px solid var(--borde);border-bottom-width:2px;
  border-radius:6px;background:var(--caja-en-hoja);color:var(--texto)}

@media (max-width:640px){
  /* En un teléfono la barra ya lleva marca, puesto y ambiente: el chip va al
     renglón de abajo y ocupa lo que necesita, sin apretar al resto. */
  .chip-caja{order:1;font-size:10.5px;padding:4px 9px}
  .billete{flex:1 1 calc(50% - 8px);text-align:center;padding:12px 8px}
  .atajo-pista{display:none}   /* no hay teclado que valga la pena anunciar */
}


/* ===== AGREGADOS TANDA 3 ================================================
   Los cuatro locales: el tablero, el cambio de cajero y la calculadora de
   billetes del arqueo. */

/* El tablero de locales vive entero en `gestion.css`, que es donde esta el
   resto de las pantallas de gestion. Hasta el 12/09/2026 estaba escrito en los
   DOS archivos: aca la version vieja -renglones, `.marca-estado`, `.cuando`,
   `.numeros`, `.caja-si`- que ya no dibuja nadie, y alla la nueva. De esa
   convivencia salia, por ejemplo, que la insignia de la caja se cayera de
   renglon: el `flex-wrap` de aca le ganaba al `header` de alla. */

/* --- Cambiar de cajero ---------------------------------------------------- */
.lista-cajeros{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cajero{font:inherit;display:flex;flex-direction:column;gap:1px;text-align:left;
  padding:9px 14px;border:1px solid var(--borde);border-radius:9px;
  background:var(--panel);color:var(--texto);cursor:pointer;min-width:130px}
.cajero b{font-size:14px}
.cajero span{font-size:11px;color:var(--suave)}
.cajero:hover{border-color:var(--acento)}
.cajero.elegido{border-color:var(--acento);background:var(--acento-suave)}
.cajero.elegido b{color:var(--acento)}

/* --- Contar billete por billete ------------------------------------------
   Plegado de entrada: el que ya contó escribe el total y no lo abre nunca. */
.contador-billetes{margin:10px 0 4px;border:1px solid var(--borde);border-radius:9px;
  background:var(--caja-en-hoja)}
.contador-billetes summary{padding:10px 13px;cursor:pointer;font-size:13px;
  font-weight:600;color:var(--acento)}
.contador-billetes[open] summary{border-bottom:1px solid var(--borde)}
.billetera{width:100%;border-collapse:collapse;margin:0}
.billetera td{padding:4px 13px;border:0;font-size:13px}
.billetera .valor{width:96px;color:var(--suave)}
.billetera .por{width:14px;color:var(--suave);text-align:center}
.billetera .cuantos{width:74px;text-align:right;font-variant-numeric:tabular-nums;
  padding:5px 8px}
.billetera .sub{width:110px;font-variant-numeric:tabular-nums;color:var(--texto)}
.billetera .sueltas td{padding-top:9px;color:var(--suave)}
.billetera .sueltas input{width:110px}
.billetera-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border-top:1px solid var(--borde);font-size:13px}
.billetera-pie b{font-size:19px;font-variant-numeric:tabular-nums;margin-right:auto}

@media (max-width:640px){
  .total-dia{gap:16px}
  .total-dia b{font-size:20px}
  .local .cuando{margin-left:0;width:100%}
  .local .alerta button{margin-left:0;width:100%}
  .cajero{flex:1 1 100%}
  .billetera .valor{width:auto}
  .billetera .sub{width:auto}
}


/* ===== AGREGADOS TANDA 4 ================================================ */

/* --- El lector de código de barras ----------------------------------------
   Arriba del detalle, ancho: es por donde entra cada producto. Sólo aparece si
   hay algún concepto con código cargado. */
.barra-codigo{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.barra-codigo[hidden]{display:none}
.barra-codigo input{flex:1;font-size:15px;padding:10px 12px;
  border:1px solid var(--acento);border-radius:9px;background:var(--acento-suave)}
.barra-codigo input:focus{outline:2px solid var(--acento);outline-offset:1px;
  background:var(--panel)}
.barra-codigo .pista{flex:0 0 auto;max-width:40%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* --- Deshacer el renglón borrado ------------------------------------------
   Aparece abajo de la hoja, cinco segundos. No pregunta antes de borrar -son
   decenas de borrados por día y preguntar cada vez sería peor-: borra en el
   acto y deja volver. */
.deshacer{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:9px;
  background:#1e293b;color:#fff;font-size:14px;font-weight:600;max-width:calc(100vw - 32px);
  box-shadow:0 10px 30px rgba(15,23,42,.35);animation:aparece .18s ease-out}
.deshacer[hidden]{display:none}
.deshacer span{flex:1;font-weight:400}
.deshacer .chico{flex:0 0 auto;background:transparent;color:#93c5fd;border-color:#475569;
  font-weight:700}
.deshacer .chico:hover{background:#334155;color:#fff}

/* --- La cantidad -----------------------------------------------------------
   Un campo y nada más. Tenía un + y un − al costado; se sacaron el 11/09/2026
   por pedido del usuario: la cantidad arranca en 1, que es lo que vale casi
   toda venta de mostrador, y el que vende dos la escribe. */
.celda-cant{display:flex;align-items:center}
.celda-cant input{flex:1;min-width:0;text-align:center}

/* --- El código del concepto, en Conceptos --------------------------------- */
.cod-preset{width:120px;flex:0 0 auto;font-size:12px;padding:6px 8px}

@media (max-width:640px){
  .barra-codigo{flex-wrap:wrap}
  .barra-codigo .pista{max-width:none;width:100%}
  .cod-preset{width:100%}
}

/* El aviso flotante y el deshacer viven en el mismo rincón. Si aparecen los dos
   a la vez -se borró un renglón y algo avisó-, el aviso sube en vez de taparlo. */
body:has(.deshacer:not([hidden])) .aviso-flotante{bottom:80px}


/* ===== EL ALTA RAPIDA DE CLIENTE =========================================
   Tenía ocho campos apilados y un botón que había que acordarse de apretar. Es
   la ventana que más se abre en un mostrador: ahora hay UNA cosa arriba —el
   documento—, de la que sale todo lo demás. */
.alta-cliente{max-width:460px}
.alta-cliente h3{margin:0 0 14px}

/* El documento, destacado: es el único campo que hay que tipear. */
.doc-cliente{display:flex;align-items:flex-end;gap:10px;padding:12px;
  border:1px solid var(--acento);border-radius:10px;background:var(--acento-suave)}
.doc-cliente label{gap:4px}
.doc-cliente input{font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.5px;
  padding:9px 11px}
.doc-cliente .crece{flex:1;min-width:0}

/* La rueda de la consulta al padrón. La consulta sale sola, así que el que
   espera no apretó nada: si no se mueve nada, parece colgado. */
.girando{flex:0 0 auto;width:20px;height:20px;margin-bottom:9px;border-radius:50%;
  border:2px solid var(--acento);border-top-color:transparent;
  animation:girando .7s linear infinite}
.girando[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.girando{animation-duration:2.4s}}

/* Lo que contestó ARCA cuelga del recuadro del documento, que es de donde salió:
   pegado al campo de arriba y separado del formulario de abajo, o se lee como si
   fuera la etiqueta de «Razón social». */
#avisoPadronRapido{margin:7px 2px 16px;line-height:1.4}
#avisoPadronRapido:empty{display:none}
/* El renglón del error no ocupa lugar mientras no hay error: dejaba un hueco
   grande entre «Más datos» y los botones. */
#errorClienteRapido:empty{display:none;margin:0}
.alta-cliente .acciones{margin-top:14px}

/* Lo que casi nunca se toca, plegado. */
.mas-datos{margin:4px 0 2px;border-top:1px solid var(--borde);padding-top:8px}
.mas-datos summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--acento);
  padding:4px 0}
.mas-datos > label,.mas-datos > .campos{margin-top:9px}

/* El botón de buscar va pegado al CUIT, del alto del campo: es el final del
   único renglón que hay que completar, no una acción suelta. */
#btnTraerArcaRapido{flex:0 0 auto;padding:9px 18px}

/* Lo que contestó ARCA: una ficha, no un formulario. Se lee, no se toca, y por
   eso no tiene ni borde de campo ni fondo blanco -si pareciera un input,
   alguien iba a intentar corregir el nombre del padrón-. */
.ficha-padron{display:flex;flex-direction:column;gap:3px;margin:0 2px 12px;
  padding:11px 13px;border-radius:9px;background:var(--caja-en-hoja);
  border-left:3px solid var(--acento)}
.ficha-padron[hidden]{display:none}
.ficha-padron b{font-size:15px;line-height:1.3}
.ficha-padron span{font-size:13px;color:var(--suave)}

/* El correo es lo único que ARCA no trae y el negocio sí necesita. Queda a la
   vista y en el camino, con su explicación abajo: es a dónde se le manda la
   factura. */
.correo-cliente{margin-top:12px}

/* ===== LA CLASE QUE NO LE CORRESPONDE AL CLIENTE =========================
   La clase la elige el cliente, pero se puede cambiar a mano. Cuando la elegida
   no es la del receptor -una A a consumidor final, por ejemplo- el recuadro lo
   dice en el acto: antes eso salia recien al pedir el CAE, con el cliente
   adelante. No traba nada; el que corta, si de verdad no se puede, es el
   backend. */
.cbte-btn.elegido.ajena{border-color:var(--alerta);color:var(--alerta);
  background:#fffbeb}
.cbte-btn.elegido.ajena::before{content:"!";position:absolute;left:4px;top:1px;
  font-size:11px;font-weight:700;line-height:1}


/* Cómo pagó, en la grilla de Emitidos: un chip por medio. Una venta partida
   entre dos medios muestra los dos, y el embudo la trae tildando cualquiera. */
.chip-medio{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;
  border-radius:999px;background:var(--acento-suave);color:var(--acento);
  border:1px solid #bfdbfe;white-space:nowrap}


/* ===== EL MOSTRADOR SIN FACTURA POR VENTA ================================
   La venta sale con un papel NO FISCAL y se factura despues, junto con las
   demas, en UNA factura global por el total. El cajero tiene que saber que
   papel le esta por dar al cliente ANTES de cobrar, no despues. */
.aviso-mostrador{margin:10px 0 4px;padding:10px 12px;border-radius:9px;
  border:1px solid var(--borde);background:var(--caja-en-hoja)}
.aviso-mostrador p{margin:0 0 7px;font-size:13px;line-height:1.4}
.aviso-mostrador .mostrador-si{color:var(--alerta)}
.aviso-mostrador .mostrador-no{color:var(--ok)}
.aviso-mostrador .casilla{font-size:12.5px}

/* El cartel del final, cuando lo que salio no fue una factura. */
.aviso-nofiscal{margin:10px 0;padding:10px 12px;border-radius:9px;
  border:1px solid var(--alerta);background:#fffbeb;font-size:13px;line-height:1.45;
  text-align:left}

/* Lo que se mira antes de apretar el boton de la factura global. */
.pendiente-mostrador{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.pm-dato{flex:1 1 170px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--borde);background:var(--caja-en-hoja)}
.pm-dato span{display:block;font-size:11.5px;color:var(--suave);
  text-transform:uppercase;letter-spacing:.4px}
.pm-dato b{display:block;margin-top:4px;font-size:21px;font-variant-numeric:tabular-nums}

/* El interruptor del mostrador. Va arriba de la factura global porque es el
   mismo tema: prenderlo es decidir que el mostrador factura por total. */
.interruptor-mostrador{margin:14px 0 4px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--borde);background:var(--caja-en-hoja)}
.interruptor-mostrador .casilla{align-items:flex-start;font-size:13px;line-height:1.45}
.medios-mostrador{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 2px;
  padding-top:10px;border-top:1px solid var(--borde)}
.medios-mostrador .casilla{font-size:13px}
.medios-mostrador[hidden]{display:none}