/* ============================================================================
   FLUS - THEME.CSS (VERSIÓN MEJORADA 2025)
   Sistema de diseño con variables escalables
   Light mode = base / Dark mode = overrides
============================================================================ */

/* === SISTEMA DE ESPACIADO === */
:root {
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 30px;
  --space-7: 40px;
  --space-8: 50px;
  --space-9: 64px;
  --space-10: 80px;
}

/* === SISTEMA DE BORDER RADIUS === */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
}

/* === SISTEMA DE SOMBRAS === */
:root {
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 6px var(--shadow-color);
  --shadow-md: 0 8px 20px var(--shadow-color);
  --shadow-lg: 0 18px 40px var(--shadow-color);
  --shadow-xl: 0 24px 60px var(--shadow-color);
}

/* === Z-INDEX SCALE === */
:root {
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1000;
  --z-modal-backdrop: 4000;
  --z-modal: 4001;
  --z-toast: 9999;
}

/* === LIGHT MODE (BASE) === */
:root {
  /* Fondos */
  --bg: #f5f7fb;
  --bg-alt: #e5edf7;

  /* Paneles */
  --panel: #ffffff;
  --panel-bg: #ffffff;
  --panel-border: #e2e8f0;
  --panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);

  /* Texto */
  --text: #0f172a;
  --text-strong: #0b1120;
  --muted: #6b7280;

  /* Branding FLUS */
  --accent-cyan: #06b6d4;
  --accent-green: #22c55e;
  --accent-blue: #0ea5e9;

  /* === NAVBAR === */
  --nav-bg: #ffffff;
  --nav-border: rgba(148, 163, 184, 0.22);
  --nav-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

  /* Nav Pills */
  --nav-logo-color: #1e293b;
  --nav-pill-bg: transparent;
  --nav-pill-text: #1f2937;
  --nav-pill-border: transparent;
  --nav-pill-hover-bg: rgba(15, 23, 42, 0.07);
  --nav-pill-active-bg: linear-gradient(135deg, #0ea5e9, #22c55e);
  --nav-pill-active-text: #ffffff;

  /* Nav Icons */
  --nav-icon-bg: rgba(255, 255, 255, 0.85);
  --nav-icon-border: rgba(15, 23, 42, 0.18);
  --nav-icon-text: #1f2937;
  --nav-icon-hover-bg: rgba(15, 23, 42, 0.06);
  --nav-icon-active-border: rgba(2, 132, 199, 0.45);
  --nav-icon-active-shadow: 0 10px 30px rgba(2, 132, 199, 0.18);

  /* Nav Menu (Dropdown) */
  --nav-menu-bg: #ffffff;
  --nav-menu-border: rgba(15, 23, 42, 0.14);
  --nav-menu-shadow: 0 18px 50px rgba(2, 6, 23, 0.12);
  --nav-menu-item-hover-bg: rgba(15, 23, 42, 0.06);

  /* Toggle */
  --toggle-track-bg: #e5e7eb;
  --toggle-track-border: #cbd5e1;

  /* Badge Modo Caja */
  --badge-mode-bg: #ecfdf5;
  --badge-mode-border: rgba(16, 185, 129, 0.7);
  --badge-mode-text: #065f46;

  /* Logout */
  --logout-text: #4b5563;
  --logout-border: rgba(148, 163, 184, 0.6);
  --logout-hover-bg: #fee2e2;
  --logout-hover-border: #fca5a5;
  --logout-hover-text: #b91c1c;

  /* === INPUTS === */
  --input-bg: #ffffff;
  --input-text: #0f172a;
  --input-border: #cbd5e1;

  /* === TABLAS === */
  --table-header-bg: #0f172a;
  --table-header-text: #f9fafb;
  --table-row-odd: #ffffff;
  --table-row-even: #f8fafc;
  --table-row-border: #e2e8f0;
  --table-row-hover: rgba(34, 211, 238, 0.06);

  /* === BOTONES === */
  /* Base (secundario) */
  --btn-bg: transparent;
  --btn-text: #6b7280;
  --btn-border: #cbd5e1;

  /* Primario */
  --btn-primary-bg: linear-gradient(135deg, #0ea5e9, #22d3ee);
  --btn-primary-text: #f9fafb;

  /* Secundario */
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #6b7280;
  --btn-secondary-border: #cbd5e1;
  --btn-secondary-hover-bg: rgba(239, 68, 68, 0.08);
  --btn-secondary-hover-border: rgba(239, 68, 68, 0.8);
  --btn-secondary-hover-text: #7f1d1d;

  /* Peligro */
  --btn-danger-bg: #fee2e2;
  --btn-danger-text: #7f1d1d;
  --btn-danger-border: #fecaca;

  /* === TOAST === */
  --toast-bg: rgba(255, 255, 255, 0.95);
  --toast-text: #0f172a;
  --toast-border: rgba(148, 163, 184, 0.28);
}

/* === DARK MODE === */
body[data-theme="dark"] {
  /* Fondos */
  --bg: #020617;
  --bg-alt: #0b1020;

  /* Paneles */
  --panel: #111827;
  --panel-bg: #111827;
  --panel-border: rgba(255, 255, 255, 0.05);
  --panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);

  /* Texto */
  --text: #eef2ff;
  --text-strong: #ffffff;
  --muted: #9ca3af;

  /* Branding */
  --accent-cyan: #22d3ee;
  --accent-blue: #38bdf8;
  --accent-green: #22c55e;

  /* Sombras (más oscuras) */
  --shadow-color: rgba(0, 0, 0, 0.3);

  /* === NAVBAR === */
  --nav-bg: #020617;
  --nav-border: rgba(148, 163, 184, 0.45);
  --nav-shadow: 0 12px 30px rgba(15, 23, 42, 0.65);

  /* Nav Pills */
  --nav-logo-color: #22d3ee;
  --nav-pill-bg: transparent;
  --nav-pill-text: #e5e7eb;
  --nav-pill-border: transparent;
  --nav-pill-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-pill-active-bg: linear-gradient(135deg, #22d3ee, #22c55e);
  --nav-pill-active-text: #020617;

  /* Nav Icons */
  --nav-icon-bg: rgba(2, 6, 23, 0.22);
  --nav-icon-border: rgba(148, 163, 184, 0.25);
  --nav-icon-text: #e5e7eb;
  --nav-icon-hover-bg: rgba(148, 163, 184, 0.12);
  --nav-icon-active-border: rgba(34, 211, 238, 0.45);
  --nav-icon-active-shadow: 0 10px 30px rgba(34, 211, 238, 0.14);

  /* Nav Menu (Dropdown) */
  --nav-menu-bg: #0b1220;
  --nav-menu-border: rgba(148, 163, 184, 0.25);
  --nav-menu-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --nav-menu-item-hover-bg: rgba(148, 163, 184, 0.12);

  /* Toggle */
  --toggle-track-bg: rgba(15, 23, 42, 0.9);
  --toggle-track-border: rgba(148, 163, 184, 0.45);

  /* Badge Modo Caja */
  --badge-mode-bg: rgba(15, 23, 42, 0.9);
  --badge-mode-border: rgba(56, 189, 248, 0.6);
  --badge-mode-text: #e0f2fe;

  /* Logout */
  --logout-text: #e5e7eb;
  --logout-border: rgba(148, 163, 184, 0.55);
  --logout-hover-bg: #ef4444;
  --logout-hover-border: #b91c1c;
  --logout-hover-text: #fef2f2;

  /* === INPUTS === */
  --input-bg: #0f172a;
  --input-text: #f1f5f9;
  --input-border: #374151;

  /* === TABLAS === */
  --table-header-bg: #0f172a;
  --table-header-text: #e5e7eb;
  --table-row-odd: #111827;
  --table-row-even: #1e293b;
  --table-row-border: rgba(255, 255, 255, 0.03);
  --table-row-hover: rgba(34, 211, 238, 0.08);

  /* === BOTONES === */
  /* Base */
  --btn-bg: transparent;
  --btn-text: #e5e7eb;
  --btn-border: rgba(148, 163, 184, 0.55);

  /* Primario */
  --btn-primary-bg: linear-gradient(135deg, #22c55e, #4ade80);
  --btn-primary-text: #022c22;

  /* Secundario */
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #e5e7eb;
  --btn-secondary-border: rgba(148, 163, 184, 0.55);
  --btn-secondary-hover-bg: rgba(239, 68, 68, 0.16);
  --btn-secondary-hover-border: rgba(239, 68, 68, 0.9);
  --btn-secondary-hover-text: #fecaca;

  /* Peligro */
  --btn-danger-bg: #7f1d1d;
  --btn-danger-text: #fee2e2;
  --btn-danger-border: #b91c1c;

  /* === TOAST === */
  --toast-bg: rgba(15, 23, 42, 0.92);
  --toast-text: #ffffff;
  --toast-border: rgba(148, 163, 184, 0.28);
}

/* === TRANSICIONES GLOBALES === */
body,
.panel,
input,
select,
textarea,
.nav-pill,
.btn,
table tr {
  transition: background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* === TIPOGRAFÍA (OPCIONAL) === */
:root {
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", "Courier New", monospace;
  
  /* Scale de tipografía */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
}

/* === UTILIDADES DE ESTADO === */
:root {
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --info: #0ea5e9;
}

body[data-theme="dark"] {
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #38bdf8;
}

/* =========================================================
   FIX DARK MODE (VENTAS) — chips + controles nativos
   Pegalo al FINAL de ventas.css
========================================================= */

/* Asegura color de texto siempre */
.ventas-filters .chip{
  color: var(--text);
}

/* Dark mode: chips con fondo oscuro (evita fallback #f1f5f9) */
html[data-theme="dark"] .ventas-filters .chip,
body[data-theme="dark"] .ventas-filters .chip,
body.theme-dark .ventas-filters .chip,
body.dark .ventas-filters .chip,
:root.dark .ventas-filters .chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(226,232,240,1);
}

/* Hover consistente en dark */
html[data-theme="dark"] .ventas-filters .chip:hover,
body[data-theme="dark"] .ventas-filters .chip:hover,
body.theme-dark .ventas-filters .chip:hover,
body.dark .ventas-filters .chip:hover,
:root.dark .ventas-filters .chip:hover{
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #fff;
}

/* Controles nativos (date/select) para que el iconito/calendario no quede negro */
html[data-theme="dark"] .ventas-filters input,
html[data-theme="dark"] .ventas-filters select,
body[data-theme="dark"] .ventas-filters input,
body[data-theme="dark"] .ventas-filters select,
body.theme-dark .ventas-filters input,
body.theme-dark .ventas-filters select,
body.dark .ventas-filters input,
body.dark .ventas-filters select,
:root.dark .ventas-filters input,
:root.dark .ventas-filters select{
  color-scheme: dark;
}

/* Placeholder legible */
html[data-theme="dark"] .ventas-filters input::placeholder,
body[data-theme="dark"] .ventas-filters input::placeholder,
body.theme-dark .ventas-filters input::placeholder,
body.dark .ventas-filters input::placeholder,
:root.dark .ventas-filters input::placeholder{
  color: rgba(226,232,240,.55);
}
/* =========================================================
   Scrollbar linda SOLO para el panel de edición
   (Chrome/Edge/Safari + Firefox)
========================================================= */

/* Asegurá que el panel sea el que scrollea (si ya lo tenés, dejalo) */
#editPanel.edit-panel{
  max-height: calc(100vh - 72px);
  overflow: auto;
  scrollbar-gutter: stable;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit */
#editPanel.edit-panel::-webkit-scrollbar{
  width: 10px;
}
#editPanel.edit-panel::-webkit-scrollbar-track{
  background: var(--sb-track);
  border-radius: 999px;
  margin: 10px 0; /* separa arriba/abajo para que quede “premium” */
}
#editPanel.edit-panel::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 999px;

  /* truco para que se vea fino aunque sea ancho */
  border: 3px solid transparent;
  background-clip: padding-box;
}
#editPanel.edit-panel::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
  background-clip: padding-box;
}
#editPanel.edit-panel::-webkit-scrollbar-thumb:active{
  background: var(--sb-thumb-active);
  background-clip: padding-box;
}

/* =========================
   Tokens por tema (usa tu data-theme)
========================= */
:root{
  --sb-track: rgba(148,163,184,.10);
  --sb-thumb: rgba(148,163,184,.30);
  --sb-thumb-hover: rgba(148,163,184,.45);
  --sb-thumb-active: rgba(148,163,184,.60);
}

html[data-theme="dark"]{
  --sb-track: rgba(2,6,23,.30);
  --sb-thumb: rgba(148,163,184,.28);
  --sb-thumb-hover: rgba(148,163,184,.45);
  --sb-thumb-active: rgba(148,163,184,.62);
}

html[data-theme="light"]{
  --sb-track: rgba(15,23,42,.08);
  --sb-thumb: rgba(15,23,42,.20);
  --sb-thumb-hover: rgba(15,23,42,.32);
  --sb-thumb-active: rgba(15,23,42,.45);
}
/* ===== Compat tokens para componentes FLUS (no rompe nada) ===== */
:root{
  --bg-primary: var(--bg);
  --bg-secondary: var(--panel);
  --bg-tertiary: var(--bg-alt);

  --text-primary: var(--text);
  --text-secondary: var(--muted);

  --border-color: var(--panel-border);
  --shadow: var(--shadow-md);

  --panel-2: var(--bg-alt);
}

/* ===== Modal "Acerca de FLUS" (usa tokens FLUS reales) ===== */
.flus-modal[hidden]{ display:none; }

.flus-modal{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 4001);
}

.flus-modal__backdrop{
  position: absolute;
  inset: 0;
  z-index: var(--z-modal-backdrop, 4000);
  background: rgba(2, 6, 23, .62);
}

/* en dark queda premium con blur, en light no molesta */
html[data-theme="dark"] .flus-modal__backdrop,
body[data-theme="dark"] .flus-modal__backdrop{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(2, 6, 23, .55);
}

.flus-modal__card{
  position: relative;
  z-index: calc(var(--z-modal, 4001) + 1);
  width: min(560px, calc(100% - 28px));
  margin: 10vh auto 0;

  background: var(--panel-bg, var(--panel));
  color: var(--text);

  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.25));
  overflow: hidden;
}

.flus-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: var(--space-3, 14px) var(--space-4, 18px);
  border-bottom: 1px solid var(--panel-border);
  background: var(--bg-alt);
}

.flus-modal__title{
  margin: 0;
  font-size: var(--text-sm, 14px);
  color: var(--text-strong, var(--text));
  font-weight: 800;
}

.flus-icon-btn{
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg, var(--panel));
  color: var(--muted);
  cursor: pointer;
}
.flus-icon-btn:hover{ color: var(--text); }

.flus-modal__body{
  padding: var(--space-4, 18px);
}

.flus-about__version{
  font-size: var(--text-lg, 18px);
  font-weight: 900;
  color: var(--text-strong, var(--text));
  margin-bottom: var(--space-3, 14px);
}

.flus-about__grid{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg);
}

/* filas: label / value */
.flus-about__row{
  display:grid;
  grid-template-columns: 120px 1fr;
  align-items:center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-sm, 14px);
}
.flus-about__row b{
  justify-self:end;
  text-align:right;
  color: var(--text-strong, var(--text));
  font-weight: 800;
}

.flus-about__hint{
  margin-top: 10px;
  font-size: var(--text-xs, 12px);
  color: var(--muted);
  opacity: .9;
}

.flus-about__copy{
  position:absolute;
  left:-9999px;
  top:-9999px;
  white-space: pre-wrap;
}

.flus-modal__footer{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: var(--space-3, 14px) var(--space-4, 18px);
  border-top: 1px solid var(--panel-border);
  background: var(--bg-alt);
}

/* botones alineados a tu theme */
.flus-btn{
  padding: 10px 14px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--btn-secondary-border, var(--panel-border));
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-text, var(--text));
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
}
.flus-btn:hover{
  background: var(--nav-pill-hover-bg, rgba(148,163,184,.12));
}

.flus-btn-primary{
  border: none;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

/* bloquear scroll al abrir */
html.flus-modal-open,
body.flus-modal-open{
  overflow: hidden;
}