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


}
.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. */
.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}
/* El nombre se edita en el mismo renglon: es un campo que parece texto hasta
   que se lo toca. Un boton de editar por concepto, en una lista de veinte, es
   ruido que nadie aprieta. */
.preset .den{flex:1;font-size:13px;border:1px solid transparent;background:transparent;
  padding:4px 6px;border-radius:6px;color:inherit;font-weight:inherit;min-width:0}
.preset .den:hover{border-color:var(--borde);background:rgba(255,255,255,.6)}
.preset .den:focus{border-color:var(--acento);background:#fff;outline:2px solid var(--acento-suave)}
/* Las flechas de acomodar. Chiquitas y pegadas: son el borde del renglon. */
.mover{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.flecha{border:1px solid var(--borde);background:#fff;color:var(--suave);
  font-size:10px;line-height:1;padding:2px 5px;border-radius:4px;cursor:pointer}
.flecha:hover:not(:disabled){border-color:var(--acento);color:var(--acento)}
.flecha:disabled{opacity:.3;cursor:default}
/* 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)}

/* --- 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}
#cuerpoUsuarios .rol{display:inline-block}

.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. */
.barra-usuarios{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.barra-usuarios h2{margin:0;font-size:16px;font-weight:600}
.barra-usuarios .primario{margin-left:auto;white-space:nowrap}

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