/* styles.css - Hoja de estilos propia (sin CDN) para que la Caja PWA
 * funcione con cero internet, incluso en la primera carga tras instalarse. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #f8fafc; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; color: #0f172a; }
#app { min-height: 100%; }
button { cursor: pointer; font-family: inherit; }
input, select { font-family: inherit; }

.boot { display: flex; align-items: center; justify-content: center; height: 100vh; color: #64748b; }

/* --- Login --- */
.se-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f172a; }
.se-login-card { background: #fff; border-radius: 24px; padding: 40px; width: 100%; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.se-login-logo { display: block; max-width: 100%; max-height: 90px; object-fit: contain; margin: 0 auto 12px; }
.se-login-card h1 { font-size: 20px; font-weight: 900; text-align: center; margin: 0 0 4px; color: #0f172a; }
.se-login-sub { text-align: center; color: #64748b; font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; margin-bottom: 20px; }
.se-login-card input { width: 100%; padding: 14px; margin-bottom: 12px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 15px; outline: none; }
.se-login-card input:focus { border-color: #0284c7; }
.se-login-msg { background: #fef9c3; color: #854d0e; padding: 10px; border-radius: 10px; font-size: 12px; margin-bottom: 12px; }
.se-login-error { color: #dc2626; font-size: 12px; margin-top: 10px; min-height: 16px; text-align: center; }

.btn-primary { width: 100%; background: #16a34a; color: #fff; border: none; padding: 14px; border-radius: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; transition: background .15s; }
.btn-primary:hover { background: #15803d; }
.btn-primary:disabled { background: #cbd5e1; color: #64748b; }
.btn-secondary { width: 100%; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; padding: 12px; border-radius: 14px; font-weight: 800; text-transform: uppercase; font-size: 11px; margin-top: 8px; }

/* --- Shell / layout de caja (mismo lenguaje visual que pos_caja.php:
   fondo slate-50, tarjetas blancas rounded-2xl, acentos sky/green) --- */
.se-shell { height: 100vh; overflow: hidden; }
.caja-layout { display: flex; height: 100%; background: #f8fafc; }
.caja-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f8fafc; }
.caja-search { background: #fff; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); border-bottom: 1px solid #e2e8f0; display: flex; gap: 10px; flex-wrap: wrap; }
.caja-search input { flex: 1; min-width: 220px; padding: 16px 16px 16px 46px; font-size: 16px; font-weight: 700; border: 2px solid transparent; background: #f1f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 16px center; border-radius: 16px; outline: none; }
.caja-search input:focus { border-color: #0284c7; background-color: #fff; }
.caja-search select { padding: 0 16px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; border: 2px solid transparent; background: #f1f5f9; border-radius: 16px; outline: none; color: #475569; cursor: pointer; max-width: 220px; }
.caja-search select:focus { border-color: #0284c7; background-color: #fff; }
.caja-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 20px; align-content: start; }
.caja-grid-empty { grid-column: 1 / -1; text-align: center; color: #94a3b8; padding: 60px 0; font-weight: 700; text-transform: uppercase; font-size: 12px; }
.caja-card { background: #fff; border: 1px solid #f1f5f9; border-radius: 16px; padding: 10px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: box-shadow .15s, border-color .15s, transform .1s; display: flex; flex-direction: column; }
.caja-card:hover { border-color: #7dd3fc; box-shadow: 0 6px 16px rgba(2,132,199,.12); }
.caja-card:active { transform: scale(.97); }
.caja-card-img { width: 100%; height: 110px; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 12px; margin-bottom: 8px; overflow: hidden; flex-shrink: 0; }
.caja-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caja-card-id { font-size: 9px; color: #94a3b8; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.caja-card-name { font-weight: 700; font-size: 11.5px; text-transform: uppercase; margin-bottom: 6px; line-height: 1.3; flex: 1; }
.caja-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; }
.caja-card-price { font-weight: 900; color: #0284c7; font-size: 14px; font-family: 'Courier New', monospace; }
.caja-card-stock { font-size: 9px; color: #94a3b8; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.caja-card-stock .num { font-weight: 900; }
.caja-card-stock .num.ok { color: #16a34a; }
.caja-card-stock .num.bajo { color: #dc2626; }

.caja-cart { width: 400px; background: #fff; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; box-shadow: -6px 0 24px rgba(0,0,0,.04); }
.caja-cart-header { padding: 20px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
.caja-cart-header label { font-size: 10px; font-weight: 900; text-transform: uppercase; color: #94a3b8; }
.caja-cart-header select { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #e2e8f0; margin: 6px 0 0; font-weight: 700; background: #fff; }
.caja-cart-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.caja-cart-header-top h2 { margin: 0; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: #1e293b; }
.caja-cart-count { background: #e0f2fe; color: #0369a1; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.btn-icon { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; padding: 6px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #475569; }
.btn-icon:hover { background: #e2e8f0; }
.cfg-print-estado { font-size: 11px; font-weight: 700; margin-top: -4px; }
.cfg-print-estado.ok { color: #16a34a; }
.cfg-print-estado.err { color: #dc2626; }

/* Vista previa del último producto agregado (igual que pos_caja.php) */
.caja-preview { display: flex; align-items: center; gap: 12px; background: #fff; padding: 10px; border-radius: 14px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,.04); margin-bottom: 14px; transition: background-color .3s, border-color .3s; }
.caja-preview.flash { background: #f0f9ff; border-color: #bae6fd; }
.caja-preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; border: 1px solid #f1f5f9; background: #f8fafc; flex-shrink: 0; }
.caja-preview .tit { font-size: 9px; font-weight: 900; color: #0284c7; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.caja-preview .nom { font-size: 11px; font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caja-preview .prc { font-size: 12px; font-weight: 900; color: #64748b; margin-top: 2px; }
.caja-preview-info { min-width: 0; flex: 1; }
.caja-preview-name { font-size: 12px; font-weight: 800; color: #1e293b; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px; }
.caja-preview-price { font-size: 14px; font-weight: 900; color: #0284c7; font-family: 'Courier New', monospace; }

.caja-cart-items { flex: 1; overflow-y: auto; padding: 12px 16px; background: #f8fafc; }
.caja-cart-empty { text-align: center; color: #94a3b8; padding: 40px 0; font-weight: 700; font-size: 12px; text-transform: uppercase; }
.caja-cart-item { background: #fff; border: 1px solid #f1f5f9; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.caja-cart-item .name { font-size: 11.5px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; color: #1e293b; }
.caja-cart-item .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.caja-cart-item .qty { display: flex; align-items: center; gap: 8px; background: #f8fafc; border-radius: 8px; padding: 4px 8px; }
.caja-cart-item .qty button { width: 22px; height: 22px; border: none; background: #e2e8f0; border-radius: 6px; font-weight: 900; }
.caja-cart-item .qty input.qty-input {
  width: 34px; text-align: center; border: none; background: transparent;
  font-weight: 900; font-size: 12px; color: #1e293b; -moz-appearance: textfield;
  font-family: inherit;
}
.caja-cart-item .qty input.qty-input::-webkit-outer-spin-button,
.caja-cart-item .qty input.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.caja-cart-item .qty input.qty-input:focus { outline: 2px solid #0284c7; border-radius: 4px; }
.caja-cart-item .price { font-weight: 900; color: #0284c7; font-family: 'Courier New', monospace; }
.caja-cart-item .del { border: none; background: none; color: #ef4444; font-weight: 900; font-size: 15px; }
.caja-cart-item .row button[data-act="precio"] { border: none; background: none; font-size: 14px; cursor: pointer; }
.tag-manual { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 900; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; border-radius: 6px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .04em; }

.caja-cart-totals { border-top: 1px solid #f1f5f9; padding: 16px 20px; background: #fff; }
.caja-cart-totals .row { display: flex; justify-content: space-between; font-size: 11px; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 0; }
.caja-cart-totals .row.total { font-size: 26px; color: #16a34a; font-weight: 900; text-transform: none; padding-top: 10px; font-family: 'Courier New', monospace; }
.caja-cart-footer { padding: 0 20px 20px; background: #fff; }
.caja-cart-actions { padding: 0 20px 20px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.caja-cart-actions .btn-secondary { margin-top: 0; }
.btn-checkout { width: 100%; background: #22c55e; color: #fff; border: none; padding: 16px; border-radius: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; box-shadow: 0 10px 20px rgba(34,197,94,.25); transition: background-color .15s, transform .1s; }
.btn-checkout:hover:not(:disabled) { background: #16a34a; }
.btn-checkout:active:not(:disabled) { transform: scale(.98); }
.btn-checkout:disabled { background: #e2e8f0; color: #94a3b8; box-shadow: none; }
.btn-pausar {
  width: 100%; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
  padding: 12px; border-radius: 14px; font-weight: 800; text-transform: uppercase;
  font-size: 11px; letter-spacing: .03em; transition: background-color .15s;
}
.btn-pausar:hover:not(:disabled) { background: #ffedd5; }
.btn-pausar:disabled { background: #f1f5f9; color: #cbd5e1; border-color: #e2e8f0; }

/* --- Modales --- */
.se-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.se-modal { background: #fff; border-radius: 28px; padding: 28px; width: 100%; max-width: 420px; box-shadow: 0 25px 60px rgba(0,0,0,.35); }
.se-modal h3 { margin: 0 0 6px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: #1e293b; }
.se-modal p { color: #64748b; font-size: 12px; margin-bottom: 16px; font-weight: 600; }
.se-modal select, .se-modal input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #e2e8f0; margin-bottom: 12px; font-weight: 700; }
.se-modal-actions { display: flex; gap: 10px; margin-top: 10px; }
.se-modal-actions.grid { display: grid; grid-template-columns: 1fr 1fr; }
.se-modal-actions button { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; font-weight: 800; text-transform: uppercase; font-size: 11px; }
/* Bug real: esta regla venía sin background/color, así que la regla más
   genérica ".se-modal-actions button" (más específica que ".btn-primary" por
   traer un selector de elemento) le ganaba el background y dejaba el botón
   "Confirmar" casi invisible (texto blanco sobre gris claro) en TODOS los
   modales que usan .btn-primary dentro de .se-modal-actions (apertura de
   caja, confirmar pago en efectivo, guardar cliente nuevo, etc.). */
.se-modal-actions button.btn-primary { border: none; background: #16a34a; color: #fff; }
.se-modal-actions button.btn-primary:hover { background: #15803d; }
.se-modal-actions button.btn-primary:disabled { background: #cbd5e1; color: #64748b; }
.se-isv-box { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 14px; padding: 12px; margin-bottom: 14px; }
.se-isv-box label { color: #075985; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.se-isv-box select { margin-bottom: 0; border-color: #bae6fd; }

/* Botones de método de pago (colores igual que pos_caja.php: efectivo
   verde, tarjeta azul, transferencia morado, crédito naranja) */
.pago-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.pago-metodos button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 16px; border: 2px solid #f1f5f9; background: #fff; font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; transition: all .15s; }
.pago-metodos button .ico { font-size: 24px; }
.pago-metodos button[data-method="cash"]:hover, .pago-metodos button[data-method="efectivo"]:hover { border-color: #10b981; background: #ecfdf5; color: #059669; }
.pago-metodos button[data-method="card"]:hover, .pago-metodos button[data-method="tarjeta"]:hover { border-color: #0ea5e9; background: #f0f9ff; color: #0284c7; }
.pago-metodos button[data-method="transfer"]:hover, .pago-metodos button[data-method="transferencia"]:hover { border-color: #a855f7; background: #faf5ff; color: #9333ea; }
.pago-metodos button[data-method="credito"]:hover, .pago-metodos button[data-method="credit"]:hover { border-color: #f97316; background: #fff7ed; color: #ea580c; }
.pago-metodos button[data-method="mixto"]:hover { border-color: #ec4899; background: #fdf2f8; color: #db2777; }

/* --- Sidebar lateral de navegación entre módulos --- */
.se-shell { display: flex; height: calc(100vh - 30px); }
.se-sidebar { width: 250px; flex-shrink: 0; background: #0f172a; color: #fff; height: calc(100vh - 30px); display: flex; flex-direction: column; overflow-y: auto; }
.se-sidebar-brand { padding: 18px 20px 14px; border-bottom: 1px solid #1e293b; text-align: center; }
.se-sidebar-brand img { max-width: 100%; height: auto; max-height: 56px; object-fit: contain; margin-bottom: 6px; }
.se-sidebar-brand h1 { margin: 0; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.se-sidebar-brand p { margin: 4px 0 0; font-size: 9px; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

/* --- Reloj digital + contador "Ventas de Hoy" (igual a sidebar_caja.php) --- */
.se-sidebar-clock { padding: 14px 20px; background: #1e293b; border-bottom: 1px solid #1e293b; text-align: center; }
.se-sidebar-clock .hora { font-size: 26px; font-weight: 900; color: #38bdf8; letter-spacing: -.02em; font-family: 'Courier New', monospace; }
.se-sidebar-clock .fecha { font-size: 9px; color: #94a3b8; font-weight: 700; text-transform: uppercase; margin-top: 2px; }
.se-sidebar-clock .ventas-hoy { margin-top: 12px; padding: 8px; background: #1e293b; border: 1px solid #0c4a6e; border-radius: 10px; }
.se-sidebar-clock .ventas-hoy .lbl { font-size: 9px; color: #7dd3fc; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.se-sidebar-clock .ventas-hoy .val { font-size: 17px; font-weight: 900; color: #fff; }
.se-sidebar-clock .ventas-hoy .val span { font-size: 9px; font-weight: 700; color: #bae6fd; }
.se-nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.se-nav button { display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: #94a3b8; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; padding: 12px 14px; text-align: left; border-radius: 12px; white-space: nowrap; }
.se-nav button:hover { background: #1e293b; color: #fff; }
.se-nav button.activo { background: #0284c7; color: #fff; }
.se-nav button .badge { margin-left: auto; background: #dc2626; color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 10px; }
.se-sidebar-footer { padding: 14px; border-top: 1px solid #1e293b; }
.se-sidebar-footer .user { font-size: 11px; font-weight: 800; color: #cbd5e1; margin-bottom: 10px; padding: 0 6px; }
.se-sidebar-footer .user .rol { display: block; font-size: 9px; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
/* Botonera 2 columnas (Corte Caja / Salir), icono arriba + etiqueta abajo:
   igual a sidebar_caja.php (pos_caja), en vez de dos botones apilados de
   ancho completo. */
.se-sidebar-footer .acciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.se-sidebar-footer .acciones-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent; border: 1px solid transparent; color: #fb923c;
  padding: 10px 6px; border-radius: 12px; font-weight: 900; font-size: 9px;
  text-transform: uppercase; letter-spacing: .03em;
}
.se-sidebar-footer .acciones-grid button svg { width: 18px; height: 18px; }
.se-sidebar-footer .acciones-grid button.btn-corte:hover { background: rgba(234,88,12,.15); border-color: rgba(234,88,12,.3); }
.se-sidebar-footer .acciones-grid button.btn-salir { color: #f87171; }
.se-sidebar-footer .acciones-grid button.btn-salir:hover { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.3); }
.se-view-body { flex: 1; height: calc(100vh - 30px); overflow-y: auto; padding: 0; }
.se-view-pad { padding: 20px; }

/* Contenedor de Facturas Abiertas (ver facturas_abiertas.js): necesita
   altura real de verdad, no solo "lo que ocupe el contenido", para que
   .caja-layout (mismo layout que la pantalla de Venta) pueda usar el
   espacio restante y el botón "Proceder al Pago" quede fijo abajo del
   carrito en vez de flotar debajo de la última fila (y de paso ya no
   sobre-salga de la pantalla obligando a hacer scroll general).
   display:flex + flex-direction:column reparte el alto entre el header
   "Factura Abierta — X / Volver" (flex-shrink:0, se queda con su alto
   natural) y .caja-layout (flex:1, se queda con TODO lo que sobra) -antes
   .caja-layout pedía height:100% del contenedor completo SIN restarle el
   espacio que ya ocupaba el header, así que el total se pasaba del alto
   disponible y aparecía el scroll general con el botón fuera de vista-. */
#faContenido { height: 100%; display: flex; flex-direction: column; }
#faContenido .caja-layout { flex: 1 1 auto; height: auto; min-height: 0; }

/* --- Listas genéricas (cotizaciones, facturas abiertas, historial, cxc) --- */
.se-list-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; flex-shrink: 0; }
.se-list-header h2 { margin: 0; font-size: 16px; font-weight: 900; text-transform: uppercase; }
.se-list-header input[type="text"] { padding: 10px 14px; border-radius: 12px; border: 1px solid #e2e8f0; font-weight: 700; min-width: 220px; }
.se-card-list { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.se-item-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.se-item-card .info { min-width: 0; }
.se-item-card .info .titulo { font-weight: 800; font-size: 13px; text-transform: uppercase; }
.se-item-card .info .sub { font-size: 11px; color: #94a3b8; font-weight: 700; margin-top: 2px; }
.se-item-card .total { font-weight: 900; color: #0284c7; font-size: 16px; }
.se-item-card .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.se-item-card .acciones button { border: none; border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 11px; text-transform: uppercase; color: #fff; background: #0284c7; }
.se-item-card .acciones button.sec { background: #f1f5f9; color: #475569; }
.se-item-card .acciones button.warn { background: #ea580c; }
.se-item-card .acciones button.ok { background: #16a34a; }
.se-empty-state { text-align: center; color: #94a3b8; padding: 60px 0; font-weight: 700; text-transform: uppercase; font-size: 12px; }
.se-tag { display: inline-block; font-size: 9px; font-weight: 900; border-radius: 6px; padding: 2px 7px; text-transform: uppercase; letter-spacing: .03em; }
.se-tag-pend { background: #fef3c7; color: #92400e; }
.se-tag-ok { background: #dcfce7; color: #166534; }
.se-tag-vencido { background: #fee2e2; color: #991b1b; }

/* --- Detalle de Factura Abierta / Cotización (carrito de 2 columnas) --- */
.se-detalle-layout { display: flex; gap: 20px; height: calc(100vh - 49px - 40px - 30px); }
.se-detalle-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.se-detalle-col .lista { flex: 1; overflow-y: auto; }

/* --- Barra de estado inferior (estilo software de escritorio clásico:
   ej. WordPad/Office viejo, franja fija abajo con secciones separadas).
   Reemplaza la burbuja flotante que antes mostraba "En línea"/"Sincronizando"
   -ver ui.js:netPill()-, y de paso deja version/red/crédito siempre a la
   vista sin taparle nada al usuario. STATUSBAR_H debe coincidir con el
   "calc(100vh - Npx)" usado más abajo en .se-shell/.se-sidebar/.se-view-body. */
.se-statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 250;
  background: #0f172a; color: #cbd5e1; border-top: 1px solid #1e293b;
  display: flex; align-items: stretch; font-size: 11px; font-weight: 700;
  box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
.se-statusbar .sb-item { display: flex; align-items: center; gap: 7px; padding: 0 14px; border-right: 1px solid #1e293b; white-space: nowrap; }
.se-statusbar .sb-item:last-child { border-right: none; }
.se-statusbar .sb-net .dot { width: 8px; height: 8px; border-radius: 999px; background: #64748b; flex-shrink: 0; }
.se-statusbar.net-on .sb-net .dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.se-statusbar.net-off .sb-net .dot { background: #ef4444; }
.se-statusbar.net-sync .sb-net .dot { background: #38bdf8; animation: sbPulse 1s infinite; }
@keyframes sbPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.se-statusbar .sb-center { flex: 1; color: #64748b; overflow: hidden; text-overflow: ellipsis; }
.se-statusbar .sb-right { color: #64748b; text-transform: none; letter-spacing: 0; }
.se-statusbar .sb-right strong { color: #94a3b8; font-weight: 900; }

/* --- Toasts --- */
.toast-host { position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.se-toast { background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 14px; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .3s; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.se-toast.show { opacity: 1; }
.se-toast-error { background: #dc2626; }
.se-toast-ok { background: #16a34a; }

/* --- Sidebar: iconos + color por módulo (igual a sidebar_caja.php) --- */
.se-nav button .nav-ic { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.se-nav button .nav-ic svg { width: 18px; height: 18px; }
.se-nav button.activo.c-venta { background: #16a34a; }
.se-nav button.activo.c-ordenes_flotantes { background: #0284c7; }
.se-nav button.activo.c-facturas_abiertas { background: #059669; }
.se-nav button.activo.c-cuentas_cobrar { background: #0891b2; }
.se-nav button.activo.c-historial { background: #0284c7; }
.se-nav button.activo.c-gastos { background: #ea580c; }
.se-nav button.activo.c-cotizaciones { background: #9333ea; }
.se-nav button.activo.c-mis_cortes { background: #334155; }
.se-nav button.activo.c-reporte_gastos { background: #b91c1c; }
.se-nav button.activo.c-estado_creditos { background: #ea580c; }
/* "Registrar Gasto" siempre con caja/borde naranja (igual a sidebar_caja.php),
   no solo cuando está activo -se distingue del resto del menú a propósito,
   porque es una acción "de salida de dinero", no solo otra pantalla más-. */
.se-nav button.c-gastos { color: #fb923c; border: 1px solid rgba(234,88,12,.3); }
.se-nav button.c-gastos:hover { background: rgba(234,88,12,.15); }
.se-nav button.activo.c-gastos { border-color: transparent; }

/* --- Tabla "premium" (igual a views/caja/historial_ventas.php): usada en
   historial, facturas abiertas, gastos, cuentas por cobrar y órdenes
   flotantes en vez de tarjetas apiladas. --- */
.se-table-wrap { background: #fff; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; max-width: 1100px; }
.se-table { width: 100%; border-collapse: collapse; text-align: left; }
.se-table thead { background: #f0f9ff; }
.se-table th { padding: 13px 16px; color: #0369a1; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e0f2fe; }
.se-table th.r { text-align: right; }
.se-table th.c { text-align: center; }
.se-table td { padding: 13px 16px; border-top: 1px solid #f1f5f9; vertical-align: middle; font-size: 13px; }
.se-table tbody tr { transition: background .1s; }
.se-table tbody tr:hover { background: #f0f9ff; }
.se-table td.r { text-align: right; }
.se-table td.c { text-align: center; }
.se-table .doc-num { font-family: 'Courier New', monospace; font-weight: 800; color: #0369a1; display: block; }
.se-table .doc-tag { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.se-table .doc-tag.ok { color: #059669; }
.se-table .doc-tag.pend { color: #d97706; }
.se-table .cliente { font-weight: 800; color: #1e293b; text-transform: uppercase; }
.se-table .cajero, .se-table .fecha, .se-table .sub-info { color: #64748b; font-weight: 600; }
.se-table .monto { font-weight: 900; font-size: 15px; color: #0f172a; }
.se-table .btn-accion { background: #0284c7; color: #fff; border: none; padding: 9px 16px; border-radius: 10px; font-weight: 800; font-size: 11px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 2px; }
.se-table .btn-accion:hover { background: #0369a1; }
.se-table .btn-accion.sec { background: #f1f5f9; color: #475569; }
.se-table .btn-accion.sec:hover { background: #e2e8f0; }
.se-table .btn-accion.ok { background: #16a34a; }
.se-table .btn-accion.ok:hover { background: #15803d; }
.se-table .btn-accion.warn { background: #ea580c; }
.se-table .btn-accion.danger { background: #dc2626; }
.se-table .btn-accion.danger:hover { background: #b91c1c; }
/* Variantes de .btn-accion reutilizables fuera de .se-table (ver
   views/estado_creditos.js: botones "Compartir Informe" / "Copiar Texto",
   que no viven dentro de una tabla). */
.btn-accion { background: #0284c7; color: #fff; border: none; padding: 11px 18px; border-radius: 12px; font-weight: 800; font-size: 12px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn-accion:hover { background: #0369a1; }
.btn-accion.sec { background: #f1f5f9; color: #475569; }
.btn-accion.sec:hover { background: #e2e8f0; }
.btn-accion.ok { background: #16a34a; }
.btn-accion.ok:hover { background: #15803d; }

/* Estado de Créditos (views/estado_creditos.js): tarjetas por cliente,
   agrupadas en dos secciones (mora / disponible). */
.ec-seccion-titulo { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: 22px 0 12px; }
.ec-seccion-titulo.mora { color: #dc2626; }
.ec-seccion-titulo.ok { color: #059669; }
.ec-lista { display: flex; flex-direction: column; gap: 10px; }
.ec-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ec-card.mora { border-color: #fecaca; box-shadow: 0 0 0 1px rgba(239,68,68,.08); }
.ec-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ec-card-nombre strong { display: block; font-size: 13px; font-weight: 900; text-transform: uppercase; color: #0f172a; }
.ec-card-nombre span { display: block; font-size: 10px; font-weight: 700; color: #94a3b8; margin-top: 2px; }
.ec-badge { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.ec-badge.mora { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.ec-badge.ok { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }
.ec-card-bottom { display: flex; justify-content: space-between; gap: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; }
.ec-card-bottom div span { display: block; font-size: 9px; font-weight: 900; text-transform: uppercase; color: #94a3b8; margin-bottom: 2px; }
.ec-card-bottom div strong { font-size: 14px; font-weight: 900; color: #0f172a; font-family: 'Courier New', monospace; }
.ec-card-bottom div.r { text-align: right; }
.ec-card-bottom div strong.mora { color: #dc2626; }
.ec-card-bottom div strong.ok { color: #059669; }

/* .btn-accion.danger también se usa fuera de .se-table (ver el botón
   "Eliminar" del header de detalle en facturas_abiertas.js), así que se
   repite sin el ancestro para que tenga el mismo look en ambos lugares. */
.btn-accion.danger { background: #dc2626; color: #fff; border: none; padding: 9px 16px; border-radius: 10px; font-weight: 800; font-size: 11px; text-transform: uppercase; cursor: pointer; }
.btn-accion.danger:hover { background: #b91c1c; }
.se-table-empty { padding: 48px; text-align: center; color: #94a3b8; font-weight: 800; text-transform: uppercase; font-size: 12px; }
.se-table .grupo-cliente td { background: #f8fafc; font-weight: 900; text-transform: uppercase; color: #1e293b; border-top: 2px solid #e2e8f0; }
.se-sidebar-footer .user { display: flex; align-items: center; gap: 10px; }
.se-sidebar-footer .user .avatar { width: 30px; height: 30px; border-radius: 999px; background: #0ea5e9; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; text-transform: uppercase; flex-shrink: 0; }
.se-sidebar-footer .user .who { overflow: hidden; }
.se-sidebar-footer .user .who .name { font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Barra superior de la pantalla de Venta: Ingresar Inventario / Pendientes --- */
.caja-topbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 16px 12px; background: #fff; }
.caja-topbar button { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; border: 1px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .05s, background .15s; }
.caja-topbar button:active { transform: scale(.96); }
.caja-topbar button svg { width: 16px; height: 16px; }
.caja-topbar .bt-teal { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.caja-topbar .bt-teal:hover { background: #99f6e4; }
.caja-topbar .bt-orange { background: #ffedd5; color: #ea580c; border-color: #fed7aa; }
.caja-topbar .bt-orange:hover { background: #fed7aa; }
.caja-badge-count { position: absolute; top: -8px; right: -8px; background: #ef4444; color: #fff; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.25); border: 2px solid #fff; }

/* --- Botón "Crear Nuevo Cliente" bajo el select --- */
.btn-outline-sky { width: 100%; background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd; padding: 11px; border-radius: 12px; font-weight: 900; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s; }
.btn-outline-sky:hover { background: #e0f2fe; }
.btn-outline-sky svg { width: 14px; height: 14px; }

/* --- Modales de seguridad (oscuros: OTP, precio manual, ingreso inventario) --- */
.se-modal-dark { background: #0f172a; border-radius: 32px; padding: 30px; width: 100%; max-width: 400px; text-align: center; border: 1px solid; }
.se-modal-dark.acc-amber { border-color: rgba(245,158,11,.3); }
.se-modal-dark.acc-teal { border-color: rgba(45,212,191,.3); }
.se-modal-dark .icon-badge { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.se-modal-dark .icon-badge svg { width: 26px; height: 26px; }
.se-modal-dark.acc-amber .icon-badge { background: rgba(245,158,11,.2); color: #fbbf24; }
.se-modal-dark.acc-teal .icon-badge { background: rgba(45,212,191,.2); color: #2dd4bf; }
.se-modal-dark h3 { color: #fff; font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.se-modal-dark p { color: #94a3b8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 18px; }
.se-modal-dark label { display: block; font-size: 9px; font-weight: 900; color: #64748b; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; text-align: left; }
.se-modal-dark select, .se-modal-dark input { width: 100%; padding: 12px; border-radius: 12px; border: 2px solid #334155; margin-bottom: 14px; font-weight: 700; background: #1e293b; color: #fff; font-size: 14px; }
.se-modal-dark input[type="password"] { text-align: center; font-size: 24px; font-weight: 900; letter-spacing: .5em; font-family: 'Courier New', monospace; padding-left: 8px; }
.se-modal-dark.acc-amber input:focus, .se-modal-dark.acc-amber select:focus { border-color: #fbbf24; outline: none; }
.se-modal-dark.acc-teal input:focus, .se-modal-dark.acc-teal select:focus { border-color: #2dd4bf; outline: none; }
.se-modal-dark .se-modal-actions button { background: rgba(255,255,255,.05); color: #94a3b8; border: none; }
.se-modal-dark .se-modal-actions button:hover { background: rgba(255,255,255,.1); color: #fff; }
.se-modal-dark.acc-amber .se-modal-actions button.btn-confirm { background: #fbbf24; color: #0f172a; }
.se-modal-dark.acc-teal .se-modal-actions button.btn-confirm { background: #2dd4bf; color: #0f172a; }
.se-buscar-resultados { text-align: left; margin-bottom: 12px; max-height: 160px; overflow-y: auto; background: #1e293b; border: 1px solid #334155; border-radius: 12px; }
.se-buscar-resultados .item { padding: 10px 12px; border-bottom: 1px solid #334155; cursor: pointer; }
.se-buscar-resultados .item:last-child { border-bottom: none; }
.se-buscar-resultados .item:hover { background: #334155; }
.se-buscar-resultados .item .n { font-size: 11px; font-weight: 800; color: #fff; text-transform: uppercase; }
.se-buscar-resultados .item .s { font-size: 10px; color: #94a3b8; }
.se-sel-producto { text-align: left; background: rgba(45,212,191,.08); border: 1px solid rgba(45,212,191,.25); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.se-sel-producto .l { font-size: 9px; color: #2dd4bf; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.se-sel-producto .n { font-size: 13px; font-weight: 800; color: #fff; }
.se-sel-producto .s { font-size: 10px; color: #94a3b8; }

/* --- Modal post-venta (éxito) --- */
.se-postsale { background: #fff; border-radius: 32px; padding: 32px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,.35); border: 1px solid #e2e8f0; }
.se-postsale .icon-ok { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 999px; background: #f0fdf4; color: #22c55e; border: 2px solid #dcfce7; display: flex; align-items: center; justify-content: center; }
.se-postsale .icon-ok svg { width: 40px; height: 40px; }
.se-postsale h2 { font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: #1e293b; margin: 0 0 8px; }
.se-postsale .cambio-line { color: #059669; font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; margin-bottom: 10px; }
.se-postsale .sub { font-size: 10px; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
.se-postsale-actions { display: flex; flex-direction: column; gap: 10px; }
.se-postsale-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; padding: 15px; border-radius: 14px; font-weight: 900; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: #fff; transition: background .15s; }
.se-postsale-actions button svg { width: 16px; height: 16px; }
.se-postsale-actions .bt-comprobante { background: #0284c7; }
.se-postsale-actions .bt-comprobante:hover { background: #0ea5e9; }
.se-postsale-actions .bt-comprobante.done { background: #059669; }
.se-postsale-actions .bt-cerrar { background: #f1f5f9; color: #64748b; margin-top: 6px; }
.se-postsale-actions .bt-cerrar:hover { background: #e2e8f0; }

/* --- Efectivo: caja con cálculo de cambio --- */
.se-cash-total { text-align: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 20px; margin-bottom: 20px; }
.se-cash-total h3 { margin: 0 0 4px; font-weight: 900; text-transform: uppercase; color: #1e293b; font-size: 16px; }
.se-cash-total .amt { font-size: 38px; font-weight: 900; color: #16a34a; letter-spacing: -.03em; font-family: 'Courier New', monospace; }
.se-cash-input-wrap { position: relative; margin-bottom: 18px; }
.se-cash-input-wrap span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #cbd5e1; font-weight: 900; }
.se-cash-input-wrap input { width: 100%; padding: 15px 15px 15px 44px; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 18px; font-size: 24px; font-weight: 900; text-align: center; font-family: 'Courier New', monospace; }
.se-cash-input-wrap input:focus { border-color: #10b981; background: #fff; outline: none; }
.se-cash-change-box { background: #f8fafc; padding: 16px; border-radius: 18px; text-align: center; margin-bottom: 18px; border: 2px solid transparent; transition: all .15s; }
.se-cash-change-box.ready { background: #ecfdf5; border-color: #a7f3d0; }
.se-cash-change-box label { font-size: 9px; color: #94a3b8; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.se-cash-change-box .val { font-size: 24px; font-weight: 900; color: #cbd5e1; font-family: 'Courier New', monospace; }
.se-cash-change-box.ready .val { color: #059669; }

/* --- Pago Mixto (dos métodos en una sola venta): cada línea (efectivo/
   tarjeta/transferencia + su config de banco/POS si aplica) se agrupa en un
   bloque punteado para que quede claro que son dos cobros distintos que
   suman el total --- */
.pm-block { border: 2px dashed #e2e8f0; border-radius: 16px; padding: 14px 16px 4px; margin-bottom: 16px; }
.pm-block:last-of-type { margin-bottom: 20px; }

/* --- Apertura / Cierre de Caja (mismo flujo que tenía views/caja/pos_caja.php
   vía modales_caja.php + caja_v3.js: fondo inicial al empezar el día y corte
   de caja con impresión al final del turno) --- */
.se-modal.center { text-align: center; }
.se-modal .icon-badge-light { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px; background: #e0f2fe; color: #0284c7; display: flex; align-items: center; justify-content: center; }
.se-modal .icon-badge-light svg { width: 28px; height: 28px; }

.se-sidebar-footer .btn-corte { background: #431407; color: #fb923c; margin-bottom: 8px; }
.se-sidebar-footer .btn-corte:hover { background: #7c2d12; color: #fff; }

.se-cierre-pausa { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 16px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.se-cierre-pausa p { margin: 0; font-size: 12px; font-weight: 800; color: #0c4a6e; }
.se-cierre-pausa span { display: block; font-size: 10px; font-weight: 600; color: #0369a1; margin-top: 2px; }
.se-cierre-pausa button { background: #0284c7; color: #fff; border: none; padding: 8px 14px; border-radius: 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; flex-shrink: 0; }

.se-cierre-resumen { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; margin-bottom: 14px; font-size: 12px; }
.se-cierre-resumen div { display: flex; justify-content: space-between; padding: 3px 0; color: #475569; font-weight: 700; }
.se-cierre-resumen div b { color: #0f172a; }

/* Desglose por banco/POS específico + créditos otorgados del turno (ver
   cierre_caja.js:renderDesgloseBancosPos) -antes esta información se
   calculaba y guardaba (cash_cuts.details_json) pero nunca se mostraba-. */
.se-cierre-desglose { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 11px; }
.se-cierre-desglose div { display: flex; justify-content: space-between; padding: 2px 0; color: #0369a1; font-weight: 700; }
.se-cierre-desglose div b { color: #0c4a6e; }
.se-cierre-desglose div.creditos { border-top: 1px dashed #bae6fd; margin-top: 4px; padding-top: 6px; color: #c2410c; }
.se-cierre-desglose div.creditos b { color: #9a3412; }

.se-cierre-paso { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: 16px; background: #f1f5f9; border: none; font-weight: 800; font-size: 12px; color: #334155; margin-bottom: 10px; text-align: left; }
.se-cierre-paso:disabled { opacity: .45; cursor: not-allowed; }
.se-cierre-paso .check { color: #16a34a; }
.se-cierre-paso.impresion { border: 1px dashed #cbd5e1; background: #f8fafc; }
.se-cierre-final { width: 100%; padding: 14px; border-radius: 16px; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; border: none; background: #f1f5f9; color: #94a3b8; margin-top: 4px; }
.se-cierre-final.activo { background: #dc2626; color: #fff; }