/* ═══════════════════════════════════════════════════════════════════
   HOME CONTROL v2.0 — MASTER STYLESHEET
   Design Language: Notion + Linear + Stripe
   ═══════════════════════════════════════════════════════════════════ */

/* ── TOKENS DARK (por defecto) ── */
:root {
  --surface-000: #060B14;
  --surface-100: #0B1120;
  --surface-200: #111827;
  --surface-300: #1A2236;
  --surface-400: #1F2A40;
  --surface-500: #0F1928;
  --surface-modal: #141D2E;
  --surface-overlay: rgba(6,11,20,0.88);

  --color-primary-50:  rgba(91,110,245,0.08);
  --color-primary-100: rgba(91,110,245,0.16);
  --color-primary-200: rgba(91,110,245,0.32);
  --color-primary-400: #7B8EF8;
  --color-primary-500: #5B6EF5;
  --color-primary-600: #4355E0;
  --color-primary-glow: 0 0 24px rgba(91,110,245,0.35);

  --color-success: #10B981;
  --color-success-bg: rgba(16,185,129,0.10);
  --color-success-border: rgba(16,185,129,0.25);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245,158,11,0.10);
  --color-warning-border: rgba(245,158,11,0.25);
  --color-danger: #EF4444;
  --color-danger-bg: rgba(239,68,68,0.10);
  --color-danger-border: rgba(239,68,68,0.25);
  --color-info: #3B82F6;
  --color-info-bg: rgba(59,130,246,0.10);

  --text-primary: #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-inverse: #0B1120;

  --border-subtle: rgba(255,255,255,0.04);
  --border-default: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --border-focus: rgba(91,110,245,0.60);

  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;

  --font-sans: 'Outfit','Inter',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono','Fira Code',monospace;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem;

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.55);
  --shadow-glow-primary: 0 0 32px rgba(91,110,245,0.25);

  --transition-fast: 120ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 200ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 350ms cubic-bezier(0.4,0,0.2,1);

  --z-sidebar: 200; --z-modal: 500; --z-overlay: 400;
  --z-toast: 600;
  --sidebar-w: 260px;

  /* Legado compatibilidad app.js */
  --primary: var(--color-primary-500);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --secondary: var(--text-muted);
  --bg: var(--surface-000);
  --accent: var(--color-primary-500);
  --text-main: var(--text-primary);
  --shadow: var(--shadow-md);
  --glass: var(--surface-300);
  --login-neon-cyan: #38BDF8;
  --login-neon-blue: var(--color-primary-500);
  --surface-input: var(--surface-500);
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --surface-000: #F4F6F9;
  --surface-100: #FFFFFF;
  --surface-200: #E8EDF4;
  --surface-300: #F0F4FA;
  --surface-400: #E2E8F0;
  --surface-500: #FFFFFF;
  --surface-modal: #FFFFFF;
  --surface-overlay: rgba(244,246,249,0.88);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  --border-subtle: rgba(0,0,0,0.03);
  --border-default: rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.16);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.14);

  --surface-input: #F8FAFC;
  --glass: var(--surface-300);
}

/* ═══ RESET ═══ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  font-family: var(--font-sans);
  background-color: var(--surface-000);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
}

::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:var(--surface-100); }
::-webkit-scrollbar-thumb { background:var(--surface-400); border-radius:var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background:var(--color-primary-500); }

/* ═══ VIEW SECTIONS ═══ */
.view-section { display:none; min-height:100dvh; }
.view-section.active { display:flex; }

/* ═══════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════ */
.login-screen {
  align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(91,110,245,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(16,185,129,0.07) 0%, transparent 55%),
    linear-gradient(170deg, #060B14 0%, #0B1120 55%, #060B14 100%);
  position:relative; overflow:hidden;
}

[data-theme="light"] .login-screen {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(91,110,245,0.08) 0%, transparent 65%),
    linear-gradient(170deg, #E8EDF4 0%, #F4F6F9 100%);
}

#login-particles {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:0.4;
}

.wrapper-login {
  position:relative; z-index:1; flex:1;
  display:flex; justify-content:center; align-items:center;
  padding:var(--space-6); width:100%;
}

.card-login {
  width:min(440px,100%);
  background:rgba(17,24,39,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:var(--radius-xl);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg), var(--shadow-glow-primary);
  display:flex; flex-direction:column; overflow:hidden;
  padding:var(--space-10); text-align:center; gap:var(--space-5);
}

[data-theme="light"] .card-login {
  background:rgba(255,255,255,0.92);
  border-color:rgba(91,110,245,0.20);
  box-shadow:var(--shadow-lg);
}

.login-header { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }

.app-logo {
  width:64px; height:64px;
  background:var(--color-primary-500);
  color:#fff; font-size:var(--text-3xl);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-glow-primary);
  animation:pulse-indigo 3s ease-in-out infinite;
}

@keyframes pulse-indigo {
  0%,100% { box-shadow:0 0 0 0 rgba(91,110,245,0.5), var(--shadow-glow-primary); }
  50%      { box-shadow:0 0 0 14px rgba(91,110,245,0), var(--shadow-glow-primary); }
}

.login-header h1 {
  font-size:var(--text-2xl); font-weight:800; letter-spacing:-0.5px;
  display:flex; align-items:center; gap:var(--space-2);
}

.badge-v {
  font-size:var(--text-xs);
  background:var(--color-primary-100);
  color:var(--color-primary-400);
  padding:2px 6px; border-radius:var(--radius-xs);
  font-family:var(--font-mono); font-weight:500;
}

.login-header p { color:var(--text-secondary); font-size:var(--text-sm); }

.login-body { display:flex; flex-direction:column; gap:var(--space-3); text-align:left; }

.input-group-login { display:flex; flex-direction:column; gap:6px; }
.input-group-login label {
  font-size:var(--text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-secondary);
}
.input-group-login input {
  width:100%; padding:13px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--border-strong);
  background:var(--surface-input);
  color:var(--text-primary);
  font-family:var(--font-sans); font-size:1rem;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance:none;
}
.input-group-login input::placeholder { color:var(--text-muted); }
.input-group-login input:focus {
  outline:none;
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 3px var(--color-primary-100);
}

.btn-login-action {
  margin-top:var(--space-3); width:100%; padding:15px;
  border:none; border-radius:var(--radius-sm);
  background:var(--color-primary-500); color:#fff;
  font-family:var(--font-sans); font-weight:700;
  font-size:var(--text-sm); letter-spacing:0.04em;
  cursor:pointer; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow:var(--shadow-glow-primary);
}
.btn-login-action:hover {
  background:var(--color-primary-600);
  box-shadow:0 6px 28px rgba(91,110,245,0.55);
  transform:translateY(-1px);
}
.btn-login-action:active { transform:translateY(0); }

.login-footer { font-size:var(--text-xs); color:var(--text-muted); }

/* ═══════════════════════════════════════════
   APP CONTAINER
   ═══════════════════════════════════════════ */
.app-container {
  display:flex; min-height:100dvh;
  background:var(--surface-000);
}

/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w);
  background-color:var(--surface-200);
  border-right:1px solid var(--border-default);
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0;
  z-index:var(--z-sidebar);
  transition:transform var(--transition-base), background-color var(--transition-base);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* Brand */
.sidebar-brand {
  padding:var(--space-6);
  display:flex; align-items:center; gap:var(--space-3);
  border-bottom:1px solid var(--border-subtle); flex-shrink:0;
}

.sidebar-brand .logo-icon {
  font-size:var(--text-2xl);
  color:var(--color-primary-500);
  text-shadow:var(--shadow-glow-primary);
  flex-shrink:0;
}

.sidebar-brand h2 {
  font-size:var(--text-base); font-weight:700;
  letter-spacing:-0.3px; color:var(--text-primary); flex:1;
}

/* Nav menu */
.sidebar-menu, .nav-menu {
  flex:1; padding:var(--space-4) var(--space-3);
  display:flex; flex-direction:column; gap:var(--space-1);
  list-style:none;
}

.nav-item {
  padding:11px var(--space-4);
  border-radius:var(--radius-sm);
  cursor:pointer;
  display:flex; align-items:center; gap:var(--space-4);
  font-size:var(--text-sm); font-weight:500;
  color:var(--text-secondary); text-decoration:none;
  min-height:44px;
  border:none; background:none;
  transition:background-color var(--transition-fast), color var(--transition-fast);
  border-left:3px solid transparent;
}

.nav-item:hover {
  background-color:var(--surface-300);
  color:var(--text-primary);
  border-left-color:rgba(91,110,245,0.35);
}

.nav-item.active {
  background-color:var(--color-primary-500);
  color:#fff;
  box-shadow:var(--shadow-glow-primary);
  border-left-color:transparent;
}

.nav-item i {
  font-size:var(--text-base); width:20px;
  text-align:center; flex-shrink:0;
  transition:transform var(--transition-fast);
}
.nav-item:hover i { transform:scale(1.1); }

/* Panel usuario sidebar */
.sidebar-user {
  padding:var(--space-4);
  border-top:1px solid var(--border-default);
  display:flex; align-items:center; gap:var(--space-3);
  background-color:var(--surface-100); flex-shrink:0;
}

.sidebar-user-avatar, .user-avatar-sidebar {
  width:38px; height:38px; min-width:38px;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--color-primary-500), #8B5CF6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--text-sm);
  border:2px solid var(--color-primary-500);
  flex-shrink:0;
}

.sidebar-user-info {
  flex:1; min-width:0;
}
.sidebar-user-info span {
  display:block; font-size:var(--text-sm); font-weight:600;
  color:var(--text-primary); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.sidebar-user-info small {
  font-size:10px; color:var(--color-success); font-weight:500;
}

.btn-logout {
  background:none; border:none;
  color:var(--text-muted); cursor:pointer;
  font-size:var(--text-lg); padding:var(--space-2);
  border-radius:var(--radius-xs);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast); flex-shrink:0;
}
.btn-logout:hover {
  color:var(--color-danger);
  background-color:var(--color-danger-bg);
}

/* Logout item en nav */
.logout-item { color:rgba(239,68,68,0.75) !important; border-left-color:transparent !important; }
.logout-item:hover {
  background-color:var(--color-danger-bg) !important;
  color:var(--color-danger) !important;
  border-left-color:var(--color-danger) !important;
}

/* Overlay móvil */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.65); z-index:calc(var(--z-sidebar) - 1);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

/* ═══════════════════════════════════════════
   MAIN CONTENT & TOP HEADER
   ═══════════════════════════════════════════ */
.main-content {
  margin-left:var(--sidebar-w); flex:1;
  display:flex; flex-direction:column; min-height:100dvh;
  background-color:var(--surface-100);
  transition:margin var(--transition-base), background-color var(--transition-base);
}

.top-header {
  height:70px; padding:0 var(--space-8);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap;
  border-bottom:1px solid var(--border-default);
  background-color:var(--surface-100);
  position:sticky; top:0; z-index:150;
  transition:background-color var(--transition-base);
}

.header-left-group {
  display:flex; align-items:center; gap:var(--space-4);
  flex:1; min-width:0;
}

.header-title-text { min-width:0; overflow:hidden; }

.page-title {
  font-size:var(--text-xl); font-weight:700; letter-spacing:-0.5px;
  color:var(--text-primary); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

.page-desc {
  font-size:var(--text-xs); color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}

/* Grupo de acciones del header (derecha) */
.header-actions {
  display:flex; align-items:center; gap:var(--space-3); flex-shrink:0;
}

/* Botón ícono redondo (sync, theme, etc.) */
.btn-icon {
  background:none; border:none;
  color:var(--text-secondary); cursor:pointer;
  font-size:var(--text-lg);
  width:40px; height:40px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast);
  flex-shrink:0;
}
.btn-icon:hover {
  background-color:var(--surface-300);
  color:var(--text-primary);
}
.btn-icon:disabled { opacity:0.5; cursor:not-allowed; }

/* Indicador estado conexión */
.connection-status {
  font-size:var(--text-sm); padding:var(--space-2);
  border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0;
}
.connection-status.online  { color:var(--color-success); }
.connection-status.offline { color:var(--color-danger); animation:pulse-red 2s infinite; }

@keyframes pulse-red { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* Perfil de usuario en header */
.user-profile {
  display:flex; align-items:center; gap:var(--space-3);
  background:var(--surface-300); padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md); border:1px solid var(--border-default);
  flex-shrink:0; transition:background-color var(--transition-base);
}
.user-info-text { text-align:right; }
.user-info-text span { color:var(--text-primary); }

.user-avatar {
  width:36px; height:36px; min-width:36px;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--color-primary-500), #8B5CF6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--text-sm);
  border:2px solid var(--color-primary-500);
}

/* Hamburguesa móvil */
.mobile-menu-toggle {
  display:none; background:var(--surface-300);
  border:1px solid var(--border-default); color:var(--text-primary);
  padding:10px; border-radius:var(--radius-sm); cursor:pointer;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
  flex-shrink:0; transition:background-color var(--transition-fast);
}
.mobile-menu-toggle:hover { background:var(--surface-400); }

/* ═══════════════════════════════════════════
   CONTENT BODY & BENTO GRID
   ═══════════════════════════════════════════ */
.content-body {
  padding:var(--space-8); flex:1;
}

#dynamicBoard {
  padding:var(--space-8); flex:1;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--space-6);
  align-content:start;
}

.bento-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--space-6);
}

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card, .glass {
  background:var(--surface-300);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-6); overflow:visible; min-width:0;
  transition:box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}
.card:hover, .glass:hover {
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
.card h3 {
  font-size:var(--text-base); font-weight:700;
  color:var(--text-primary); margin-bottom:var(--space-4);
}

/* Spans */
.span-6{grid-column:span 6;} .span-4{grid-column:span 4;}
.span-3{grid-column:span 3;} .span-2{grid-column:span 2;}

/* KPI stat cards */
.card.span-2 {
  position:relative; border-left:4px solid var(--color-primary-500);
  display:flex; flex-direction:column; justify-content:center; gap:var(--space-2);
}
.card.span-2:nth-child(2){border-left-color:var(--color-warning);}
.card.span-2:nth-child(3){border-left-color:var(--color-danger);}

.stat-num {
  font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800;
  letter-spacing:-0.03em; color:var(--text-primary);
  display:block; line-height:1.1;
}
.stat-desc {
  font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:0.04em; color:var(--text-muted); font-weight:600;
}

.card-table-wrapper {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:calc(-1 * var(--space-6)); padding:var(--space-4) var(--space-6);
  border-radius:var(--radius-lg);
}

/* ═══════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════ */
.data-table, .table {
  width:100%; border-collapse:collapse;
  text-align:left; font-size:var(--text-sm); min-width:480px;
}
.data-table th, .table th {
  padding:var(--space-3) var(--space-4);
  color:var(--text-secondary); font-size:var(--text-xs);
  font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
  border-bottom:2px solid var(--border-default);
  white-space:nowrap; background:transparent;
}
.data-table td, .table td {
  padding:14px var(--space-4);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary); vertical-align:middle;
  white-space:nowrap; font-size:var(--text-sm);
  transition:background-color var(--transition-fast);
}
.data-table tbody tr:hover td,
.table tbody tr:hover td {
  background-color:rgba(91,110,245,0.05);
}
.table-responsive { width:100%; overflow-x:auto; }
.table-container { padding:var(--space-4); }

/* ═══════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════ */
.badge {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; padding:3px 10px;
  border-radius:var(--radius-full); display:inline-block; white-space:nowrap;
}
.badge-success, .badge-paid {
  background:var(--color-success-bg);
  border:1px solid var(--color-success-border);
  color:var(--color-success);
}
.badge-pending {
  background:var(--color-warning-bg);
  border:1px solid var(--color-warning-border);
  color:var(--color-warning);
}
.badge-overdue {
  background:var(--color-danger-bg);
  border:1px solid var(--color-danger-border);
  color:var(--color-danger);
}
.badge-finalized, .badge-inactive {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--text-muted);
}

/* ═══════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════ */
.btn {
  font-family:var(--font-sans); font-weight:600;
  font-size:var(--text-sm); padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:var(--space-2);
  transition:all var(--transition-fast); min-height:40px;
}
.btn-primary {
  background:var(--color-primary-500); color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover {
  background:var(--color-primary-600);
  box-shadow:var(--shadow-glow-primary);
}
.btn-secondary {
  background:var(--surface-300); border-color:var(--border-strong);
  color:var(--text-primary);
}
.btn-secondary:hover {
  background:var(--surface-400);
  border-color:var(--color-primary-500);
}
.btn-danger {
  background:var(--color-danger-bg); border-color:var(--color-danger-border);
  color:var(--color-danger);
}
.btn-danger:hover {
  background:var(--color-danger); color:#fff;
}
.btn-sm { padding:var(--space-2) var(--space-3); font-size:var(--text-xs); border-radius:var(--radius-xs); }

/* Botón acción de tabla */
.btn-action {
  background:none; border:1px solid var(--border-default);
  color:var(--text-secondary); cursor:pointer;
  padding:var(--space-2); border-radius:var(--radius-xs);
  font-size:var(--text-sm); width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--transition-fast); text-decoration:none; vertical-align:middle;
}
.btn-action:hover {
  background:var(--surface-400); color:var(--text-primary);
  border-color:var(--border-strong);
}

/* Botón pill (legado) */
.pill-btn {
  font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface-300);
  color:var(--text-primary); cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--space-2);
  transition:all var(--transition-fast); min-height:44px;
}
.pill-btn:hover { background:var(--surface-400); border-color:var(--color-primary-500); }
.pill-btn.active {
  background:var(--color-primary-500); border-color:var(--color-primary-500);
  color:#fff; box-shadow:var(--shadow-glow-primary);
}
.pill-btn.active:hover { background:var(--color-primary-600); }

/* ═══════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════ */
.styled-form { display:flex; flex-direction:column; gap:var(--space-5); }

.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
.form-grid-modal {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4);
  max-height:60vh; overflow-y:auto; padding-right:var(--space-2);
}

.form-control { display:flex; flex-direction:column; gap:var(--space-2); }
.form-control.span-2 { grid-column:span 2; }

.form-control label {
  font-size:var(--text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary);
}

.form-control input,
.form-control select,
.form-control textarea,
.input-box input,
.input-box select,
.input-box textarea {
  width:100%; padding:13px var(--space-4);
  border-radius:var(--radius-sm);
  border:1.5px solid var(--border-strong);
  background:var(--surface-input);
  color:var(--text-primary);
  font-family:var(--font-sans); font-size:1rem;
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.form-control input::placeholder,
.form-control textarea::placeholder,
.input-box input::placeholder,
.input-box textarea::placeholder { color:var(--text-muted); }

.form-control select option,
.input-box select option { background:#111827; color:var(--text-primary); }
[data-theme="light"] .form-control select option,
[data-theme="light"] .input-box select option { background:#fff; }

.form-control input:focus,
.form-control select:focus,
.form-control textarea:focus,
.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus {
  outline:none;
  border-color:var(--color-primary-500);
  box-shadow:0 0 0 3px var(--color-primary-100);
}

.input-box { text-align:left; margin-bottom:var(--space-5); }
.input-box label {
  display:block; font-size:var(--text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-secondary); margin-bottom:7px;
}

.checkbox-control {
  flex-direction:row !important; align-items:center; gap:var(--space-3); cursor:pointer;
}
.checkbox-control input[type="checkbox"] {
  width:18px; height:18px;
  accent-color:var(--color-primary-500); cursor:pointer; flex-shrink:0;
}
.checkbox-control label { text-transform:none; letter-spacing:normal; margin-bottom:0; cursor:pointer; }

.fact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--space-5); margin-bottom:var(--space-6);
}

.form-buttons {
  display:flex; justify-content:flex-end; gap:var(--space-3);
  margin-top:var(--space-4);
  border-top:1px solid var(--border-default);
  padding-top:var(--space-5);
}

.required { color:var(--color-danger); }
.help-text { font-size:var(--text-xs); color:var(--text-muted); }

/* ═══════════════════════════════════════════
   MODALES — clase .modal (nueva)
   ═══════════════════════════════════════════ */
.modal {
  position:fixed; inset:0; z-index:var(--z-modal);
  background-color:var(--surface-overlay);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center;
  padding:var(--space-5);
}
.modal.active { display:flex; }
/* Compatibilidad con app.js que usa style="display:flex" directamente */
.modal[style*="flex"] { display:flex !important; }

.modal-content {
  width:100%; max-width:680px; padding:var(--space-6);
  position:relative;
  background:var(--surface-modal);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden; max-height:92dvh;
  display:flex; flex-direction:column;
  animation:modalIn var(--transition-slow) ease-out;
}
.modal-sm { max-width:480px; }

@keyframes modalIn {
  from { opacity:0; transform:translateY(24px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-5);
  border-bottom:1px solid var(--border-default);
  padding-bottom:var(--space-3); flex-shrink:0;
}
.modal-header h2 {
  font-size:var(--text-lg); font-weight:700;
  letter-spacing:-0.3px; color:var(--text-primary);
}
.modal-close {
  background:none; border:none; font-size:var(--text-2xl);
  color:var(--text-muted); cursor:pointer;
  transition:color var(--transition-fast); line-height:1;
}
.modal-close:hover { color:var(--color-danger); }

.modal-footer {
  display:flex; justify-content:flex-end; gap:var(--space-3);
  margin-top:var(--space-5);
  border-top:1px solid var(--border-default);
  padding-top:var(--space-4); flex-shrink:0;
}

/* Modales con clase antigua (test-modal-overlay) — compatibilidad */
.test-modal-overlay {
  position:fixed; inset:0; z-index:var(--z-modal);
  background:var(--surface-overlay);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; padding:var(--space-5);
}
.test-modal-overlay[style*="flex"] { display:flex !important; }

.test-modal-content {
  width:100%; max-width:680px;
  background:var(--surface-modal);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden; max-height:92dvh;
  display:flex; flex-direction:column;
  animation:modalIn var(--transition-slow) ease-out;
}
.test-modal-header {
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--border-default);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-modal); flex-shrink:0;
}
.test-modal-header h3 {
  font-size:var(--text-lg); font-weight:700;
  letter-spacing:-0.3px; color:var(--text-primary);
}
.test-modal-body { padding:var(--space-6); overflow-y:auto; flex:1; }
.test-modal-footer {
  display:flex; justify-content:flex-end; gap:var(--space-3);
  margin-top:var(--space-6); padding-top:var(--space-5);
  border-top:1px solid var(--border-default);
}

/* ═══════════════════════════════════════════
   LOADING / SPINNER
   ═══════════════════════════════════════════ */
.global-loader, .loading-overlay {
  position:fixed; inset:0; z-index:900;
  background:var(--surface-overlay);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--space-4);
}
.global-loader p, .loading-overlay p {
  color:var(--text-secondary); font-size:var(--text-sm);
}
.spinner {
  width:48px; height:48px;
  border:4px solid var(--border-strong);
  border-top:4px solid var(--color-primary-500);
  border-radius:var(--radius-full);
  animation:spin 0.9s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════ */
.toast-container {
  position:fixed; top:var(--space-6); right:var(--space-6);
  z-index:var(--z-toast); display:flex; flex-direction:column;
  gap:var(--space-3); width:320px; pointer-events:none;
}
.toast {
  pointer-events:auto;
  padding:var(--space-4) var(--space-5);
  background:var(--surface-modal);
  border:1px solid var(--border-strong);
  border-left:4px solid var(--color-primary-500);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  color:var(--text-primary);
  display:flex; align-items:flex-start; gap:var(--space-3);
  animation:slideInRight var(--transition-slow) ease-out;
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(32px); }
  to   { opacity:1; transform:translateX(0); }
}
.toast-success { border-left-color:var(--color-success); }
.toast-error   { border-left-color:var(--color-danger); }
.toast-warning { border-left-color:var(--color-warning); }
.toast-info    { border-left-color:var(--color-info); }
.toast-content { flex:1; }
.toast-title   { font-weight:700; font-size:var(--text-sm); margin-bottom:2px; }
.toast-message { font-size:var(--text-xs); color:var(--text-secondary); }

/* ═══════════════════════════════════════════
   UTILIDADES
   ═══════════════════════════════════════════ */
.text-success { color:var(--color-success) !important; }
.text-warning { color:var(--color-warning) !important; }
.text-danger  { color:var(--color-danger)  !important; }
.text-muted   { color:var(--text-muted)    !important; }
.text-center  { text-align:center; }
.font-bold    { font-weight:700; }
code { font-family:var(--font-mono); font-size:0.875em; }

/* Animación entrada contenido dinámico */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
#dynamicBoard > * { animation:fadeIn 280ms ease-out both; }

/* ═══════════════════════════════════════════
   FOCUS / ACCESIBILIDAD
   ═══════════════════════════════════════════ */
:focus-visible {
  outline:2px solid var(--color-primary-500);
  outline-offset:2px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width:1024px) {
  #dynamicBoard, .bento-grid {
    grid-template-columns:repeat(4,1fr);
    padding:var(--space-5); gap:var(--space-4);
  }
  .span-6,.span-4 { grid-column:span 4; }
  .span-3 { grid-column:span 2; }
  .span-2 { grid-column:span 2; }
}

@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .sidebar-overlay.active { display:block; }
  .mobile-menu-toggle { display:inline-flex; }
  .main-content { margin-left:0; }

  .top-header { padding:0 var(--space-4); height:auto; min-height:64px; padding-top:var(--space-3); padding-bottom:var(--space-3); }

  #dynamicBoard, .bento-grid {
    grid-template-columns:repeat(2,1fr);
    padding:var(--space-4); gap:var(--space-3);
  }
  .span-6,.span-4,.span-3,.span-2 { grid-column:span 2; }
  .card.span-2 { grid-column:span 1; }

  .user-info-text { display:none; }
  .form-grid, .form-grid-modal { grid-template-columns:1fr; }
  .form-control.span-2 { grid-column:span 1; }
  .modal-content { max-width:100%; border-radius:var(--radius-md); }
}

@media (max-width:480px) {
  #dynamicBoard, .bento-grid {
    grid-template-columns:1fr;
    padding:var(--space-3); gap:var(--space-3);
  }
  .span-6,.span-4,.span-3,.span-2,.card.span-2 { grid-column:span 1; }
  .card-login { padding:var(--space-8) var(--space-5); border-radius:var(--radius-lg); }
  .toast-container { width:calc(100vw - 2*var(--space-4)); top:var(--space-4); right:var(--space-4); }
  .header-actions .user-profile { display:none; }
}

/* ═══════════════════════════════════════════
   HISTORY DRAWER
   ═══════════════════════════════════════════ */
.drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 450;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.drawer-overlay.active { display: block; }

.history-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--surface-200);
  border-left: 1px solid var(--border-strong);
  z-index: 460;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.history-drawer.open { transform: translateX(0); }

/* Header del drawer */
.drawer-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--space-4);
  flex-shrink: 0;
  background: var(--surface-300);
}
.drawer-header-info { flex: 1; min-width: 0; }
.drawer-header h3 {
  font-size: var(--text-lg); font-weight: 800;
  color: var(--text-primary); letter-spacing: -0.3px;
}
.drawer-empresa {
  font-size: var(--text-xs); color: var(--text-muted);
  font-weight: 500; margin-top: 2px; display: block;
}

/* KPIs */
.drawer-kpis {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border-default);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.drawer-kpi {
  padding: var(--space-4) var(--space-6);
  background: var(--surface-200);
  display: flex; flex-direction: column; gap: 4px;
}
.drawer-kpi-label {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.drawer-kpi-value {
  font-size: var(--text-2xl); font-weight: 800;
  color: var(--text-primary); letter-spacing: -0.5px;
}

/* Contenedor scrollable de la timeline */
.drawer-timeline-wrapper {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6);
}
.drawer-section-title {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: var(--space-5);
}

/* Timeline */
.drawer-timeline {
  position: relative;
  padding-left: var(--space-6);
}
.drawer-timeline::before {
  content: '';
  position: absolute; left: 9px; top: 6px;
  bottom: 0; width: 2px;
  background: var(--border-default);
}

.drawer-timeline-item {
  position: relative;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.drawer-timeline-item:last-child {
  margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}

/* Punto de la timeline */
.drawer-timeline-dot {
  position: absolute;
  left: calc(-1 * var(--space-6) + 3px);
  top: 5px;
  width: 14px; height: 14px;
  border-radius: var(--radius-full);
  background: var(--surface-400);
  border: 2px solid var(--border-strong);
  transition: background var(--transition-fast);
}
.drawer-timeline-item--latest .drawer-timeline-dot {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 4px var(--color-primary-100);
}

.drawer-timeline-content { display: flex; flex-direction: column; gap: 4px; }

.drawer-timeline-header {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--space-3);
}
.drawer-timeline-amount {
  font-size: var(--text-base); font-weight: 800;
  color: var(--text-primary); letter-spacing: -0.3px;
}
.drawer-timeline-item--latest .drawer-timeline-amount {
  color: var(--color-primary-400);
}
.drawer-timeline-date {
  font-size: var(--text-xs); color: var(--text-muted);
  font-weight: 500; white-space: nowrap;
}
.drawer-timeline-meta {
  font-size: var(--text-xs); color: var(--text-secondary);
}
.drawer-timeline-obs {
  font-size: var(--text-xs); color: var(--text-muted);
  font-style: italic;
  background: var(--surface-100);
  padding: 4px 8px; border-radius: var(--radius-xs);
  border-left: 2px solid var(--border-strong);
  margin-top: 2px;
}

/* Estado vacío */
.drawer-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-10);
  color: var(--text-muted); text-align: center;
}
.drawer-empty i { font-size: 2.5rem; opacity: 0.3; }
.drawer-empty p { font-size: var(--text-sm); }

@media (max-width: 480px) {
  .history-drawer { width: 100vw; }
}