/* El atributo `hidden` del HTML lo aplica la hoja del navegador con
   `display:none`, y CUALQUIER regla de clase le gana en especificidad: como
   `.login-wrap` y `.app` declaran `display:flex`, ocultarlos con `hidden` no
   surtía efecto y el login quedaba encima de la app. Esta regla lo zanja. */
[hidden]{display:none !important}

/* Añadidos de esta versión. estilo.css (el del sistema anterior) manda en
   todo lo demás: aquí solo va lo que aquel no tenía —el login, el saludo de
   la pantalla de inicio y la barra de días— siguiendo sus mismas variables. */

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap{position:fixed;inset:0;background:var(--bg);display:flex;
    align-items:center;justify-content:center;padding:24px;z-index:99999}
.login-card{background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:32px;width:100%;max-width:360px;
    box-shadow:0 10px 30px rgba(15,23,42,.08)}
.login-logo{display:block;height:44px;margin:0 auto 6px;object-fit:contain}
.login-sub{font-size:11px;color:var(--text3);text-align:center;margin-bottom:24px}
.login-error{background:rgba(239,68,68,.1);color:var(--red);font-size:12px;
    font-weight:600;padding:9px 12px;border-radius:var(--radius-sm);margin-bottom:14px}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ── Saludo de la pantalla de inicio ───────────────────────────────────── */
.saludo{font-size:22px;font-weight:800;line-height:1.2}
.saludo-sub{font-size:12px;color:var(--text3);margin-top:2px}

/* ── Barra de ventas por día ───────────────────────────────────────────── */
/* Barras en CSS puro: 23 días no ameritan traer una librería de gráficas. */
/* `align-items:stretch` es lo que hace que cada columna mida los 64px del
   contenedor; con `flex-end` colapsaban a su contenido (cero) y el alto en
   porcentaje de la barra interior no tenía contra qué resolverse. */
.barras{display:flex;align-items:stretch;gap:3px;height:64px;margin-top:12px}
.barra{flex:1;position:relative;background:var(--surface2);border-radius:3px 3px 0 0;
    transition:.2s;min-width:3px}
.barra > i{position:absolute;left:0;right:0;bottom:0;display:block;
    background:linear-gradient(180deg,var(--teal-light),var(--teal));
    border-radius:3px 3px 0 0}
.barra:hover{filter:brightness(1.08)}
.barras-pie{display:flex;justify-content:space-between;font-size:10px;
    color:var(--text3);margin-top:6px}

/* La tarjeta teal del sistema viejo no traía variante de color por dato;
   estas mantienen su forma y solo cambian el acento de la izquierda. */
.kpi.acento{border-left:3px solid var(--border)}

.tabla-wrap{overflow-x:auto}
.vacio{padding:28px;text-align:center;color:var(--text3);font-size:13px}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.mini{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.mini-valor{font-size:20px;font-weight:800;line-height:1.1}
.mini-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.mini-sub{font-size:11px;color:var(--text3);margin-top:3px}

.solo-lectura{display:inline-flex;align-items:center;gap:6px;font-size:11px;
    font-weight:600;color:var(--text3);background:var(--surface2);
    border:1px solid var(--border);border-radius:20px;padding:4px 10px}

@media(max-width:820px){
    .sidebar{width:64px;padding:12px 8px}
    .sidebar .nav-label,.sidebar .logo-img{display:none}
    .main{padding:16px}
}

/* ── Catálogos: tabla, modal y bitácora ────────────────────────────────── */
/* El sistema anterior tenía .modal y .modal-overlay pero no estructura
   interna: las filas de abajo la añaden sin tocar su hoja. */

.fila-clic{cursor:pointer}
.fila-clic:hover{background:rgba(13,148,136,.05)}

.paginacion{display:flex;align-items:center;justify-content:center;gap:12px;
    padding:14px 0;font-size:12px}
.pag-info{color:var(--text3)}

.modal-acciones{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;
    padding-top:14px;border-top:1px solid var(--border)}
.modal-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.modal-error{background:rgba(239,68,68,.1);color:var(--red);font-size:12px;
    font-weight:600;padding:9px 12px;border-radius:var(--radius-sm);margin-top:10px}
.campo-ayuda{font-size:10px;color:var(--text3);margin-top:3px}

.alerta{font-size:12px;padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:16px;line-height:1.4}
.alerta-naranja{background:rgba(249,115,22,.1);color:#9a3412;border-left:3px solid var(--orange)}
.alerta-teal{background:rgba(13,148,136,.08);color:var(--teal-dark);border-left:3px solid var(--teal)}

.dato-fijo{font-size:11px;color:var(--text3);background:var(--surface2);
    padding:8px 12px;border-radius:var(--radius-sm);margin-top:6px}
.dato-fijo code{font-family:ui-monospace,monospace;font-size:10px}

.historial{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.historial-titulo{font-size:11px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--text3);font-weight:600;margin-bottom:8px}
.historial-fila{display:grid;grid-template-columns:130px 150px 1fr;gap:8px;
    font-size:11px;padding:5px 0;border-bottom:1px solid var(--surface2);align-items:baseline}
.historial-fecha{color:var(--text3)}
.historial-quien{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* min-width:0 es lo que permite que el recorte con puntos suspensivos
   funcione dentro de una rejilla: sin él la celda crece con el texto. */
.historial-que{color:var(--text2);word-break:break-word;min-width:0}
.historial-que s{color:var(--text3)}
.historial-que b{color:var(--teal-dark)}

/* ── Avisos ────────────────────────────────────────────────────────────── */
.aviso{position:fixed;top:18px;right:18px;z-index:2000;padding:11px 16px;
    border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:#fff;
    box-shadow:0 8px 20px rgba(15,23,42,.18);animation:entra .22s ease-out}
.aviso-ok{background:var(--teal)}
.aviso-error{background:var(--red)}
.aviso.saliendo{opacity:0;transform:translateY(-8px);transition:.3s}
@keyframes entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media(max-width:700px){
    .modal-cols{grid-template-columns:1fr}
    .historial-fila{grid-template-columns:1fr;gap:2px}
}

/* Anotación de un renglón de bitácora: contexto, no corrección. Lo registrado
   es inmutable (ver migrations/010_auditoria_inmutable.sql). */
.historial-nota{display:block;margin-top:2px;font-size:10px;color:var(--text3);
    font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Punto de Venta ────────────────────────────────────────────────────── */
/* El sistema anterior traía .pos-layout, .product-card y .cart-item; lo de
   abajo es lo que su POS no tenía: selector de cliente, método de pago y el
   descuento por partida. */

.cliente-caja{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface2)}
.cliente-nombre{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cliente-detalle{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* De qué almacén sale la venta. Debajo del cliente, misma franja. */
.almacen-caja{display:flex;align-items:center;gap:8px;padding:8px 14px;
    border-bottom:1px solid var(--border);background:var(--surface2);font-size:12px;color:var(--text2)}
.almacen-caja label{font-weight:600;white-space:nowrap}
.almacen-caja select{flex:1;padding:5px 8px;font-size:12px}
/* Partida que pide más de lo que hay: se dice ahí mismo, en rojo. */
.cart-item-falta{font-size:11px;font-weight:600;color:var(--red);margin-top:2px}

.enlace-desc{background:none;border:none;padding:0 0 0 6px;font-size:11px;font-weight:600;
    color:var(--teal);cursor:pointer;font-family:inherit}
.enlace-desc:hover{text-decoration:underline}

.metodo-tabs{display:flex;gap:6px;margin-bottom:10px}
.metodo-op{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);
    font-size:12px;font-weight:600;cursor:pointer;background:var(--surface)}
.metodo-op:has(input:checked){background:var(--teal);color:#fff;border-color:var(--teal)}
.metodo-op:has(input:disabled){opacity:.45;cursor:not-allowed}
.metodo-op input{width:auto;margin:0}

.nota-sin-timbrar{text-align:center;font-size:10px;color:var(--text3);margin-top:8px}

.lista-clientes{max-height:340px;overflow-y:auto;border:1px solid var(--border);
    border-radius:var(--radius-sm);margin-top:4px}
.cli-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;border-bottom:1px solid var(--surface2);cursor:pointer}
.cli-fila:last-child{border-bottom:none}
.cli-fila:hover{background:rgba(13,148,136,.06)}
.cli-nombre{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-sub{font-size:11px;color:var(--text3)}
.cli-saldo{font-size:12px;font-weight:700;color:var(--red);white-space:nowrap}

.resumen-cobro{background:var(--surface2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px}
.resumen-fila{display:flex;justify-content:space-between;gap:12px;font-size:13px;
    padding:4px 0;color:var(--text2)}
.resumen-fila.total{font-size:17px;font-weight:800;color:var(--text);
    border-top:1px solid var(--border);margin-top:6px;padding-top:8px}

/* El carrito es una columna fija; en pantalla chica pasa a apilarse. */
@media(max-width:900px){
    .pos-layout{grid-template-columns:1fr;height:auto}
    .pos-cart{position:sticky;bottom:0}
}

/* Las tarjetas del sistema anterior reservaban 140px para la foto del
   producto y por eso medían 220px de alto. La migración no trajo las
   imágenes —eran URLs de un CDN externo, que además la CSP bloquea— así que
   sin foto esa altura deja un hueco. Se compactan hasta que existan.
   PENDIENTE: migrar las imágenes de producto y quitar esta regla. */
.pos-products .product-card{min-height:auto}
.pos-products .product-card-content{padding:12px 14px}
.pos-products .product-card-cat{margin-bottom:8px}

/* El .cart-item del sistema anterior era una fila: nombre, cantidad, total.
   Con los nombres del catálogo real ("CONCENTRADOR DE OXIGENO LONGFIAN
   10LPM") el nombre envuelve a cuatro líneas y se encima con los controles.
   Se pasa a dos renglones: nombre arriba, controles abajo. */
.pos-cart .cart-item{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
.pos-cart .cart-item-info{flex:1 1 100%;min-width:0}
.pos-cart .cart-item-name{white-space:normal;line-height:1.3}
.pos-cart .cart-item-qty{margin-left:auto}
.pos-cart .cart-item-total{min-width:92px}
.pos-cart .cart-item-remove{margin-left:0}

/* ── Facturación ───────────────────────────────────────────────────────── */
.alerta-roja{background:rgba(239,68,68,.1);color:#991b1b;border-left:3px solid var(--red)}
.uuid{font-family:ui-monospace,monospace;font-size:11px;word-break:break-all}
.detalle-error{background:var(--surface2);border-radius:var(--radius-sm);padding:10px;
    font-size:10px;max-height:180px;overflow:auto;white-space:pre-wrap;margin-bottom:12px}

/* ── Cotizaciones ──────────────────────────────────────────────────────── */

/* Los dos botones del carrito, uno al lado del otro: «Cotizar» y «Cobrar».
   Es la misma pareja que tenía el sistema anterior —ahí «Generar Cotización»
   iba debajo de «Cobrar», a todo lo ancho— pero en fila, para que se lea que
   son dos caminos del mismo carrito y no una acción secundaria escondida. */
.pos-acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pos-acciones .btn{width:100%;justify-content:center}

/* De dónde viene este carrito, cuando viene de una cotización. */
.banda-cotizacion{display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin:0 12px 8px;padding:7px 10px;font-size:11px;font-weight:600;
    background:rgba(13,148,136,.1);color:var(--teal-light);
    border-left:3px solid var(--teal);border-radius:var(--radius-sm)}
.banda-cotizacion .btn{padding:2px 8px;font-size:10px;background:none;
    color:var(--text3);text-decoration:underline}

/* Varias acciones por fila en la tabla, sin que se amontonen. */
.acciones-fila{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* Menú de acciones dentro de un modal: una debajo de otra, a todo lo ancho. */
.menu-acciones{display:flex;flex-direction:column;gap:8px}
.menu-acciones .btn{width:100%;justify-content:center}

/* Vista previa del papel dentro del modal. El documento mide 210 mm de ancho
   (una hoja); aquí se encoge para caber sin deformarse, y si aun así no cabe,
   se desplaza en horizontal en vez de desbordar el modal. */
.doc-previa{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:10px;margin-bottom:14px;max-height:60vh;overflow:auto}
.doc-previa .doc-prox{transform-origin:top left}
@media(max-width:980px){
    .doc-previa{overflow-x:auto}
}

/* ── Accesos ───────────────────────────────────────────────────────────── */

/* Los 12 módulos como casillas, en rejilla. En el sistema viejo esto era un
   <select> de dos opciones (Staff / Administrador) porque no había permisos
   por módulo; ahora hay doce y tienen que verse todos de un vistazo. */
.modulos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:6px;padding:10px;background:var(--surface2);border-radius:var(--radius-sm)}
.modulo-op{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;
    padding:4px 6px;border-radius:var(--radius-sm);transition:.15s}
.modulo-op:hover{background:var(--surface)}
.modulo-op input{width:auto;margin:0}
/* Un admin tiene los doce de forma implícita: se apagan para que se vea que
   no se marcan a mano, en vez de esconderlos y dejar la duda. */
.modulos-grid.apagado{opacity:.45}
.modulos-grid.apagado .modulo-op{cursor:default}

.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;
    background:var(--surface2);color:var(--text2);white-space:nowrap}
.chip-alta{background:rgba(34,197,94,.15);color:var(--green)}
.chip-baja{background:rgba(239,68,68,.12);color:var(--red)}

/* Una cuenta dada de baja se ve apagada, pero sigue legible: su rastro
   importa tanto como el de una activa. */
.fila-inactiva{opacity:.55}

/* La contraseña generada se entrega UNA vez. Monoespaciada y grande para
   poder dictarla por teléfono sin equivocarse. */
.password-entrega{margin-top:8px;padding:12px 14px;border-radius:var(--radius-sm);
    background:var(--surface);border:1px dashed var(--teal);
    font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:700;
    letter-spacing:2px;text-align:center;color:var(--teal-light);
    user-select:all;word-break:break-all}

/* ── Configuración ─────────────────────────────────────────────────────── */

.config-cabecera{display:flex;justify-content:space-between;align-items:flex-start;
    gap:12px;flex-wrap:wrap;margin-bottom:12px}
.config-titulo{font-size:15px;font-weight:700;color:var(--text)}

/* Los datos fiscales se leen más que se editan: rejilla de etiqueta/valor,
   no un formulario abierto. Editar es una acción explícita. */
.config-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:12px;padding:12px;background:var(--surface2);border-radius:var(--radius-sm)}
.config-dato-etiqueta{font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;color:var(--text3)}
.config-dato-valor{font-size:13px;font-weight:600;color:var(--text);margin-top:2px;
    word-break:break-word}

/* Una fila que pide atención (el almacén sin sucursal) sin gritar. */
.fila-alerta{background:rgba(249,115,22,.06)}

/* --- Cobranza ------------------------------------------------------------ */
/* Las tarjetas del panel de cobros del sistema viejo: misma forma, acento a
   la izquierda según el dato. */
.kpi.acento-rojo{border-left:3px solid var(--red)}
.kpi.acento-naranja{border-left:3px solid var(--orange)}
.kpi.acento-azul{border-left:3px solid var(--blue)}
.kpi-value.rojo{color:var(--red)}
.kpi-value.naranja{color:var(--orange)}
.kpi-value.azul{color:var(--blue)}

/* «Requieren cobro urgente»: los créditos vencidos o a punto, del más
   vencido al menos. Es una lista, no una tabla, igual que en el viejo. */
.urgente{border-left:4px solid var(--red);background:rgba(239,68,68,.04);margin-bottom:16px}
.urgente-titulo{font-weight:700;color:var(--red);font-size:13px;margin-bottom:6px}
.urgente-titulo .cuenta{font-weight:400;color:var(--text3)}
.urgente-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:6px 0;border-bottom:1px solid rgba(239,68,68,.1);font-size:12px}
.urgente-fila:last-child{border-bottom:none}
.urgente-fila .productos{color:var(--text2)}
.urgente-fila .saldo{color:var(--red);font-weight:700}
.urgente-acciones{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* Barra de progreso del pago, 80 px como en el viejo. */
.progreso{width:80px;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.progreso-barra{height:100%;background:var(--teal);border-radius:3px}
.progreso-pct{font-size:10px;color:var(--text3)}

.seccion-titulo{font-weight:700;margin:20px 0 8px}
.seccion-titulo .cuenta{font-weight:400;color:var(--text3);font-size:13px}
.celda-productos{font-size:11px;max-width:320px}
.celda-vence{white-space:nowrap}
.acciones-fila.cobranza{min-width:170px}
.fila-vencida td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.monto-pagado{color:var(--green)}
.monto-pendiente{font-weight:700;color:var(--orange)}
.fila-vencida .monto-pendiente{color:var(--red)}

/* --- Fotos de producto ---------------------------------------------------- */
/* El marco (.product-card-img-wrap, 140 px, fondo blanco) es el del sistema
   viejo. Sin foto va el logo, atenuado, para que no parezca la foto del
   producto. */
.product-card-img.sin-foto{opacity:.25;padding:32px;filter:grayscale(1)}


/* ── Inventario ────────────────────────────────────────────────────────── */
/* El semáforo de stock del sistema viejo (rojo ≤5, naranja ≤15, verde), con
   los umbrales leídos de configuración. El negativo es nuevo: en el viejo
   no podía existir porque la sobreventa se escondía. */
.stock-rojo{color:var(--red);font-weight:700}
.stock-naranja{color:var(--orange);font-weight:700}
.stock-verde{color:var(--green);font-weight:700}
.stock-negativo{color:var(--red);font-weight:800}
td.stock-negativo{background:rgba(239,68,68,.12);box-shadow:inset 3px 0 0 var(--red)}
.celda-cero{color:var(--text3)}
/* La columna del almacén filtrado se resalta para que se lea qué se filtró. */
.celda-filtrada,.th-filtrado{background:rgba(13,148,136,.07)}
.texto-rojo{color:var(--red);font-weight:600}

/* El pie de totales de la tabla, como en el viejo. */
.fila-total td{background:rgba(13,148,136,.12);font-weight:800;border-top:2px solid var(--teal);
    color:var(--teal-light);font-size:14px;padding:10px 12px}
.fila-total td:first-child{color:var(--text);font-size:12px}

/* Movimientos: entra en verde, sale en rojo, y el saldo antes → después. */
.mov-positivo{color:var(--green)}
.mov-negativo{color:var(--red)}
.mov-saldo{font-size:11px;color:var(--text3);white-space:nowrap}
.mov-fila .historial-que{line-height:1.6}

.filtros-libro{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filtros-libro select,.filtros-libro input{width:auto;padding:7px 10px;font-size:12px}
.filtros-libro .modulo-op{padding:6px 8px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-sm)}

/* Pestañas por almacén con su total de unidades. */
.tab-cuenta{font-weight:400;opacity:.75;margin-left:4px;font-size:11px}

/* Existencia inicial por almacén en el alta: una rejilla compacta. */
.stock-inicial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:8px;padding:10px;background:var(--surface2);border-radius:var(--radius-sm)}
.stock-inicial-item{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--text2)}
.stock-inicial-item input{padding:6px 8px;font-size:12px}

/* Lista de coincidencias del buscador de producto dentro del modal. */
.lista-productos{max-height:220px;position:relative;z-index:2;background:var(--surface)}
.tabla-existencias td,.tabla-existencias th{padding:8px 10px}
/* Los tres botones de la fila (+ − #) caben en una línea. */
.inv-acciones{flex-wrap:nowrap}
.inv-acciones .btn-sm{padding:5px 9px;min-width:28px;justify-content:center}

/* ── Productos: fotos ──────────────────────────────────────────────────── */
/* Miniatura en la tabla y editor de foto en el modal. El marco blanco es el
   mismo de las tarjetas del POS (.product-card-img-wrap). */
.celda-foto{width:44px;padding:4px 6px}
.foto-mini{width:36px;height:36px;object-fit:contain;background:#fff;border:1px solid var(--border);
    border-radius:6px;display:block}
.foto-mini.sin-foto{opacity:.25;filter:grayscale(1);padding:6px}
.foto-editor{display:flex;gap:14px;align-items:flex-start}
.foto-marco{width:120px;height:120px;flex-shrink:0;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden}
.foto-grande{width:100%;height:100%;object-fit:contain}
.foto-grande.sin-foto{opacity:.25;filter:grayscale(1);padding:24px}
input[type=file]{padding:7px 10px;font-size:12px;cursor:pointer}
input[type=file]::file-selector-button{margin-right:10px;padding:5px 10px;border:1px solid var(--border);
    border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-weight:600;
    font-family:inherit;font-size:11px;cursor:pointer}