* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background:#f3f4f6; color:#111; }
.hidden { display:none !important; }

/* Splash de arranque */
#splash { position:fixed; inset:0; background:#1f2937; display:flex; align-items:center; justify-content:center; z-index:9999; transition: opacity .25s; }
#splash img { width:140px; height:140px; border-radius:24px; box-shadow:0 10px 40px rgba(0,0,0,.4); animation: latido .9s ease-in-out infinite; }
#splash.salir { opacity:0; pointer-events:none; }
@keyframes latido { 0%,100% { transform:scale(1); } 50% { transform:scale(0.94); } }

/* Toasts no-bloqueantes */
#toast-host { position:fixed; top:60px; right:14px; z-index:200; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast-ui { pointer-events:auto; min-width:240px; max-width:380px; padding:12px 18px; border-radius:8px;
  color:#fff; font-weight:500; font-size:14px; box-shadow:0 4px 14px rgba(0,0,0,.25);
  animation: slideInRight .25s ease-out; }
.toast-ui.salir { opacity:0; transform:translateX(20px); transition:opacity .25s, transform .25s; }
.toast-ui.toast-ok   { background:#16a34a; }
.toast-ui.toast-err  { background:#dc2626; }
.toast-ui.toast-info { background:#2563eb; }
@keyframes slideInRight { from { transform:translateX(20px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Modales custom (confirmar / preguntar) */
.ui-modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:150;
  display:flex; align-items:center; justify-content:center; animation: fadeIn .15s; }
.ui-modal { background:#fff; padding:22px; border-radius:10px; min-width:340px; max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); }
.ui-modal .ui-msg { font-size:15px; line-height:1.4; margin-bottom:14px; white-space:pre-wrap; }
.ui-modal .ui-input { width:100%; padding:10px; border:2px solid #cbd5e1; border-radius:6px;
  font-size:15px; margin-bottom:14px; }
.ui-modal .ui-bot { display:flex; gap:8px; justify-content:flex-end; }
.ui-modal .ui-bot button { padding:8px 16px; border:0; border-radius:6px; cursor:pointer; font-weight:600; font-size:14px; }
.ui-modal .ui-cancel { background:#e5e7eb; color:#111; }
.ui-modal .ui-ok.primary { background:#16a34a; color:#fff; }
.ui-modal .ui-ok.peligro { background:#dc2626; color:#fff; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Banner helper de impresora no instalado */
#helper-banner { position:sticky; top:0; z-index:55; background:#d97706; color:#fff;
  padding:10px 14px; font-size:14px; display:flex; align-items:center; gap:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.2); }
#helper-banner .icon { font-size:18px; }
#helper-banner .msg { flex:1; }
#helper-banner .dl { background:#fff; color:#d97706; padding:6px 14px; border-radius:6px;
  text-decoration:none; font-weight:600; font-size:13px; }
#helper-banner .dl:hover { background:#fef3c7; }
#helper-banner .dismiss { color:#fff; text-decoration:none; opacity:.8; font-size:18px; }
#helper-banner .dismiss:hover { opacity:1; }

/* Banner offline */
#offline-banner { position:sticky; top:0; z-index:60; background:#dc2626; color:#fff; padding:8px 14px; font-weight:600; display:flex; align-items:center; gap:10px; font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
#offline-banner.recovering { background:#16a34a; }
#offline-banner .dot { width:10px; height:10px; border-radius:50%; background:#fff; animation:pulse 1s infinite; }
#offline-banner .pending { color:#fde68a; font-weight:500; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.topbar { display:flex; align-items:center; gap:16px; background:#1f2937; color:#fff; padding:10px 16px; position:sticky; top:0; z-index:40; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.topbar .brand { display:inline-flex; align-items:center; text-decoration:none; }
.topbar .brand img { height:36px; width:36px; border-radius:8px; display:block; }
.topbar nav { display:flex; gap:4px; flex:1; }
.topbar .tab { background:transparent; color:#cbd5e1; border:0; padding:8px 14px; border-radius:6px; font-size:14px; cursor:pointer; }
.topbar .tab:hover { background:#374151; color:#fff; }
.topbar .tab.active { background:#2563eb; color:#fff; }
.topbar .user { font-size:13px; color:#cbd5e1; }

main { padding:14px; }

/* ----- Venta ----- */
.venta { display:grid; grid-template-columns: 1fr 360px; gap:14px; height: calc(100vh - 90px); }
.venta-left { background:#fff; border-radius:8px; padding:12px; display:flex; flex-direction:column; min-height:0; }
.scan-bar { display:flex; gap:8px; margin-bottom:10px; }
.scan-bar input { flex:1; font-size:18px; padding:10px 12px; border:2px solid #2563eb; border-radius:6px; outline:none; }
.scan-bar button { padding:10px 18px; background:#2563eb; color:#fff; border:0; border-radius:6px; cursor:pointer; }

.grid { width:100%; border-collapse:collapse; font-size:14px; }
.grid thead th { background:#f3f4f6; padding:8px 6px; text-align:left; border-bottom:2px solid #e5e7eb; position:sticky; top:0; }
.grid tbody tr { border-bottom:1px solid #f1f5f9; }
.grid tbody tr:hover { background:#f9fafb; }
.grid td { padding:6px; }
.grid td.num, .grid th.num { text-align:right; }
.grid td input { width:80px; padding:4px 6px; border:1px solid #d1d5db; border-radius:4px; text-align:right; }
.grid .del { background:transparent; border:0; color:#ef4444; cursor:pointer; font-size:18px; }

.search-results { background:#fff; border:1px solid #d1d5db; border-radius:6px; margin-top:8px; max-height:220px; overflow:auto; }
.search-results .item { padding:8px 10px; cursor:pointer; border-bottom:1px solid #f1f5f9; }
.search-results .item:hover { background:#eff6ff; }

.venta-right { background:#fff; border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:12px; }
.totales { background:#f9fafb; border-radius:6px; padding:10px; }
.totales .row { display:flex; justify-content:space-between; padding:4px 0; font-size:14px; }
.totales .desglose { font-size:12px; color:#6b7280; padding:4px 0 6px; border-bottom:1px dashed #e5e7eb; }
.totales .total { font-size:24px; font-weight:700; border-top:2px solid #111; padding-top:8px; margin-top:6px; color:#111; }

.cliente-box { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.cliente-box input { padding:8px; border:1px solid #d1d5db; border-radius:4px; }
.cliente-box .check { display:flex; gap:6px; align-items:center; }

.acciones { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.acciones button { padding:12px; border:0; border-radius:6px; cursor:pointer; font-weight:600; font-size:14px; background:#e5e7eb; color:#111; }
.acciones .primary { background:#16a34a; color:#fff; }
.acciones .danger { background:#fee2e2; color:#b91c1c; }
.acciones .big { font-size:18px; padding:18px; }

/* ----- Modal cobro ----- */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal { background:#fff; border-radius:10px; padding:20px; min-width:560px; max-width:90vw; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.modal h2 { margin:0 0 12px; display:flex; justify-content:space-between; align-items:baseline; }
.modal h2 .total { font-size:28px; color:#16a34a; }
.formas-pago { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.formas-pago button { padding:10px 14px; border:1px solid #d1d5db; background:#fff; border-radius:6px; cursor:pointer; font-weight:600; }
.formas-pago button:hover { background:#eff6ff; border-color:#2563eb; }
.pagos-table { width:100%; border-collapse:collapse; font-size:14px; }
.pagos-table th, .pagos-table td { padding:6px; border-bottom:1px solid #f1f5f9; }
.pagos-table td.num, .pagos-table th.num { text-align:right; }
.pagos-table input { width:110px; padding:6px 8px; border:1px solid #d1d5db; border-radius:4px; text-align:right; font-size:15px; }
/* Plantillas de ticket / factura */
.plantillas-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:14px; }
.plantilla { background:#f9fafb; border:1px solid #e5e7eb; border-radius:10px; padding:16px; }
.plantilla h2 { margin:0 0 8px; font-size:18px; display:flex; align-items:center; gap:8px; }
.badge-def { background:#16a34a; color:#fff; font-size:10px; padding:3px 8px; border-radius:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.plantilla-feat { list-style:none; padding:0; margin:10px 0; font-size:13px; }
.plantilla-feat li { padding:3px 0; color:#374151; }
.plantilla textarea { width:100%; padding:8px; border:1px solid #d1d5db; border-radius:4px; font-family:monospace; font-size:13px; }

.ticket-preview { background:#fffef9; border:1px solid #e5e7eb; border-radius:6px; padding:18px; max-width:480px; margin:0 auto; box-shadow:0 2px 8px rgba(0,0,0,.08); font-family:monospace; }
.ticket-preview .empresa-head { text-align:center; margin-bottom:10px; font-size:13px; }
.ticket-preview .empresa-head-grid { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; margin-bottom:10px; font-size:12px; text-align:left; }
.ticket-preview .logo-mini { max-width:80px; max-height:80px; object-fit:contain; }
.ticket-preview pre { white-space:pre-wrap; font-size:12px; margin:0; }
.ticket-preview .pie-preview { text-align:center; margin-top:12px; padding-top:10px; border-top:1px dashed #d1d5db; color:#6b7280; font-size:12px; white-space:pre-wrap; }

@media (max-width: 800px) { .plantillas-grid { grid-template-columns: 1fr; } }

.aparcados-list { list-style:none; padding:0; margin:10px 0; max-height:60vh; overflow:auto; }
.aparcados-list li { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border:1px solid #e5e7eb; border-radius:6px; margin-bottom:6px; cursor:pointer; transition:background .15s; }
.aparcados-list li:hover { background:#eff6ff; border-color:#2563eb; }
.aparcados-list .ap-main { display:flex; gap:12px; align-items:center; }
.aparcados-list .ap-etq { color:#6b7280; }
.aparcados-list .ap-cli { color:#2563eb; font-size:13px; }
.aparcados-list .ap-side { display:flex; gap:10px; align-items:center; }
.aparcados-list .ap-total { font-weight:600; font-size:16px; color:#16a34a; }
.aparcados-list .ap-del { background:#fee2e2; color:#b91c1c; border:0; border-radius:4px; padding:4px 10px; cursor:pointer; }
.aparcados-list .ap-del:hover { background:#fecaca; }
.modal.aparcados { min-width:520px; }

/* Botones de billetes eliminados: el cobro mixto se hace editando importe + añadiendo otra forma */
.cobro-totales { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:8px; margin:12px 0; padding:10px; background:#f9fafb; border-radius:6px; }
.cobro-totales .cambio b { color:#2563eb; font-size:20px; }

/* ----- Tablas genéricas (productos, clientes, informes) ----- */
.panel { background:#fff; border-radius:8px; padding:14px; }
.panel h1 { margin:0 0 12px; font-size:20px; }
.toolbar { display:flex; gap:8px; margin-bottom:10px; align-items:center; }
.toolbar input, .toolbar select { padding:8px; border:1px solid #d1d5db; border-radius:4px; }
.toolbar button { padding:8px 14px; background:#2563eb; color:#fff; border:0; border-radius:4px; cursor:pointer; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { background:#f3f4f6; padding:8px; text-align:left; border-bottom:2px solid #e5e7eb; }
.table td { padding:8px; border-bottom:1px solid #f1f5f9; }
.table tr:hover td { background:#f9fafb; }
.table .num { text-align:right; }

.form { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.form label { display:flex; flex-direction:column; font-size:13px; gap:4px; }
.form input, .form select, .form textarea { padding:8px; border:1px solid #d1d5db; border-radius:4px; font-size:14px; }
.form .full { grid-column: 1 / -1; }

/* Login */
.login-bg { position:fixed; inset:0; background:linear-gradient(135deg,#1f2937,#2563eb); display:flex; align-items:center; justify-content:center; }
.login-box { background:#fff; padding:30px; border-radius:12px; min-width:340px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.login-box h1 { margin:0 0 20px; text-align:center; }
.login-box .tabs { display:flex; gap:4px; margin-bottom:16px; }
.login-box .tabs button { flex:1; padding:8px; background:#f3f4f6; border:0; border-radius:6px; cursor:pointer; font-size:13px; }
.login-box .tabs button.active { background:#2563eb; color:#fff; }
.login-box label { display:block; font-size:13px; margin-top:10px; color:#374151; }
.login-box input { width:100%; padding:10px; font-size:18px; border:1px solid #d1d5db; border-radius:6px; margin-top:4px; }
.login-box .primary { width:100%; padding:12px; font-size:16px; background:#16a34a; color:#fff; border:0; border-radius:6px; cursor:pointer; margin-top:16px; }
.login-box .error { color:#b91c1c; min-height:20px; margin-top:10px; text-align:center; }

/* Familias y panel táctil */
.familias-panel { display:grid; grid-template-columns: 200px 1fr; gap:8px; margin-top:8px; min-height:140px; max-height:240px; }
.familias { display:flex; flex-direction:column; gap:4px; overflow:auto; }
.familias .fam { padding:10px; border:0; border-radius:6px; color:#fff; cursor:pointer; font-weight:600; }
.prods-fam { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap:6px; overflow:auto; padding:4px; background:#f9fafb; border-radius:6px; }
.prods-fam .prod { background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:8px; cursor:pointer; font-size:12px; text-align:center; }
.prods-fam .prod:hover { background:#eff6ff; border-color:#2563eb; }

#btnLogout { background:transparent; border:1px solid #cbd5e1; color:#cbd5e1; border-radius:4px; padding:4px 8px; margin-left:8px; cursor:pointer; }
#btnLogout:hover { background:#374151; }

.ventas-hoy { background:#16a34a; color:#fff; padding:4px 10px; border-radius:12px; font-size:12px; margin-right:10px; }
.ventas-hoy b { color:#fff; }

.btn-cajon { background:#fbbf24; color:#1f2937; border:0; border-radius:6px;
  padding:4px 10px; font-size:18px; cursor:pointer; margin-right:8px;
  transition: background .15s, transform .15s; }
.btn-cajon:hover:not(:disabled) { background:#f59e0b; transform:scale(1.05); }
.btn-cajon:disabled { opacity:.6; cursor:wait; }
.btn-cajon.flash-ok { background:#16a34a !important; color:#fff; }
.btn-cajon.flash-err { background:#dc2626 !important; color:#fff; }

.scan-con-cantidad { background:#fef3c7 !important; border-color:#d97706 !important; font-weight:600; }
.scan-flash { animation: scanFlash .35s ease-out; }
@keyframes scanFlash {
  0%   { background:#16a34a; border-color:#16a34a; }
  100% { background:#fff;    border-color:#2563eb; }
}

/* Feedback de cobro */
.cobro-ok-flash {
  position:fixed; inset:0; background:rgba(22,163,74,.95); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:100; transition:opacity .5s, transform .5s;
}
.cobro-ok-flash.desvanece { opacity:0; transform:scale(1.05); }
.cobro-ok-flash .check { font-size:120px; line-height:1; }
.cobro-ok-flash .lbl { font-size:36px; font-weight:700; letter-spacing:2px; margin-top:10px; }
.cobro-ok-flash .imp { font-size:48px; font-weight:700; margin-top:14px; }
.cobro-ok-flash .cambio-flash { font-size:24px; margin-top:10px; background:rgba(0,0,0,.2); padding:10px 24px; border-radius:8px; }

/* Tablas ordenables */
.sortable th[data-sort] { cursor:pointer; user-select:none; position:relative; padding-right:18px; }
.sortable th[data-sort]:hover { background:#dbeafe; }
.sortable th.sort-asc::after  { content:"▲"; position:absolute; right:6px; font-size:10px; opacity:.7; }
.sortable th.sort-desc::after { content:"▼"; position:absolute; right:6px; font-size:10px; opacity:.7; }

/* Fotos de producto */
.mini-foto { width:28px; height:28px; object-fit:cover; border-radius:4px; margin-right:8px; vertical-align:middle; border:1px solid #e5e7eb; }
.preview-foto { max-height:160px; object-fit:contain; border:1px solid #e5e7eb; border-radius:6px; padding:6px; background:#f9fafb; }

/* Devoluciones: cantidad ya devuelta */
.table .ya-dev { color:#b91c1c; font-weight:600; }

.table tr.clickable { cursor:pointer; }
.table tr.clickable:hover td { background:#eff6ff; }

.subtabs { display:flex; gap:2px; border-bottom:2px solid #e5e7eb; margin-bottom:14px; }
.subtabs button { background:transparent; border:0; padding:10px 18px; cursor:pointer; font-size:14px; color:#6b7280; border-bottom:2px solid transparent; margin-bottom:-2px; }
.subtabs button:hover { color:#111; }
.subtabs button.active { color:#2563eb; border-bottom-color:#2563eb; font-weight:600; }

.paginacion { display:flex; justify-content:space-between; align-items:center; padding:10px 0; gap:10px; flex-wrap:wrap; }
.paginacion .pag-info { color:#6b7280; font-size:13px; }
.paginacion .pag-botones { display:flex; gap:4px; align-items:center; }
.paginacion button { padding:6px 10px; background:#fff; border:1px solid #d1d5db; border-radius:4px; cursor:pointer; font-size:13px; }
.paginacion button:hover:not(:disabled) { background:#eff6ff; border-color:#2563eb; }
.paginacion button:disabled { opacity:.4; cursor:not-allowed; }
.paginacion .pag-pagina { padding:0 10px; font-weight:600; color:#374151; }

.chip-mov { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase; }
.chip-mov.m-venta { background:#fee2e2; color:#991b1b; }
.chip-mov.m-devolucion { background:#dcfce7; color:#15803d; }
.chip-mov.m-entrada { background:#dbeafe; color:#1e40af; }
.chip-mov.m-ajuste { background:#fef3c7; color:#92400e; }
.chip-mov.m-merma { background:#fecaca; color:#7f1d1d; }
.chip-mov.m-traspaso { background:#e9d5ff; color:#6b21a8; }

.chip-rol { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; text-transform:uppercase; }
.chip-rol.r-admin { background:#fee2e2; color:#b91c1c; }
.chip-rol.r-supervisor { background:#fef3c7; color:#92400e; }
.chip-rol.r-cajero { background:#dbeafe; color:#1e40af; }
.table tr.inactivo td { opacity:.4; }

.chip { display:inline-block; padding:4px 8px; margin:2px; border-radius:12px; color:#fff; font-size:12px; }
.chip button { background:transparent; border:0; color:#fff; cursor:pointer; margin-left:4px; }
.btn-import { padding:8px 14px; background:#10b981; color:#fff; border-radius:4px; cursor:pointer; }