/* ============================================================
   VARIABLES GLOBALES
   - Se añaden: --excel-*, --json-*, --emerald-subtle,
     --rose-subtle, --cyan-subtle, --white-hover
   - Se unifica z-index de menús flotantes
   ============================================================ */
        :root {
            --bg-primary:    #0a0e1a;
            --bg-secondary:  #111827;
            --bg-glass:      rgba(255,255,255,0.03);
            --border-glow:   rgba(99,179,237,0.15);
        
            --cyan:          #06b6d4;
            --cyan-glow:     rgba(6,182,212,0.4);
            --cyan-subtle:   rgba(6,182,212,0.12);   /* ← NUEVA: reemplaza rgba(6,182,212,0.15) en toasts/borders */
        
            --purple:        #a855f7;
            --purple-glow:   rgba(168,85,247,0.4);
        
            --emerald:       #10b981;
            --emerald-glow:  rgba(16,185,129,0.4);
            --emerald-subtle:rgba(16,185,129,0.08);  /* ← NUEVA: reemplaza rgba(16,185,129,0.05) en grand-total */
        
            --amber:         #f59e0b;
            --amber-glow:    rgba(245,158,11,0.4);
            --amber-subtle:  rgba(245,158,11,0.12);  /* ← NUEVA: reemplaza rgba(234,179,8,0.15) en iconos */
        
            --rose:          #f43f5e;
            --rose-glow:     rgba(244,63,94,0.4);
            --rose-subtle:   rgba(244,63,94,0.12);   /* ← NUEVA: reemplaza rgba(244,63,94,0.15) en toasts/hover */
        
            --indigo:        #6366f1;
            --indigo-glow:   rgba(99,102,241,0.4);
        
            /* ── Nuevas: colores Excel y JSON (antes hardcoded) ── */
            --excel-green:   #217346;
            --excel-text:    #4ade80;
            --excel-bg:      rgba(33,115,70,0.15);
            --excel-bg-h:    rgba(33,115,70,0.25);
            --excel-glow:    rgba(33,115,70,0.4);
        
            --json-yellow:   #eab308;
            --json-text:     #fbbf24;
            --json-bg:       rgba(234,179,8,0.10);
            --json-bg-h:     rgba(234,179,8,0.20);
            /* --amber-glow ya cubre rgba(234,179,8,0.4) para el box-shadow */
        
            /* ── Miscelánea ── */
            --white-hover:   rgba(255,255,255,0.10);  /* ← NUEVA: reemplaza rgba(255,255,255,0.1) dispersos */
            --white-hover-2: rgba(255,255,255,0.05);  /* ← NUEVA: reemplaza rgba(255,255,255,0.05) en hovers suaves */
        
            /* ── Z-index unificados ── */
            --z-dropdown:    200;
            --z-modal:       1000;
            --z-toast:       2000;
        
            --text-primary:   #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted:     #64748b;
        }
        
        /* ============================================================
           RESET Y BASE
           ============================================================ */
        * { margin:0; padding:0; box-sizing:border-box; }
        
        body {
            font-family: 'Space Grotesk','Inter',system-ui,sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: fixed; top:0; left:0; right:0; bottom:0;
            background:
                radial-gradient(ellipse at 20% 20%, rgba(6,182,212,0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(168,85,247,0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(16,185,129,0.04) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }
        
        .grid-bg {
            position: fixed; top:0; left:0; right:0; bottom:0;
            background-image:
                linear-gradient(rgba(6,182,212,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(6,182,212,0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
        }
        
        /* ============================================================
           LAYOUT PRINCIPAL
           ============================================================ */
        .app-container {
            position: relative;
            z-index: 1;
            max-width: 1440px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* ============================================================
           HEADER
           ============================================================ */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 30px;
            background: var(--bg-glass);
            border: 1px solid var(--border-glow);
            border-radius: 20px;
            backdrop-filter: blur(20px);
            margin-bottom: 24px;
            position: relative;
            overflow: visible;
            flex-wrap: wrap;
            gap: 14px;
            z-index: var(--z-dropdown);      /* antes: z-index:100, ahora unificado */
        }
        
        .header::before {
            content: '';
            position: absolute; top:0; left:0; right:0; height:1px;
            background: linear-gradient(90deg, transparent, var(--cyan), transparent);
        }
        
        .header-left  { display:flex; align-items:center; gap:16px; }
        
        .logo-icon {
            width:52px; height:52px;
            background: linear-gradient(135deg, var(--cyan), var(--purple));
            border-radius: 14px;
            display: flex; align-items:center; justify-content:center;
            font-size: 24px;
            box-shadow: 0 0 30px var(--cyan-glow);
        }
        
        .header-title h1 {
            font-family: 'Orbitron', monospace;
            font-size: 1.6rem; font-weight: 700;
            background: linear-gradient(135deg, var(--cyan), var(--purple));
            background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            letter-spacing: 1px;
        }
        .header-title p {
            font-size: 0.8rem; color: var(--text-muted); margin-top: 2px;
            font-family: 'Rajdhani',sans-serif; letter-spacing: 2px; text-transform: uppercase;
        }
        
        .header-right {
            display: flex; align-items:center; gap:12px;
            flex-wrap: wrap; overflow: visible; position: relative;
        }
        
        /* ============================================================
           YEAR SELECTOR
           ============================================================ */
        .year-selector {
            display:flex; align-items:center; gap:8px;
            background: rgba(6,182,212,0.1);
            border: 1px solid rgba(6,182,212,0.2);
            border-radius: 12px; padding: 8px 16px;
        }
        .year-selector label {
            font-family:'Rajdhani',sans-serif; font-size:0.85rem;
            color: var(--cyan); text-transform:uppercase; letter-spacing:1px;
        }
        .year-selector select {
            background: transparent; border:none; color:var(--text-primary);
            font-family:'Orbitron',monospace; font-size:0.95rem;
            cursor: pointer; outline: none;
        }
        .year-selector select option { background:var(--bg-secondary); color:var(--text-primary); }
        
        /* ============================================================
           BOTONES GLOW
           ============================================================ */
        .btn-glow {
            display: inline-flex; align-items:center; gap:8px;
            padding: 10px 20px;
            border: 1px solid var(--cyan); background: rgba(6,182,212,0.1); color:var(--cyan);
            border-radius: 12px; cursor:pointer;
            font-family:'Rajdhani',sans-serif; font-size:0.9rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px;
            transition: all 0.3s ease; white-space:nowrap;
        }
        .btn-glow:hover { background:rgba(6,182,212,0.2); box-shadow:0 0 20px var(--cyan-glow); transform:translateY(-1px); }
        
        .btn-glow.purple { border-color:var(--purple); background:rgba(168,85,247,0.1); color:var(--purple); }
        .btn-glow.purple:hover { background:rgba(168,85,247,0.2); box-shadow:0 0 20px var(--purple-glow); }
        
        .btn-glow.emerald { border-color:var(--emerald); background:rgba(16,185,129,0.1); color:var(--emerald); }
        .btn-glow.emerald:hover { background:rgba(16,185,129,0.2); box-shadow:0 0 20px var(--emerald-glow); }
        
        .btn-glow.amber { border-color:var(--amber); background:rgba(245,158,11,0.1); color:var(--amber); }
        .btn-glow.amber:hover { background:rgba(245,158,11,0.2); box-shadow:0 0 20px var(--amber-glow); }
        
        .btn-glow.rose { border-color:var(--rose); background:rgba(244,63,94,0.1); color:var(--rose); }
        .btn-glow.rose:hover { background:rgba(244,63,94,0.2); box-shadow:0 0 20px var(--rose-glow); }
        
        /* ── Excel: antes #217346 / #4ade80 hardcoded, ahora variables ── */
        .btn-glow.excel {
            border-color: var(--excel-green);
            background:   var(--excel-bg);
            color:        var(--excel-text);
        }
        .btn-glow.excel:hover { background: var(--excel-bg-h); box-shadow: 0 0 20px var(--excel-glow); }
        
        /* ── JSON: antes #eab308 / #fbbf24 hardcoded, ahora variables ── */
        .btn-glow.json-btn {
            border-color: var(--json-yellow);
            background:   var(--json-bg);
            color:        var(--json-text);
        }
        .btn-glow.json-btn:hover { background: var(--json-bg-h); box-shadow: 0 0 20px var(--amber-glow); }
        
        .btn-glow.settings-btn { border-color:var(--indigo); background:rgba(99,102,241,0.1); color:#818cf8; }
        .btn-glow.settings-btn:hover { background:rgba(99,102,241,0.2); box-shadow:0 0 20px var(--indigo-glow); }
        
        /* ============================================================
           DROPDOWN DE EXPORTACIÓN
           ── Antes tenía 2 bloques separados con z-index diferentes
              (100 en header, 10000 en bloque de temas).
              Ahora un único bloque con --z-dropdown.
           ============================================================ */
        .export-dropdown { position: relative; }   /* único bloque */
        
        .export-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border-glow);
            border-radius: 14px;
            padding: 8px;
            min-width: 300px;
            display: none;
            z-index: var(--z-dropdown);            /* unificado, antes 100 vs 10000 */
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            /* Evita desbordamiento en pantallas pequeñas */
            max-width: calc(100vw - 32px);
        }
        .export-menu.active { display:block; animation: menuSlide 0.2s ease; }
        
        @keyframes menuSlide {
            from { opacity:0; transform:translateY(10px); }
            to   { opacity:1; transform:translateY(0); }
        }
        
        .export-menu-header {
            padding: 8px 12px 12px;
            border-bottom: 1px solid var(--border-glow);
            margin-bottom: 8px;
        }
        .export-menu-title {
            font-family:'Rajdhani',sans-serif; font-size:0.7rem;
            color:var(--text-muted); text-transform:uppercase; letter-spacing:2px;
        }
        
        .export-item {
            display:flex; align-items:center; gap:10px;
            padding:10px 12px; border-radius:8px;
            cursor:pointer; transition: all 0.2s;
            color:var(--text-secondary); font-size:0.85rem;
        }
        .export-item:hover { background: var(--white-hover-2); color:var(--text-primary); }
        
        .export-item-icon {
            width:32px; height:32px; border-radius:8px;
            display:flex; align-items:center; justify-content:center;
            font-size:0.9rem; flex-shrink:0;
        }
        .export-item-icon.cyan    { background: rgba(6,182,212,0.15); }
        .export-item-icon.purple  { background: rgba(168,85,247,0.15); }
        .export-item-icon.emerald { background: rgba(16,185,129,0.15); }
        .export-item-icon.amber   { background: rgba(245,158,11,0.15); }
        .export-item-icon.ger     { background: var(--excel-bg); }          /* antes rgba(33,115,70,0.2) */
        .export-item-icon.json-icon { background: var(--amber-subtle); }    /* antes rgba(234,179,8,0.15) */
        
        .export-item-divider { height:1px; background:var(--border-glow); margin:4px 0; }
        
        /* ============================================================
           TEMA (menú de temas)
           ── Unificado con --z-dropdown (antes z-index:10000 suelto)
           ============================================================ */
        .theme-switch-wrapper { position: relative; }
        
        .theme-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 8px;
            min-width: 220px;
            display: none;
            z-index: var(--z-dropdown);            /* antes 10000 hardcoded */
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            max-width: calc(100vw - 32px);        /* evita overflow en móvil */
        }
        .theme-menu.active { display:block; animation: menuSlide 0.2s ease; }
        
        .theme-option {
            padding: 8px 12px; border-radius:8px;
            cursor:pointer; transition: all 0.2s;
            color:var(--text-secondary); font-size:0.85rem;
        }
        .theme-option:hover { background: var(--white-hover); color:var(--text-primary); } /* antes rgba(255,255,255,0.1) */
        
        /* ============================================================
           STATS ROW
           ============================================================ */
        .stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
        
        .stat-card {
            background: var(--bg-glass);
            border: 1px solid var(--border-glow);
            border-radius: 16px; padding:20px;
            backdrop-filter: blur(20px);
            position:relative; overflow:hidden;
            transition: all 0.3s ease;
        }
        .stat-card:hover { transform:translateY(-2px); border-color:rgba(99,179,237,0.3); }
        .stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
        
        .stat-card.cyan::before    { background:linear-gradient(90deg,transparent,var(--cyan),transparent); }
        .stat-card.purple::before  { background:linear-gradient(90deg,transparent,var(--purple),transparent); }
        .stat-card.emerald::before { background:linear-gradient(90deg,transparent,var(--emerald),transparent); }
        .stat-card.amber::before   { background:linear-gradient(90deg,transparent,var(--amber),transparent); }
        
        .stat-label {
            font-family:'Rajdhani',sans-serif; font-size:0.75rem;
            color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:8px;
        }
        .stat-value { font-family:'Orbitron',monospace; font-size:2rem; font-weight:700; }
        .stat-card.cyan .stat-value    { color:var(--cyan); }
        .stat-card.purple .stat-value  { color:var(--purple); }
        .stat-card.emerald .stat-value { color:var(--emerald); }
        .stat-card.amber .stat-value   { color:var(--amber); }
        .stat-sub { font-size:0.75rem; color:var(--text-secondary); margin-top:4px; }
        
        /* ============================================================
           COMPANY TABS
           ============================================================ */
        .company-tabs { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
        
        .company-tab {
            padding: 12px 24px; border-radius:12px;
            cursor:pointer;
            font-family:'Rajdhani',sans-serif; font-size:0.9rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px;
            transition: all 0.3s ease;
            border: 1px solid transparent;
            background: var(--bg-glass); color:var(--text-secondary);
        }
        .company-tab:hover { color:var(--text-primary); border-color:var(--border-glow); }
        .company-tab.active { color:var(--text-primary); }
        
        /* ============================================================
           MAIN CONTENT
           ============================================================ */
        .main-content { display:grid; grid-template-columns:1fr 380px; gap:24px; }
        
        /* ============================================================
           MONTH CARDS
           ============================================================ */
        .months-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
        
        .month-card {
            background: var(--bg-glass);
            border: 1px solid var(--border-glow);
            border-radius: 16px; overflow:hidden;
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
        }
        .month-card:hover { border-color:rgba(99,179,237,0.3); }
        
        .month-header {
            padding:16px 20px;
            display:flex; align-items:center; justify-content:space-between;
            border-bottom: 1px solid var(--border-glow);
        }
        .month-title {
            font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px;
        }
        .month-progress { font-family:'Orbitron',monospace; font-size:0.85rem; font-weight:600; }
        
        .month-progress-bar { height:4px; background: var(--white-hover-2); border-radius:2px; overflow:hidden; }
        .month-progress-fill { height:100%; border-radius:2px; transition: width 0.5s ease; }
        
        .month-tasks {
            padding:12px;
            max-height:320px; overflow-y:auto;
        }
        .month-tasks::-webkit-scrollbar       { width:4px; }
        .month-tasks::-webkit-scrollbar-track { background:transparent; }
        .month-tasks::-webkit-scrollbar-thumb { background:var(--text-muted); border-radius:2px; }
        
        /* ============================================================
           TASK ITEMS
           ============================================================ */
        .task-item {
            display:flex; align-items:center; gap:10px;
            padding:10px 12px; border-radius:10px;
            transition: all 0.2s ease; cursor:default;
        }
        .task-item:hover { background: var(--white-hover-2); }   /* antes rgba(255,255,255,0.03) */
        
        .task-checkbox {
            width:20px; height:20px;
            border: 2px solid var(--text-muted);
            border-radius:6px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition: all 0.3s ease; flex-shrink:0;
        }
        .task-checkbox.checked { border-color:var(--emerald); background:var(--emerald); box-shadow:0 0 10px var(--emerald-glow); }
        .task-checkbox.checked::after { content:'✓'; color:white; font-size:12px; font-weight:700; }
        
        .task-name { flex:1; font-size:0.85rem; color:var(--text-secondary); transition: all 0.3s ease; }
        .task-item.completed .task-name { text-decoration:line-through; color:var(--text-muted); }
        
        .task-actions { display:flex; gap:4px; opacity:0; transition: opacity 0.2s ease; }
        .task-item:hover .task-actions { opacity:1; }
        
        .task-action-btn {
            width:26px; height:26px; border:none;
            background:transparent; color:var(--text-muted);
            cursor:pointer; border-radius:6px;
            display:flex; align-items:center; justify-content:center;
            font-size:0.75rem; transition: all 0.2s ease;
        }
        .task-action-btn:hover        { background: var(--white-hover); color:var(--text-primary); }   /* antes rgba(255,255,255,0.1) */
        .task-action-btn.delete:hover { background: var(--rose-subtle); color:var(--rose); }            /* antes rgba(244,63,94,0.15) */
        
        .task-add-btn {
            display:flex; align-items:center; justify-content:center; gap:6px;
            width:100%; padding:10px; margin-top:8px;
            border: 1px dashed var(--border-glow); background:transparent;
            color:var(--text-muted); border-radius:10px; cursor:pointer;
            font-family:'Rajdhani',sans-serif; font-size:0.8rem;
            text-transform:uppercase; letter-spacing:1px;
            transition: all 0.3s ease;
        }
        .task-add-btn:hover { border-color:var(--cyan); color:var(--cyan); background: rgba(6,182,212,0.05); }
        
        /* ============================================================
           SIDEBAR
           ============================================================ */
        .sidebar { display:flex; flex-direction:column; gap:20px; }
        
        .sidebar-card {
            background: var(--bg-glass);
            border: 1px solid var(--border-glow);
            border-radius:16px; padding:24px;
            backdrop-filter: blur(20px);
        }
        .sidebar-title {
            font-family:'Rajdhani',sans-serif; font-size:0.8rem;
            color:var(--text-muted); text-transform:uppercase; letter-spacing:2px;
            margin-bottom:16px;
        }
        
        .progress-container { display:flex; flex-direction:column; align-items:center; gap:16px; }
        .progress-ring-wrapper { position:relative; width:160px; height:160px; }
        .progress-ring { transform:rotate(-90deg); }
        .progress-ring-bg  { fill:none; stroke: var(--white-hover-2); stroke-width:8; }  /* antes rgba(255,255,255,0.05) */
        .progress-ring-fill {
            fill:none; stroke:var(--cyan); stroke-width:8; stroke-linecap:round;
            transition: stroke-dashoffset 0.8s ease;
            filter: drop-shadow(0 0 6px var(--cyan-glow));
        }
        .progress-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
        .progress-percent { font-family:'Orbitron',monospace; font-size:2rem; font-weight:700; color:var(--cyan); }
        .progress-label {
            font-size:0.7rem; color:var(--text-muted); text-transform:uppercase;
            letter-spacing:1px; font-family:'Rajdhani',sans-serif;
        }
        
        .progress-details { width:100%; display:flex; flex-direction:column; gap:10px; }
        .progress-detail-item {
            display:flex; align-items:center; justify-content:space-between;
            padding:8px 12px;
            background: var(--white-hover-2);     /* antes rgba(255,255,255,0.02) */
            border-radius:8px;
        }
        .progress-detail-label { font-size:0.8rem; color:var(--text-secondary); }
        .progress-detail-value { font-family:'Orbitron',monospace; font-size:0.85rem; font-weight:600; }
        
        .company-progress-list { display:flex; flex-direction:column; gap:16px; }
        .company-progress-item { display:flex; flex-direction:column; gap:8px; }
        .company-progress-header { display:flex; align-items:center; justify-content:space-between; }
        .company-name { font-size:0.85rem; font-weight:600; font-family:'Rajdhani',sans-serif; letter-spacing:0.5px; }
        .company-progress-percent { font-family:'Orbitron',monospace; font-size:0.8rem; font-weight:600; }
        .company-bar { height:6px; background: var(--white-hover-2); border-radius:3px; overflow:hidden; }  /* antes rgba(255,255,255,0.05) */
        .company-bar-fill { height:100%; border-radius:3px; transition: width 0.6s ease; }
        
        /* ============================================================
           ALL TASKS VIEW
           ============================================================ */
        .all-tasks-view          { display:none; }
        .all-tasks-view.active   { display:block; }
        
        /* CORRECCIÓN RESPONSIVE: envuelve la tabla para scroll horizontal */
        .all-tasks-scroll        { overflow-x:auto; -webkit-overflow-scrolling:touch; }
        
        .all-tasks-table { width:100%; border-collapse:collapse; }
        .all-tasks-table th {
            font-family:'Rajdhani',sans-serif; font-size:0.75rem;
            color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;
            padding:12px 16px; text-align:left;
            border-bottom: 1px solid var(--border-glow);
        }
        .all-tasks-table td {
            padding:12px 16px;
            border-bottom: 1px solid var(--white-hover-2);   /* antes rgba(255,255,255,0.02) */
            font-size:0.85rem; color:var(--text-secondary);
        }
        .all-tasks-table tr:hover td { background: var(--white-hover-2); }
        
        .company-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:4px; font-size:0.7rem; font-weight:600; }
        
        .view-toggle { display:flex; gap:4px; background: var(--white-hover-2); border-radius:10px; padding:4px; }
        .view-toggle-btn {
            padding:6px 14px; border:none; background:transparent;
            color:var(--text-muted); border-radius:8px; cursor:pointer;
            font-family:'Rajdhani',sans-serif; font-size:0.8rem;
            text-transform:uppercase; letter-spacing:1px; transition: all 0.2s ease;
        }
        .view-toggle-btn.active { background: var(--cyan-subtle); color:var(--cyan); }  /* antes rgba(6,182,212,0.15) */
        
        /* ============================================================
           MODALES
           ============================================================ */
        .modal-overlay {
            position:fixed; top:0; left:0; right:0; bottom:0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            display:none; align-items:center; justify-content:center;
            z-index: var(--z-modal);
            padding: 16px;                        /* espacio en móvil para no tocar bordes */
        }
        .modal-overlay.active { display:flex; animation: fadeIn 0.3s ease; }
        
        @keyframes fadeIn     { from{opacity:0;}         to{opacity:1;} }
        @keyframes modalSlide { from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }
        
        .modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-glow);
            border-radius: 20px;
            width: 92%; max-width: 520px;
            /* CORRECCIÓN iOS: evita que el modal quede tapado por el teclado virtual */
            max-height: 90vh;
            max-height: min(90vh, -webkit-fill-available);
            animation: modalSlide 0.3s ease;
            overflow: hidden; display:flex; flex-direction:column;
        }
        .modal-header {
            padding:24px 28px; border-bottom: 1px solid var(--border-glow);
            display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
        }
        .modal-title {
            font-family:'Rajdhani',sans-serif; font-size:1.1rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px;
        }
        .modal-close {
            width:32px; height:32px;
            border: 1px solid var(--border-glow); background:transparent;
            color:var(--text-secondary); border-radius:8px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            font-size:1rem; transition: all 0.2s ease;
        }
        .modal-close:hover { background: var(--rose-subtle); border-color:var(--rose); color:var(--rose); }  /* antes rgba(244,63,94,0.1) */
        
        .modal-body {
            padding:24px 28px;
            display:flex; flex-direction:column; gap:18px;
            overflow-y: auto; flex:1;
            -webkit-overflow-scrolling: touch;    /* scroll suave en iOS */
        }
        .form-group { display:flex; flex-direction:column; gap:6px; }
        .form-label {
            font-family:'Rajdhani',sans-serif; font-size:0.8rem;
            color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;
        }
        .form-input, .form-select {
            background: var(--white-hover-2);     /* antes rgba(255,255,255,0.05) */
            border: 1px solid var(--border-glow);
            border-radius:10px; padding:12px 16px;
            color:var(--text-primary);
            font-family:'Space Grotesk',sans-serif; font-size:0.9rem;
            outline:none; transition: all 0.3s ease;
        }
        .form-input:focus, .form-select:focus { border-color:var(--cyan); box-shadow:0 0 15px rgba(6,182,212,0.15); }
        .form-select {
            cursor:pointer; appearance:none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
        }
        .form-select option { background:var(--bg-secondary); color:var(--text-primary); }
        
        .form-checkbox-group { display:flex; align-items:center; gap:10px; }
        .form-checkbox {
            width:20px; height:20px; border:2px solid var(--text-muted);
            border-radius:6px; cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            transition: all 0.3s ease;
        }
        .form-checkbox.checked { border-color:var(--emerald); background:var(--emerald); }
        .form-checkbox.checked::after { content:'✓'; color:white; font-size:12px; font-weight:700; }
        
        .modal-footer { padding:16px 28px 24px; display:flex; gap:12px; justify-content:flex-end; flex-shrink:0; }
        
        /* ============================================================
           TOASTS
           ── Antes: rgba(16,185,129,0.15/.3), rgba(244,63,94,...), rgba(6,182,212,...)
           ── Ahora: variables --*-subtle y --*-glow
           ============================================================ */
        .toast-container {
            position:fixed; top:24px; right:24px;
            z-index: var(--z-toast);
            display:flex; flex-direction:column; gap:8px;
        }
        .toast {
            padding:14px 20px; border-radius:12px; font-size:0.85rem; font-weight:500;
            backdrop-filter: blur(20px);
            animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
            max-width: 350px;
        }
        @keyframes toastIn  { from{opacity:0;transform:translateX(40px);} to{opacity:1;transform:translateX(0);} }
        @keyframes toastOut { from{opacity:1;}                             to{opacity:0;} }
        
        .toast.success {
            background: var(--emerald-subtle);                /* antes rgba(16,185,129,0.15) */
            border: 1px solid rgba(16,185,129,0.3);           /* tono medio, no usa --emerald-glow para no brillar */
            color: var(--emerald);
        }
        .toast.error {
            background: var(--rose-subtle);                   /* antes rgba(244,63,94,0.15) */
            border: 1px solid rgba(244,63,94,0.3);
            color: var(--rose);
        }
        .toast.info {
            background: var(--cyan-subtle);                   /* antes rgba(6,182,212,0.15) */
            border: 1px solid rgba(6,182,212,0.3);
            color: var(--cyan);
        }
        
        /* ============================================================
           EMPTY STATE / PULSE
           ============================================================ */
        .empty-state      { text-align:center; padding:40px 20px; color:var(--text-muted); }
        .empty-state-icon { font-size:3rem; margin-bottom:12px; opacity:0.5; }
        .empty-state-text { font-size:0.9rem; font-family:'Rajdhani',sans-serif; letter-spacing:1px; }
        
        .pulse-dot { animation:pulse 2s infinite; }
        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
        
        /* ============================================================
           SECCIÓN FINANCIERA
           ============================================================ */
        .fin-section       { margin-top:32px; }
        .fin-section-header {
            display:flex; align-items:center; justify-content:space-between;
            margin-bottom:20px; flex-wrap:wrap; gap:12px;
        }
        .fin-section-title {
            font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:700;
            text-transform:uppercase; letter-spacing:2px; color:var(--text-primary);
            display:flex; align-items:center; gap:10px;
        }
        .fin-section-title::before {
            content:''; width:4px; height:24px;
            background: linear-gradient(180deg,var(--cyan),var(--purple)); border-radius:2px;
        }
        
        .fin-tabs { display:flex; gap:6px; background: var(--white-hover-2); border-radius:10px; padding:4px; }
        .fin-tab {
            padding:7px 16px; border-radius:8px; cursor:pointer;
            font-family:'Rajdhani',sans-serif; font-size:0.78rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px;
            transition: all 0.2s ease; color:var(--text-muted);
            border:none; background:transparent;
        }
        .fin-tab:hover  { color:var(--text-secondary); }
        .fin-tab.active { background: var(--cyan-subtle); color:var(--cyan); }   /* antes rgba(6,182,212,0.15) */
        
        /* CORRECCIÓN RESPONSIVE: min(380px,100%) evita overflow en tablets */
        .fin-months-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(380px,100%),1fr)); gap:16px; }
        
        .fin-card {
            background: var(--bg-glass); border:1px solid var(--border-glow);
            border-radius:16px; overflow:hidden;
            backdrop-filter: blur(20px); transition: all 0.3s ease;
        }
        .fin-card:hover { border-color:rgba(99,179,237,0.3); transform:translateY(-2px); }
        
        .fin-card-header {
            padding:14px 18px;
            display:flex; align-items:center; justify-content:space-between;
            border-bottom:1px solid var(--border-glow);
            background: var(--white-hover-2);    /* antes rgba(255,255,255,0.02) */
        }
        .fin-card-title {
            font-family:'Rajdhani',sans-serif; font-size:0.95rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px;
        }
        .fin-card-total { font-family:'Orbitron',monospace; font-size:0.75rem; color:var(--cyan); }
        
        .fin-card-body { padding:12px; max-height:280px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
        .fin-card-body::-webkit-scrollbar       { width:4px; }
        .fin-card-body::-webkit-scrollbar-track { background:transparent; }
        .fin-card-body::-webkit-scrollbar-thumb { background:var(--text-muted); border-radius:2px; }
        
        .fin-row {
            display:flex; align-items:center; gap:10px;
            padding:8px 10px; border-radius:8px; transition: background 0.2s;
        }
        .fin-row:hover { background: var(--white-hover-2); }   /* antes rgba(255,255,255,0.03) */
        
        .fin-row-label   { flex:1; font-size:0.82rem; color:var(--text-secondary); }
        .fin-row-value   { font-family:'Orbitron',monospace; font-size:0.75rem; color:var(--text-primary); min-width:90px; text-align:right; }
        .fin-row-actions { display:flex; gap:3px; opacity:0; transition: opacity 0.2s; }
        .fin-row:hover .fin-row-actions { opacity:1; }
        
        .fin-action-btn {
            width:24px; height:24px; border:none; background:transparent;
            color:var(--text-muted); cursor:pointer; border-radius:5px;
            display:flex; align-items:center; justify-content:center;
            font-size:0.7rem; transition: all 0.2s;
        }
        .fin-action-btn:hover     { background: var(--white-hover); color:var(--text-primary); }
        .fin-action-btn.del:hover { background: var(--rose-subtle); color:var(--rose); }  /* antes rgba(244,63,94,0.15) */
        
        .fin-card-footer { padding:8px 12px 12px; }
        .fin-add-btn {
            display:flex; align-items:center; justify-content:center; gap:5px;
            width:100%; padding:8px;
            border: 1px dashed var(--border-glow); background:transparent;
            color:var(--text-muted); border-radius:8px; cursor:pointer;
            font-family:'Rajdhani',sans-serif; font-size:0.75rem;
            text-transform:uppercase; letter-spacing:1px; transition: all 0.3s;
        }
        .fin-add-btn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(6,182,212,0.04); }
        
        /* ============================================================
           RESUMEN FINANCIERO
           ============================================================ */
        .fin-summary-view        { display:none; }
        .fin-summary-view.active { display:block; }
        
        .summary-card {
            background: var(--bg-glass); border:1px solid var(--border-glow);
            border-radius:16px; overflow:hidden;
            backdrop-filter: blur(20px); margin-bottom:20px;
        }
        .summary-card-header {
            padding:16px 20px; border-bottom:1px solid var(--border-glow);
            display:flex; align-items:center; justify-content:space-between;
        }
        .summary-card-title {
            font-family:'Rajdhani',sans-serif; font-size:0.9rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px; color:var(--cyan);
        }
        
        .summary-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
        
        .summary-table { width:100%; border-collapse:collapse; min-width:700px; }
        .summary-table th {
            font-family:'Rajdhani',sans-serif; font-size:0.7rem;
            color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;
            padding:10px 14px; text-align:right;
            border-bottom:1px solid var(--border-glow); white-space:nowrap;
        }
        .summary-table th:first-child { text-align:left; min-width:130px; }
        .summary-table td {
            padding:9px 14px; font-size:0.8rem; color:var(--text-secondary); text-align:right;
            border-bottom: 1px solid var(--white-hover-2);   /* antes rgba(255,255,255,0.02) */
        }
        .summary-table td:first-child { text-align:left; font-weight:500; color:var(--text-primary); }
        .summary-table tr:hover td { background: var(--white-hover-2); }
        
        .summary-table .total-row td {
            font-weight:700; color:var(--cyan);
            border-top:2px solid var(--border-glow);
            font-family:'Orbitron',monospace; font-size:0.75rem;
        }
        .summary-table .grand-total td {
            font-weight:800; color:var(--emerald);
            font-family:'Orbitron',monospace; font-size:0.8rem;
            background: var(--emerald-subtle);   /* antes rgba(16,185,129,0.05) */
        }
        
        /* ============================================================
           COMP SUMMARY GRID
           ── CORRECCIÓN CONFLICTO: antes había 2 bloques con grid-template-columns
              distintos. Se unifica en un único bloque con auto-fit.
           ============================================================ */
        .comp-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
            gap: 16px;
            margin-bottom: 20px;
        }
        
        .comp-sum-card {
            background: var(--bg-glass); border:1px solid var(--border-glow);
            border-radius:14px; padding:18px;
            backdrop-filter: blur(20px);
            min-width: 0;                         /* evita overflow en grids */
        }
        .comp-sum-header {
            display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
        }
        .comp-sum-name {
            font-family:'Rajdhani',sans-serif; font-size:0.95rem; font-weight:700;
            text-transform:uppercase; letter-spacing:1px;
        }
        .comp-sum-badge { font-family:'Orbitron',monospace; font-size:0.7rem; padding:3px 10px; border-radius:6px; }
        
        /* ── El grid interno de la tarjeta (2 columnas fijas, sin conflicto) ── */
        .comp-sum-grid-inner { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        
        .comp-sum-item { padding:6px 8px; background: var(--white-hover-2); border-radius:6px; }
        .comp-sum-item-label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
        .comp-sum-item-value { font-family:'Orbitron',monospace; font-size:0.75rem; font-weight:600; margin-top:2px; }
        
        /* ============================================================
           SETTINGS MODAL
           ============================================================ */
        .settings-tabs {
            display:flex; gap:4px; background: var(--white-hover-2);
            border-radius:10px; padding:4px; margin-bottom:16px;
        }
        .settings-tab {
            padding:8px 14px; border-radius:8px; cursor:pointer;
            font-family:'Rajdhani',sans-serif; font-size:0.78rem; font-weight:600;
            text-transform:uppercase; letter-spacing:1px;
            transition: all 0.2s ease; color:var(--text-muted);
            border:none; background:transparent;
        }
        .settings-tab:hover  { color:var(--text-secondary); }
        .settings-tab.active { background:rgba(99,102,241,0.15); color:#818cf8; }
        
        .settings-section        { display:none; }
        .settings-section.active { display:block; }
        
        .settings-item {
            display:flex; align-items:center; gap:10px;
            padding:10px 12px; border-radius:10px;
            background: var(--white-hover-2); margin-bottom:8px; transition: all 0.2s;
        }
        .settings-item:hover { background: var(--white-hover); }  /* antes rgba(255,255,255,0.04) */
        
        .settings-item-name  { flex:1; font-size:0.88rem; color:var(--text-primary); font-weight:500; }
        .settings-item-badge {
            font-size:0.7rem; padding:2px 8px; border-radius:4px;
            background: var(--cyan-subtle); color:var(--cyan);  /* antes rgba(6,182,212,0.1) */
            font-family:'Rajdhani',sans-serif;
        }
        
        .settings-item-actions { display:flex; gap:4px; }
        .settings-action-btn {
            width:28px; height:28px;
            border: 1px solid var(--border-glow); background:transparent;
            color:var(--text-muted); cursor:pointer; border-radius:6px;
            display:flex; align-items:center; justify-content:center;
            font-size:0.75rem; transition: all 0.2s;
        }
        .settings-action-btn:hover     { background: var(--white-hover); color:var(--text-primary); }
        .settings-action-btn.del:hover {
            background: var(--rose-subtle);            /* antes rgba(244,63,94,0.15) */
            border-color: var(--rose); color:var(--rose);
        }
        
        .settings-add-row {
            display:flex; gap:8px; margin-top:12px;
            padding-top:12px; border-top:1px solid var(--border-glow);
        }
        
        /* ============================================================
           SECCIÓN DE REPORTES
           ============================================================ */
        .reports-section { display:none; margin-top:24px; background:var(--bg-glass); border:1px solid var(--border-glow); border-radius:20px; padding:24px; backdrop-filter:blur(20px); }
        .reports-section.active { display:block; }
        
        .reports-filters { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; align-items:flex-end; }
        .reports-filters .filter-group { display:flex; flex-direction:column; gap:6px; }
        .reports-filters label {
            font-family:'Rajdhani',sans-serif; font-size:0.7rem;
            color:var(--text-muted); text-transform:uppercase; letter-spacing:1px;
        }
        .reports-filters select,
        .reports-filters input {
            background: var(--bg-secondary); border:1px solid var(--border-glow);
            border-radius:10px; padding:8px 12px;
            color:var(--text-primary); font-family:'Space Grotesk',sans-serif;
        }
        
        .reports-tabs { display:flex; gap:8px; border-bottom:1px solid var(--border-glow); margin-bottom:20px; }
        .reports-tab {
            padding:8px 20px; background:transparent; border:none;
            color:var(--text-muted); font-family:'Rajdhani',sans-serif;
            font-size:0.85rem; text-transform:uppercase; letter-spacing:1px;
            cursor:pointer; transition:.2s;
        }
        .reports-tab.active { color:var(--cyan); border-bottom:2px solid var(--cyan); }
        
        .reports-content { min-height:400px; }
        .report-pane        { display:none; }
        .report-pane.active { display:block; }
        
        .report-kpi-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
            gap:16px; margin-bottom:24px;
        }
        .kpi-card {
            background: var(--white-hover-2);    /* antes rgba(255,255,255,0.03) */
            border-radius:16px; padding:16px; text-align:center;
            border:1px solid var(--border-glow);
        }
        .kpi-value { font-family:'Orbitron',monospace; font-size:1.8rem; font-weight:700; color:var(--cyan); }
        .kpi-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:8px; }
        
        .report-table-container { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0; }
        .report-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
        .report-table th,
        .report-table td { padding:10px 12px; border-bottom:1px solid var(--white-hover-2); text-align:left; }
        .report-table th { color:var(--cyan); font-family:'Rajdhani',sans-serif; font-weight:600; }
        
        .report-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap; }
        .chart-container { margin:20px 0; height:300px; }
        
        /* ============================================================
           TABLA FINANCIERA POR EMPRESA (#finCompanyTable)
           ============================================================ */
        #finCompanyTable td { padding:10px 6px; }
        #finCompanyTable .resumen-cell { background: var(--white-hover-2); border-radius:8px; }
        
        /* ============================================================
           SECCIÓN #comprasSection
           ============================================================ */
        #comprasSection { display:none; }
        
        /* ============================================================
           TEMAS PREDEFINIDOS
           (Son redefiniciones de variables, correcto por diseño)
           ============================================================ */
        body.theme-light {
            --bg-primary:     #f8fafc;
            --bg-secondary:   #ffffff;
            --bg-glass:       rgba(255,255,255,0.6);
            --border-glow:    rgba(0,0,0,0.1);
            --text-primary:   #64748b;
            --text-secondary: #334155;
            --text-muted:     #64748b;
            --cyan:           #0891b2;
            --cyan-glow:      rgba(8,145,178,0.3);
            --cyan-subtle:    rgba(8,145,178,0.10);
            --purple:         #7c3aed;
            --purple-glow:    rgba(124,58,237,0.3);
            --emerald:        #059669;
            --emerald-glow:   rgba(5,150,105,0.3);
            --emerald-subtle: rgba(5,150,105,0.07);
            --amber:          #d97706;
            --amber-glow:     rgba(217,119,6,0.3);
            --amber-subtle:   rgba(217,119,6,0.10);
            --rose:           #e11d48;
            --rose-glow:      rgba(225,29,72,0.3);
            --rose-subtle:    rgba(225,29,72,0.10);
            --indigo:         #4f46e5;
            --indigo-glow:    rgba(79,70,229,0.3);
            --white-hover:    rgba(0,0,0,0.06);
            --white-hover-2:  rgba(0,0,0,0.03);
            --excel-green:    #155a2e;
            --excel-text:     #16a34a;
            --excel-bg:       rgba(21,90,46,0.10);
            --excel-bg-h:     rgba(21,90,46,0.18);
            --excel-glow:     rgba(21,90,46,0.3);
            --json-yellow:    #92400e;
            --json-text:      #b45309;
            --json-bg:        rgba(146,64,14,0.08);
            --json-bg-h:      rgba(146,64,14,0.15);
        }
        
        body.theme-sepia {
            --bg-primary:     #f4ecd8;
            --bg-secondary:   #e8dcc8;
            --bg-glass:       rgba(232,220,200,0.8);
            --border-glow:    rgba(139,115,85,0.3);
            --text-primary:   #3b2b1f;
            --text-secondary: #5c4b3a;
            --text-muted:     #8b7355;
            --cyan:           #2c6e6e;
            --cyan-glow:      rgba(44,110,110,0.3);
            --cyan-subtle:    rgba(44,110,110,0.10);
            --purple:         #8b5a2b;
            --purple-glow:    rgba(139,90,43,0.3);
            --emerald:        #4a6b3c;
            --emerald-glow:   rgba(74,107,60,0.3);
            --emerald-subtle: rgba(74,107,60,0.07);
            --amber:          #b4652a;
            --amber-glow:     rgba(180,101,42,0.3);
            --amber-subtle:   rgba(180,101,42,0.10);
            --rose:           #9e4a3a;
            --rose-glow:      rgba(158,74,58,0.3);
            --rose-subtle:    rgba(158,74,58,0.10);
            --indigo:         #6b5e4a;
            --indigo-glow:    rgba(107,94,74,0.3);
            --white-hover:    rgba(0,0,0,0.06);
            --white-hover-2:  rgba(0,0,0,0.03);
            --excel-green:    #1e4d2b;
            --excel-text:     #2d6a3f;
            --excel-bg:       rgba(30,77,43,0.10);
            --excel-bg-h:     rgba(30,77,43,0.18);
            --excel-glow:     rgba(30,77,43,0.3);
            --json-yellow:    #7a4a1a;
            --json-text:      #9a5e22;
            --json-bg:        rgba(122,74,26,0.08);
            --json-bg-h:      rgba(122,74,26,0.15);
        }
        
        /* ============================================================
           MODAL DE GESTIÓN (SETTINGS)
           — Full-screen en móvil, 95vw×90vh en desktop
           — Respeta los 3 temas automáticamente vía variables
           ============================================================ */
        .settings-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(12px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: calc(var(--z-modal) + 50);
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }
        
        .settings-modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-glow);
            border-radius: 20px;
            width: 95vw;
            max-width: 1440px;
            height: 90vh;
            height: min(90vh, -webkit-fill-available);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: modalSlide 0.3s ease;
            box-shadow:
                0 25px 80px rgba(0, 0, 0, 0.5),
                0 0 60px rgba(6, 182, 212, 0.08);
            position: relative;
        }
        
        /* Línea decorativa superior (igual que header) */
        .settings-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
            border-radius: 20px 20px 0 0;
            z-index: 1;
        }
        
        .settings-modal-header {
            padding: 22px 28px;
            border-bottom: 1px solid var(--border-glow);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            background: var(--bg-glass);
            backdrop-filter: blur(10px);
        }
        
        .settings-modal-title {
            font-family: 'Rajdhani', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .settings-modal-title::before {
            content: '';
            width: 4px;
            height: 22px;
            background: linear-gradient(180deg, var(--cyan), var(--purple));
            border-radius: 2px;
        }
        
        .settings-modal-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 24px 28px;
            -webkit-overflow-scrolling: touch;
        }
        
        .settings-modal-body::-webkit-scrollbar {
            width: 6px;
        }
        
        .settings-modal-body::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .settings-modal-body::-webkit-scrollbar-thumb {
            background: var(--text-muted);
            border-radius: 3px;
        }
        
        .settings-modal-close {
            width: 36px;
            height: 36px;
            border: 1px solid var(--border-glow);
            background: transparent;
            color: var(--text-secondary);
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: all 0.2s ease;
        }
        
        .settings-modal-close:hover {
            background: var(--rose-subtle);
            border-color: var(--rose);
            color: var(--rose);
            transform: scale(1.05);
        }
        
        /* Dentro del modal de gestión: ajustes de espaciado */
        .settings-modal .settings-section {
            padding: 0;
        }
        
        .settings-modal .settings-tabs {
            position: sticky;
            top: -24px;
            z-index: 2;
            background: var(--bg-secondary);
            padding: 12px 0;
            margin: -24px -28px 16px;
            padding-left: 28px;
            padding-right: 28px;
            border-bottom: 1px solid var(--border-glow);
        }
        
        .settings-modal .settings-add-row {
            position: sticky;
            bottom: -24px;
            z-index: 2;
            background: var(--bg-secondary);
            padding: 16px 0;
            margin: 16px -28px -24px;
            padding-left: 28px;
            padding-right: 28px;
            border-top: 1px solid var(--border-glow);
        }
        
        /* ============================================================
           RESPONSIVE — MODAL DE GESTIÓN
           ============================================================ */
        @media (max-width: 768px) {
            .settings-modal-overlay {
                padding: 0;
            }
        
            .settings-modal {
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                border-radius: 0;
                border: none;
            }
        
            .settings-modal::before {
                border-radius: 0;
            }
        
            .settings-modal-header {
                padding: 16px 18px;
            }
        
            .settings-modal-title {
                font-size: 1rem;
            }
        
            .settings-modal-body {
                padding: 16px 18px;
            }
        
            .settings-modal .settings-tabs {
                margin: -16px -18px 12px;
                padding-left: 18px;
                padding-right: 18px;
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
            }
        
            .settings-modal .settings-tab {
                white-space: nowrap;
                flex-shrink: 0;
            }
        
            .settings-modal .settings-add-row {
                margin: 12px -18px -16px;
                padding-left: 18px;
                padding-right: 18px;
                flex-wrap: wrap;
            }
        
            .settings-modal .settings-add-row .form-input,
            .settings-modal .settings-add-row .form-select {
                min-width: 0;
                flex: 1;
            }
        }
        
        @media (max-width: 480px) {
            .settings-modal-header {
                padding: 14px 14px;
            }
        
            .settings-modal-body {
                padding: 12px 14px;
            }
        
            .settings-modal .settings-tabs {
                margin: -12px -14px 10px;
                padding-left: 14px;
                padding-right: 14px;
            }
        
            .settings-modal .settings-add-row {
                margin: 10px -14px -12px;
                padding-left: 14px;
                padding-right: 14px;
            }
        
            .settings-modal-title {
                font-size: 0.9rem;
                letter-spacing: 1px;
            }
        }
        
        /* ============================================================
           RESPONSIVE — BREAKPOINTS
           ============================================================ */
        
        /* ── 1200px: sidebar pasa a grid ── */
        @media (max-width: 1200px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            .sidebar {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
            }
        }
        
        /* ── 768px: layout móvil general ── */
        @media (max-width: 768px) {
            .app-container { padding: 12px; }
        
            .header { flex-direction:column; padding:16px; }
            .header-right { width:100%; }
        
            /* Los menús flotantes van a la izquierda en móvil */
            .export-menu,
            .theme-menu {
                right: auto;
                left: 0;
                min-width: 200px;
            }
        
            .stats-row { grid-template-columns: repeat(2,1fr); }
        
            .months-grid,
            .fin-months-grid { grid-template-columns: 1fr; }
        
            /* Tabla de tareas: scroll horizontal en lugar de overflow */
            .all-tasks-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        
            /* Tabs de settings en columna */
            .settings-tabs { flex-direction:column; gap:5px; }
            .settings-tab  { text-align:center; }
        
            /* Resumen financiero: scroll táctil */
            .summary-scroll { -webkit-overflow-scrolling: touch; }
        
            /* Modal: body sin padding excesivo */
            .modal-body   { padding: 16px 18px; }
            .modal-header { padding: 16px 18px; }
            .modal-footer { padding: 12px 18px 18px; }
        
            /* Acciones de reporte en columna */
            .report-actions { flex-direction: column; align-items: stretch; }
            .report-actions .btn-glow { justify-content: center; }
        
            /* Tarjetas de empresa: 1 columna */
            .comp-summary-grid { grid-template-columns: 1fr; }
        }
        
        /* ── 480px: pantallas muy pequeñas ── */
        @media (max-width: 480px) {
            .stats-row { grid-template-columns: 1fr; }
        
            /* Reducir tamaño de valor estadístico para evitar solapamiento */
            .stat-value { font-size: 1.5rem; }
        
            .sidebar { grid-template-columns: 1fr; }
        
            /* Header derecho: botones en columna */
            .header-right {
                flex-direction: column;
                align-items: stretch;
            }
            .btn-glow { justify-content: center; }
            .year-selector { justify-content: center; }
        
            /* Reducir altura de lista de tareas */
            .month-tasks { max-height: 200px; }
        
            /* Título principal más pequeño */
            .header-title h1 { font-size: 1.2rem; }
        
            /* Logo más compacto */
            .logo-icon { width:40px; height:40px; font-size:18px; }
        
            /* Toasts full-width */
            .toast-container { right:12px; left:12px; }
            .toast           { max-width: 100%; }
        
            /* KPI grid: 2 columnas mínimo */
            .report-kpi-grid { grid-template-columns: repeat(2, 1fr); }
        
            /* Comp sum inner: 1 columna */
            .comp-sum-grid-inner { grid-template-columns: 1fr; }
            .comp-sum-item-value { font-size: 0.75rem; }
            .comp-sum-item-label { font-size: 0.60rem; }
        
            /* Financiero: tipografía más pequeña */
            .fin-row-value { font-size: 0.68rem; min-width: 70px; }
        }
        
        /* ═══════════════════════════════════
           FORMULARIO COMPRAS - RESPONSIVE
           ═══════════════════════════════════ */
    
        /* Tablet (≤1024px): grids de 5 cols → 3 cols */
        @media (max-width: 1024px) {
            #formCompraContainer [style*="grid-template-columns:1fr 1fr 1fr 1fr 1.5fr"],
            #formCompraContainer [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr"] {
                grid-template-columns: 1fr 1fr 1fr !important;
            }
            #formCompraContainer [style*="grid-template-columns:160px 1fr 1fr"] {
                grid-template-columns: 1fr 1fr !important;
            }
            #formCompraContainer [style*="grid-template-columns:140px 1fr 200px"] {
                grid-template-columns: 1fr 1fr !important;
            }
        }
    
        /* Móvil (≤640px): todo apilado */
        @media (max-width: 640px) {
            #formCompraContainer [style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }
            #formCompraContainer .summary-card-header {
                flex-direction: column !important;
                gap: 8px !important;
            }
            #formCompraContainer [style*="justify-content:flex-end"] {
                justify-content: stretch !important;
            }
            #formCompraContainer [style*="justify-content:flex-end"] button {
                flex: 1;
            }
        }