@import url("https://fonts.googleapis.com/css2?family=Chivo:wght@600;700;900&family=Asap:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap");

/* ===============================
   EXPRESSCASH — DESIGN TOKENS
   Identidad: "terminal de cobro" — azul petróleo + teal de pago
   digital, ámbar reservado para avisos de dinero, cifras en
   monoespaciada tabular, y la "tecla encendida" que se desliza
   en el menú lateral.
================================ */
:root{
  --bg:#eef1f3;
  --card:#ffffff;
  --text:#0d1f2b;
  --text-muted:#5f7280;
  --primary:#00806e;
  --primary-dark:#005f51;
  --primary-2:#00a88f;
  --primary-soft:#dcf3ef;
  --accent:#e08b2e;
  --accent-soft:#fbeeda;
  --danger:#d8453f;
  --danger-soft:#fbe6e5;
  --border:#dbe3e7;
  --sidebar-from:#0a1b2a;
  --sidebar-to:#061219;
  --radius:12px;
  --radius-sm:9px;
  --shadow:0 6px 18px rgba(13,31,43,.07);
  --shadow-lg:0 16px 38px rgba(13,31,43,.15);
  --font: "Asap", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-display: "Chivo", "Asap", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --icon-dashboard: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%229%22/%3E%3Crect%20x%3D%2210%22%20y%3D%227%22%20width%3D%224%22%20height%3D%2214%22/%3E%3Crect%20x%3D%2217%22%20y%3D%223%22%20width%3D%224%22%20height%3D%2218%22/%3E%3C/svg%3E");
  --icon-productos: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208%2012%203%203%208v8l9%205%209-5V8Z%22/%3E%3Cpath%20d%3D%22M3%208l9%205%209-5%22/%3E%3Cpath%20d%3D%22M12%2013v8%22/%3E%3C/svg%3E");
  --icon-ventas: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h2l2.4%2012.4a2%202%200%200%200%202%201.6h7.2a2%202%200%200%200%202-1.6L21%208H6%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2220%22%20r%3D%221%22/%3E%3C/svg%3E");
  --icon-fiados: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%2210%22%20x2%3D%2222%22%20y2%3D%2210%22/%3E%3Cline%20x1%3D%226%22%20y1%3D%2215%22%20x2%3D%2210%22%20y2%3D%2215%22/%3E%3C/svg%3E");
  --icon-compras: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209h16l-1.5%2010.5a2%202%200%200%201-2%201.5H7.5a2%202%200%200%201-2-1.5L4%209Z%22/%3E%3Cpath%20d%3D%22M8%209V6a4%204%200%200%201%208%200v3%22/%3E%3C/svg%3E");
  --icon-proveedores: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%2213%22%20height%3D%2210%22/%3E%3Cpath%20d%3D%22M14%2010h4l3%203v4h-7%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2219%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2219%22%20r%3D%221.6%22/%3E%3C/svg%3E");
  --icon-kardex: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h11l3%203v15H5Z%22/%3E%3Cpath%20d%3D%22M16%203v3h3%22/%3E%3Cpath%20d%3D%22M8.5%2011h7M8.5%2014.5h7M8.5%2018h4%22/%3E%3C/svg%3E");
  --icon-devoluciones: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010h10a5%205%200%200%201%200%2010H9%22/%3E%3Cpath%20d%3D%22M7%206%203%2010l4%204%22/%3E%3C/svg%3E");
  --icon-finanzas: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v10M9.5%209.3c0-1.3%201.1-2.3%202.5-2.3s2.5.9%202.5%202c0%202.5-5%201.5-5%204%200%201.1%201.1%202%202.5%202s2.5-1%202.5-2.3%22/%3E%3C/svg%3E");
  --icon-vendedores: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3.5%202%22/%3E%3C/svg%3E");
  --icon-usuarios: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%229.5%22%20r%3D%222.6%22/%3E%3Cpath%20d%3D%22M16%2013.3a5.2%205.2%200%200%201%205.5%205.2%22/%3E%3C/svg%3E");
  --icon-configuracion: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M19.4%2013.5a7.6%207.6%200%200%200%200-3l2-1.5-2-3.4-2.4.7a7.6%207.6%200%200%200-2.6-1.5L14%202h-4l-.4%202.3a7.6%207.6%200%200%200-2.6%201.5l-2.4-.7-2%203.4%202%201.5a7.6%207.6%200%200%200%200%203l-2%201.5%202%203.4%202.4-.7a7.6%207.6%200%200%200%202.6%201.5L10%2022h4l.4-2.3a7.6%207.6%200%200%200%202.6-1.5l2.4.7%202-3.4-2-1.5Z%22/%3E%3C/svg%3E");
  --icon-negocios: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l1-5h16l1%205%22/%3E%3Cpath%20d%3D%22M4%209v10a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V9%22/%3E%3Cpath%20d%3D%22M9%2020v-6h6v6%22/%3E%3C/svg%3E");
  --icon-seguridad: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010Z%22/%3E%3C/svg%3E");
  --icon-avisos: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208A6%206%200%200%200%206%208c0%207-3%209-3%209h18s-3-2-3-9%22/%3E%3Cpath%20d%3D%22M13.73%2021a2%202%200%200%201-3.46%200%22/%3E%3C/svg%3E");
  --icon-servidor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2220%22%20height%3D%228%22%20rx%3D%222%22/%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%228%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%226.01%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%226%22%20y1%3D%2218%22%20x2%3D%226.01%22%20y2%3D%2218%22/%3E%3C/svg%3E");
  --icon-papelera: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%223%206%205%206%2021%206%22/%3E%3Cpath%20d%3D%22M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6m3%200V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22/%3E%3C/svg%3E");
  --icon-bolt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M13%202%204%2014h6l-1%208%209-12h-6l1-8Z%22/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23969f92%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222.5%22/%3E%3Cpath%20d%3D%22m4%207%208%206%208-6%22/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23969f92%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.5%22%20y%3D%2210.5%22%20width%3D%2215%22%20height%3D%2210%22%20rx%3D%222.2%22/%3E%3Cpath%20d%3D%22M8%2010.5V7.2a4%204%200%200%201%208%200v3.3%22/%3E%3C/svg%3E");
  --icon-user-field: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23969f92%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4.5%2020.5a7.5%207.5%200%200%201%2015%200%22/%3E%3C/svg%3E");
  --icon-key: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23969f92%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22m10.3%2012.7%208.2-8.2M15%206l3%203M12.5%208.5l3%203%22/%3E%3C/svg%3E");
  --icon-eye: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23969f92%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1.5%2012S5.5%205%2012%205s10.5%207%2010.5%207-4%207-10.5%207S1.5%2012%201.5%2012Z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.2%22/%3E%3C/svg%3E");
  --icon-eye-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23969f92%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.9%204.6A10.6%2010.6%200%200%201%2012%204.4c6.5%200%2010.5%207.1%2010.5%207.1a14.6%2014.6%200%200%201-2.9%203.9%22/%3E%3Cpath%20d%3D%22M6.4%206.7C3.4%208.5%201.5%2011.5%201.5%2011.5s4%207.1%2010.5%207.1c1.6%200%203-.4%204.3-1%22/%3E%3Cpath%20d%3D%22M9.6%209.6a3.2%203.2%200%200%200%204.5%204.6%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%222%22%20x2%3D%2222%22%20y2%3D%2222%22/%3E%3C/svg%3E");
}
body.dark{
  --bg:#07121a;
  --card:#0f1f2a;
  --text:#e6eef2;
  --text-muted:#8fa3b0;
  --primary:#0d9c85;
  --primary-dark:#00806e;
  --primary-2:#2bc4a9;
  --primary-soft:rgba(18,191,163,.15);
  --accent:#e9a33f;
  --accent-soft:rgba(233,163,63,.15);
  --danger:#e8635d;
  --danger-soft:rgba(232,99,93,.15);
  --border:#1e3340;
  --sidebar-from:#050e15;
  --sidebar-to:#01070a;
  --shadow:0 6px 18px rgba(0,0,0,.4);
  --shadow-lg:0 16px 36px rgba(0,0,0,.55);
}


/* RESET */
*{box-sizing:border-box}
/* Android (y iOS) agrandan el texto por su cuenta en algunos bloques
   ("font boosting"), lo que descuadra medidas pensadas al pixel. Se
   desactiva: el tamaño lo decide el diseño, no el navegador. El ajuste
   por accesibilidad del sistema se sigue respetando. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{font-family:var(--font)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3{font-family:var(--font-display);font-weight:900;letter-spacing:-0.02em}
a{color:inherit}

/* SCROLLBAR */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* APP LAYOUT */
.app{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
.sidebar{
  width:240px;
  flex-shrink:0;
  height:100vh;
  overflow-y:auto;
  background:linear-gradient(180deg,var(--sidebar-from),var(--sidebar-to));
  color:white;
  padding:24px 16px;
  transition:left .3s ease;
}
.sidebar h2{
  margin:0 0 28px;
  padding-left:10px;
  font-size:19px;
  letter-spacing:.01em;
  display:flex;align-items:center;gap:9px;
}
.sidebar h2::before{
  content:"";width:16px;height:16px;flex:none;
  background-color:var(--primary-2);
  -webkit-mask:var(--icon-bolt) center/contain no-repeat;
  mask:var(--icon-bolt) center/contain no-repeat;
}
.sidebar nav a{
  display:flex;align-items:center;gap:11px;
  color:#93a7b5;padding:11px 14px;border-radius:11px;
  text-decoration:none;margin-bottom:2px;
  font-size:14.5px;font-weight:500;
  transition:background .18s ease, color .18s ease;
}

/* Encabezado que agrupa los enlaces por tarea (VENTAS, INVENTARIO...).
   Es un <div>, no un <a>, así que el JS que recorre "nav a" para
   marcar la sección activa lo ignora por completo. */
.nav-grupo{
  font-family:var(--font-display);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.32);
  padding:0 14px;margin:22px 0 8px;
  position:relative;z-index:1;
  user-select:none;
}
.nav-grupo:first-of-type{margin-top:4px}
.sidebar nav a::before{
  content:"";width:16px;height:16px;flex:none;
  background-color:currentColor;opacity:.85;
}
.sidebar nav a[data-section="dashboard"]::before{-webkit-mask:var(--icon-dashboard) center/contain no-repeat;mask:var(--icon-dashboard) center/contain no-repeat}
.sidebar nav a[data-section="productos"]::before{-webkit-mask:var(--icon-productos) center/contain no-repeat;mask:var(--icon-productos) center/contain no-repeat}
.sidebar nav a[data-section="ventas"]::before{-webkit-mask:var(--icon-ventas) center/contain no-repeat;mask:var(--icon-ventas) center/contain no-repeat}
.sidebar nav a[data-section="fiados"]::before{-webkit-mask:var(--icon-fiados) center/contain no-repeat;mask:var(--icon-fiados) center/contain no-repeat}
.sidebar nav a[data-section="compras"]::before{-webkit-mask:var(--icon-compras) center/contain no-repeat;mask:var(--icon-compras) center/contain no-repeat}
.sidebar nav a[data-section="proveedores"]::before{-webkit-mask:var(--icon-proveedores) center/contain no-repeat;mask:var(--icon-proveedores) center/contain no-repeat}
.sidebar nav a[data-section="kardex"]::before{-webkit-mask:var(--icon-kardex) center/contain no-repeat;mask:var(--icon-kardex) center/contain no-repeat}
.sidebar nav a[data-section="devoluciones"]::before{-webkit-mask:var(--icon-devoluciones) center/contain no-repeat;mask:var(--icon-devoluciones) center/contain no-repeat}
.sidebar nav a[data-section="finanzas"]::before{-webkit-mask:var(--icon-finanzas) center/contain no-repeat;mask:var(--icon-finanzas) center/contain no-repeat}
.sidebar nav a[data-section="vendedores"]::before{-webkit-mask:var(--icon-vendedores) center/contain no-repeat;mask:var(--icon-vendedores) center/contain no-repeat}
.sidebar nav a[data-section="usuarios"]::before{-webkit-mask:var(--icon-usuarios) center/contain no-repeat;mask:var(--icon-usuarios) center/contain no-repeat}
.sidebar nav a[data-section="configuracion"]::before{-webkit-mask:var(--icon-configuracion) center/contain no-repeat;mask:var(--icon-configuracion) center/contain no-repeat}
.sidebar nav a[data-section="resumen"]::before{-webkit-mask:var(--icon-dashboard) center/contain no-repeat;mask:var(--icon-dashboard) center/contain no-repeat}
.sidebar nav a[data-section="negocios"]::before{-webkit-mask:var(--icon-negocios) center/contain no-repeat;mask:var(--icon-negocios) center/contain no-repeat}
.sidebar nav a[data-section="seguridad"]::before{-webkit-mask:var(--icon-seguridad) center/contain no-repeat;mask:var(--icon-seguridad) center/contain no-repeat}
.sidebar nav a[data-section="avisos"]::before{-webkit-mask:var(--icon-avisos) center/contain no-repeat;mask:var(--icon-avisos) center/contain no-repeat}
.sidebar nav a[data-section="servidor"]::before{-webkit-mask:var(--icon-servidor) center/contain no-repeat;mask:var(--icon-servidor) center/contain no-repeat}
.sidebar nav a[data-section="papelera"]::before{-webkit-mask:var(--icon-papelera) center/contain no-repeat;mask:var(--icon-papelera) center/contain no-repeat}
.sidebar nav{position:relative}
/* La "tecla encendida": el fondo del enlace activo no se pinta sobre el
   propio enlace, sino que es esta pieza la que se DESLIZA hasta él —
   como una tecla que se ilumina en un terminal de cobro. Reutiliza el
   mismo elemento y la misma lógica de JS que ya existían. */
.nav-indicator{
  position:absolute; top:0; left:0; width:100%; height:0; opacity:0;
  border-radius:11px;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow:0 6px 18px rgba(0,168,143,.42), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .34s cubic-bezier(.16,1,.3,1), height .34s cubic-bezier(.16,1,.3,1), opacity .2s ease;
  z-index:0; pointer-events:none;
}
.sidebar nav a{position:relative; z-index:1}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar nav a:hover::before{opacity:1}
.sidebar nav a.active{
  color:#fff;font-weight:600;
}
.sidebar nav a.active::before{opacity:1}

/* MOBILE SIDEBAR */
.hamburger{
  display:none;background:none;border:none;font-size:20px;color:var(--text);
  padding:6px 8px;border-radius:8px;
}
.hamburger:hover{background:var(--border)}
@media(max-width:768px){
  .sidebar{position:fixed;left:-260px;top:0;height:100%;z-index:50}
  .sidebar.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .hamburger{display:block}
  /* Objetivos de toque más grandes en celular — 38px es un poco chico
     para el dedo (lo recomendado es 44px); en computadora, con mouse,
     38px está bien y se deja como estaba. */
  .btn-icon{width:44px;height:44px}
}

/* CONTENT */
.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow-y:auto}
.topbar{
  background:var(--card);
  padding:12px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--border);
}
/* La zona derecha se empuja al extremo: ya no hay un saludo con flex:1
   que ocupe el hueco del medio. */
.top-right{display:flex;gap:8px;align-items:center;margin-left:auto}

/* ===============================
   RECUADRO DE USUARIO (barra superior)
   La inicial en un círculo, el nombre arriba y el rol debajo. Dice de
   un vistazo con qué cuenta se está trabajando — importa cuando en el
   mismo mostrador se turnan varias personas.
================================ */
.usuario-caja{
  display:flex;align-items:center;gap:10px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:12px;padding:6px 12px 6px 7px;
}
.usuario-inicial{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:14px;
}
body.dark .usuario-inicial{background:var(--primary-2);color:#07121a}
.usuario-datos{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.usuario-datos strong{
  font-family:var(--font-display);font-size:13.5px;font-weight:700;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* El rol usa un gris un punto más oscuro que el tenue general: a 11.5px
   sobre el fondo del recuadro, el tenue estándar se quedaba en 4.40 y no
   alcanzaba el mínimo legible. */
.usuario-datos small{font-size:11.5px;color:#596b78;white-space:nowrap}
body.dark .usuario-datos small{color:var(--text-muted)}

/* En pantallas angostas se conserva solo la inicial: el nombre y el rol
   se sacrifican antes que los botones de tema y salir. */
@media(max-width:620px){
  .usuario-datos{display:none}
  .usuario-caja{padding:5px;border-radius:11px}
}

/* ===============================
   BUSCADOR GLOBAL (barra superior)
   Encuentra productos, clientes y secciones sin navegar el menú.
   En un mostrador, llegar en un tecleo importa más que la estética.
================================ */
.buscador-global{
  position:relative;flex:0 1 380px;min-width:0;
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:0 10px;
  box-shadow:inset 0 1px 2px rgba(13,31,43,.05);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.dark .buscador-global{box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.buscador-global:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.buscador-lupa{color:var(--text-muted);flex:none}
.buscador-global input{
  flex:1;min-width:0;border:none;background:transparent;color:var(--text);
  font-family:var(--font);font-size:13.5px;padding:9px 0;
}
.buscador-global input:focus{outline:none}
.buscador-global input::placeholder{color:var(--text-muted)}
.buscador-atajo{
  flex:none;font-family:var(--font-mono);font-size:10px;
  color:var(--text-muted);background:var(--card);
  border:1px solid var(--border);border-radius:5px;padding:2px 6px;
}

/* Panel de resultados: mismo lenguaje que los recuadros de la app */
.buscador-resultados{
  display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  max-height:min(420px,70vh);overflow-y:auto;z-index:60;
  padding:6px;
}
.buscador-resultados.abierto{display:block}
.buscador-grupo{
  font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  padding:10px 10px 6px;
}
.buscador-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--radius-sm);
  background:none;border:none;text-align:left;cursor:pointer;
  color:var(--text);font-family:var(--font);font-size:13.5px;
}
.buscador-item:hover,.buscador-item.marcado{background:var(--primary-soft)}
.buscador-item .bi-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buscador-item .bi-dato{
  flex:none;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--text-muted);
}
.buscador-item .bi-icono{flex:none;width:15px;height:15px;color:var(--text-muted)}
.buscador-vacio{padding:18px 12px;text-align:center;color:var(--text-muted);font-size:13px}

/* En pantallas chicas el buscador pasa a una segunda fila completa:
   en la barra no caben a la vez el saludo, el buscador y los botones. */
@media(max-width:900px){
  .topbar{flex-wrap:wrap}
  .buscador-global{order:3;flex:1 1 100%}
}
@media(max-width:560px){
  .buscador-atajo{display:none}
}

.container{
  max-width:1800px;margin:auto;padding:24px 20px 60px;
  /* ".main" es un contenedor flexible; por defecto sus hijos NO se encogen
     por debajo del ancho de su propio contenido, así que en pantallas
     angostas (celular) este contenedor se estiraba a ~520px dentro de una
     pantalla de 360px, y todo adentro heredaba ese ancho de más — de ahí
     la sensación de "se ve todo muy grande / cortado". Con esto, se ajusta
     al ancho real disponible. */
  width:100%;min-width:0;box-sizing:border-box;
}

/* BUTTONS */
button{cursor:pointer;font-family:var(--font)}
.btn, .product-form button, .card button:not(.btn-icon){
  background:var(--primary);
  color:white;border:none;border-radius:var(--radius-sm);
  padding:11px 18px;font-size:14px;font-weight:700;letter-spacing:.01em;
  font-family:var(--font-display);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22);
  transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:hover, .product-form button:hover, .card button:not(.btn-icon):hover{
  background:#00947e;transform:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22);
}
/* Al presionar, la tecla "se hunde": el canto inferior desaparece y
   el botón baja esos mismos 2px. */
.btn:active, .product-form button:active, .card button:not(.btn-icon):active{
  box-shadow:none;transform:translateY(2px);
}

/* En tema oscuro el botón invierte la lógica: teal brillante con texto
   tinta. Es el patrón habitual de las interfaces oscuras y aquí encaja
   con la idea de "tecla encendida" — además de ser mucho más legible
   (8.6:1 contra 3.4:1 que daba el texto blanco sobre teal oscuro). */
body.dark .btn,
body.dark .product-form button,
body.dark .card button:not(.btn-icon){
  background:var(--primary-2);color:#07121a;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3);
}
body.dark .btn:hover,
body.dark .product-form button:hover,
body.dark .card button:not(.btn-icon):hover{
  background:#4ad9c0;
}
.btn-success{background:var(--primary)}
.btn-danger{background:linear-gradient(135deg, var(--danger), #8f3220)}
.btn-danger:hover{filter:brightness(1.08)}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-sm);padding:9px 16px;font-weight:600;font-size:14px;
  transition:background .15s ease, border-color .15s ease;
}
.btn-ghost:hover{background:var(--border)}
.btn-icon{
  background:transparent;border:1px solid var(--border);color:var(--text);
  width:38px;height:38px;border-radius:10px;font-size:16px;display:inline-flex;
  align-items:center;justify-content:center;
  transition:background .15s ease, transform .25s ease;
}
.btn-icon:hover{background:var(--border)}
.btn-danger-ghost{
  background:transparent;border:none;color:var(--danger);font-size:14px;
  margin-left:8px;border-radius:6px;padding:2px 6px;
}
.btn-danger-ghost:hover{background:var(--danger-soft)}

/* La regla ".card button:not(.btn-icon)" de arriba pinta como botón sólido
   verde a CUALQUIER botón de texto dentro de una tarjeta — sin querer,
   eso también pisaba el look "outline" de .btn-ghost/.btn-accent-ghost/
   .btn-danger-ghost cuando se usan sueltos en una tarjeta (ej. "Desactivar
   verificación en dos pasos"). Se restaura aquí. Dentro de tablas
   (.products-table .col-acciones) hay una regla más específica más abajo
   que los vuelve a poner sólidos a propósito — esa gana ahí por tener
   mayor especificidad, así que no se pisan entre sí. */
.card button.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
  box-shadow:none;
}
.card button.btn-ghost:hover{background:var(--border);filter:none;transform:none;box-shadow:none}
.card button.btn-accent-ghost{
  background:transparent;border:1px solid var(--accent);color:var(--accent);
  box-shadow:none;
}
.card button.btn-accent-ghost:hover{background:var(--accent-soft);filter:none;transform:none;box-shadow:none}
.card button.btn-danger-ghost{
  background:transparent;border:1px solid var(--danger);color:var(--danger);
  box-shadow:none;
}
.card button.btn-danger-ghost:hover{background:var(--danger-soft);filter:none;transform:none;box-shadow:none}

/* .btn-danger (sólido, ej. "Cerrar caja", "Desactivar verificación en dos
   pasos") tiene la misma especificidad que .btn — dentro de una tarjeta
   pierde contra ".card button:not(.btn-icon)" igual que le pasaba a las
   variantes ghost. Se refuerza aquí para que gane y quede rojo sólido. */
.card button.btn-danger{
  background:linear-gradient(135deg, var(--danger), #8f3220);
  color:#fff;border:none;
}
.card button.btn-danger:hover{filter:brightness(1.08);transform:translateY(-1px)}

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{
  outline:2px solid var(--primary-2);outline-offset:2px;
}

/* LOGIN */
body.login-page{
  background:
    radial-gradient(circle at 20% -10%, rgba(0,168,143,.32), transparent 45%),
    radial-gradient(circle at 100% 110%, rgba(37,99,168,.22), transparent 45%),
    linear-gradient(160deg, #0a1b2a 0%, #071620 55%, #030a10 100%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.login-box{
  position:relative;overflow:hidden;
  background:var(--card);padding:40px 36px 34px;max-width:380px;width:100%;
  border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.45);
}
/* NOTA: el troquelado circular anterior generaba dientes/artefactos oscuros
   al repetirse en un alto tan chico (dependía mucho del navegador). Se
   reemplaza por una barra de acento superior — mismo espíritu de marca,
   cero riesgo de artefactos visuales, y se recorta limpio con overflow:hidden
   respetando el border-radius de la tarjeta. */
.login-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
}
.login-brand{text-align:center;margin-bottom:22px}
/* La marca ya viene dada por el isotipo + wordmark (login-logo-img), así que
   el <h1> pasa a ser una etiqueta de contexto pequeña en vez de un segundo
   titular que compita visualmente con el logo. */
.login-box h1{
  font-family:var(--font);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-muted);margin:0 0 5px;
}
.login-subtitle{color:var(--text-muted);font-size:13.5px;margin:0}
#loginForm{border-top:1px solid var(--border);padding-top:20px;margin-top:22px}
.login-box label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:16px 0 6px}
.login-box label:first-of-type{margin-top:0}
.login-box input{
  width:100%;padding:12px 14px 12px 40px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--icon-mail) no-repeat 13px center/17px, #fbf9f3;
  color:var(--text);font-size:14.5px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#pass{background-image:var(--icon-lock);background-repeat:no-repeat;background-position:13px center;background-size:17px;background-color:#fbf9f3}
.login-box input:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background-color:#fff;
}
.login-box button{
  width:100%;padding:13px;background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:white;border:none;box-shadow:0 8px 20px rgba(28,107,69,.4);
  border-radius:10px;font-size:15px;font-weight:700;margin-top:22px;letter-spacing:.01em;
  transition:filter .15s ease, transform .12s ease;
}
.login-box button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.login-box button:disabled{opacity:.7;cursor:not-allowed;transform:none}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px;margin-bottom:18px}
.card{
  min-width:0;
  background:var(--card);padding:22px;border-radius:16px;
  margin-bottom:16px;border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(13,31,43,.04);
}
body.dark .card{box-shadow:none}

/* El título del recuadro: el ícono va en su propia línea, encima, y
   debajo el nombre en texto oscuro con peso. Los <svg> que ya venían
   dentro de cada h3 se reaprovechan como ese ícono. */
.card h3{
  margin:0 0 16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  font-family:var(--font-display);
  font-size:17px;font-weight:700;letter-spacing:-0.01em;
  text-transform:none;color:var(--text);
}
.card h3 svg{width:19px;height:19px;color:var(--text-muted);vertical-align:baseline}
.card .value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:29px;font-weight:700;letter-spacing:-0.02em;color:var(--primary);
}

/* Tarjetas KPI: barra de acento superior + elevación al pasar el cursor */
.cards .card{position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}
.cards .card h3{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-muted);flex-direction:row;align-items:center;gap:7px;margin-bottom:10px;
}
.cards .card .value{color:var(--text);font-size:31px}

/* La cifra protagonista del resumen: tarjeta llena de color. */
[data-module="dashboard"] .cards .card:first-child{
  background:#00705f;border-color:transparent;
}
[data-module="dashboard"] .cards .card:first-child h3{color:rgba(255,255,255,.85)}
[data-module="dashboard"] .cards .card:first-child .value{color:#fff}
/* Un círculo tenue que asoma por la esquina — el único adorno de la
   pantalla, y solo en esta tarjeta. */
[data-module="dashboard"] .cards .card:first-child::after{
  content:"";position:absolute;right:-38px;top:-38px;
  width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.09);pointer-events:none;
}
/* La nota bajo la cifra protagonista, que explica qué se está mirando. */
.kpi-nota{
  margin:8px 0 0;font-size:12.5px;color:rgba(255,255,255,.85);
  position:relative;z-index:1;
}

/* Los reembolsos conservan el rojo: es dinero que sale, y ese color
   dice algo que el texto por sí solo no dice. */
.cards .card .value.sin-stock{color:var(--danger)}
.cards .card:nth-child(2)::before{background:var(--danger)}
.cards .card:nth-child(3)::before{background:var(--accent)}
.cards .card:nth-child(4)::before{background:var(--primary-2)}
.cards .card:nth-child(2) .value{color:var(--danger)}
.cards .card:nth-child(3) .value{color:var(--accent)}
.cards .card:nth-child(4) .value{color:var(--primary-2)}
.cards .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* FORMS */
.product-form{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:10px;align-items:end;margin-bottom:16px;
}
.product-form input, .product-form select{
  padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:14px;width:100%;
}
.product-form input:focus, .product-form select:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
/* Campos: mismo lenguaje de panel que los recuadros — esquina corta
   y un canto superior interior que sugiere profundidad. */
.product-form input, .product-form select, .search-input, .select-producto, .config-input{
  box-shadow:inset 0 1px 2px rgba(13,31,43,.05);
}
body.dark .product-form input, body.dark .product-form select,
body.dark .search-input, body.dark .select-producto, body.dark .config-input{
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}

.search-input{
  width:100%;padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg);color:var(--text);
  font-size:14px;margin-bottom:14px;
}
.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search-container{margin-bottom:4px}
.pos-filtros{display:flex;gap:8px}
.pos-filtros .search-input,
.pos-filtros select{flex:1 1 0}
@media(max-width:480px){.pos-filtros{flex-wrap:wrap}.pos-filtros .search-input,.pos-filtros select{flex:1 1 100%}}

.select-producto{
  width:100%;padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg);color:var(--text);
  font-size:14px;margin-bottom:16px;
}

.venta-resumen{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.venta-resumen p{display:flex;justify-content:space-between;margin:6px 0;font-size:15px}
.venta-resumen strong{font-family:var(--font-mono);letter-spacing:-0.01em}
.venta-resumen input{
  width:100%;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:14px;margin:8px 0;
}
.venta-resumen select{
  width:100%;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:14px;margin:0 0 14px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
  padding-right:34px;cursor:pointer;
}
.venta-resumen select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.venta-resumen select option, .product-form select option{background:var(--card,#0f172a);color:var(--text)}
.venta-resumen .btn{width:100%;margin-top:8px;padding:13px}

.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.pagination .btn-icon:disabled{opacity:.35;cursor:not-allowed}

.offline-badge{
  background:var(--warning,#f59e0b);color:#0f172a;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:999px;margin-left:10px;white-space:nowrap;
}

.banner-soporte{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--danger-soft);color:var(--danger);font-size:13px;font-weight:600;
  padding:10px 20px;border-bottom:1px solid var(--danger);
}
.banner-soporte .btn-ghost{
  border-color:var(--danger);color:var(--danger);
  padding:6px 14px;font-size:12px;
}
.banner-soporte .btn-ghost:hover{background:var(--danger-soft)}

.banner-aviso{
  display:flex;align-items:center;gap:10px;
  background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600;
  padding:10px 20px;border-bottom:1px solid var(--accent);
}

/* ===============================
   BADGES — estados reutilizables (activo/alerta/info)
================================ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:600;
  white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge-ok{background:var(--primary-soft);color:var(--primary)}
.badge-warn{background:var(--accent-soft);color:var(--accent)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-muted{background:var(--border);color:var(--text-muted)}
.badge-neutral{background:rgba(47,156,104,.10);color:var(--primary-2)}

.btn-accent-ghost{
  background:transparent;border:none;color:var(--accent);font-size:14px;
  margin-left:8px;border-radius:6px;padding:2px 6px;
}
.btn-accent-ghost:hover{background:var(--accent-soft)}

/* Ver actividad / Cambiar clave / Entrar como / Desactivar / Restaurar usan
   la clase "btn" directamente (sólido, igual que cualquier botón principal
   de la app); "Eliminar" / "Eliminar definitivamente" usan "btn btn-danger"
   (sólido rojo, igual que "Cerrar caja"). Aquí solo se ajusta el tamaño
   para que quepan varios por fila — el color ya viene correcto de esas
   clases, no hace falta forzarlo. El ancho de cada botón queda libre según
   su texto (forzar un ancho fijo igual rompía con textos largos como
   "Eliminar definitivamente"); lo único que se fuerza es que el texto
   nunca se parta, así todos quedan de la misma ALTURA. */
.products-table .col-acciones button{
  padding:9px 14px;font-size:0.85rem;border-radius:8px;
  white-space:nowrap;
}

.barcode-input{margin-bottom:10px;border-style:dashed}
.barcode-input:focus{border-style:solid}

.btn-barcode{
  width:100%;margin-bottom:12px;
  background:transparent;color:var(--primary);
  border:1px dashed var(--primary);
}
.btn-barcode:hover{background:var(--primary-soft)}
.product-form .btn-barcode{width:auto;margin-bottom:0}
.product-form-actions{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.product-form-actions .btn{width:200px}

.fila-resumen td{background:var(--primary-soft);font-size:13px;padding:10px 12px}

/* TABLES */
.products-table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:var(--radius-sm);table-layout:auto}
.products-table th{
  background:var(--sidebar-from);
  color:white;padding:12px 20px;text-align:left;
  font-family:var(--font-display);
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:inset 0 -2px 0 var(--primary);
}
.products-table th:nth-child(2){text-align:center}
.products-table td{padding:14px 28px;border-bottom:1px solid var(--border);font-size:14.5px;font-variant-numeric:tabular-nums}
.products-table tbody tr:nth-child(even){background:rgba(105,114,106,.045)}
.products-table tbody tr:hover{background:var(--primary-soft)}
.products-table tbody tr:last-child td{border-bottom:none}
.empty-state{text-align:center;color:var(--text-muted);padding:20px !important;font-style:italic}

/* LISTS */
.clean-list{list-style:none;padding:0;margin:0}
.clean-list li{
  padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px;
  display:flex;justify-content:space-between;
}
.clean-list li:last-child{border-bottom:none}

/* MODULES — evita el "flash" de ver todos los módulos apilados al cargar
   la página antes de que el JS termine de ejecutar showModule('dashboard'). */
.module{display:none}
.module[data-module="dashboard"]{display:block}
.module[data-module="resumen"]{display:block}

/* POS FULLSCREEN (layout opcional para pantallas grandes) */
.pos-full{display:grid;grid-template-columns:2.5fr 1.5fr;gap:20px}
.pos-products{height:calc(100vh - 140px);overflow:auto}
.pos-cart{height:calc(100vh - 140px);overflow:auto}

/* RESPONSIVE TABLES */
@media (max-width:640px){
  .products-table{display:block;overflow-x:auto;white-space:nowrap}
  .cards{grid-template-columns:1fr}
}

/* TICKET TÉRMICO */
@media print{
  body *{visibility:hidden}
  .ticket-print, .ticket-print *{visibility:visible}
  .ticket-print{
    position:absolute;left:0;top:0;width:80mm;
    font-family:monospace;font-size:12px
  }
  .ticket-print h2{text-align:center}
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ===============================
   LOGO / MARCA
================================ */
.login-logo-img{
  width:150px;height:auto;display:block;margin:0 auto 16px;
  filter:drop-shadow(0 8px 18px rgba(28,107,69,.4));
}
.sidebar .brand{
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;border-radius:14px;
  padding:14px 12px;margin:0 4px 24px;
  box-shadow:0 4px 20px rgba(47,156,104,.3), 0 4px 14px rgba(0,0,0,.2);
}
.sidebar .brand-logo{
  width:100%;max-width:150px;height:auto;display:block;
}
/* Botones de acción en la tabla de productos */
.acciones-cell{white-space:nowrap}
.acciones-cell .btn-icon{margin-right:4px}

/* Etiqueta de producto sin existencias (vista del vendedor) */
.sin-stock{color:var(--danger);font-weight:600}

/* ===== cortes, devoluciones y pistas ===== */
.hint{color:var(--text-muted);font-size:13px;margin:8px 0 0}
.resumen-corte{margin-top:14px}
.corte-box{
  background:var(--primary-soft);
  border-radius:12px;padding:14px 16px;
  border:1px solid var(--primary);
}
.corte-box p{margin:4px 0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:14px}
.corte-box hr{border:none;border-top:1px dashed var(--border);margin:8px 0}

/* ===== importar productos desde Excel ===== */
.import-box{
  border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin:4px 0 14px;
}
.import-label{font-weight:600;font-size:14px;display:block;margin-bottom:8px}
.import-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.import-row input[type="file"]{flex:1 1 200px;font-size:13px}
.import-link{
  color:var(--primary);font-size:13px;text-decoration:underline;white-space:nowrap;
}

/* ===== importación ===== */
.drop-zone{
  border:2px dashed var(--border); border-radius:var(--radius);
  padding:22px; text-align:center; background:var(--bg);
  transition:border-color .15s, background .15s, transform .15s; margin:6px 0 12px;
}
.drop-zone:hover{ border-color:var(--primary); }
.drop-zone.drag-over{ border-color:var(--primary); background:var(--primary-soft); transform:scale(1.01); }
.drop-text{ margin:0 0 4px; font-size:15px; color:var(--text); }
.drop-sub{ margin:4px 0 10px; color:var(--text-muted); font-size:13px; }
.import-progress{
  height:8px; background:var(--border); border-radius:6px; overflow:hidden; margin:10px 0;
}
.import-progress .import-bar{
  height:100%; width:40%; background:var(--primary); border-radius:6px;
  animation:importLoading 1s infinite ease-in-out;
}
@keyframes importLoading{
  0%{ margin-left:-40%; } 100%{ margin-left:100%; }
}
.import-preview{ margin-top:8px; }
.import-preview .preview-head{ font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.preview-ok{ color:var(--primary-dark); font-weight:600; margin:8px 0 4px; }
.preview-error{ color:var(--danger); font-weight:600; margin:8px 0 4px; }
.err-table th{ background:var(--danger) !important; box-shadow:none; }
.import-actions{ display:flex; gap:10px; margin:12px 0; flex-wrap:wrap; }

/* ===== orden de compra ===== */
.orden-box{ margin-top:12px; }
.orden-ok{
  background:var(--primary-soft); border-radius:var(--radius); padding:12px 14px;
}
.orden-ok p{ margin:0 0 8px; font-weight:600; display:block; }
.orden-ok .btn{ margin-right:8px; }

/* ===== finanzas ===== */
.export-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.finanzas-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.finanzas-grid h4{ margin:0 0 8px; font-size:14px; font-family:var(--font-display); }
.card.kpi{ padding:14px 16px; }
.card.kpi h3{ font-size:12px; }
@media (max-width:720px){ .finanzas-grid{ grid-template-columns:minmax(0,1fr); } }

/* ===== proveedores / sesiones ===== */
.fila-inactiva{ opacity:.55; }
.en-curso{ color:var(--primary-dark); font-weight:600; }

/* ===== Modal genérico (editar producto / usuario) ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,11,8,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:16px;
}
.modal-box{
  background:var(--card); color:var(--text);
  border-radius:14px; width:100%; max-width:380px;
  padding:22px; box-shadow:0 20px 55px rgba(0,0,0,.4);
  border:1px solid var(--border);
}
.modal-titulo{ margin:0 0 14px; font-size:18px; color:var(--text); font-family:var(--font-display); }
.modal-label{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:12px 0 6px; }
.modal-input{
  width:100%; padding:11px 13px; border-radius:10px;
  border:1px solid var(--border); font-size:14.5px; box-sizing:border-box;
  background:var(--bg); color:var(--text);
}
.modal-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.modal-acciones{ display:flex; gap:10px; margin-top:20px; }
.modal-btn{
  flex:1; padding:11px; border-radius:10px; border:none; cursor:pointer;
  font-size:14px; font-weight:700;
}
.modal-btn-cancel{ background:var(--border); color:var(--text); transition:background .15s; }
.modal-btn-cancel:hover{ background:var(--text-muted); color:#fff; }
.modal-btn-ok{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; transition:filter .15s; }
.modal-btn-ok:hover{ filter:brightness(1.08); }

/* ===== POS: botones de venta (efectivo / terminal) ===== */
/* ===============================
   PUNTO DE VENTA — dos columnas
   Izquierda: se arma la venta. Derecha: se cobra. Antes todo iba en
   una sola columna y había que bajar hasta el final para ver el total
   mientras el cliente esperaba.
================================ */
.pos-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:16px;align-items:start;
}
/* La columna de cobro acompaña el desplazamiento: el total queda
   siempre a la vista aunque el carrito sea largo. */
.pos-cobro{position:sticky;top:16px}
@media(max-width:1000px){
  .pos-grid{grid-template-columns:minmax(0,1fr)}
  .pos-cobro{position:static}
}

.venta-botones{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.venta-botones .btn{ width:100%; margin-top:0; justify-content:center; display:flex; align-items:center; gap:8px; }

/* Cada forma de pago con su propio color: en el mostrador se eligen sin
   leer, por posición y color. El azul del terminal se diferencia del
   verde del efectivo de un vistazo. */
.card button.btn-terminal{ background:#2563a8; color:#fff; box-shadow:inset 0 -2px 0 rgba(0,0,0,.22); }
.card button.btn-terminal:hover{ background:#2c74c4; }
/* En tema oscuro estos tres botones conservan EL MISMO color que en
   claro (azul, lila y tierra), a pedido. Como son colores oscuros sobre
   una tarjeta oscura, el relleno solo destaca 2.4-3.0 contra el fondo:
   se agrega un canto claro para que el borde del botón se distinga.
   El texto sigue en blanco, que sobre estos tonos da 5.6-7.1. */
body.dark .card button.btn-terminal{
  background:#2563a8; color:#07121a;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.16);
}
body.dark .card button.btn-terminal:hover{ background:#2c74c4; }

/* Total y cambio: la cifra que cierra la venta manda sobre el resto. */
.venta-resumen p{font-size:14px}
.venta-resumen p strong{font-size:19px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.venta-resumen input{text-align:center;font-size:15px}

/* ===== Modal: opciones tipo radio / checkbox ===== */
.modal-opciones{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.opcion-radio, .opcion-check{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:11px 13px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); color:var(--text); font-size:14.5px;
}
.opcion-radio input, .opcion-check input{ width:18px; height:18px; accent-color:var(--primary); margin:0; flex:none; }
.opcion-check{ margin-top:12px; }

/* texto del mínimo en alertas de stock bajo */
/* ===============================
   ALERTAS DE STOCK BAJO
   Tres columnas fijas: nombre, stock y mínimo. Antes iba todo seguido en
   una línea, así que el número quedaba pegado al final del nombre y
   cambiaba de posición en cada fila según lo largo que fuera el producto
   — justo lo que hace imposible leer una columna de números de un vistazo.
================================ */
.clean-list li.alerta-fila{
  display:grid;grid-template-columns:minmax(0,1fr) 56px 68px;
  align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.clean-list li.alerta-fila:last-child{border-bottom:none}
.alerta-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.alerta-stock{
  text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:700;color:var(--text);
}
/* Lo que ya está en cero se marca: no es "poco", es que no puedes venderlo. */
.alerta-stock.alerta-agotado{color:var(--danger)}
.alerta-min{ color:var(--text-muted); font-size:12px; text-align:right;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums; }

@media(max-width:520px){
  .clean-list li.alerta-fila{grid-template-columns:minmax(0,1fr) 48px 58px;gap:8px}
  .alerta-nombre{font-size:12.5px}
}

/* ===== Documentos imprimibles: ticket y factura ===== */
#areaImpresion{ display:none; }

@media print {
  body > *:not(#areaImpresion){ display:none !important; }
  #areaImpresion{ display:block !important; }
  body{ background:#fff !important; }
}

/* Ticket (estilo recibo angosto) */
.doc-ticket{ width:300px; margin:0 auto; padding:10px 14px; color:#000; font-family:'Segoe UI',Arial,sans-serif; }
.doc-ticket h2{ text-align:center; margin:0; font-size:20px; }
.doc-ticket .sub{ text-align:center; margin:2px 0 8px; font-size:12px; }
.doc-ticket .meta{ text-align:center; font-size:11px; border-bottom:1px dashed #000; padding-bottom:8px; margin-bottom:8px; }
.doc-ticket .t-items{ width:100%; border-collapse:collapse; font-size:12px; }
.doc-ticket .t-items th{ text-align:left; border-bottom:1px solid #000; padding:3px 2px; }
.doc-ticket .t-items td{ padding:3px 2px; vertical-align:top; }
.doc-ticket .c{ text-align:center; }
.doc-ticket .r{ text-align:right; white-space:nowrap; }
.doc-ticket .tot{ display:flex; justify-content:space-between; font-weight:bold; font-size:15px; border-top:1px dashed #000; margin-top:8px; padding-top:6px; font-family:'IBM Plex Mono',Consolas,monospace; }
.doc-ticket .lin{ display:flex; justify-content:space-between; font-size:12px; margin-top:3px; font-variant-numeric:tabular-nums; }
.doc-ticket .gracias{ text-align:center; margin-top:12px; font-size:12px; }

/* Factura (hoja completa) */
.doc-factura{ max-width:720px; margin:0 auto; padding:24px; color:#000; font-family:'Segoe UI',Arial,sans-serif; }
.doc-factura .f-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid #00705f; padding-bottom:12px; }
.doc-factura .f-head h1{ margin:0; color:#00705f; font-size:30px; letter-spacing:1px; }
.doc-factura .f-head p{ margin:2px 0 0; font-weight:bold; }
.doc-factura .f-folio{ text-align:right; font-size:12px; }
.doc-factura .f-cliente{ margin:16px 0; font-size:13px; display:flex; flex-direction:column; gap:8px; }
.doc-factura .f-cliente span{ font-weight:bold; }
.doc-factura .t-items{ width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.doc-factura .t-items th{ background:#00705f; color:#fff; text-align:left; padding:8px; }
.doc-factura .t-items td{ padding:8px; border-bottom:1px solid #ddd; }
.doc-factura .c{ text-align:center; }
.doc-factura .r{ text-align:right; white-space:nowrap; }
.doc-factura .f-tot{ margin-top:14px; margin-left:auto; width:260px; }
.doc-factura .f-tot .lin{ display:flex; justify-content:space-between; font-size:13px; margin:4px 0; }
.doc-factura .f-tot .tot{ display:flex; justify-content:space-between; font-weight:bold; font-size:17px; border-top:2px solid #000; margin-top:6px; padding-top:6px; font-family:'IBM Plex Mono',Consolas,monospace; }
.doc-factura .lin{ display:flex; justify-content:space-between; }
.doc-factura .f-nota{ margin-top:24px; font-size:11px; color:#666; border-top:1px solid #ddd; padding-top:8px; }

/* ===== Configuración de la tienda ===== */
.config-hint{ color:var(--text-muted); font-size:13.5px; margin:0 0 16px; }
.config-opt{ color:var(--text-muted); font-weight:400; font-size:12px; }
.config-label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin:14px 0 6px; max-width:520px; }
.config-input{
  width:100%; max-width:520px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  font-size:14.5px; box-sizing:border-box; margin-top:6px;
}
.config-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.config-logo-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.config-logo-preview{
  width:130px; height:90px; border:2px dashed var(--border); border-radius:12px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--text-muted); font-size:12px; background:var(--bg); flex:none;
}
.config-logo-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
.config-logo-actions{ display:flex; flex-direction:column; gap:8px; }

/* Logo y datos del negocio dentro de ticket / factura */
.doc-ticket .doc-logo{ display:block; max-width:170px; max-height:90px; margin:0 auto 8px; object-fit:contain; }
.doc-ticket .neg{ text-align:center; font-size:11px; color:#000; }
.doc-factura .doc-logo{ display:block; max-width:180px; max-height:80px; margin:0 0 8px; object-fit:contain; }
.doc-factura .neg{ font-size:12px; color:#000; margin-top:2px; }

/* Mensaje dentro de los modales de aviso / confirmación */
.modal-mensaje{ font-size:14.5px; color:var(--text); margin:4px 0 0; line-height:1.45; white-space:pre-wrap; }

/* Nota "no fiscal" en el ticket (respaldo de impresión) */
.doc-ticket .nofiscal{ text-align:center; margin-top:6px; font-size:10px; color:#555; }

/* ===== RECUPERACIÓN DE CONTRASEÑA (login) ===== */
/* Enlace "¿Olvidaste tu contraseña?": botón fantasma tipo píldora, separado
   del botón principal por el mismo divisor punteado de la tarjeta. */
.login-olvide{
  text-align:center;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);
}
.login-olvide a{
  display:inline-block;padding:9px 18px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--primary-dark);text-decoration:none;
  border:1.5px solid transparent;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.login-olvide a:hover{
  background:var(--primary-soft);border-color:var(--primary);
  transform:translateY(-1px);
}
/* Ícono de llave inline, teñido del verde de marca vía mask. */
.login-olvide .icono-llave{
  display:inline-block;width:15px;height:15px;margin-right:7px;
  vertical-align:-2px;background:var(--primary-dark);
  -webkit-mask:var(--icon-key) center/contain no-repeat;
  mask:var(--icon-key) center/contain no-repeat;
}

/* Encabezado del formulario de recuperación: mismo lenguaje visual que la
   marca (título corto + subtítulo tenue) sobre el divisor. */
#recuperarForm{border-top:1px solid var(--border);padding-top:20px;margin-top:22px}
.recuperar-head{text-align:center;margin-bottom:18px}
.recuperar-head h2{
  font-family:var(--font);font-size:15px;font-weight:700;
  color:var(--text);margin:0 0 6px;letter-spacing:.01em;
}
.recuperar-head p{color:var(--text-muted);font-size:13px;margin:0;line-height:1.5}

/* Iconos por campo (mismo tratamiento que usuario/contraseña del login). */
.login-box input.input-user{background-image:var(--icon-user-field);background-repeat:no-repeat;background-position:13px center;background-size:17px;background-color:#fbf9f3}
.login-box input.input-key{background-image:var(--icon-key);background-repeat:no-repeat;background-position:13px center;background-size:17px;background-color:#fbf9f3}
.login-box input.input-lock{background-image:var(--icon-lock);background-repeat:no-repeat;background-position:13px center;background-size:17px;background-color:#fbf9f3}
.login-box input.input-user:focus,.login-box input.input-key:focus,.login-box input.input-lock:focus{background-color:#fff}

/* ===============================
   MICRO-INTERACCIONES Y ANIMACIONES
   Capa aditiva: no cambia el layout existente, solo añade vida a las
   transiciones, estados de carga y feedback de acciones. Se apaga sola
   con prefers-reduced-motion (regla ya definida más arriba).
================================ */

/* --- Entrada de la tarjeta de login --- */
.login-box{ animation: loginIn .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes loginIn{
  from{ opacity:0; transform:translateY(18px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* --- Spinner dentro del botón mientras está "disabled" (cargando) --- */
.login-box button:disabled::after,
.btn:disabled::after, .btn-success:disabled::after, .btn-danger:disabled::after{
  content:"";display:inline-block;width:13px;height:13px;margin-left:8px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  vertical-align:-2px;animation:spin .6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --- Transición al cambiar de sección en el panel --- */
.module-anim{ animation:fadeInUp .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* --- Tarjetas KPI: entrada escalonada al abrir una sección --- */
.card-anim{ animation:cardIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes cardIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* --- Valores (KPIs, totales): destello al actualizarse --- */
.card .value{ display:inline-block; }
.value.pulse{ animation:pulseValue .45s ease; }
@keyframes pulseValue{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}

/* --- Filas de tabla: aparición escalonada al cargar datos --- */
.products-table tbody tr.row-in{ animation:rowSlideIn .3s ease both; }
@keyframes rowSlideIn{
  from{ opacity:0; transform:translateX(-8px); }
  to{ opacity:1; transform:translateX(0); }
}

/* --- Modales: aparición suave en vez de "salto" --- */
.modal-overlay{ animation:overlayIn .18s ease both; }
@keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-box{ animation:modalPop .28s cubic-bezier(.16,1,.3,1) both; }
@keyframes modalPop{
  from{ opacity:0; transform:translateY(10px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* --- Efecto ripple (onda) en botones al hacer clic --- */
.btn, .btn-ghost, .btn-icon, .btn-danger, .btn-terminal, .modal-btn, .btn-barcode{
  position:relative; overflow:hidden;
}
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.55); mix-blend-mode:overlay;
  transform:scale(0); animation:rippleAnim .55s ease-out forwards;
}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* --- Ícono del sidebar: pequeño realce al pasar el cursor --- */
.sidebar nav a::before{ transition:transform .18s ease, opacity .18s ease, background-color .18s ease; }
.sidebar nav a:hover::before{ transform:scale(1.12); }

/* ===== Notificaciones (toast) =====
   Confirmaciones simples que no bloquean la pantalla (ej. "Producto agregado").
   Los errores y confirmaciones importantes siguen usando el modal .modal-*. */
#toastContainer{
  position:fixed; top:18px; right:18px; z-index:10000;
  display:flex; flex-direction:column; gap:10px; max-width:340px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:var(--card); color:var(--text); border-radius:12px;
  padding:13px 14px; box-shadow:var(--shadow-lg); border:1px solid var(--border);
  display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4;
  border-left:4px solid var(--primary);
  animation:toastIn .3s cubic-bezier(.16,1,.3,1) both;
}
.toast.toast-out{ animation:toastOut .22s ease forwards; }
.toast-success{ border-left-color:var(--primary); }
.toast-error{ border-left-color:var(--danger); }
.toast-info{ border-left-color:var(--accent); }
.toast .toast-icon{ flex:none; font-size:15px; line-height:1.3; }
.toast .toast-msg{ flex:1; word-break:break-word; }
.toast .toast-close{
  flex:none; background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:13px; line-height:1; padding:2px 0 0 4px;
}
.toast .toast-close:hover{ color:var(--text); }
@keyframes toastIn{
  from{ opacity:0; transform:translateX(24px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes toastOut{
  from{ opacity:1; transform:translateX(0); }
  to{ opacity:0; transform:translateX(24px); }
}
@media (max-width:480px){
  #toastContainer{ left:12px; right:12px; max-width:none; top:12px; }
}

/* ===== Badge de alertas en el sidebar (ej. stock bajo) ===== */
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:auto;
  background:var(--danger); color:#fff; font-size:11px; font-weight:700;
  border-radius:999px; line-height:1;
}

/* ===== Botón "✕" para limpiar campos de búsqueda ===== */
.search-wrap{ position:relative; }
.search-wrap .search-input{ padding-right:34px; }
.search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:none; background:var(--border); color:var(--text-muted);
  border-radius:50%; font-size:11px; display:none; align-items:center; justify-content:center;
  cursor:pointer; line-height:1; transition:background .15s ease, color .15s ease;
}
.search-clear.visible{ display:flex; }
.search-clear:hover{ background:var(--text-muted); color:#fff; }
/* La regla ".card button:not(.btn-icon)" (botón sólido verde) le ganaba a
   este círculo chico de "limpiar" cuando el buscador está dentro de una
   tarjeta — se refuerza aquí con la misma especificidad que esa regla para
   que el círculo siempre gane, sin importar en qué tarjeta esté. */
.card button.search-clear{
  width:22px; height:22px; border:none; background:var(--border); color:var(--text-muted);
  border-radius:50%; padding:0; box-shadow:none;
}
.card button.search-clear:hover{ background:var(--text-muted); color:#fff; filter:none; transform:translateY(-50%); box-shadow:none; }

/* ===== Botón mostrar/ocultar contraseña (login) =====
   Especificidad alta + !important porque ".login-box button" (el botón
   verde de "Entrar") pisaba estos estilos al tener más especificidad. */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:42px !important; }
.login-box .pw-wrap .pw-toggle{
  position:absolute !important; right:6px !important; top:50% !important;
  width:28px !important; height:28px !important;
  padding:0 !important; margin:0 !important; margin-top:0 !important;
  border:none !important; background:transparent !important; box-shadow:none !important;
  border-radius:50% !important;
  font-size:0 !important; letter-spacing:normal !important;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transform:translateY(-50%) !important;
  transition:background .15s ease;
}
.login-box .pw-wrap .pw-toggle::before{
  content:"";width:18px;height:18px;flex:none;
  background-color:#969f92;
  -webkit-mask:var(--icon-eye) center/contain no-repeat;
  mask:var(--icon-eye) center/contain no-repeat;
}
.login-box .pw-wrap .pw-toggle.showing::before{
  -webkit-mask-image:var(--icon-eye-off);
  mask-image:var(--icon-eye-off);
}
.login-box .pw-wrap .pw-toggle:hover::before{ background-color:var(--primary-dark); }
.login-box .pw-wrap .pw-toggle:hover{
  background:var(--border) !important; filter:none !important;
  transform:translateY(-50%) !important;
}

/* Edge (Chromium) agrega su propio ícono de "mostrar contraseña" dentro del
   input (::-ms-reveal), que se duplicaba con nuestro botón .pw-toggle.
   Se oculta el nativo para que quede solo el nuestro. */
.login-box input[type="password"]::-ms-reveal,
.login-box input[type="password"]::-ms-clear{
  display:none;
}

/* --- Ícono de modo oscuro/claro: pequeño giro al cambiar --- */
.icon-spin{ animation:iconSpin .4s ease; }
@keyframes iconSpin{
  from{ transform:rotate(0deg) scale(1); }
  50%{ transform:rotate(140deg) scale(.75); }
  to{ transform:rotate(180deg) scale(1); }
}

/* --- Login: fondo con movimiento sutil, siempre vivo pero sin distraer --- */
body.login-page{
  background-size:180% 180%;
  animation:loginBgShift 16s ease-in-out infinite alternate;
}
@keyframes loginBgShift{
  from{ background-position:0% 30%; }
  to{ background-position:100% 70%; }
}

/* --- Barra de progreso superior mientras se cargan datos del servidor --- */
#topProgressBar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--primary-2), var(--accent));
  z-index:99999; opacity:1;
  transition:width .3s ease, opacity .3s ease;
  box-shadow:0 0 8px rgba(47,156,104,.55);
}
#topProgressBar.hide{ opacity:0; }


/* ===============================
   CIFRAS — números de ancho fijo
   En un punto de venta la cifra es lo más importante de la pantalla:
   con ancho tabular, los montos de una columna quedan alineados y no
   se desplazan al actualizarse.
================================ */
.venta-resumen strong,
.kpi-valor,
.products-table td,
.monto{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}


/* ===============================
   CAJITA DE DATO
   Fondo tenue, etiqueta pequeña y cifra debajo. Se usa dentro de un
   recuadro para agrupar varios números relacionados sin que cada uno
   necesite su propia tarjeta.
================================ */
.dato-box{
  background:var(--bg);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;
}
.dato-box .dato-label{
  font-size:11.5px;color:var(--text-muted);margin-bottom:5px;
}
.dato-box .dato-valor{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:19px;font-weight:700;color:var(--text);
}
/* Variante para el dato que cierra el cálculo (el total esperado). */
.dato-box.dato-destacado{
  border-color:var(--primary);background:var(--primary-soft);
}
.dato-box.dato-destacado .dato-valor{color:var(--primary)}


/* Tarjeta protagonista en tema oscuro: teal brillante con texto tinta,
   igual criterio que los botones (mucho más legible que blanco encima). */
body.dark [data-module="dashboard"] .cards .card:first-child{background:var(--primary-2)}
body.dark [data-module="dashboard"] .cards .card:first-child h3{color:rgba(7,18,26,.78)}
body.dark [data-module="dashboard"] .cards .card:first-child .value{color:#07121a}
body.dark .kpi-nota{color:rgba(7,18,26,.78)}
body.dark [data-module="dashboard"] .cards .card:first-child::after{background:rgba(0,0,0,.07)}


/* Acciones auxiliares del punto de venta (venta rápida, verificar precio,
   dejar en espera): van en contorno, no en relleno. La acción principal
   de esta pantalla es cobrar, y debe ser la única que pese visualmente. */
.card .pos-botones-rapidos button{
  background:var(--card);color:var(--text);
  border:1px solid var(--border);box-shadow:none;
  font-weight:600;
}
.card .pos-botones-rapidos button:hover{
  background:var(--bg);border-color:var(--primary);color:var(--primary);
}
.card .pos-botones-rapidos button:active{transform:none;box-shadow:none}
body.dark .card .pos-botones-rapidos button{background:var(--card);color:var(--text)}
body.dark .card .pos-botones-rapidos button:hover{background:var(--bg);color:var(--primary-2);border-color:var(--primary-2)}


/* ===============================
   FORMAS DE PAGO — cada una con su color
   En el mostrador se eligen por posición y color, sin leer la etiqueta.
   Los tonos están elegidos para que el texto blanco encima sea legible
   (el ámbar del sistema, más claro, solo daba 2.66 de contraste).
================================ */
.venta-botones-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.venta-botones-par .btn{width:100%;justify-content:center;display:flex;align-items:center;gap:7px}

.card button.btn-mixto{background:#6d28d9;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.card button.btn-mixto:hover{background:#7c3aed}
.card button.btn-fiado{background:#a1520a;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.card button.btn-fiado:hover{background:#b45309}

/* Reimprimir no cobra nada: va en contorno, para que no se confunda con
   los botones que sí registran una venta. */
.card button.btn-reimprimir{
  background:var(--card);color:var(--text-muted);
  border:1px solid var(--border);box-shadow:none;font-weight:600;
}
.card button.btn-reimprimir:hover{
  background:var(--bg);color:var(--text);border-color:var(--text-muted);
  transform:none;box-shadow:none;
}

body.dark .card button.btn-mixto{
  background:#6d28d9;color:#07121a;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.16);
}
body.dark .card button.btn-mixto:hover{background:#7c3aed}
body.dark .card button.btn-fiado{
  background:#a1520a;color:#07121a;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.16);
}
body.dark .card button.btn-fiado:hover{background:#b45309}
body.dark .card button.btn-reimprimir{background:var(--card);color:var(--text-muted)}

/* ===============================
   ELEGIR A QUIÉN SE LE FÍA
   Muestra lo que cada cliente ya debe, para no fiarle de nuevo a alguien
   con una cuenta grande sin darse cuenta.
================================ */
.fiado-lista{
  display:flex;flex-direction:column;gap:6px;
  max-height:min(340px,50vh);overflow-y:auto;margin:14px 0 4px;
}
.fiado-opcion{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:11px 13px;border-radius:var(--radius-sm);
  background:var(--bg);border:1px solid var(--border);
  color:var(--text);font-family:var(--font);font-size:14px;
  text-align:left;cursor:pointer;
}
.fiado-opcion:hover,.fiado-opcion:focus-visible{
  border-color:var(--primary);background:var(--primary-soft);outline:none;
}
.fiado-nombre{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fiado-deuda{
  flex:none;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--text-muted);
}


/* ===============================
   TÍTULO DE SECCIÓN
   Cada sección empieza diciendo dónde estás. Antes se entraba directo a
   una tarjeta y, con el menú cerrado en el celular, no había nada que lo
   indicara. El ícono es el mismo del menú, para reconocerla de un vistazo.
================================ */
.seccion-titulo{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  margin:2px 0 16px;
}
.seccion-titulo svg{width:20px;height:20px;color:var(--text-muted)}
.seccion-titulo h2{
  margin:0;font-family:var(--font-display);
  font-size:24px;font-weight:900;letter-spacing:-0.025em;color:var(--text);
}

/* ===============================
   SECCIONES DE DOS COLUMNAS
   Mismo criterio que el punto de venta: a la izquierda lo que se crea o
   se pide, a la derecha lo que ya existe. En una pantalla ancha se ven
   las dos cosas a la vez, en vez de tener que bajar para comprobar si lo
   que acabas de registrar quedó bien.
================================ */
.seccion-doble{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:16px;align-items:start;
}
@media(max-width:1000px){
  .seccion-doble{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .seccion-titulo h2{font-size:21px}
}


/* ===============================
   BOTÓN SECUNDARIO
   Mismo criterio que el punto de venta: la acción que completa la tarea
   va rellena; las auxiliares (elegir archivo, exportar, corregir) van en
   contorno. Con todo relleno, ninguna destaca.
================================ */
.card button.btn-secundario{
  background:var(--card);color:var(--text);
  border:1px solid var(--border);box-shadow:none;font-weight:600;
}
.card button.btn-secundario:hover{
  background:var(--bg);border-color:var(--primary);color:var(--primary);
  transform:none;box-shadow:none;
}
.card button.btn-secundario:active{transform:none;box-shadow:none}
body.dark .card button.btn-secundario{background:var(--card);color:var(--text)}
body.dark .card button.btn-secundario:hover{background:var(--bg);color:var(--primary-2);border-color:var(--primary-2)}