/* 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 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}
.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}

/* 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}

/* --- 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}
.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}
.arqueo .aparte:first-of-type td{padding-top:12px}
.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{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-scroll .listado{min-width:520px}


}

/* ===== 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. */
.presets{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.preset{display:flex;align-items:center;gap:10px;padding:5px 10px;border:1px solid var(--borde);
  border-radius:8px;background:#fff}
.preset .den{flex:1;font-size:13px}
/* La fila del concepto se ve con SU color: lo que se elige acá es lo que se va
   a ver al facturar, sin tener que ir a mirarlo a la otra pantalla. */
.preset.con-color{background:var(--c-fondo);border-color:var(--c-borde)}
.preset.con-color .den{color:var(--c-texto);font-weight:600}
.color-preset{width:auto;font-size:12px;padding:3px 6px;flex:0 0 auto}

/* 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)}

@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. Lo suyo -Configuracion, Usuarios y
   salir- cuelga de ahi: son las tres cosas que no se tocan mientras se factura,
   asi que no tienen por que ocupar lugar en la barra. */
.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:block}
.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}
#cuerpoUsuarios .rol{display:inline-block}

.tab[hidden]{display:none}
.aviso-sso{margin:0 0 12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;
  padding:9px 12px;color:#1e40af}
.aviso-sso a{color:inherit}

/* 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}
  .items tr{border:1px solid var(--borde);border-radius:10px;padding:9px;
    margin-bottom:8px;display:grid;grid-template-columns:1fr auto auto auto;
    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/-1}          /* descripcion, sola arriba */
  .items td:nth-child(2){width:74px}                /* cantidad */
  .items td:nth-child(3){width:104px}               /* precio */
  .items td input{width:100%}
  .items td.imp{text-align:right;font-weight:600;min-width:80px}
  .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}
  .items tr{grid-template-columns:1fr auto auto}
  .items td.imp{grid-column:2/4;text-align:left}
  .items td:nth-child(3){width:96px}