/* --- VARIABLES & BASE (SISTEMA DE TEMAS) --- */
:root {
    /* Colores refinados */
    --kore-blue: #2563eb;
    --kore-blue-dark: #1e40af;
    --bg-app: #f8fafc;
    --bg-surface: rgba(255, 255, 255, 0.85);
    /* Para Glassmorphism */
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border: rgba(226, 232, 240, 0.8);

    /* Sombras Pro */
    --shadow-premium: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Legacy compatibility / refinements */
    --bg-body: var(--bg-app);
    --bg-sidebar: #f8fafc;
    --bg-panel: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-select: #eff6ff;
    --border-strong: #cbd5e1;
    --primary: var(--kore-blue);
    --accent: var(--kore-blue);
    --text-inv: #ffffff;
    --radius: 12px;
    --font-main: 'Inter', 'Manrope', sans-serif;
    --font-num: 'JetBrains Mono', monospace;

    --good-bg: #ecfdf5;
    --good-text: #047857;
    --good-chart: #10b981;
    /* Emerald */
    --bad-bg: #fef2f2;
    --bad-text: #b91c1c;
    --bad-chart: #f43f5e;
    /* Rose */

    --bar-neg: rgba(239, 68, 68, 0.15);
    --bar-pos: rgba(34, 197, 94, 0.15);

    /* Softer, more diffuse shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --sim-width: 360px;
    --sidebar-w: 220px;
}

/* GLOBAL TYPOGRAPHY UNIFICATION */
body,
button,
input,
select,
textarea {
    font-family: var(--font-main);
}

/* Ensure tabular numbers in table for perfect alignment */
/* Ensure tabular numbers in table for perfect alignment */
td {
    font-variant-numeric: tabular-nums;
}

.cell-adjusted {
    background-color: rgba(37, 99, 235, 0.08) !important;
    transition: background-color 0.3s ease;
}

body.dark-mode .cell-adjusted {
    background-color: rgba(96, 165, 250, 0.15) !important;
}

/* DARK MODE */
body.dark-mode {
    --bg-body: #0f172a;
    /* Slate 900 */
    --bg-sidebar: #1e293b;
    /* Slate 800 */
    --bg-panel: #1e293b;
    /* Slate 800 */
    --bg-hover: #334155;
    /* Slate 700 */
    --bg-select: #1e3a8a;
    /* Dark Blue Selection */

    --border: #334155;
    --border-strong: #475569;

    --kore-blue: #60a5fa;
    /* Azul más claro para contraste */
    --primary: #3b82f6;

    --text-main: #f1f5f9;
    /* Slate 100 */
    --text-muted: #94a3b8;
    /* Slate 400 */
    --text-inv: #0f172a;

    --good-bg: #064e3b;
    --good-text: #34d399;
    --bad-bg: #7f1d1d;
    --bad-text: #f87171;

    --bar-neg: rgba(248, 113, 113, 0.2);
    --bar-pos: rgba(52, 211, 153, 0.2);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
}

/* Dark Mode: Fix Select Dropdowns */
body.dark-mode select {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

body.dark-mode select option {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
}


/* --- MINIMALIST MODULE SIDEBAR --- */
.mod-sidebar {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 12px 18px;
    margin: 0;
    justify-content: center;
}

.mod-icon {
    width: 90px;
    height: 40px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.mod-icon:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-main);
}

.mod-icon.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.mod-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Glassmorphism Classes */
.card,
.kore-card,
.dashboard-card,
.view-panel,
.kpi-card,
.pnl-kpi-card,
.strat-card,
.strat-hero-card {
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius);
    box-shadow: var(--shadow-premium);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.card:hover,
.kore-card:hover,
.dashboard-card:hover,
.kpi-card:hover,
.pnl-kpi-card:hover,
.strat-hero-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    background: rgba(255, 255, 255, 0.95);
}

body.dark-mode .card,
body.dark-mode .kore-card,
body.dark-mode .dashboard-card,
body.dark-mode .view-panel,
body.dark-mode .kpi-card,
body.dark-mode .pnl-kpi-card,
body.dark-mode .strat-card,
body.dark-mode .strat-hero-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .card:hover,
body.dark-mode .kore-card:hover,
body.dark-mode .dashboard-card:hover,
body.dark-mode .kpi-card:hover,
body.dark-mode .pnl-kpi-card:hover,
body.dark-mode .strat-hero-card:hover {
    background: rgba(30, 41, 59, 0.85);
}


* {
    box-sizing: border-box;
    outline: none;
}

body {
    margin: 0;
    font-family: var(--font-main);
    background: var(--bg-body);
    color: var(--text-main);
    height: 100vh;
    display: flex;
    font-size: 12px;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

/* --- LAYOUT PRINCIPAL & COLLAPSE --- */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 100;
    transition: margin 0.3s, background-color 0.3s;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02);
}

body.sidebar-closed .sidebar {
    margin-left: calc(var(--sidebar-w) * -1);
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--bg-body);
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main.sim-open {
    margin-right: var(--sim-width);
}

.main.strat-open {
    margin-right: 340px;
}

/* Botón flotante para ABRIR sidebar */
#btnOpenSidebar {
    position: absolute;
    top: 4px;
    left: 6px;
    top: 4px;
    left: 6px;
    z-index: 10000;
    width: 32px;
    height: 32px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--kore-blue);
    transition: all 0.2s ease;
    opacity: 0.4;
    padding-bottom: 2px;
}

#btnOpenSidebar:hover {
    background: var(--kore-blue);
    color: var(--bg-body);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(13, 52, 122, 0.3);
}

body.sidebar-closed #btnOpenSidebar {
    display: flex;
    animation: popIn 0.3s;
}

/* --- SIDEBAR HEADER PRO (AZUL COMPLETO) --- */
.sidebar-header-group {
    background: #0D347A;
    padding-bottom: 12px;

    /* CAMBIO AQUÍ: Agregamos padding arriba (El "Techo") */
    padding-top: 10px;
}

.kore-text,
.aleph-text {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;

    height: 100%;
    /* No puede ser más alto que el header */
    max-width: 160px;
    /* Ancho máximo */
}

.sidebar-toggle-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    margin-left: auto;
    transition: 0.2s;
}

.sidebar-toggle-close:hover {
    color: white;
    transform: translateX(-2px);
}

/* --- MODULE SWITCHER (NUEVO) --- */
.module-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2);

    /* CAMBIO AQUÍ: Aumentamos el primer valor (margin-top) */
    /* Antes era 0, ahora le damos 15px de aire con el logo */
    margin: 10px 10px 10px 10px;

    padding: 4px;
    border-radius: 6px;
    gap: 4px;
}

.mod-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
}

.mod-tab:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.mod-tab.active {
    background: var(--bg-panel);
    /* Blanco en light, oscuro en dark */
    color: var(--kore-blue);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Ajuste para Dark Mode automático gracias a tus variables */
body.dark-mode .mod-tab.active {
    color: var(--text-main);
}

/* SEARCH WRAPPER */
.search-area {
    padding: 0 12px;
}

.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-box {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    color: white;
    background: rgba(0, 0, 0, 0.2);
    padding-right: 32px !important;
    transition: all 0.2s;
}

.search-box::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-box:focus {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    cursor: pointer;
    display: none;
    line-height: 1;
    padding: 0;
    transition: 0.2s;
}

.btn-search-clear:hover {
    color: white;
}

/* Sidebar Separator */
.mod-sep {
    width: 2px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
    border-radius: 1px;
}

.filters-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 15px 12px 20px 12px;
}

.filters-scroll::-webkit-scrollbar {
    width: 4px;
}

.filters-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}

.filter-group {
    margin-bottom: 18px;
}

.filter-header {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-title {
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.filter-title:hover {
    color: var(--accent);
}

.filter-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.count-badge {
    background: var(--border);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 700;
}

.mini-reset {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 2px;
    border-radius: 3px;
    transition: 0.2s;
    line-height: 1;
}

.mini-reset:hover {
    background: var(--border);
    color: var(--accent);
}

select[multiple] {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 4px;
    font-size: 0.75rem;
    font-family: var(--font-main);
    color: var(--text-main);
    background: var(--bg-panel);
    transition: 0.15s;
    outline: none;
    height: 90px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

select[multiple]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

select option {
    padding: 4px 6px;
    border-radius: 3px;
    margin-bottom: 1px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

select option:checked {
    background: var(--primary);
    color: white;
    font-weight: 500;
}

/* --- SIDEBAR FOOTER --- */
.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.file-info {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
    margin-bottom: 4px;
    width: 100%;
    overflow: visible;
    /* Permitir que el botón sea visible */
}

#fileNameDisplay {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.footer-tools {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 32px;
    /* Espacio extra para el boton de dark mode */
    gap: 5px;
    align-items: center;
}

.btn-action {
    height: 30px;
    width: 30px;
    /* Make them square/iconic */
    border: 1px solid transparent;
    /* Ghost border */
    background: transparent;
    /* Ghost background */
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
}

.btn-action:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-main);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-main-upload {
    background: var(--kore-blue);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(13, 52, 122, 0.2);
}

.btn-main-upload:hover {
    background: var(--kore-blue);
    opacity: 0.9;
    transform: none;
}

#btnReset:hover {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}

#btnDownload:hover {
    color: #16a34a !important;
    border-color: #86efac !important;
    background: #f0fdf4 !important;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.1);
}

#btnCopy:hover {
    color: var(--text-main);
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* DARK MODE TOGGLE EN FOOTER */
.theme-toggle-footer {
    height: 28px;
    width: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: 0.2s;
}

.theme-toggle-footer:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    border-color: var(--border);
}

/* --- CONTROLS AREA (COMPACT & FIXED) --- */
.controls {
    padding: 6px 12px;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Reduced gap between rows */
    flex-shrink: 0;
    min-height: 106px;
    /* Locked height for zero movement */
    max-height: 106px;

    z-index: 500 !important;
    border-bottom: 1px solid var(--border);
    position: relative;
}

/* CONDITIONAL COMPACT MODE REMOVED TO STABILIZE TRANSITION */
/* body.view-dashboard .controls { ... } */

/* Y aseguramos que el menú tenga sombra fuerte para separarse del fondo */
.view-dropdown-menu {
    /* ... tus estilos actuales ... */
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4) !important;
    /* Sombra más potente */
}

.control-row {
    display: flex;
    /* Modo Flexible */
    align-items: center;
    /* Centrado vertical */
    width: 100%;
    /* Ancho total */
    flex-wrap: nowrap;
    /* IMPORTANTE: Evita que bajen de línea */
    gap: 12px;
    /* Espacio uniforme */
}

.c-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 !important;
    /* Quitamos márgenes inline */
}

.c-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-left: 1px;
}

.select-modern {
    padding: 5px 24px 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--bg-panel);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    min-width: 110px;
    cursor: pointer;
    height: 32px;
    outline: none;
    box-shadow: var(--shadow-sm);
    transition: 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 12px;
    appearance: none;
}

.select-modern:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.vs-badge {
    font-weight: 800;
    color: var(--border-strong);
    font-size: 0.7rem;
    padding-top: 14px;
    margin: 0 4px;
}

/* SEGMENTED CONTROL FOR UNITS ($ k M) */
.unit-switch {
    display: inline-flex;
    background: var(--bg-hover);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--border);
    height: 32px;
    align-items: center;
}

/* Special Active State for Avg Cost Button (Soft Yellow) */
#btnAvgCost.active {
    background-color: #fef9c3 !important;
    /* Yellow-100 */
    color: #854d0e !important;
    /* Yellow-800 */
    border-color: #fde047 !important;
    /* Yellow-300 */
    opacity: 1 !important;
}

/* Dark Mode Support for Yellow Button */
body.dark-mode #btnAvgCost.active {
    background-color: #422006 !important;
    /* Yellow-950 */
    color: #fef08a !important;
    /* Yellow-200 */
    border-color: #a16207 !important;
    /* Yellow-700 */
}

/* --- VIEW TOGGLES (Botones de Vista Principal) --- */
.view-toggles {
    display: flex;
    gap: 4px;
    padding: 2px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 32px;
    align-items: center;
    margin-right: 8px;
}

.view-group {
    display: flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.04);
    padding: 2px;
    border-radius: 6px;
}

body.dark-mode .view-group {
    background: rgba(255, 255, 255, 0.05);
}

.btn-view-mode {
    width: fit-content;
    min-width: 34px;
    padding: 0 8px;
    height: 28px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-view-mode:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-main);
}

/* ESTADO ACTIVO UNIFICADO (Soft Blue/Lavender) */
.btn-view-mode.active {
    background-color: #f0f5ff !important;
    /* Soft Blue-Lavender */
    border-color: #cbd5e1 !important;
    /* Subtle border */
    color: #1e40af !important;
    /* Dark Blue contrast */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    opacity: 1 !important;
}

/* Dark Mode Support */
body.dark-mode .view-toggles {
    background: rgba(0, 0, 0, 0.2);
}

body.dark-mode .btn-view-mode.active {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

/* Ajuste pequeño para los SVGs dentro de los botones */
.btn-view-mode svg {
    stroke-width: 2.2;
    width: 18px;
    height: 18px;
}

/* Re-agregamos .unit-btn para Units y Metrics */
.unit-btn {
    padding: 0 10px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 5px;
    height: 28px;
    /* Para píldora de 32px */
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unit-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.3);
}

.unit-btn.active {
    background: var(--bg-panel) !important;
    color: var(--kore-blue) !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- BARRA DE HERRAMIENTAS REFINADA (SaaS Style) --- */

/* Tree Actions / Secondary Controls */
.tree-actions {
    display: flex;
    gap: 4px;
    padding: 2px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 32px;
    align-items: center;
    box-shadow: var(--shadow-sm);
    margin-right: 10px;
}

.btn-tree {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tree:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

.btn-tree.active {
    background-color: #f0f5ff !important;
    border-color: #cbd5e1 !important;
    color: #1e40af !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.dark-mode .btn-tree.active {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

.tree-sep {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 2px;
}

/* --- UNIFIED SAAS TOOLBAR (V3) --- */

/* Contenedor Principal */
.tools-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Separación clara entre grupos funcionales */
    width: 100%;
}

/* Grupo Funcional */
.tool-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ensure the first row (label or icon-toggle-group) has consistent height for alignment */
.tool-group>*:first-child {
    height: 32px;
    display: flex;
    align-items: center;
}

.tool-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-left: 2px;
}

/* COMPONENTE: Segmented Control (Píldora contenedora) */
.segmented-control {
    display: flex;
    background: var(--bg-hover);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
    height: 36px;
    gap: 2px;
}

/* Botones dentro del Segmented Control */
/* Pestañas (Tabs) con indicador animado */
.sc-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    height: 100%;
    cursor: pointer;
}

.sc-btn:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
}

.sc-btn.active {
    background: var(--kore-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sc-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

/* Iconos de barra lateral */
.sidebar-nav-item {
    transition: all 0.2s ease;
}

.sidebar-nav-item:hover {
    background: var(--bg-hover);
}

.sidebar-nav-item:hover svg {
    transform: scale(1.1);
    color: var(--kore-blue);
}

/* COMPONENTE: Tool Button (Icono suelto) */
.tool-btn {
    width: 36px;
    height: 100%;
    /* Llenar altura del segmented control */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tool-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    transform: translateY(-1px);
}

.tool-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Separador Vertical */
.tool-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
    align-self: center;
}

/* --- PALETA SEMÁNTICA (Active States) --- */
/* View Mode */
#btnViewGrid.active,
#btnViewDash.active {
    color: var(--kore-blue);
}

/* Data Tools */
#btnBreakdown.active {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* Blue */
#btnTrend.active {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

/* Violet */
#btnWeight.active {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

/* Orange */
#btnFX.active {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

/* Emerald */
#btnFocus.active {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}

/* Rose */

/* Analysis Tools */
#btnVisual.active {
    background: #ecfeff;
    color: #0e7490;
    border-color: #a5f3fc;
}

/* Cyan */
#btnSimulate.active {
    background: #fdf4ff;
    color: #a21caf;
    border-color: #f0abfc;
}

/* Fuchsia */

/* --- ANALYSIS TOOLS MICRO-INTERACTIONS --- */

/* 1. Visual Explorer (🗺️) -> Vibrant Blue + Squares Breathing */
#btnVisual svg rect {
    transform-origin: center;
    transition: transform 0.3s ease;
}

#btnVisual:hover svg {
    color: #3b82f6 !important;
    /* Bright Blue */
}

/* Staggered breathing effect */
#btnVisual:hover svg rect:nth-child(1) {
    animation: expandSquare 0.8s infinite alternate ease-in-out;
}

#btnVisual:hover svg rect:nth-child(2) {
    animation: expandSquare 0.8s infinite alternate ease-in-out 0.1s;
}

#btnVisual:hover svg rect:nth-child(3) {
    animation: expandSquare 0.8s infinite alternate ease-in-out 0.2s;
}

#btnVisual:hover svg rect:nth-child(4) {
    animation: expandSquare 0.8s infinite alternate ease-in-out 0.3s;
}

/* 2. Bridge (📊) -> Indigo + Bars Growing */
#btnBridge svg path {
    transform-origin: bottom;
    /* Grow from bottom */
}

#btnBridge:hover svg {
    color: #6366f1 !important;
    /* Indigo */
}

/* Skip first path (baseline), animate the vertical bars (2,3,4,5) */
#btnBridge:hover svg path:nth-child(n+2) {
    animation: growBar 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#btnBridge:hover svg path:nth-child(2) {
    animation-delay: 0ms;
}

#btnBridge:hover svg path:nth-child(3) {
    animation-delay: 100ms;
}

#btnBridge:hover svg path:nth-child(4) {
    animation-delay: 200ms;
}

#btnBridge:hover svg path:nth-child(5) {
    animation-delay: 300ms;
}

/* 3. Sankey (🌊) -> Ocean Blue + River Flow */
#btnSankey svg {
    transition: transform 0.3s, color 0.3s;
}

#btnSankey:hover svg {
    color: #0ea5e9 !important;
    /* Ocean Blue */
}

/* Animate the inner curved paths to simulate flow */
#btnSankey svg path:nth-child(n+2) {
    stroke-dasharray: 4 2;
    /* Small dashes */
}

#btnSankey:hover svg path:nth-child(n+2) {
    animation: flowRiver 1s linear infinite;
}

/* 4. Simulator (🔮) -> Violet + Crystal Ball Subtle Glow */
#btnSimulate:hover svg {
    color: #8b5cf6 !important;
    /* Violet */
}

#btnSimulate:hover svg circle:first-child {
    animation: glowBallSubtle 2s ease-in-out infinite alternate;
}

/* 5. Executive Report (📋) -> Dark Kore Blue + Writing Effect */
#btnReport:hover svg {
    color: #0D347A !important;
    /* Kore Blue */
}

/* Lines that will "write" themselves */
#btnReport svg line,
#btnReport svg polyline:not(:nth-child(2)) {
    /* Exclude the checkbox/first polyline if any */
    stroke-dasharray: 12;
    stroke-dashoffset: 0;
}

#btnReport:hover svg line,
#btnReport:hover svg polyline:not(:nth-child(2)) {
    animation: writeLine 1.5s ease-in-out infinite;
}

/* 6. Add Reference (+/-) -> Dark Default, Red Active */
#btnToggleRef {
    color: var(--text-main) !important;
    /* Dark Default */
    transition: all 0.2s ease;
}

#btnToggleRef:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* When Active (Reference Mode ON): Turn Red and Transform to Minus */
#btnToggleRef.active {
    color: #f43f5e !important;
    /* Red */
    background: #fff1f2 !important;
    border-color: #fca5a5 !important;
}

/* Hide the vertical line to make it a Minus sign */
#btnToggleRef.active svg line:first-child {
    opacity: 0;
    transform: scale(0);
}

#btnToggleRef svg line {
    transition: all 0.2s ease;
    transform-origin: center;
}

/* --- KEYFRAMES --- */

@keyframes expandSquare {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.75);
    }
}

@keyframes growBar {
    0% {
        transform: scaleY(0.4);
        opacity: 0.7;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes flowRiver {
    from {
        stroke-dashoffset: 6;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes glowBall {
    0% {
        filter: drop-shadow(0 0 2px currentColor);
        fill: rgba(245, 158, 11, 0.1);
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 0 12px currentColor);
        fill: rgba(245, 158, 11, 0.6);
        transform: scale(1.05);
        /* Subtle pulse size */
    }
}

@keyframes writeLine {
    0% {
        stroke-dashoffset: 12;
        opacity: 0.5;
    }

    30% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* Dark Mode Adjustments */
body.dark-mode .segmented-control {
    background: #0f172a;
    border-color: #334155;
}

body.dark-mode .sc-btn.active {
    background: #1e293b;
    color: #60a5fa;
}

body.dark-mode #btnBreakdown.active {
    background: #172554;
    border-color: #1e40af;
    color: #93c5fd;
}

body.dark-mode #btnTrend.active {
    background: #2e1065;
    border-color: #5b21b6;
    color: #c4b5fd;
}

body.dark-mode #btnWeight.active {
    background: #431407;
    border-color: #9a3412;
    color: #fdba74;
}

body.dark-mode #btnFX.active {
    background: #064e3b;
    border-color: #065f46;
    color: #6ee7b7;
}

body.dark-mode #btnFocus.active {
    background: #881337;
    border-color: #9f1239;
    color: #fda4af;
}

.grouping-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px dashed var(--border);
    padding: 8px 10px 10px 10px;
    /* Standardized and compact */
    width: 100%;
    flex-wrap: wrap;
    margin-top: 0;
    overflow: visible;
    position: relative;
    z-index: 400;
    min-height: 52px;
    /* Consistency */
}

.view-preset-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-view-eyes {
    font-size: 0.9rem;
    padding: 0;
    border-radius: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: 0.2s;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    margin-right: 12px;
}

.btn-view-eyes:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.group-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-right: 4px;
}

.group-select {
    height: 36px;
    /* Standardized height */
    padding: 0 24px 0 12px;
    border-radius: 20px;
    /* Pill Shape */
    border: none;
    /* No border for a cleaner look */
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-hover);
    cursor: pointer;
    font-family: var(--font-main);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    max-width: 140px;
    transition: 0.2s;
    display: flex;
    align-items: center;
}

.group-select:hover:not(:disabled) {
    background: var(--border);
}

.group-separator {
    color: var(--border-strong);
    font-size: 0.8rem;
    margin: 0 2px;
}

.mini-reset.large {
    font-size: 0.9rem;
    padding: 0;
    border-radius: 6px;
    /* Square with rounded corners */
    background: var(--bg-panel);
    border: 1px solid var(--border);
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: 0.2s;
    box-shadow: var(--shadow-sm);
}

.mini-reset.large:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

/* SPECIAL HOVERS */
/* Botón Clear Groups (Rojo Clarito) */
#btnClearGroups:hover {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
}

/* Botón Default View (Azul Clarito) */
#btnDefaultView:hover {
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #2563eb !important;
}

/* AJUSTES PARA DARK MODE (Para que no te queden muy brillantes en modo oscuro) */
body.dark-mode #btnClearGroups:hover {
    background-color: #450a0a !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

body.dark-mode #btnDefaultView:hover {
    background-color: #172554 !important;
    border-color: #1e3a8a !important;
    color: #60a5fa !important;
}


.tree-actions {
    margin-left: auto;
    display: flex;
    gap: 2px;
    background: var(--bg-hover);
    padding: 2px;
    border-radius: 6px;
}

.btn-tree {
    width: 26px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
    padding: 0;
}

.btn-tree:hover {
    background: var(--bg-panel);
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#btnExpand:hover {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
}

body.dark-mode #btnExpand:hover {
    background-color: #064e3b !important;
    color: #34d399 !important;
}

#btnCollapse:hover {
    background-color: #fff7ed !important;
    color: #c2410c !important;
}

body.dark-mode #btnCollapse:hover {
    background-color: #431407 !important;
    color: #fdba74 !important;
}


/* --- TREE TOOLBAR HOVERS (Colores personalizados) --- */

/* Compact View (Gris Más Notorio) */
#btnCompact:hover {
    background-color: #e2e8f0 !important;
    /* <--- GRIS MÁS OSCURO */
    color: #0f172a !important;
    /* Texto más oscuro para contraste */
    border-color: #94a3b8 !important;
    /* Borde más definido */
}

/* Ajuste para Dark Mode (Un gris intermedio que resalte sobre el fondo negro) */
body.dark-mode #btnCompact:hover {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #64748b !important;
}

/* Smart Tooltips (Azul Clarito - Igual que Breakdown) */
#btnHover:hover {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
}

/* Dark Mode ajuste */
body.dark-mode #btnHover:hover {
    background-color: #0c4a6e !important;
    color: #38bdf8 !important;
    border-color: #075985 !important;
}

/* Show Description (Naranja Claro - Igual que Focus) */
#btnDetail:hover {
    background-color: #ffedd5 !important;
    color: #c2410c !important;
    border-color: #fdba74 !important;
}

/* Dark Mode ajuste */
body.dark-mode #btnDetail:hover {
    background-color: #7c2d12 !important;
    color: #fdba74 !important;
    border-color: #ea580c !important;
}

.kpi-card {
    /* FIX: AUTO WIDTH */
    width: auto;
    min-width: 240px;
    flex-shrink: 0;
    /* Evita que se encoja */
    margin-left: auto;
    /* Empuja a la derecha si hay espacio */
    margin-top: 20px;

    display: flex;
    align-items: center;
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--kore-blue);
    /* Borde lateral PRO */
    cursor: pointer;
    /* Indicar que es clickeable */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kpi-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: var(--kore-blue);
    border-left-color: var(--accent);
}

/* Dark Mode: Enhanced KPI Card Styling for Executive Report */
body.dark-mode .kpi-card {
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    border-color: rgba(71, 85, 105, 0.4) !important;
    border-left-color: #3b82f6 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .kpi-card:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    border-left-color: #60a5fa !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .kpi-val {
    color: #e2e8f0 !important;
}

body.dark-mode .kpi-val.blue {
    color: #60a5fa !important;
}

body.dark-mode .kpi-label,
body.dark-mode .kpi-currency,
body.dark-mode .kpi-unit {
    color: #94a3b8 !important;
}

body.dark-mode .kpi-section {
    background: transparent !important;
}

/* 1. CORRECCIÓN DE ALTURA (CRÍTICO PARA QUE NO SE ROMPA) */
.tm-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100% !important;
    /* <--- CAMBIO: De 'auto' a '100%' */
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--bg-panel);
    border: 1px solid var(--border);
}

/* DASHBOARD ADVANCED METRICS */
.dash-combo-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.dash-sep {
    color: var(--border-strong);
    font-weight: 300;
    margin: 0 10px;
    font-size: 1.4rem;
    opacity: 0.6;
}

.dash-secondary-val {
    color: var(--text-muted);
    font-size: 0.85em;
    font-weight: 600;
}

.pulse-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-hover);
    margin-left: 8px;
    font-size: 1rem;
    vertical-align: middle;
}

.dash-label-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
}



.kpi-section {
    padding: 4px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* text-align handled by inline styles or specific classes */
}

.kpi-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
}

.kpi-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.kpi-currency {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-right: 3px;
    white-space: nowrap;
}

.kpi-unit {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 4px;
    vertical-align: baseline;
    white-space: nowrap;
}

.kpi-val {
    font-family: var(--font-num);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.kpi-val.blue {
    color: var(--kore-blue);
}

.kpi-pill {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
    display: inline-block;
}

.p-pos {
    background: var(--good-bg);
    color: var(--good-text);
}

.p-neg {
    background: var(--bad-bg);
    color: var(--bad-text);
}

.c-neg {
    color: var(--bad-text) !important;
}

.c-pos {
    color: var(--good-text) !important;
}

/* Botón de Reporte Circular (Dentro de la cápsula) */
.btn-report-circle {
    width: 26px;
    /* Más pequeño y compacto */
    height: 26px;
    border-radius: 50%;
    background: var(--kore-blue);
    border: 2px solid white;
    /* Borde blanco para separarlo del fondo gris */
    color: white;
    font-size: 0.75rem;
    /* Icono ajustado al nuevo tamaño */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Sombra base muy suave */
    box-shadow: 0 1px 2px rgba(13, 52, 122, 0.2);
    /* Transición más suave */
    transition: all 0.2s ease-in-out;
}

/* Efecto Hover Sutil */
.btn-report-circle:hover {
    /* Ya no usamos scale() para no ser grotescos */
    background: #3b82f6;
    /* Un azul ligeramente más brillante */
    /* Aumentamos un poco la sombra y lo levantamos 1px para dar sensación de "clickeable" */
    box-shadow: 0 2px 4px rgba(13, 52, 122, 0.3);
    transform: translateY(-1px);
    /* Elevación mínima elegante */
}

/* PERSISTENT SIM BADGE (Estilo Notificación Flotante) */
#globalSimBadge {
    display: none;
    position: absolute;
    top: -8px;
    right: 35px;
    z-index: 50;

    animation: pulse 2s infinite;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;

    width: 20px;
    height: 20px;
    border-radius: 50%;

    /* CENTRADO PERFECTO DEL EMOJI */
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 0.75rem;

    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
    cursor: help;
    pointer-events: auto;
}

.view-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.table-area {
    flex: 1;
    overflow: auto;
    background: var(--bg-panel);
    position: relative;
    scroll-behavior: smooth;
}

table {
    width: 100%;
    /* Restore Full Width */
    table-layout: fixed;
    /* STABILIZATION: Prevent jumping */
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1000px;
}

/* CUSTOM COLUMN WIDTHS */
.col-name {
    width: 35%;
    /* Restored User Preferred Width */
    min-width: 300px;
}

/* .col-view REMOVED */

/* Fixed width for View column */
.col-metric {
    width: 110px;
}

/* Fixed width for Scenarios, Variance */
.col-aux {
    width: 90px;
}

/* Fixed width for Avg Cost, Weight, Trend */
.col-trend {
    width: 60px;
}

thead {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Efecto Hielo */
    background: rgba(241, 245, 249, 0.4);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

body.dark-mode thead {
    background: rgba(30, 41, 59, 0.6);
}

th {
    text-align: left;
    padding: 14px 15px 13px 15px;
    /* Increased padding for spacious design */
    /* Adjusted for 2px border */
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--border);
    /* Stable width */
    border-top: 1px solid var(--border);
    user-select: none;
}

th:first-child,
td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: inherit;
    border-right: 1px solid var(--border);
    /* width: 1%; REMOVED for Fixed Layout */
    white-space: nowrap;
    /* max-width: 450px; REMOVED to prevent conflict with 35% width */
    overflow: hidden;
    text-overflow: ellipsis;
}

th:first-child {
    z-index: 21;
}

td:first-child {
    background: var(--bg-panel);
}

tr:hover td {
    background: var(--bg-hover);
}

th.num {
    text-align: right;
}

th.sortable {
    cursor: pointer;
    transition: color 0.2s;
}

th.sortable:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

th.active-sort {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

td {
    padding: 6px 15px;
    border-bottom: 1px solid var(--bg-hover);
    color: var(--text-main);
    vertical-align: middle;
    font-size: 0.7rem;
    white-space: nowrap;
    font-weight: 500;
    position: relative;
    transition: background 0.1s;
}

.bar-container {
    position: absolute;
    top: 3px;
    bottom: 3px;
    right: 0;
    z-index: 0;
    pointer-events: none;
    transition: width 0.3s;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.cell-content {
    position: relative;
    z-index: 1;
}

.row-root td {
    background: var(--bg-sidebar);
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--kore-blue);
}

.indent-0 {
    padding-left: 20px !important;
    color: var(--kore-blue);
    font-weight: 800;
}

.indent-1 {
    padding-left: 45px !important;
    font-weight: 700;
    color: var(--text-main);
}

.indent-2 {
    padding-left: 70px !important;
    font-weight: 600;
    color: var(--text-muted);
}

.indent-3 {
    padding-left: 95px !important;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.9;
}

/* RESIZER HANDLE */
.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    cursor: col-resize;
    user-select: none;
    height: 100%;
    z-index: 100;
    transition: background 0.2s;
}

.resizer:hover,
.resizer.resizing {
    background-color: var(--kore-blue);
}

.indent-4 {
    padding-left: 120px !important;
}

.indent-5 {
    padding-left: 145px !important;
}

.chevron {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: transform 0.2s;
    font-weight: 800;
}

.chevron:hover {
    color: var(--accent);
}

.chevron.open {
    transform: rotate(90deg);
    color: var(--kore-blue);
}

.chevron.leaf {
    opacity: 0;
    cursor: default;
}

.val-col {
    font-family: var(--font-num);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: -0.3px;
    text-align: right;
}

.sub-col {
    color: var(--text-muted);
    font-size: 0.75rem;
    background: var(--bg-sidebar);
}

.hidden {
    display: none !important;
}

.others-row td {
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-body);
}

/* ROW SELECTION (Microscopic Zoom) */
tr:hover td {
    background-color: var(--bg-hover) !important;
    color: var(--kore-blue);
    cursor: default;
}

tr:hover td:first-child {
    box-shadow: inset 4px 0 0 var(--kore-blue) !important;
    background-color: var(--bg-hover) !important;
    color: var(--kore-blue) !important;
}

tr.selected-row td {
    background-color: var(--bg-select) !important;
    color: var(--kore-blue) !important;
    font-weight: 500 !important;
}

tr.selected-row td:first-child {
    background-color: var(--bg-select) !important;
    box-shadow: inset 6px 0 0 var(--kore-blue) !important;
    color: var(--kore-blue) !important;
    font-weight: 700 !important;
}

.visual-area {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: none;
    flex-direction: column;
    background: var(--bg-sidebar);
}

.visual-nav {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    height: 30px;
    padding-left: 4px;
}

.v-crumb {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    transition: 0.2s;
    box-shadow: var(--shadow-sm);
}

.v-crumb:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.v-crumb.active {
    background: var(--kore-blue);
    color: white;
    border-color: var(--kore-blue);
    cursor: default;
}

.v-sep {
    color: var(--border-strong);
}

.tm-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--bg-panel);
    border: 1px solid var(--border);
}

.tm-node {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-weight: 700;
    padding: 4px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.tm-node:hover {
    z-index: 10;
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: white;
}

.tm-label {
    font-size: 0.8rem;
    margin-bottom: 2px;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.tm-val {
    font-family: var(--font-num);
    font-size: 0.9rem;
    opacity: 0.95;
    pointer-events: none;
}

.tm-var {
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 1px 6px;
    border-radius: 8px;
    margin-top: 3px;
    pointer-events: none;
}

#dropOverlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 52, 122, 0.95);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    backdrop-filter: blur(4px);
}

#bridgeModal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 2000 !important;
    /* <--- CAMBIAR ESTO (Antes era 200) */
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal-card {
    background: var(--bg-panel);
    width: 90%;
    max-width: 1100px;
    height: 85%;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popIn 0.2s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes popIn {
    from {
        transform: scale(0.95);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-panel);
    /* Standardized to panel for better contrast */
}

.modal-title-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--kore-blue);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bridge-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-left: 12px;
    box-shadow: var(--shadow-sm);
}

.bridge-crumbs {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    gap: 6px;
}

.crumb {
    cursor: pointer;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    transition: 0.2s;
}

.crumb:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

.crumb.active {
    color: var(--text-main);
    cursor: default;
    font-weight: 800;
    pointer-events: none;
}

.crumb-sep {
    color: var(--border-strong);
    font-size: 0.7rem;
}

.modal-close {
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.2s;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.modal-close:hover {
    background: var(--bad-bg);
    color: var(--bad-text);
}

.bridge-content {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.bridge-chart-area {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* CAMBIO: Padding ajustado y min-height forzado */
    padding: 40px 15px 60px 13px;
    position: relative;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    width: 100%;
    min-height: 300px;
    /* <--- ESTO ARREGLA EL GRÁFICO APLASTADO */
}

.b-col {
    flex: 1 1 auto;
    margin: 0 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    min-width: 0;
    max-width: 140px;
    height: 100%;
    transition: 0.2s;
    cursor: pointer;
}

/* --- AUTO PROJECTION MODAL STYLES (Enforced) --- */
#projectionModal .modal-card {
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    background: var(--bg-panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
}

#projectionModal .modal-header {
    background: var(--bg-sidebar);
    /* Slightly distinct header */
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#projectionModal .modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

#projectionModal .modal-close {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-muted);
    line-height: 1;
    transition: 0.2s;
}

#projectionModal .modal-close:hover {
    color: var(--bad-text);
}

#projectionModal .fin-input {
    width: 100%;
    padding: 10px;
    font-size: 0.9rem;
    background: var(--bg-body);
}

#projectionModal .fin-input-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 800;
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.05em;
}

#projectionModal .fin-btn-primary {
    background: #020617;
    /* Dark elegant for Light Mode */
    color: white;
    border: 1px solid transparent;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    margin-top: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#projectionModal .fin-btn-primary:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Dark Mode Overrides for Modal */
body.dark-mode #projectionModal .fin-btn-primary {
    background: var(--kore-blue);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

body.dark-mode #projectionModal .fin-btn-primary:hover {
    background: var(--accent);
}

.b-col:hover {
    opacity: 0.9;
    transform: translateY(-4px);
}

.b-col.static {
    cursor: default;
    pointer-events: none;
}

.b-bar {
    width: 100%;
    border-radius: 4px;
    position: absolute;
    min-height: 4px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.b-bar.total {
    background: #0D347A !important;
}

.b-bar.inc {
    background: var(--bad-chart);
}

.b-bar.dec {
    background: var(--good-chart);
}

.b-val {
    position: absolute;
    width: 120px;
    left: 50%;
    margin-left: -60px;
    text-align: center;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    transition: top 0.5s ease;
    pointer-events: none;
    text-shadow: 0 1px 2px var(--bg-panel);
}

.b-label {
    position: absolute;
    bottom: -55px;
    width: 120px;
    left: 50%;
    margin-left: -60px;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word;
    pointer-events: none;
}

.drill-hint {
    display: none;
}

#reportModal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.report-paper {
    /* CAMBIO CLAVE 1: Altura automática */
    /* Esto elimina el espacio vacío abajo, la ventana se ajusta al contenido */
    height: auto !important;
    max-height: 90vh;
    /* Tope máximo para que no se salga de pantalla */

    width: 85vw;
    max-width: 1150px;
    background: var(--bg-body);
    border-radius: 16px;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Importante para bordes redondeados */
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border);
    margin: auto;
}

.rep-row-top {
    display: flex;
    /* SUBIMOS A 48% (Antes 45%) */
    flex: 0 0 48%;
    border-bottom: 1px dashed var(--border);
    min-height: 220px;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rep-header {
    background: #0D347A;
    /* Dark Kore Blue background for premium feel and readability */
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.rep-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rep-logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    /* Title now white for contrast against dark blue */
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.rep-context {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    /* Fix: Changed from white/transparent to muted for visibility */
    display: flex;
    align-items: center;
    gap: 8px;
}

.rep-close {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: 0.2s;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-hover);
}

.rep-close:hover {
    background: var(--bad-bg);
    color: var(--bad-text);
}

.rep-body {
    flex: 1;
    /* Ocupa todo el espacio vertical disponible */
    overflow-y: auto;
    /* Scroll solo si es necesario */
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--text-main);
}

.rep-card {
    flex: 1;
    /* Empuja para llenar el espacio */
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    /* Un poco de sombra extra para que destaque en el tamaño grande */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.rep-kpi-title {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.rep-kpi-flex {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 4px;
}

.rep-big-num {
    font-family: var(--font-num);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -1px;
}

.rep-meta-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.rep-var-row {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rep-ctx-row {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.rep-chart-row {
    display: flex;
    gap: 30px;
    margin-top: 15px;
    height: auto;
    min-height: 180px;
}

.rep-chart-main {
    flex: 1;
    border-right: 1px dashed var(--border);
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}

.rep-chart-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.rep-narrative {
    margin-top: auto !important;
    /* Truco: esto lo empuja al fondo si sobra espacio */
    padding: 16px 24px;
    flex-shrink: 0;
    /* No dejar que se aplaste */
}

.rep-narrative h3 {
    margin: 0 0 8px 0;
    font-size: 0.8rem;
    color: var(--kore-blue);
    text-transform: uppercase;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
}

.narrative-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-main);
    font-weight: 500;
}

.bridge-context-area {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0;
}

.ctx-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-hover);
    border: 1px solid var(--border-strong);
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.ctx-badge.clickable:hover {
    filter: brightness(0.95);
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* --- BRIDGE SWITCHER (PVM) --- */
.bridge-switcher-wrapper {
    display: flex;
    align-items: center;
}

.bridge-switcher {
    display: flex;
    background: var(--bg-hover);
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--border);
    gap: 2px;
}

.switcher-btn {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.switcher-btn svg {
    opacity: 0.5;
    transition: all 0.2s;
}

.switcher-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.switcher-btn.active {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.switcher-btn.active svg {
    opacity: 1;
    stroke: #000000;
}


#smartTooltip {
    position: fixed;
    z-index: 9999;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.2);
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    min-width: 260px;
    font-family: var(--font-main);
    backdrop-filter: blur(6px);
}

.st-header {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--kore-blue);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

.st-header-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.st-chart-area {
    height: 70px;
    width: 100%;
    margin-bottom: 6px;
    position: relative;
}

.st-chart-svg {
    width: 100%;
    height: 100%;
}

.st-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 12px;
}

.st-drivers {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.st-driver-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.st-driver-label {
    color: var(--text-muted);
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-driver-val {
    font-family: var(--font-num);
    font-weight: 700;
}

.st-sec-title {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
    margin-top: 8px;
}

/* --- SIMULATOR PANEL (PREMIUM MAKEOVER v2) --- */
#simulatorPanel {
    position: fixed;
    top: 0;
    right: -360px;
    width: 360px;
    /* Ancho cómodo */
    height: 100vh;
    background: var(--bg-body);
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

#simulatorPanel.open {
    right: 0;
}

/* Header Limpio (Fondo claro en vez de azul pesado) */
.sim-header {
    padding: 14px 20px;
    background: var(--bg-panel);
    color: var(--text-main);
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    min-height: 50px;
}

.sim-close {
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--text-muted);
    transition: 0.2s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.sim-close:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

/* Cuerpo Compacto y sin scroll horizontal */
.sim-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* FIX CLAVE */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sim-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    margin-bottom: 8px;
}

/* --- TARJETA DE FECHA (Versión Compacta & Integrada) --- */
.sim-date-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-hover);
    /* Fondo sutil (pista) */
    border: 1px solid transparent;
    /* Sin borde por defecto */
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.sim-date-card:hover {
    background: var(--bg-panel);
    border-color: var(--kore-blue);
    box-shadow: 0 2px 8px rgba(13, 52, 122, 0.08);
}

/* Clase nueva para el icono */
.sim-date-icon {
    font-size: 1.1rem;
    background: var(--bg-panel);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sim-date-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-bottom: 2px;
}

/* --- CONTENEDORES DE CONTROL --- */
.sim-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-panel);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s;
}

.sim-control:focus-within {
    border-color: var(--kore-blue);
}

.sim-control label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* --- INPUTS NUMÉRICOS MODERNOS --- */
.sim-number-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-family: var(--font-num);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
    background: var(--bg-body);
    color: var(--text-main);
    transition: all 0.2s ease;
}

.sim-number-input:focus {
    border-color: var(--kore-blue);
    box-shadow: 0 0 0 3px rgba(13, 52, 122, 0.15);
    background: var(--bg-panel);
}

/* --- SLIDER CUSTOMIZADO (PREMIUM) --- */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
    margin: 10px 0;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: var(--border-strong);
    border-radius: 4px;
}

input[type=range]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--kore-blue);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: var(--kore-blue);
    border-color: white;
}

/* --- TABS ESTILO "SEGMENTED CONTROL" (Estable, sin saltos) --- */
.sim-mode-switch {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--bg-hover);
    padding: 3px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: none;
    gap: 0;
}

.sim-mode-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 0.75rem;
    font-weight: 600;
    /* Peso constante */
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sim-mode-btn:hover {
    color: var(--text-main);
}

/* Estado Activo: Blanco Flotante (SIN CAMBIO DE GROSOR DE LETRA) */
.sim-mode-btn.active {
    background: var(--bg-panel);
    color: var(--kore-blue);

    /* Mantenemos el mismo peso (600) para evitar que el texto "salte" */
    font-weight: 600;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
    border: none;
}

/* --- FOOTER DE ESCENARIOS --- */
#savedScenariosSection {
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: linear-gradient(to bottom, transparent, var(--bg-hover));
    padding: 20px;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 0;
    width: calc(100% + 32px);
}


#exitPresentation {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(15, 23, 42, 0.9);
    color: white;
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
    backdrop-filter: blur(8px);
    opacity: 0.4;
}

#exitPresentation:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* --- CONTEXT MENU STYLING (PRO & COMPACT) --- */
/* --- SEARCH WRAPPER & CLEAR BUTTON (NUEVO) --- */
.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-box {
    padding-right: 30px !important;
}

/* Espacio para la X */
.btn-search-clear {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    cursor: pointer;
    display: none;
    /* Oculto por defecto */
    line-height: 1;
    padding: 0;
    transition: 0.2s;
}

.btn-search-clear:hover {
    color: white;
}

/* --- CONTEXT MENU REFINADO (PRO STYLE) --- */
.ctx-menu {
    display: none;
    position: fixed;
    z-index: 10000;
    width: 220px;
    /* Un poco más ancho para que respire */
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    /* Bordes suaves */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.05);
    /* Sombra de lujo */
    padding: 6px 0;
    font-family: var(--font-main);
    animation: fadeInMenu 0.1s ease-out;
    overflow: hidden;
    /* Para respetar border-radius */
}

.ctx-header {
    padding: 8px 16px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--kore-blue);
    /* Color marca */
    background: var(--bg-sidebar);
    /* Fondo sutil para el header */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.ctx-item {
    padding: 9px 16px;
    /* Más altura de clic */
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.1s;
    font-weight: 500;
}

.ctx-item:hover {
    background: var(--bg-hover);
    color: var(--kore-blue);
}

/* Íconos SVG alineados */
.ctx-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    /* Para los emojis */
}

.svg-icon {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
}

/* Ítems Primarios (Destacados sutilmente) */
.ctx-item.primary {
    font-weight: 600;
}

/* Ítems Secundarios (Utilidades) - Menos opacidad */
.ctx-item.secondary {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ctx-item.secondary:hover {
    color: var(--text-main);
    /* Se oscurecen al pasar el mouse */
}

.ctx-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
    opacity: 0.6;
}


@keyframes fadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- DRILL DOWN MODAL & TABLE STYLES (CONSOLIDATED MASTER) --- */
#drillModal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    /* Fondo oscuro enfoque */
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.2s ease-out;
}

#drillTable {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-main);
    font-size: 11px;
    /* Tamaño optimizado V3 */
    table-layout: fixed;
    /* Mejora rendimiento y corte de texto */
}

/* HEADERS */
#drillTable thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-sidebar);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 6px;
    font-size: 10px;
    height: 24px;
    border-bottom: 2px solid var(--border-strong);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#drillTable thead th:hover {
    background: var(--bg-hover);
    color: var(--kore-blue);
}

/* CELDAS DE DATOS */
#drillTable tbody td {
    padding: 0 6px;
    height: 24px;
    /* Altura forzada compacta */
    line-height: 24px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* COLUMNA NUMÉRICA (Alineación Tabular) */
#drillTable td.num-cell {
    text-align: right;
    font-family: var(--font-main);
    /* Usar fuente normal para evitar bold falso */
    font-feature-settings: "tnum";
    /* Números tabulares alineados */
    font-weight: 400;
    color: var(--text-main);
}

/* ZEBRA STRIPING & HOVER */
#drillTable tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.02);
}

body.dark-mode #drillTable tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02);
}

#drillTable tbody tr:hover td {
    background-color: var(--bg-select) !important;
    color: var(--kore-blue) !important;
}

/* SEARCH INPUT DEL MODAL */
#drillSearchInput {
    color: var(--text-main) !important;
}

#drillSearchInput::placeholder {
    color: var(--text-muted) !important;
}

/* BOTÓN DE DESCARGA */
.btn-drill-download {
    background-color: var(--kore-blue);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(13, 52, 122, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-drill-download:hover {
    background-color: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 52, 122, 0.3);
}

/* --- RESIZABLE COLUMNS (Global) --- */

/* CAMBIO CLAVE: Quitamos "#drillTable" para que aplique a TODAS las tablas */
th {
    position: relative;
}

/* El "agarrador" invisible a la derecha */
.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    /* Zona de agarre */
    cursor: col-resize;
    user-select: none;
    height: 100%;
    z-index: 10;
}

/* Feedback visual al pasar el mouse o arrastrar */
.resizer:hover,
.resizing {
    background-color: var(--kore-blue);
    width: 4px;
    /* Se hace visible y un poco más grueso */
}

/* --- SPARKLINE (TREND) STYLES --- */
/* Por defecto la celda está oculta (display: none) para no ensuciar */
.spark-cell {
    display: none;
    width: 100px;
    padding: 2px 4px !important;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid var(--bg-hover);
}

/* Cuando el body tiene la clase .show-sparklines, mostramos las celdas */
body.show-sparklines .spark-cell {
    display: table-cell;
}

/* Estilo del SVG */
.spark-svg {
    width: 100%;
    height: 20px;
    overflow: visible;
    display: block;
}

.spark-line {
    fill: none;
    stroke: var(--kore-blue);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.spark-dot {
    fill: var(--kore-blue);
}

.spark-dot.start {
    fill: var(--text-muted);
    opacity: 0.5;
}

/* Ajuste del botón activo (ya usas .active en tu CSS, así que se verá azul/relleno) */
#btnSpark.active {
    background-color: var(--bg-panel);
    color: var(--kore-blue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-color: var(--border-strong);
}

/* --- BOTÓN SPARKLINE ACTIVO --- */
/* Cuando tiene la clase .active, le ponemos fondo azul */
#btnSpark.active {
    background-color: #dbeafe !important;
    /* Azul claro */
    color: #1e40af !important;
    /* Azul fuerte */
    border-color: #93c5fd !important;
    /* Borde azulado */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Ajuste para Dark Mode (para que no te queme los ojos de noche) */
body.dark-mode #btnSpark.active {
    background-color: #172554 !important;
    /* Azul oscuro fondo */
    color: #60a5fa !important;
    /* Azul claro texto */
    border-color: #1e40af !important;
}

/* --- SIMULATOR PANEL (PREMIUM MAKEOVER) --- */
#simulatorPanel {
    position: fixed;
    top: 0;
    right: -360px;
    /* Un poco más ancho para respirar */
    width: 360px;
    height: 100vh;
    background: var(--bg-body);
    /* Fondo base limpio */
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

#simulatorPanel.open {
    right: 0;
}

/* Header Limpio y Moderno */
.sim-header {
    padding: 20px 24px;
    background: var(--bg-panel);
    color: var(--text-main);
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 1.1rem;
}

.sim-close {
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--text-muted);
    transition: 0.2s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.sim-close:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

.sim-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sim-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Tarjetas de Control (Contenedores) */
.sim-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-panel);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s;
}

.sim-control:focus-within {
    border-color: var(--kore-blue);
    box-shadow: 0 4px 12px rgba(13, 52, 122, 0.08);
}

.sim-control label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Inputs Numéricos "Command Palette Style" */
.sim-number-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-family: var(--font-num);
    font-size: 0.95rem;
    text-align: right;
    background: var(--bg-body);
    color: var(--text-main);
    transition: all 0.2s ease;
    font-weight: 600;
}

.sim-number-input:focus {
    border-color: var(--kore-blue);
    box-shadow: 0 0 0 3px rgba(13, 52, 122, 0.15);
    background: var(--bg-panel);
}

.sim-number-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 400;
}

/* Selects Modernizados */
.select-modern {
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background-color: var(--bg-body);
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    appearance: none;
}

.select-modern:focus,
.select-modern:hover {
    border-color: var(--kore-blue);
    background-color: var(--bg-panel);
}

/* Tabs (Global / Rules / HC) */
.sim-mode-switch {
    display: flex;
    flex-direction: row;
    /* Forzar fila horizontal */
    align-items: center;
    background: var(--bg-sidebar);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    gap: 2px;
    /* Espacio mínimo entre botones */
}

.sim-mode-btn {
    flex: 1;
    /* Se reparten el espacio equitativamente */
    border: none;
    background: transparent;

    /* Ajuste clave: Menos padding y texto prohibido de saltar línea */
    padding: 6px 2px;
    white-space: nowrap;
    /* <--- ESTO EVITA EL SALTO DE LÍNEA */
    overflow: hidden;
    /* Si es muy largo, lo corta limpio */
    text-overflow: ellipsis;
    /* Pone "..." si no cabe */

    font-size: 0.75rem;
    /* Letra un pelín más compacta */
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;

    /* Centrado perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sim-mode-btn:hover {
    color: var(--text-main);
}

.sim-mode-btn.active {
    background: var(--bg-panel);
    color: var(--aleph-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}


/* Lista de Reglas (Rules List) */
.rule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 10px;
    padding-right: 4px;
}

.sim-rule-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.1s;
}

.sim-rule-card:hover {
    border-color: var(--aleph-blue);
    transform: translateX(2px);
}

.rule-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rule-val {
    font-weight: 800;
    color: var(--text-main);
    font-size: 0.85rem;
}

.rule-impact {
    font-family: var(--font-num);
    font-weight: 700;
}

.rule-del {
    cursor: pointer;
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-size: 1rem;
}

.rule-del:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* Footer Section (Snapshots) */
#savedScenariosSection {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 20px;
    background: linear-gradient(to bottom, transparent, var(--bg-hover));
    padding: 20px;

    /* AJUSTE DE MÁRGENES: */
    /* Solo estiramos a los lados (-24px), pero no abajo para no chocar con el borde */
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 0;

    /* Aseguramos que el ancho sea exacto para compensar los márgenes */
    width: calc(100% + 48px);
}

/* Botones de Acción (Run/Save) - Reutilizamos .btn-sim del CSS anterior pero mejorado */
.btn-sim {
    height: 40px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-sim.primary {
    background: var(--aleph-blue);
    color: white;
    box-shadow: 0 4px 10px rgba(13, 52, 122, 0.25);
}

.btn-sim.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(13, 52, 122, 0.35);
    filter: brightness(1.1);
}

.btn-sim.secondary {
    background: var(--bg-panel);
    border-color: var(--border-strong);
    color: var(--text-main);
}

.btn-sim.secondary:hover {
    border-color: var(--aleph-blue);
    color: var(--aleph-blue);
    background: var(--bg-hover);
}

.btn-sim.tertiary {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    box-shadow: none;
    height: 30px;
}

.btn-sim.tertiary:hover {
    color: var(--bad-text);
    background: rgba(239, 68, 68, 0.1);
}

/* --- WEIGHT (CONTRIBUTION) COLUMN --- */
.weight-cell {
    display: none;
    /* Oculto por defecto */
    width: 65px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    padding-right: 12px !important;
    border-left: 1px dashed var(--border);
    /* Separador sutil */
    vertical-align: middle;
}

/* Solo se muestra si activamos el modo */
body.show-weight .weight-cell {
    display: table-cell;
}

/* Estilos de la barrita visual */
.weight-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1;
}

.weight-bar-bg {
    margin-top: 2px;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    width: 100%;
    opacity: 0.5;
}

.weight-bar-fill {
    height: 100%;
    background: var(--text-muted);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Botón activo (le damos un color violeta suave para diferenciarlo del sparkline) */
#btnWeight.active {
    background-color: #f3e8ff !important;
    color: #7e22ce !important;
    border-color: #d8b4fe !important;
}

body.dark-mode #btnWeight.active {
    background-color: #3b0764 !important;
    color: #d8b4fe !important;
}

/* --- SIDEBAR RESIZER (FINO Y ELEGANTE) --- */
.sidebar {
    position: relative;
    /* Indispensable */
}

.sidebar-resizer {
    position: absolute;
    top: 0;
    bottom: 0;

    /* Ubicación y Grosor */
    right: 0;
    width: 4px;
    /* <--- Aquí reducimos el grosor (antes era 10px) */

    cursor: col-resize;
    z-index: 9999;

    /* Invisible por defecto */
    background: transparent;
    transition: background 0.2s ease;
}

/* Al pasar el mouse, se ilumina una línea fina azul */
.sidebar-resizer:hover,
.sidebar-resizer.resizing {
    background: var(--aleph-blue);
    opacity: 0.8;
}

/* Feedback visual al pasar el mouse */
.sidebar-resizer:hover,
.sidebar-resizer.resizing {
    background: rgba(13, 52, 122, 0.5);
    /* Un azul semitransparente para que lo veas claro */
}

/* --- PREDEFINED VIEWS MENU --- */
.view-preset-container {
    position: relative;
    display: inline-block;
    margin-right: 8px;
    /* Separación de los selectores */
}

.btn-view-preset {
    background: white;
    border: 1px solid var(--border);
    color: var(--aleph-blue);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-view-preset:hover {
    background: var(--bg-hover);
    border-color: var(--aleph-blue);
}

.view-dropdown {
    display: none;
    /* Oculto por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 180px;
    overflow: hidden;
}

.view-dropdown.open {
    display: block;
}

.view-option {
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--text-main);
    cursor: pointer;
    border-bottom: 1px solid var(--bg-body);
    transition: background 0.1s;
}

.view-option:last-child {
    border-bottom: none;
}

.view-option:hover {
    background: var(--bg-hover);
    color: var(--aleph-blue);
}

.view-option strong {
    display: block;
    margin-bottom: 2px;
}

.view-option span {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* --- DYNAMIC VIEWS MENU --- */
.view-preset-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;

    /* SOLUCIÓN AL PROBLEMA VISUAL: */
    /* Le damos un z-index alto al CONTENEDOR para que todo lo que salga de él (el menú) */
    /* viva en un plano superior al de la tabla (que suele tener z-index: 20) */
    z-index: 100;
}

.btn-view-eyes {
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    color: var(--text-muted);
}

.btn-view-eyes:hover {
    background: var(--bg-hover);
    color: var(--aleph-blue);
    transform: scale(1.1);
}

.view-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;

    /* Aseguramos que el menú también tenga prioridad */
    z-index: 200;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);

    min-width: 220px;
    overflow: hidden;
    animation: fadeInMenu 0.1s ease-out;
}

.view-dropdown-menu.open {
    display: block;
}

.view-menu-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--bg-hover);
    transition: background 0.1s;
}

.view-menu-item:last-child {
    border-bottom: none;
}

.view-menu-item:hover {
    background: var(--bg-hover);
}

.view-menu-header {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 8px 12px 4px 12px;
    font-weight: 800;
}

.view-menu-separator {
    height: 1px;
    background: var(--bg-hover);
    margin: 4px 0;
}

.view-delete-btn {
    opacity: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.8rem;
}

.view-menu-item:hover .view-delete-btn {
    opacity: 0.6;
}

.view-delete-btn:hover {
    opacity: 1 !important;
    background: #fee2e2;
    color: #ef4444;
}

.vm-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 2px;
}

.vm-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
}

/* Corrección para que no aparezcan cajas vacías entre selects */
.group-separator {
    display: inline-block;
    padding: 0 4px;
    color: var(--border-strong);
}

/* --- COMPACT MODE (HIGH DENSITY) - REFORZADO --- */
/* Usamos el ID de la tabla (#pivotTable) para ganar prioridad sobre otros estilos */
body.compact-view #pivotTable td,
body.compact-view #pivotTable th {
    padding: 0 2px !important;
    /* Padding al límite */
    height: 16px !important;
    /* Altura mínima absoluta */
    line-height: 16px !important;
    /* Ajuste de centrado */
    font-size: 10px !important;
    /* Letra minúscula legible */
    border-bottom-width: 0.5px !important;
    white-space: nowrap !important;
    /* Evitar saltos de línea que rompan la altura */
}

/* Ajustar los iconos de expansión para que no rompan la altura */
body.compact-view .chevron {
    font-size: 0.6rem;
    width: 10px;
    margin-right: 1px;
}

/* Reducir indentación al máximo para ganar espacio horizontal */
body.compact-view .indent-0 {
    padding-left: 2px !important;
}

body.compact-view .indent-1 {
    padding-left: 10px !important;
}

body.compact-view .indent-2 {
    padding-left: 18px !important;
}

body.compact-view .indent-3 {
    padding-left: 26px !important;
}

body.compact-view .indent-4 {
    padding-left: 34px !important;
}

body.compact-view .indent-5 {
    padding-left: 42px !important;
}

/* Removed specific #btnCompact.active to inherit global .btn-tree.active styles */

/* --- BOTÓN BASURA SIN BORDE --- */
.btn-trash-right {
    /* Empuja a la derecha */
    margin-left: auto;
    margin-right: 5px;

    /* Sin borde ni fondo base */
    background: transparent;
    border: none;
    /* <--- AQUÍ QUITAMOS EL BORDE */
    border-radius: 4px;

    color: var(--text-muted);
    /* Color gris suave por defecto */
    cursor: pointer;

    /* Tamaño compacto */
    padding: 0;
    height: 24px;
    width: 24px;
    font-size: 1rem;
    /* Tamaño del emoji */

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Efecto al pasar el mouse: se pone rojo con fondo suave */
.btn-trash-right:hover {
    color: #ef4444;
    /* Rojo alerta */
    background: #fef2f2;
    /* Fondo rojo muy pálido */
    transform: scale(1.1);
    /* Pequeño zoom para feedback */
}

/* Separador vertical */
.tree-sep {
    width: 1px;
    height: 18px;
    /* Un poco más alto para que se note la división */
    background: var(--border-strong);
    margin: 0 5px;
    /* Más aire a los costados */
    align-self: center;
    opacity: 0.4;
}

/* Botones de Texto (+1, -1) */
.btn-tree.text-icon {
    font-family: var(--font-num);
    font-weight: 800;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    /* Espacio ínfimo entre signo y número */
    font-size: 0.65rem;
    /* Tamaño del signo + o - */
}

/* El "1" chiquito */
.btn-tree.text-icon span {
    font-size: 0.5rem;
    /* <--- AQUÍ CAMBIAMOS EL TAMAÑO DEL 1 */
    opacity: 0.7;
    /* Un poco más suave */
    margin-top: 1px;
    /* Alineación óptica */
}

/* --- SIMULATOR COMPACT STYLES --- */
.sim-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    /* Scroll vertical permitido */
    overflow-x: hidden;
    /* <--- FIX: OCULTA EL SCROLL HORIZONTAL */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sim-desc {
    font-size: 0.75rem;
    margin-bottom: 15px;
}

.sim-control {
    padding: 12px;
}

.sim-control label {
    font-size: 0.7rem;
    margin-bottom: 6px;
    display: block;
}

/* Inputs más compactos */
.sim-number-input {
    height: 28px;
    font-size: 0.8rem;
    padding: 4px 8px;
}

.select-modern {
    height: 28px;
    font-size: 0.75rem;
    padding-top: 2px;
    padding-bottom: 2px;
}

.btn-action {
    font-size: 0.8rem;
}

/* Tarjetas de reglas más compactas */
.sim-rule-card {
    padding: 6px 8px;
    margin-bottom: 4px;
}

.rule-desc span {
    font-size: 0.7rem !important;
}

.rule-val {
    font-size: 0.75rem !important;
}

.rule-impact {
    font-size: 0.75rem !important;
}

/* --- FINTECH PREMIUM RF BUILDER --- */
.rf-builder-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 10px;
}

.rf-col-past,
.rf-col-future {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
}

.rf-col-past {
    background: #f8fafc;
}

body.dark-mode .rf-col-past {
    background: rgba(30, 41, 59, 0.4);
}

.rf-col-future {
    background: #f0f9ff;
    border-color: #bae6fd;
}

body.dark-mode .rf-col-future {
    background: rgba(7, 89, 133, 0.1);
    border-color: #075985;
}

.rf-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rf-col-future .rf-section-title {
    color: #0369a1;
}

.select-premium {
    width: 100%;
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-main);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

.select-premium:focus {
    outline: none;
    border-color: var(--kore-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

/* Mini Timeline */
.mini-timeline {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    justify-content: space-between;
}

.mt-box {
    flex: 1;
    height: 8px;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s ease;
}

.mt-box.solid {
    background: #94a3b8;
}

.mt-box.projected {
    background: transparent;
    border: 1.5px dashed #38bdf8;
}

.mt-box::after {
    content: attr(data-month);
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    color: var(--text-muted);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.mini-timeline:hover .mt-box::after {
    opacity: 1;
}

/* Premium Help Icon */
.help-icon-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: help;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.help-icon-premium:hover {
    background: #1d4ed8;
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

/* Tooltip Enhancements */
.kore-pnl-help-tooltip {
    font-family: var(--font-main);
    letter-spacing: -0.01em;
}

/* --- SIMULATION HIGHLIGHT (Highlight Changes) --- */

/* Light Mode: Amarillo muy suave */
tr.sim-row td {
    background-color: rgba(255, 251, 235, 0.8) !important;
    /* Amber-50 */
    box-shadow: inset 0 -1px 0 rgba(251, 191, 36, 0.2);
    /* Sutil borde inferior dorado */
}

/* La primera columna es sticky, necesita color sólido para tapar lo de abajo */
tr.sim-row td:first-child {
    background-color: #fffbeb !important;
    border-left: 3px solid #f59e0b !important;
    /* Borde izquierdo indicador */
}

/* Dark Mode: Marrón/Dorado muy oscuro */
body.dark-mode tr.sim-row td {
    background-color: rgba(69, 26, 3, 0.4) !important;
    /* Dark Amber tint */
    box-shadow: inset 0 -1px 0 rgba(180, 83, 9, 0.3);
}

body.dark-mode tr.sim-row td:first-child {
    background-color: #2a1805 !important;
    /* Fondo sólido oscuro */
    border-left: 3px solid #d97706 !important;
}

/* Mantener el hover y selección por encima del highlight para que se note la interacción */
tr.sim-row:hover td {
    background-color: var(--bg-hover) !important;
}

tr.selected-row.sim-row td {
    background-color: var(--bg-select) !important;
}

/* --- HEATMAP WEIGHT STYLES --- */
.tm-weight {
    display: none;
    /* Oculto por defecto */
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.2);
    /* Fondo oscuro sutil para contraste */
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 3px;
    pointer-events: none;
    line-height: 1.1;
}

/* Cuando el botón Weight está activo, mostramos la etiqueta */
body.show-weight .tm-weight {
    display: inline-block;
    animation: fadeIn 0.2s ease-out;
}

/* ==========================================================================
   ⚡ REPORT LAYOUT FINAL (ALINEADO & VISIBLE)
   ========================================================================== */

/* --- 1. ESTILOS DE PANTALLA (MODAL) --- */
#reportModal {
    position: fixed !important;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.report-paper {
    width: 98vw;
    max-width: 1800px;
    height: 95vh;
    max-height: 95vh;
    /* Fijo a la ventana */
    background: var(--bg-body);
    border-radius: 16px;
    border: 1px solid var(--border);
    margin: auto;

    zoom: 0.9;
    /* High resolution text */

    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    /* El contenedor principal sí corta */
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
}

/* HEADER */
.rep-header {
    flex: 0 0 auto;
    background: #0D347A;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.rep-logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rep-context {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.rep-icon-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 8px;
}

.rep-icon-btn:hover {
    background: white;
    color: #0D347A;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.rep-icon-btn svg {
    display: block;
}

/* ============================================
   CUERPO - COMPACT NO SCROLL
   ============================================ */
.rep-body {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
}

.rep-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 12px;
    overflow: hidden;
}

/* ============================================
   ROW 1: KPI + BRIDGE + TREND (3 COLUMNS)
   ============================================ */
.rep-row-top {
    display: flex;
    flex: 0 0 55%;
    gap: 12px;
    min-height: 0;
}


.rep-col-kpi {
    width: 15%;
    /* Aumentado de 12% a 15% */
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    /* Reducido un poco padding lateral */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* CENTRADO HORIZONTAL */
    text-align: center;
    /* CENTRADO DE TEXTO */
    position: relative;
    overflow: hidden;
}

/* Decoración KPI: Barra inferior simétrica */
.rep-col-kpi::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    /* Barra inferior */
    background: var(--aleph-blue);
    opacity: 0.8;
}

.rep-kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 6px;
}

.rep-kpi-value {
    font-size: 1.25rem;
    /* Reducido de 1.4rem para que entre el numero largo */
    font-weight: 800;
    color: var(--aleph-blue);
    line-height: 1.1;
    margin-bottom: 6px;
    font-feature-settings: "tnum";
    font-family: var(--font-num);
    white-space: nowrap;
    /* Evita que rompa raro y mejor que se escale si fuera svg, pero texto normal: mejor nowrap y confiar en el ancho */
}

.rep-kpi-sub {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centrado */
    gap: 4px;
}

/* Auto-Draft Button */
.btn-auto-draft {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px;
    transition: transform 0.2s;
    outline: none;
}

.btn-auto-draft:hover {
    transform: scale(1.2) rotate(10deg);
}

.rep-col-bridge {
    width: 53%;
    /* Reducido de 55% a 53% */
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    position: relative;
    display: flex;
    align-items: center;
}

#repBridgeContainer {
    width: 100%;
    height: 100%;
}

.rep-col-trend {
    width: 32%;
    /* Reducido de 33% a 32% */
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

#repSideChart {
    flex: 1;
    width: 100%;
    min-height: 100px;
    display: block;
    overflow: visible !important;
}

#repSideChart svg {
    overflow: visible !important;
    width: 100%;
    height: 100%;
}

/* ============================================
   ROW 2: DRIVERS + NARRATIVE (SPLIT)
   ============================================ */
.rep-row-split {
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
}

/* LEFT: DRIVERS TABLES */
.rep-col-drivers {
    width: 55%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: row;
    gap: 24px;
    overflow-y: auto;
}

/* RIGHT: NARRATIVE COLUMN */
.rep-col-narrative {
    width: 45%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rep-col-narrative h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--aleph-blue);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Narrative Text Content */
.narrative-content {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-main);
}

/* ============================================
   ROW 3: EXECUTIVE SUMMARY (FULL WIDTH)
   ============================================ */
.rep-row-bot {
    display: flex;
    flex: 0 0 auto;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    min-height: 0;
    flex-direction: column;
}

.rep-row-bot .exec-summary-section {
    width: 100%;
}

/* Executive Summary Inputs */
.exec-summary-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.exec-summary-section label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

#repExecutiveInput {
    width: 100%;
    min-height: 100px;

    /* Premium Border with Left Accent */
    border: 1px solid var(--border);
    border-left: 3px solid var(--aleph-blue);
    border-radius: 0 6px 6px 0;

    /* Subtle Background */
    background: #f8fafc;

    /* Typography */
    font-family: var(--font-main);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-main);

    /* Spacing */
    padding: 10px 12px;
    box-sizing: border-box;
    resize: none;

    /* Interaction */
    transition: all 0.2s ease;
}

#repExecutiveInput:focus {
    border-color: var(--aleph-blue);
    border-left-width: 4px;
    background: white;
    box-shadow: 0 2px 8px rgba(13, 52, 122, 0.1);
    outline: none;
}

#repExecutiveInput::placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* Dark Mode */
body.dark-mode #repExecutiveInput {
    background: rgba(30, 41, 59, 0.5);
    border-color: #334155;
    border-left-color: var(--aleph-blue);
    color: #f1f5f9;
}

body.dark-mode #repExecutiveInput:focus {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rep-narrative h3 {
    margin: 0 0 4px 0;
    font-size: 0.75rem;
    color: var(--aleph-blue);
    text-transform: uppercase;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
}

.narrative-content {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-main);
    font-weight: 500;
}

/* IMPRESIÓN */
.rep-print {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    margin-right: 10px;
    transition: 0.2s;
    color: var(--text-main);
}

.rep-print:hover {
    background: var(--bg-select);
    color: var(--kore-blue);
    border-color: var(--kore-blue);
}

/* --- ESTILOS DE IMPRESIÓN (SIN HUECOS - FLUJO NATURAL) --- */
@media print {
    @page {
        size: landscape;
        margin: 0mm;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: white;
        overflow: hidden !important;
    }

    body * {
        visibility: hidden;
    }

    #reportModal,
    #reportModal * {
        visibility: visible;
    }

    #reportModal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: white !important;
        display: block !important;
        padding: 0 !important;
    }

    .report-paper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;

        padding: 10mm 15mm !important;
        zoom: 0.70 !important;

        display: flex !important;
        flex-direction: column !important;
        /* IMPORTANTE: Flex Start pega todo arriba */
        justify-content: flex-start !important;

        /* Gap de 8px: Suficiente para separar, pequeño para no dejar huecos */
        gap: 8px !important;
    }

    .rep-header {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        border-bottom: 3px solid var(--aleph-blue) !important;
        padding: 0 0 8px 0 !important;
        margin-bottom: 0 !important;
        flex: 0 0 auto !important;
    }

    .rep-logo {
        color: #000 !important;
    }

    .rep-context {
        color: #666 !important;
    }

    .rep-close,
    .rep-print {
        display: none !important;
    }

    /* FILA 1: BRIDGE (Altura Auto) */
    .rep-row-top {
        flex: 0 0 auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
        border-bottom: 1px dashed #ccc !important;
        padding-bottom: 8px !important;
    }

    #repBridgeContainer {
        min-height: 250px !important;
        /* Altura mínima segura */
        height: auto !important;
        display: block !important;
    }

    /* FILA 2: TREND & TABLAS (Altura Auto) */
    .rep-row-bot {
        flex: 0 0 auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    .rep-col-drivers,
    .rep-col-trend {
        height: auto !important;
        padding-top: 5px !important;
    }

    .rep-col-drivers {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    /* FOOTER: HIGHLIGHTS - COMPACT FOR PRINT */
    .rep-narrative {
        background: #f9fafb !important;
        border: 1px solid #ddd !important;
        border-left: 3px solid var(--aleph-blue) !important;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        padding: 6px 12px !important;
        page-break-inside: avoid !important;
    }

    .rep-narrative h3 {
        font-size: 0.6rem !important;
        margin-bottom: 4px !important;
    }

    #repNarrativeText {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
    }

    /* EXECUTIVE SUMMARY - COMPACT PRINT STYLE */
    .exec-summary-section {
        margin-top: 6px !important;
        padding-top: 6px !important;
        border-top: 1px dashed #ccc !important;
    }

    .exec-summary-section>div:first-child {
        display: none !important;
        /* Hide label row in print */
    }

    #repExecutiveInput {
        min-height: auto !important;
        height: auto !important;
        padding: 8px 10px !important;
        font-size: 0.65rem !important;
        line-height: 1.4 !important;
        border: none !important;
        border-left: 3px solid var(--aleph-blue) !important;
        background: #f0f9ff !important;
        resize: none !important;
        white-space: pre-wrap !important;
    }

    #repExecutiveInput::placeholder {
        display: none !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}


/* --- INDICADOR DE NOTA (ESTILO EXCEL SUTIL) --- */
td.has-note {
    position: relative;
    /* Necesario para posicionar el triángulo */
}

td.has-note::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    /* El triángulo se forma con bordes transparentes y uno coloreado */
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-top: 6px solid #f59e0b;
    /* Naranja Ámbar (Sutil pero visible) */
    pointer-events: none;
    /* Para que no interfiera con el clic */
}

/* Opción para Dark Mode (Opcional, el naranja suele verse bien en ambos) */
body.dark-mode td.has-note::after {
    border-top-color: #fbbf24;
    /* Un amarillo más brillante para fondo oscuro */
}

#noteInput:focus {
    border-color: var(--aleph-blue) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    /* Resplandor azul muy suave */
}

/* --- BOTÓN FX ACTIVO (VERDE) --- */
#btnFX.active {
    background-color: #dcfce7 !important;
    /* Verde suave */
    color: #15803d !important;
    /* Verde oscuro texto */
    border-color: #86efac !important;
    /* Borde verde */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Ajuste para Dark Mode */
body.dark-mode #btnFX.active {
    background-color: #064e3b !important;
    /* Verde oscuro fondo */
    color: #34d399 !important;
    /* Verde claro texto */
    border-color: #059669 !important;
}

/* --- ALINEACIÓN NUMÉRICA PROFESIONAL (SaaS Standard) --- */
.val-col,
.kpi-val,
.tm-val,
.b-val,
.num-cell,
.rep-big-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
    /* Un pelín más apretado para números grandes */
}

/* --- TOAST NOTIFICATIONS (Modern SaaS Style) --- */
/* --- TOAST NOTIFICATIONS (Centered Bottom) --- */
#toastContainer,
.toast-container {
    top: auto !important;
    /* Anular top */
    right: auto !important;
    /* Anular right */
    left: 50% !important;
    /* Centrar horizontal */
    bottom: 30px !important;
    /* Pegado al suelo */
    transform: translateX(-50%) !important;
    /* Ajuste fino de centro */

    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    /* Los nuevos empujan a los viejos hacia arriba */
    align-items: center;
    /* Centrar items */
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    /* Sombra más fuerte */
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 300px;
    justify-content: center;
    animation: toastSlideIn 0.3s forwards;
    /* Use new animation */
}

.toast.error {
    background: rgba(127, 29, 29, 0.95);
    border-color: rgba(248, 113, 113, 0.3);
}

.toast.success {
    background: rgba(6, 78, 59, 0.95);
    border-color: rgba(52, 211, 153, 0.3);
}

/* 2. NUEVA ANIMACIÓN DE ENTRADA (Desde abajo) */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        /* Entra desde abajo */
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 3. NUEVA ANIMACIÓN DE SALIDA (Hacia abajo) */
@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        /* Se va hacia abajo */
    }
}

/* --- MODERN SIMULATOR UI --- */

/* Lista de Escenarios: Estilo Tarjeta Limpia */
.scen-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 8px;
    /* Bordes más redondeados */
    transition: all 0.2s ease;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.scen-card:hover {
    border-color: var(--aleph-blue);
    transform: translateX(2px);
    /* Pequeño movimiento a la derecha */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.logo-text {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--zen-text-main);
    line-height: 1;
}

.tagline-text {
    font-size: 13px;
    font-weight: 300;
    color: #64748b;
    font-style: italic;
    margin-left: 12px;
}

.pnl-row-italic {
    font-style: italic !important;
    color: #64748b !important;
}

.status-val-mono {
    color: var(--zen-text-main);
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 11px;
}

.scen-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}

.scen-delete {
    opacity: 0.4;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
    border-radius: 4px;
    transition: 0.2s;
}

.scen-delete:hover {
    opacity: 1;
    background: #fee2e2;
    /* Fondo rojo suave */
    color: #ef4444;
}

/* Botonera: Grid Layout (Más moderno que flex row) */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Columna izq chica, derecha grande */
    gap: 8px;
    margin-top: 15px;
}

/* Botones Modernos */
.btn-sim {
    height: 36px;
    border-radius: 8px;
    /* Más redondeado = más moderno */
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

/* Estilo Primario (RUN) */
.btn-sim.primary {
    background: var(--aleph-blue);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(13, 52, 122, 0.2);
}

.btn-sim.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -2px rgba(13, 52, 122, 0.3);
    filter: brightness(1.1);
}

/* Estilo Secundario (SAVE) */
.btn-sim.secondary {
    background: var(--bg-body);
    border-color: var(--border-strong);
    color: var(--text-main);
}

.btn-sim.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--aleph-blue);
    color: var(--aleph-blue);
}

/* Estilo Terciario (RESET) - Minimalista */
.btn-sim.tertiary {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.btn-sim.tertiary:hover {
    color: var(--bad-text);
    /* Rojo al pasar el mouse (peligro) */
    background: var(--bad-bg);
}

/* --- MAPPER MODAL STYLES --- */
.map-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-panel);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: 0.2s;
}

.map-row:hover {
    border-color: var(--aleph-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.map-col-left {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.map-required-badge {
    font-size: 0.6rem;
    color: var(--bad-text);
    background: var(--bad-bg);
    padding: 1px 4px;
    border-radius: 4px;
    width: fit-content;
    margin-bottom: 2px;
}

.map-arrow {
    color: var(--text-muted);
    font-size: 1.2rem;
}

.map-col-right {
    flex: 1.2;
}

/* Highlight para cuando el sistema "adivina" el match */
.map-auto-match {
    border-left: 3px solid var(--good-chart);
}

/* --- GOAL SEEK STYLES --- */
.sim-sub-tabs {
    display: flex;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 2px;
}

.sim-sub-tab {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
}

.sim-sub-tab.active {
    background: var(--bg-panel);
    /* O un color de acento suave */
    color: var(--aleph-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 800;
}

.goal-card {
    background: linear-gradient(to bottom right, var(--bg-panel), var(--bg-hover));
    border: 1px solid var(--aleph-blue);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(13, 52, 122, 0.08);
}

.goal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}

.goal-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.goal-input {
    width: 100%;
    padding: 10px 12px;
    padding-left: 24px;
    /* Espacio para el signo $ */
    font-family: var(--font-num);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--aleph-blue);
    border: 2px solid var(--border-strong);
    border-radius: 8px;
    outline: none;
    transition: 0.2s;
}

.goal-input:focus {
    border-color: var(--aleph-blue);
    background: white;
}

.goal-prefix {
    position: absolute;
    left: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

.goal-gap-badge {
    background: var(--bg-body);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--border);
}

.btn-apply-goal {
    background: var(--aleph-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0.5;
    /* Deshabilitado por defecto */
    pointer-events: none;
}

.btn-apply-goal.ready {
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 4px 10px rgba(13, 52, 122, 0.3);
}

.btn-apply-goal.ready:hover {
    transform: translateY(-1px);
}

/* --- 🎨 PROFESSIONAL EMPTY STATE --- */
.empty-state-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    /* Fondo sutilmente elegante */
    background: radial-gradient(circle at center, var(--bg-hover) 0%, var(--bg-body) 70%);
    color: var(--text-muted);
    animation: fadeIn 0.6s ease-out;
    text-align: center;
    padding: 20px;
}

.es-icon-circle {
    width: 80px;
    height: 80px;
    background: var(--bg-panel);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
    margin-bottom: 25px;
    border: 1px solid var(--border);
}

.es-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.es-sub {
    font-size: 0.95rem;
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 35px;
    opacity: 0.8;
}

.es-btn {
    background: var(--aleph-blue);
    color: white;
    padding: 14px 35px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 20px -5px rgba(13, 52, 122, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.es-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(13, 52, 122, 0.4);
    filter: brightness(1.1);
}

.es-hint {
    margin-top: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- DASHBOARD (COCKPIT) STYLES - VERSION 2.0 --- */
#dashboardView {
    background-color: var(--bg-body);
    /* Fondo gris muy suave */
    padding: 30px;
    height: 100%;
    overflow-y: auto;
}

/* GRID SYSTEM "BENTO" STYLE */
.dash-grid-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.dash-grid-mid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* El gráfico ocupa 2/3, el Bridge 1/3 */
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
    /* Misma altura */
}

.dash-grid-bot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-bottom: 40px;
}

/* ESTILO DE TARJETA PREMIUM */
.dash-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    /* Más redondeado */
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.dash-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    border-color: var(--border-strong);
}

/* TYPOGRAPHY & ELEMENTS */
.dash-header {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.dash-big-num {
    font-family: var(--font-num);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.dash-sub-row {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: auto;
    /* Empuja hacia abajo si sobra espacio */
}

/* PILDORAS DE VARIANZA */
.dash-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    width: fit-content;
}

/* LISTAS DE RIESGOS/OPORTUNIDADES */
.dash-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dash-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-hover);
    font-size: 0.9rem;
}

.dash-item:last-child {
    border-bottom: none;
}

.dash-item-name {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65%;
}

.dash-item-val {
    font-family: var(--font-num);
    font-weight: 700;
}

.dash-sub-link {
    font-size: 0.65rem;
    color: var(--text-muted);
    padding-top: 2px;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    transition: all 0.2s;
}

.dash-sub-link:hover {
    color: var(--kore-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Ajuste sutil para que el card del dash se vea interactivo */
.dash-item:hover .dash-item-name {
    color: var(--kore-blue);
}

/* AJUSTES PARA EL GRÁFICO SVG */
#dashTrendChart svg {
    overflow: visible;
    /* Permite que las etiquetas salgan si es necesario */
}

/* --- MINI BRIDGE STYLES (CORREGIDO) --- */
#dashBridgeMini {
    /* Quitamos display:flex y align-items para que el SVG maneje la geometría */
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    /* Permitir que las etiquetas salgan si es necesario */
}

/* Puedes borrar las clases .d-bridge-col y .d-bridge-bar, ya no se usan */

/* RESPONSIVE */
@media (max-width: 1200px) {
    .dash-grid-top {
        grid-template-columns: 1fr 1fr;
    }

    .dash-grid-mid {
        grid-template-columns: 1fr;
    }

    .dash-grid-bot {
        grid-template-columns: 1fr;
    }
}

/* --- VIRTUAL SCROLL STYLES (PASO 3) --- */

/* 1. Altura fija estricta para filas y celdas */
#pivotTable tbody tr {
    height: 40px !important;
    max-height: 40px !important;
    display: table-row;
}

#pivotTable tbody td {
    height: 40px !important;
    max-height: 40px !important;
    padding: 0 10px;
    /* Padding horizontal solamente */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    line-height: 40px;
    /* Centrado vertical de texto */
}

/* 2. Espaciadores Invisibles (Simulan los miles de filas) */
.virtual-spacer-top,
.virtual-spacer-bottom {
    height: 0;
    pointer-events: none;
    visibility: hidden;
    border: none !important;
    padding: 0 !important;
}

/* 3. Ajuste del contenedor para aceleración de hardware */
.table-area {
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    will-change: transform, scroll-position;
    /* Turbo boost GPU */
}


/* --- VISUAL LAB STYLES (FINAL) --- */

/* 1. CORRECCIÓN DE ALTURA (CRÍTICO PARA QUE NO SE ROMPA) */
.tm-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: auto !important;
    /* Dejamos que flex controle la altura */
    min-height: 0;
    /* Permite que se encoja si falta espacio */
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--bg-panel);
    border: 1px solid var(--border);
}

/* 2. BARRA DE PESTAÑAS INTERNAS */
.visual-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.vis-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vis-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

.vis-tab-btn.active {
    background: var(--bg-select);
    color: var(--aleph-blue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 3. BARRA DE HERRAMIENTAS SCATTER */
.scatter-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-panel);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
    font-size: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.scat-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scat-label {
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.65rem;
}

.select-modern.compact {
    height: 26px;
    padding: 2px 20px 2px 8px;
    font-size: 0.75rem;
}

/* --- BUTTON TOGGLE AVG (STYLE) --- */
.btn-avg-toggle {
    background: transparent;
    border: 1px solid var(--border-strong);
    /* Borde sutil */
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    /* Tamaño compacto */
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    /* Para que no se seleccione el texto al hacer click */
}

.btn-avg-toggle:hover {
    color: var(--text-main);
    border-color: var(--aleph-blue);
}

/* Estado Activo (Encendido) */
.btn-avg-toggle.active {
    background: var(--bg-select);
    /* Fondo suave */
    color: var(--aleph-blue);
    /* Texto Azul */
    border-color: var(--aleph-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Ajuste (Para que se vea bien en negro) */
body.dark-mode .btn-avg-toggle.active {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: #60a5fa;
}

/* --- FIX SCROLL NOTAS DASHBOARD --- */
#dashNotesList {
    /* 1. Definimos la altura máxima. 
       Si las notas ocupan menos, se adapta. Si ocupan más, corta aquí. */
    max-height: 280px;

    /* 2. Activamos el scroll vertical automático */
    overflow-y: auto !important;

    /* 3. Un poco de aire a la derecha para que la barra no pegue con el texto */
    padding-right: 6px;
}

/* --- ESTILO DEL SCROLLBAR (Para que sea finito y elegante) --- */
#dashNotesList::-webkit-scrollbar {
    width: 5px;
    /* Grosor fino */
}

#dashNotesList::-webkit-scrollbar-track {
    background: transparent;
}

#dashNotesList::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    /* Color gris suave */
    border-radius: 10px;
    /* Bordes redondos */
}

#dashNotesList::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
    /* Un poco más oscuro al pasar el mouse */
}



/* --- Section Break --- */

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* --- Section Break --- */


/* Animación de apertura */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Estilos del Tooltip */
.kore-help-box {
    cursor: help;
    font-size: 0.55rem;
    color: #065f46;
    background: #ecfdf5;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #065f46;
    font-weight: 800;
    position: relative;
}

.kore-tooltip {
    display: none;
    /* OCULTO POR DEFECTO */
    position: absolute;
    bottom: 160%;
    left: 50%;
    transform: translateX(-80%);
    width: 190px;
    background-color: #1e293b;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.6rem;
    line-height: 1.3;
    z-index: 9999;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    font-weight: 400;
}

/* Triangulito del tooltip */
.kore-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 80%;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* MOSTRAR AL HOVER */
.kore-help-box:hover .kore-tooltip {
    display: block;
}

/* Tooltip Down Modification */
.kore-tooltip.tooltip-down {
    top: 150%;
    bottom: auto;
}

.kore-tooltip.tooltip-down::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #1e293b transparent;
}



/* --- Section Break --- */


/* Fondo oscuro pantalla completa */
#cmdPalette {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 11000;

    /* --- CAMBIO AQUÍ --- */
    align-items: center;
    /* Esto lo centra verticalmente */
    padding-top: 320px;
    /* Quitamos el espacio superior */
    /* ------------------- */

    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease-out;
    display: none;
    justify-content: center;
}

/* Scrollbar fino y elegante para la lista de resultados */
#cmdResults::-webkit-scrollbar {
    width: 6px;
}

#cmdResults::-webkit-scrollbar-track {
    background: transparent;
}

#cmdResults::-webkit-scrollbar-thumb {
    background-color: var(--border);
    /* Usa tu variable de borde */
    border-radius: 10px;
}

#cmdResults::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}

/* Ventana flotante */
.cmd-window {
    width: 600px;
    max-width: 90%;
    background: var(--bg-panel);
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 500px;
    animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Área del input */
.cmd-input-area {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    background: var(--bg-sidebar);
}

#cmdInput {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--text-main);
    font-family: inherit;
    outline: none;
    font-weight: 500;
}

/* Lista de resultados */
#cmdResults {
    overflow-y: auto;
    padding: 8px 0;
    max-height: 400px;
}

/* Items individuales */
.cmd-item {
    padding: 10px 20px;
    margin: 0 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-main);
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.cmd-item:hover,
.cmd-item.selected {
    background: var(--bg-hover);
    border-left-color: var(--aleph-blue);
}

/* Cabeceras de categoría */
.cmd-cat-header {
    padding: 8px 20px 4px 20px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
    pointer-events: none;
}

/* Pie de ventana */
.cmd-footer {
    padding: 8px 16px;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.cmd-shortcut {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    padding: 2px 6px;
    border-radius: 4px;
}

@keyframes slideDown {
    from {
        transform: translateY(-15px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.aleph-text {
    font-size: 1.5rem;
    /* Texto un pelín más grande si no hay logo */
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    user-select: none;

    /* FLEXBOX PARA CENTRAR LA IMAGEN DENTRO */
    display: flex;
    align-items: center;
    /* Esto es clave para que no se vea "desencuadrado" */
    justify-content: flex-start;

    height: 100%;
    width: 100%;
    max-width: 180px;
    /* Permitimos más anchura */
}

.aleph-text:hover {
    opacity: 0.9;
}

/* Spinner de carga no intrusivo (Esquina superior derecha) */
body.calculating::after,
body.loading::after {
    content: "⚙️ Crunching numbers...";
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--aleph-blue);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.8;
    }
}

/* --- DASHBOARD (COCKPIT) STYLES --- */
.dash-grid-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.dash-grid-mid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    min-height: 280px;
}

.dash-grid-bot {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    min-height: 250px;
}

.dash-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--aleph-blue);
}

.dash-header {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.dash-big-num {
    font-family: var(--font-num);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}

.dash-sub-row {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: 500;
}

.dash-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 8px;
}

/* Lists */
.dash-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bg-hover);
    font-size: 0.9rem;
}

.dash-item:last-child {
    border-bottom: none;
}

.dash-item-name {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.dash-item-val {
    font-family: var(--font-num);
    font-weight: 700;
}

/* Mini Bridge CSS */
.d-bridge-col {
    flex: 1;
    margin: 0 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.d-bridge-bar {
    width: 100%;
    border-radius: 2px;
    min-height: 2px;
}

/* Responsive adjustments */
@media (max-width: 1000px) {

    .dash-grid-mid,
    .dash-grid-bot {
        grid-template-columns: 1fr;
    }
}

/* Legend Dots */
.dot-base {
    color: #94a3b8;
    font-size: 1.2rem;
    vertical-align: middle;
}

.dot-target {
    color: var(--aleph-blue);
    font-size: 1.2rem;
    vertical-align: middle;
}

/* --- HEADER FINAL CLEAN (Logo Izq - Botones Der) --- */

/* 1. Contenedor Flexible: Fuerza los extremos */
.logo-area {
    width: 100% !important;
    height: 60px !important;
    padding: 0 20px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* ESTO separa Izq de Der */

    background: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* 2. Logo anclado a la izquierda */
#appLogo {
    flex: 0 1 auto !important;
    margin: 0 !important;
    order: 1 !important;
}

/* 3. Grupo de Botones anclado a la derecha */
.header-controls {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    order: 2 !important;
    margin-left: auto !important;
    /* Doble seguridad para empujar a la derecha */
}

/* 4. BOTÓN DASHBOARD (INVISIBLE TOTAL) */
/* 4. BOTÓN DASHBOARD (MODERNO SVG - DARK THEME) */
/* 4. BOTÓN DASHBOARD (TRANSPARENT FLOATING ICON) */
/* Botón Dashboard Toggle - Estilo Fantasma */
#btnDashToggle {
    /* 1. Eliminar la "caja" */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    /* 2. Dimensiones y Alineación */
    padding: 0 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 3. Color del Icono */
    color: #94a3b8 !important;
    /* Slate 400 - Solid Modern Gray */
    cursor: pointer !important;
    transition: transform 0.2s, color 0.2s !important;
}

/* Estado Hover */
#btnDashToggle:hover {
    background: transparent !important;
    /* Asegurar que no aparezca fondo al pasar el mouse */
    color: #ffffff !important;
    /* Blanco brillante */
    transform: scale(1.1);
    /* Pequeño zoom elegante */
    box-shadow: none !important;
}

/* Duplicate removed */

/* NUCLEAR COLOR OVERRIDE FOR SVG */
#btnDashToggle svg {
    stroke: #94a3b8 !important;
    color: #94a3b8 !important;
}

/* 5. Botón Cerrar (Igual de limpio) */
.sidebar-toggle-close {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 1.5rem !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-toggle-close:hover {
    color: white !important;
    transform: translateX(2px);
}

/* --- CASH LAB STYLES --- */
.cl-metric {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.cl-metric:last-child {
    border-right: none;
}

.cl-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cl-val {
    font-family: var(--font-num);
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
}

.cl-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

#cashInput:focus {
    border-color: var(--aleph-blue);
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Estilos para el Tooltip de Ayuda */
.tooltip-content {
    visibility: hidden;
    opacity: 0;
    width: 200px;
    background-color: #1e293b;
    /* Azul muy oscuro ejecutivo */
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 1001;
    bottom: 150%;
    /* Aparece arriba del icono */
    left: 50%;
    transform: translateX(-85%);
    /* Ajuste para que no se salga del panel */
    transition: opacity 0.3s, transform 0.3s;
    font-size: 0.65rem;
    line-height: 1.3;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* Triangulito de la ventana */
.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 85%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Mostrar al pasar el mouse */
.tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-85%) translateY(-5px);
}

/* Estilos para el Tooltip de Kore */
.kore-help-box {
    position: relative;
}

.kore-tooltip {
    display: none;
    /* ESCONDIDO POR DEFECTO */
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    background-color: #1e293b;
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.6rem;
    line-height: 1.3;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Triangulito inferior */
.kore-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* SOLO SE MUESTRA AL PASAR EL MOUSE */
.kore-help-box:hover .kore-tooltip {
    display: block;
}

/* Tooltip Down Modification */
.kore-tooltip.tooltip-down {
    top: 150%;
    bottom: auto;
}

.kore-tooltip.tooltip-down::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #1e293b transparent;
}


/* --- MODERN FORMULA TOOLTIP (Cash Lab Style) --- */
.modern-help-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modern-help-content {
    visibility: hidden;
    opacity: 0;
    width: 340px;
    background: #1e293b;
    color: #f1f5f9;
    text-align: left;
    border-radius: 12px;
    padding: 20px;
    position: absolute;
    z-index: 999999;
    /* Max priority to avoid being behind anything */
    bottom: 180%;
    /* Higher up to avoid being "metido" */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
    font-family: 'Manrope', sans-serif;
}

.modern-help-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.modern-help-tooltip:hover .modern-help-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.m-help-header {
    color: #10b981;
    font-weight: 800;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.m-help-section {
    margin-bottom: 12px;
}

.m-help-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.m-help-text {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #cbd5e1;
}

.m-help-code {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.75rem;
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
    display: block;
    margin-top: 4px;
}

.m-help-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 12px 0;
}


/* ==========================================
   LANDING MODE - HIDE SIDEBAR
   ========================================== */
body.landing-mode .sidebar {
    display: none !important;
}

body.landing-mode #btnOpenSidebar {
    display: none !important;
}

body.landing-mode .main {
    margin-left: 0 !important;
}

/* ==========================================
   STYLES MIGRATED FROM INDEX.HTML <style>
   ========================================== */

/* --- EXPORT MENU GLASSMORPHISM (Critical Override) --- */
#exportMenu {
    display: none !important;
    position: fixed !important;
    z-index: 999999 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    min-width: 180px !important;
    padding: 8px !important;
    font-family: 'Manrope', -apple-system, sans-serif !important;
}

#exportMenu.open {
    display: block !important;
}

#exportMenu .export-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    width: 100% !important;
    transition: background-color 0.15s ease !important;
}

#exportMenu .export-option:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

#exportMenu .exp-icon {
    font-size: 1.1rem !important;
}

#exportMenu .exp-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

#exportMenu .export-option:hover .exp-title {
    color: #3b82f6 !important;
}

/* Dark Mode Export Menu */
body.dark-mode #exportMenu {
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode #exportMenu .exp-title {
    color: #f1f5f9 !important;
}

body.dark-mode #exportMenu .export-option:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

/* --- FINANCIAL ZEN: BENTO LANDING --- */
:root {
    --zen-bg: #F9FAFB;
    --zen-text-main: #0F172A;
    --zen-text-sec: #64748B;
    --zen-glass: rgba(255, 255, 255, 0.7);
    --zen-border: rgba(0, 0, 0, 0.05);
    --zen-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05);
    --zen-indigo: #6366f1;
}

body.dark-mode {
    --zen-bg: #0F172A;
    --zen-text-main: #F1F5F9;
    --zen-text-sec: #94A3B8;
    --zen-glass: rgba(30, 41, 59, 0.7);
    --zen-border: rgba(255, 255, 255, 0.08);
    --zen-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3);
}

.landing-page {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--zen-bg);
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
    transition: background 0.3s;
}

/* --- LANDING HEADER --- */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--zen-border);
    z-index: 100;
}

body.dark-mode .landing-header {
    background: rgba(15, 23, 42, 0.4);
}

.version-badge.tech {
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
}

.btn-ghost {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background 0.2s;
}

.btn-ghost:hover {
    background: var(--bg-hover);
}

/* --- V3 CARDS & EFFECTS --- */
.v3-import:hover {
    border-color: var(--zen-indigo);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15), var(--zen-shadow);
    transform: translateY(-4px) scale(1.01);
}

.bento-icon-main.indigo {
    color: var(--zen-indigo);
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}

.purple-accent {
    color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

.demo-card-v3:hover {
    border-color: #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), var(--zen-shadow);
}

/* --- STATUS BAR --- */
.landing-status-bar {
    position: fixed;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    background: var(--zen-glass);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 1px solid var(--zen-border);
    font-size: 0.75rem;
    color: var(--zen-text-sec);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
}

.status-dot.pulsing {
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.status-val {
    color: var(--zen-text-main);
}

.status-sep {
    opacity: 0.3;
}

/* --- DOCS MODAL --- */
.docs-modal {
    width: 400px !important;
    background: var(--zen-bg) !important;
    padding: 0 !important;
    overflow: hidden;
}

.docs-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--zen-border);
}

.docs-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--zen-text-main);
}

.close-docs {
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.5;
}

.docs-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.docs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--zen-text-sec);
}

.docs-row kbd {
    background: var(--bg-hover);
    border: 1px solid var(--zen-border);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--zen-text-main);
    font-size: 0.8rem;
    box-shadow: 0 2px 0 var(--zen-border);
}


body.dark-mode .landing-page {
    background-image: radial-gradient(#334155 1px, transparent 1px);
}

.landing-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(15, 23, 42, 0.03) 100%);
    pointer-events: none;
}

.landing-page.hidden {
    display: none !important;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    width: 700px;
    max-width: 90vw;
    z-index: 10;
    animation: bentoFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bentoFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.bento-card {
    background: var(--zen-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--zen-border);
    box-shadow: var(--zen-shadow);
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.1);
}

.main-drop-zone {
    grid-row: span 2;
    padding: 60px 40px;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.secondary-card {
    padding: 20px 24px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.bento-icon-main {
    color: var(--zen-indigo);
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.bento-card:hover .bento-icon-main {
    transform: translateY(-5px);
}

.bento-icon-small {
    color: var(--zen-text-sec);
    background: var(--bg-hover);
    padding: 10px;
    border-radius: 12px;
}

.bento-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--zen-text-main);
    letter-spacing: -0.025em;
    margin: 0 0 8px 0;
}

.bento-subtitle {
    font-size: 0.95rem;
    color: var(--zen-text-sec);
    margin: 0;
    line-height: 1.5;
}

.bento-title-small {
    font-size: 1rem;
    font-weight: 600;
    color: var(--zen-text-main);
    margin: 0;
}

.bento-subtitle-small {
    font-size: 0.8rem;
    color: var(--zen-text-sec);
    margin: 2px 0 0 0;
}

/* --- INTERLOCKING DRAG EFFECT --- */
.landing-page.drag-active .bento-card {
    opacity: 0.4;
    filter: grayscale(0.5) blur(1px);
    transform: scale(0.98);
}

.landing-page.drag-active .main-drop-zone {
    opacity: 1;
    filter: none;
    transform: scale(1.03);
    border: 2px dashed var(--zen-indigo);
    background: rgba(99, 102, 241, 0.04);
}

.landing-page.drag-active .bento-icon-main {
    animation: bounceZen 1s infinite ease-in-out;
}

@keyframes bounceZen {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* --- CUSTOM MODAL --- */
.custom-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.btn-tree.active {
    background-color: #2563eb !important;
    color: white !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
    border: 1px solid #1d4ed8;
}

.custom-modal-overlay.hidden {
    display: none !important;
}

.custom-modal-box {
    background: white;
    padding: 24px;
    border-radius: 16px;
    width: 320px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    transform: scale(0.95);
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.modal-title {
    margin: 0 0 8px;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center !important;
}

.modal-message {
    margin: 0 0 20px;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* --- KNOWLEDGE HUB MODAL (V4 - High Impact) --- */
.knowledge-hub-modal {
    background: var(--bg-panel);
    width: 900px;
    max-width: 95vw;
    min-height: 600px;
    max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border);
}

.hub-header {
    padding: 24px 30px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-sidebar);
}

.hub-title-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hub-icon-wrap {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--kore-blue), #1d4ed8);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    color: white;
}

.hub-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.hub-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.hub-close {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.hub-close:hover {
    color: var(--text-main);
}

.hub-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.hub-sidebar {
    width: 220px;
    border-right: 1px solid var(--border);
    padding: 16px;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    transform: translateX(4px);
}

.hub-nav-item.active {
    background: var(--kore-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.hub-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    background: var(--bg-panel);
}

.docs-tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.docs-tab-pane.active {
    display: block;
}

.pane-header {
    margin-bottom: 28px;
}

.pane-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text-main);
}

.pane-desc {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Capabilities Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--kore-blue);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.f-icon {
    font-size: 2rem;
    margin-bottom: 4px;
}

.f-body strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: var(--text-main);
}

.f-body p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Security Architecture */
.privacy-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.privacy-item {
    padding: 20px;
    background: var(--bg-body);
    border-radius: 14px;
    border: 1px solid var(--border);
}

.p-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.p-bullet {
    width: 10px;
    height: 10px;
    background: var(--kore-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.p-header strong {
    font-size: 1rem;
    color: var(--text-main);
}

.privacy-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-left: 22px;
    line-height: 1.6;
}

/* Cheatsheet Grid */
.shortcuts-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    overflow: hidden;
}

.shortcut-group-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-weight: 800;
}

.hub-shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
    color: var(--text-main);
}

.hub-shortcut-row:last-child {
    border-bottom: none;
}

.hub-shortcut-row kbd {
    background: var(--bg-body);
    border: 1px solid var(--border-strong);
    padding: 3px 7px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    box-shadow: 0 2px 0 var(--border);
    margin: 0 2px;
}

/* Scrollbar styling for modal content */
.hub-content::-webkit-scrollbar {
    width: 6px;
}

.hub-content::-webkit-scrollbar-track {
    background: transparent;
}

.hub-content::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}

.btn-modal-cancel:hover {
    background: #e2e8f0;
    color: #334155;
}

.btn-modal-ok {
    background: #ef4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all 0.2s;
}

.btn-modal-ok:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

@keyframes popIn {
    to {
        transform: scale(1);
    }
}

/* Dark Mode Modal */
body.dark-mode .custom-modal-box {
    background: #1e293b;
    border: 1px solid #334155;
}

body.dark-mode .modal-title {
    color: #f1f5f9;
}

body.dark-mode .modal-message {
    color: #94a3b8;
}

body.dark-mode .btn-modal-cancel {
    background: #334155;
    color: #94a3b8;
}

body.dark-mode .btn-modal-cancel:hover {
    background: #475569;
    color: #f1f5f9;
}

/* --- COMMENT TOOLTIP --- */
.comment-tooltip {
    position: fixed;
    background: #1e293b;
    color: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: pre-wrap;
}

.comment-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   SMART TOOLTIP - GLASSMORPHISM STYLE
   ========================================== */
#smartTooltip {
    position: fixed;
    z-index: 99999;

    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);

    width: 270px;
    padding: 16px;
    font-family: 'Manrope', -apple-system, sans-serif;

    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

/* Header Row */
#smartTooltip .st-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

#smartTooltip .st-header-unit {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    margin-left: 8px;
}

/* Mini Chart Area */
#smartTooltip .st-chart-area {
    position: relative;
    height: 50px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 4px;
}

#smartTooltip .st-chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Month Labels (replaces inline styles) */
#smartTooltip .st-month-label {
    position: absolute;
    bottom: 0;
    font-size: 0.6rem;
    color: #94a3b8;
    font-weight: 500;
}

#smartTooltip .st-month-label.left {
    left: 0;
}

#smartTooltip .st-month-label.right {
    right: 0;
}

/* Legend */
#smartTooltip .st-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 12px;
    padding-top: 4px;
}

#smartTooltip .st-legend-target {
    color: var(--aleph-blue);
}

/* Section Titles (Overspending/Savings) */
#smartTooltip .st-sec-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 10px 0 6px;
    color: #64748b;
}

/* Driver Rows */
#smartTooltip .st-drivers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#smartTooltip .st-driver-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
}

#smartTooltip .st-driver-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

#smartTooltip .st-driver-val {
    font-family: var(--font-num);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Percentage Badge (replaces inline style) */
#smartTooltip .st-pct {
    font-weight: 500;
    opacity: 0.8;
    font-size: 0.7rem;
}

/* Color Classes (already defined globally, but ensuring they work here) */
#smartTooltip .c-neg {
    color: var(--bad-text) !important;
}

#smartTooltip .c-pos {
    color: var(--good-text) !important;
}

/* --- DARK MODE --- */
body.dark-mode #smartTooltip {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

body.dark-mode #smartTooltip .st-header {
    color: #f1f5f9;
}

body.dark-mode #smartTooltip .st-chart-area {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode #smartTooltip .st-driver-row {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode #smartTooltip .st-driver-label {
    color: #e2e8f0;
}

body.dark-mode #smartTooltip .st-sec-title {
    color: #94a3b8;
}

/* ==========================================
   PRINT STYLES - EXECUTIVE REPORT PDF
   A4 Landscape (297mm x 210mm)
   ========================================== */
@media print {

    /* --- 1. FORCE COLOR PRINTING --- */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* --- 2. HIDE ALL UI ELEMENTS --- */
    body>*:not(#reportModal),
    .sidebar,
    .main,
    #btnOpenSidebar,
    #smartTooltip,
    #commentTooltip,
    #confirmModal,
    #bridgeModal,
    #sankeyModal,
    #drillModal,
    #cmdPalette,
    #mappingModal,
    #noteModal,
    #exportMenu,
    #dropOverlay,
    .toast,
    #simulatorPanel {
        display: none !important;
        visibility: hidden !important;
    }

    /* --- 3. REPORT MODAL FULL PAGE --- */
    #reportModal {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        background: white !important;
        z-index: 999999 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove backdrop blur and dark overlay */
    #reportModal::before,
    #reportModal::after {
        display: none !important;
    }

    /* --- 4. REPORT PAPER FULL WIDTH --- */
    .report-paper {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        overflow: visible !important;
        animation: none !important;
    }

    /* --- 5. HIDE CLOSE BUTTON & PRINT BUTTON --- */
    .report-paper .modal-close,
    .rep-header button,
    #btnPrintReport,
    .rep-actions {
        display: none !important;
    }

    /* --- 6. HEADER STYLING FOR PRINT --- */
    .rep-header {
        background: #0D347A !important;
        padding: 16px 24px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .rep-header * {
        color: white !important;
    }

    /* --- 7. BODY CONTENT --- */
    .rep-body {
        padding: 20px 24px !important;
        overflow: visible !important;
    }

    /* --- 8. PREVENT PAGE BREAKS INSIDE CHARTS --- */
    .rep-row-top,
    .rep-row-bot,
    .rep-col-kpi,
    .rep-col-bridge,
    .rep-col-drivers,
    .rep-col-trend,
    #repBridgeContainer,
    #repSideChart,
    .rep-narrative {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* --- 9. CHARTS FORCE VISIBLE --- */
    #repBridgeContainer,
    #repSideChart {
        overflow: visible !important;
    }

    #repBridgeContainer svg,
    #repSideChart svg {
        overflow: visible !important;
        width: 100% !important;
        height: auto !important;
    }

    /* --- 10. EXECUTIVE SUMMARY TEXTAREA → PLAIN TEXT --- */
    #repExecutiveInput {
        border: none !important;
        background: transparent !important;
        resize: none !important;
        overflow: visible !important;
        min-height: auto !important;
        height: auto !important;
        padding: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        color: #1e293b !important;
    }

    #repExecutiveInput::placeholder {
        color: transparent !important;
    }

    /* Hide label when printing if textarea is empty */
    .exec-summary-section label {
        display: none !important;
    }

    /* But show content area */
    .exec-summary-section {
        border-top: none !important;
        margin-top: 12px !important;
        padding-top: 0 !important;
    }

    /* --- 11. HIDE SCROLLBARS --- */
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    * {
        scrollbar-width: none !important;
    }

    /* --- 12. KPI BADGES FORCE COLOR --- */
    .ctx-badge,
    .dash-pill,
    .p-pos,
    .p-neg,
    span[style*="background"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* --- 13. BRIDGE CHART BARS --- */
    .b-bar,
    .b-bar.total,
    .b-bar.inc,
    .b-bar.dec {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* --- 14. PAGE SETUP --- */
    @page {
        size: A4 landscape;
        margin: 10mm 15mm;
    }

    html,
    body {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
    }

    /* --- 15. NARRATIVE SECTION VISIBLE --- */
    .rep-narrative {
        overflow: visible !important;
        padding: 16px 20px !important;
    }

    #repNarrativeText {
        overflow: visible !important;
    }

    /* --- 16. FONT SIZE ADJUSTMENTS --- */
    .rep-big-num {
        font-size: 1.8rem !important;
    }

    .rep-kpi-title {
        font-size: 0.7rem !important;
    }

    /* --- 17. DRIVER LISTS --- */
    .driver-list-col {
        page-break-inside: avoid !important;
    }

    .driver-item {
        page-break-inside: avoid !important;
    }
}

/* --- VISUAL STABILIZATION (ANTI-JUMPING) --- */

/* 1. Fixed Table Layout */
#pivotTable {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse;
}

/* 2. Column Widths */
/* Name Column (First Child) */
#pivotTable td:first-child,
#pivotTable th:first-child,
.row-root td:first-child {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--text-main);
    padding-right: 10px;
}

/* Data Columns (Base, Target, Variance, FX) */
.val-col {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    text-align: right;
    padding-right: 12px;
    font-family: var(--font-num);
}

/* Unit Economics (Avg Cost) */
.avg-cell {
    display: table-cell;
    /* Always display if rendered, JS controls insertion */
    width: 90px !important;
    min-width: 90px !important;
    text-align: right;
    color: var(--aleph-blue);
    font-weight: 600;
    font-family: var(--font-num);
    white-space: nowrap;
}

/* Trends & Weights */
.weight-cell,
.spark-cell {
    width: 70px !important;
    min-width: 70px !important;
    text-align: center;
}

/* Typography Enforcement for all cells */
#pivotTable td {
    font-family: var(--font-num);
    /* Default to mono for stability */
}

/* --- SETTINGS CENTER STYLES (Fintech SaaS Design) --- */

/* Modal Overlay */
.settings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.settings-modal-overlay.hidden {
    display: none;
}

/* Pivot Table Component Styles */
.th-parent-q {
    cursor: pointer;
    color: var(--kore-blue) !important;
    font-weight: 800 !important;
    background: var(--bg-hover) !important;
}

.th-month {
    background: var(--bg-body) !important;
    font-weight: 500 !important;
    font-size: 0.6rem !important;
}

.row-others {
    color: var(--text-muted) !important;
    font-style: italic !important;
}

.chevron-ghost {
    opacity: 0.3 !important;
}

.val-fx {
    background: var(--bg-hover) !important;
    border-left: 2px solid var(--border) !important;
}

.val-oper {
    font-weight: 700 !important;
}

/* Modal Container */
.settings-modal-container {
    width: 1500px;
    max-width: 95vw;
    height: 800px;
    max-height: 95vh;
    background: var(--bg-panel);
    border-radius: 12px;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Modal Header */
.settings-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-panel);
    flex-shrink: 0;
}

.settings-modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
}

.settings-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.settings-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

/* Modal Body: Two Column Layout */
.settings-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Sidebar (25%) */
.settings-sidebar {
    width: 25%;
    min-width: 200px;
    background: #f8fafc;
    border-right: 1px solid var(--border);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

body.dark-mode .settings-sidebar {
    background: #1e293b;
}

.settings-nav-item {
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    position: relative;
    border-left: 3px solid transparent;
}

.settings-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

.settings-nav-item.active {
    background: var(--bg-panel);
    color: var(--text-main);
    font-weight: 700;
    border-left-color: var(--aleph-blue);
}

.settings-nav-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.settings-nav-label {
    flex: 1;
}

/* Content Area (75%) */
.settings-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    background: var(--bg-panel);
}

.settings-tab-content {
    animation: fadeIn 0.2s ease;
}

.settings-tab-content.hidden {
    display: none;
}

/* iOS-Style Toggle Switch */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ios-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}

.ios-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ios-switch input:checked+.ios-switch-slider {
    background-color: #10b981;
}

.ios-switch input:checked+.ios-switch-slider:before {
    transform: translateX(20px);
}

.ios-switch:hover .ios-switch-slider {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.ios-switch input:checked:hover+.ios-switch-slider {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* Dark Mode Adjustments for Toggle */
body.dark-mode .ios-switch-slider {
    background-color: #475569;
}

body.dark-mode .ios-switch input:checked+.ios-switch-slider {
    background-color: #34d399;
}

/* Settings Tab Header */
.settings-tab-header {
    margin-bottom: 24px;
}

.settings-tab-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.settings-tab-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Settings Table */
.settings-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
}

.settings-data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-panel);
}

.settings-data-table thead {
    background: var(--bg-sidebar);
    position: sticky;
    top: 0;
    z-index: 10;
}

.settings-data-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

.settings-th-source {
    width: 30%;
}

.settings-th-alias {
    width: 50%;
}

.settings-th-show {
    width: 20%;
    text-align: center;
}

.settings-data-row {
    transition: background 0.15s ease;
}

.settings-data-row:hover {
    background: var(--bg-hover);
}

.settings-data-row:last-child td {
    border-bottom: none;
}

.settings-td-source {
    padding: 14px 16px;
    vertical-align: middle;
}

.settings-source-code {
    font-family: var(--font-num);
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.settings-default-badge {
    margin-left: 8px;
    font-size: 0.7rem;
    color: var(--aleph-blue);
    vertical-align: middle;
}

.settings-td-alias {
    padding: 14px 16px;
    vertical-align: middle;
}

.settings-alias-input {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-main);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
    font-family: var(--font-main);
}

.settings-alias-input:hover {
    border-bottom-color: var(--border);
}

.settings-alias-input:focus {
    border-bottom-color: var(--aleph-blue);
    background: var(--bg-hover);
    border-radius: 4px 4px 0 0;
}

.settings-td-show {
    padding: 14px 16px;
    text-align: center;
    vertical-align: middle;
}

/* Settings Info Box */
.settings-info-box {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-hover);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Empty State */
.settings-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.settings-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.settings-empty-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.settings-empty-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* Settings System Tab */
.settings-system-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-section-title {
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

.settings-section-card {
    padding: 20px;
    background: var(--bg-hover);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.settings-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-option-info {
    flex: 1;
}

.settings-option-label {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.settings-option-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Logo Upload */
.settings-logo-upload {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}

.settings-logo-preview {
    width: 64px;
    height: 64px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kore-blue);
    color: white;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.settings-logo-preview:hover {
    border-color: var(--kore-blue);
}

.settings-logo-placeholder {
    font-size: 0.75rem;
}

.settings-btn-upload {
    padding: 10px 20px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-btn-upload:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.settings-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Danger Zone */
.settings-danger-card {
    border-color: var(--bad-text) !important;
    background: rgba(185, 28, 28, 0.05);
}

body.dark-mode .settings-danger-card {
    background: rgba(185, 28, 28, 0.1);
}

.settings-btn-danger {
    width: 100%;
    padding: 12px 20px;
    background: var(--bad-text);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3);
}

.settings-btn-danger:active {
    transform: translateY(0);
}

/* Modal Footer */
.settings-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-panel);
    flex-shrink: 0;
}

.settings-btn-cancel {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.settings-btn-cancel:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.settings-btn-save {
    padding: 10px 24px;
    background: var(--aleph-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.settings-btn-save:hover {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 52, 122, 0.3);
}

.settings-btn-save:active {
    transform: translateY(0);
}

/* Scrollbar Styling */
.settings-content-area::-webkit-scrollbar,
.settings-sidebar::-webkit-scrollbar {
    width: 8px;
}

.settings-content-area::-webkit-scrollbar-track,
.settings-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.settings-content-area::-webkit-scrollbar-thumb,
.settings-sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.settings-content-area::-webkit-scrollbar-thumb:hover,
.settings-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- SETTINGS DATA TABLE LAYOUT --- */
.settings-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* Essential for ellipsis */
}

/* Col 1: Show (Toggle) - Narrow & Centered */
.settings-th-show,
.settings-td-show {
    width: 60px;
    text-align: center;
    vertical-align: middle;
    padding: 8px;
}

/* Col 2: Source (Name) - ~40% */
.settings-th-source,
.settings-td-source {
    width: 40%;
    text-align: left;
    padding: 8px 12px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Col 3: Alias (Input) - ~50% (Remaining) */
.settings-th-alias,
.settings-td-alias {
    text-align: left;
    padding: 8px 12px;
    vertical-align: middle;
}

.settings-source-code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODERN TOAST NOTIFICATIONS (Glassmorphism)
   ═══════════════════════════════════════════════════════════════════════════ */

/* (Removed conflicting toast styles - See line 5120) */

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    min-width: 280px;
    max-width: 400px;
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: auto;
    animation: toastSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;

    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.toast.hiding {
    animation: toastSlideOut 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    color: #0f172a;
    /* Darker for better contrast */
    line-height: 1.4;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN SIMULATOR TABS (Fintech Style)
   ═══════════════════════════════════════════════════════════════════════════ */

.sim-mode-switch {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
    background: var(--bg-hover);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.sim-mode-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sim-mode-btn:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
}

.sim-mode-btn.active {
    background: white;
    color: var(--aleph-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

body.dark-mode .sim-mode-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .sim-mode-btn.active {
    background: var(--bg-card);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.toast-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    margin-left: 8px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    color: #475569;
}

/* Toast Type Variants */
.toast.success {
    border-left: 4px solid #10b981;
}

.toast.success .toast-icon {
    color: #10b981;
}

.toast.error {
    border-left: 4px solid #ef4444;
}

.toast.error .toast-icon {
    color: #ef4444;
}

.toast.warning {
    border-left: 4px solid #f59e0b;
}

.toast.warning .toast-icon {
    color: #f59e0b;
}

.toast.info {
    border-left: 4px solid #3b82f6;
}

.toast.info .toast-icon {
    color: #3b82f6;
}

/* Toast Animations */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
}

/* Dark Mode Toast */
body.dark-mode .toast {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .toast-message {
    color: #f1f5f9;
}

body.dark-mode .toast-close {
    color: #64748b;
}

body.dark-mode .toast-close:hover {
    color: #94a3b8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODERN CONFIRM MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: confirmFadeIn 0.2s ease-out;
}

.confirm-modal.hidden {
    display: none;
}

.confirm-panel {
    background: var(--bg-panel);
    border-radius: 16px;
    padding: 28px;
    width: 90%;
    max-width: 420px;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.15);
    animation: confirmSlideUp 0.25s cubic-bezier(0.21, 1.02, 0.73, 1);
}

.confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px auto;
    background: #fef2f2;
    color: #dc2626;
}

.confirm-title {
    font-family: var(--font-main);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin: 0 0 8px 0;
}

.confirm-message {
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.confirm-btn-cancel {
    background: var(--bg-hover);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.confirm-btn-cancel:hover {
    background: var(--border);
}

.confirm-btn-confirm {
    background: #dc2626;
    color: white;
}

.confirm-btn-confirm:hover {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Confirm Modal Animations */
@keyframes confirmFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes confirmSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dark Mode Confirm */
body.dark-mode .confirm-modal {
    background: rgba(0, 0, 0, 0.6);
}

body.dark-mode .confirm-icon {
    background: rgba(220, 38, 38, 0.15);
}

body.dark-mode .confirm-btn-cancel {
    background: var(--bg-hover);
    border-color: var(--border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS CENTER ENHANCEMENTS (Drag & Reset Button)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Footer Actions Group */
.settings-footer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Reset Button */
.settings-btn-reset {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-btn-reset:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    border-color: var(--border-strong);
}

/* Drag Handle Column */
.settings-th-drag,
.settings-td-drag {
    width: 32px;
    text-align: center;
    vertical-align: middle;
    padding: 8px 4px;
}

.settings-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.5;
    transition: all 0.2s ease;
    user-select: none;
}

.settings-drag-handle:hover {
    opacity: 1;
    color: var(--primary);
}

.settings-drag-handle:active {
    cursor: grabbing;
}

/* Dragging Row State */
.settings-data-row.dragging {
    opacity: 0.5;
    background: var(--bg-select);
}

.settings-data-row.drag-over {
    border-top: 2px solid var(--primary);
}

body.dark-mode .settings-btn-reset:hover {
    color: var(--text-main);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCENARIO BUILDER (Rolling Forecast)
   ═══════════════════════════════════════════════════════════════════════════ */

.builder-segment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.builder-segment-row {
    display: grid;
    grid-template-columns: 65px 65px 1fr auto auto;
    gap: 4px;
    align-items: center;
    padding: 8px 6px;
    background: var(--bg-hover);
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.builder-btn-config {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    opacity: 0.8;
}

.builder-btn-config:hover {
    border-color: var(--primary);
    background: var(--bg-select);
    opacity: 1;
}

.builder-segment-row:hover {
    border-color: #10b981;
    background: var(--bg-hover);
}

.builder-segment-row select {
    font-size: 0.75rem;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-main);
    color: var(--text-main);
}

.builder-segment-row select:focus {
    border-color: #10b981;
    outline: none;
}

.builder-segment-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.builder-segment-delete:hover {
    color: #ef4444;
    opacity: 1;
}

.builder-add-segment {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.builder-add-segment:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.builder-generate-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.builder-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.builder-generate-btn:active {
    transform: translateY(0);
}

/* Empty State */
.builder-empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.75rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-hover);
}

/* Builder Snapshot Cards */
.builder-snapshot-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.builder-snapshot-card:hover {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
}

.snapshot-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: var(--bg-select);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.snapshot-btn:hover {
    background: #10b981;
    color: white;
}

.snapshot-btn.danger:hover {
    background: #ef4444;
    color: white;
}

/* --- TOAST FIXES --- */
/* --- TOAST FIXES v2 --- */
/* Ensure Neutral Toasts look like Info toasts with fallback color */
#toastContainer .toast.neutral {
    border-left-color: #3b82f6;
    /* Hex fallback for var(--kore-blue) */
}

#toastContainer .toast.neutral .toast-icon {
    color: #3b82f6;
}

/* FORCE READABILITY WITH HIGH SPECIFICITY */
/* UNIVERSAL TOAST VISIBILITY FIX */
#toastContainer .toast {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important;
}

#toastContainer .toast .toast-message {
    color: #0f172a !important;
}

/* DARK MODE OVERRIDE */
body.dark-mode #toastContainer .toast {
    background-color: #1e293b !important;
    /* Slate 800 */
    color: #f1f5f9 !important;
    /* Slate 100 */
    border: 1px solid #475569 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #toastContainer .toast .toast-message {
    color: #f1f5f9 !important;
}

/* Fix potential text cutoff */
#toastContainer .toast {
    width: auto;
    min-width: 280px;
    max-width: 450px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#toastContainer .toast .toast-message {
    flex: 1;
    word-break: break-word;
    margin: 0 10px;
}

/* --- MODERN FINTECH SIMULATOR (V2 - UNIFIED THEME) --- */

/* Component Variables - Scoped but Linked to Global Theme */
#simulatorPanel {
    /* Map to Global App Variables for consistency */
    --fin-bg: var(--bg-panel);
    --fin-bg-sec: var(--bg-sidebar);
    --fin-border: var(--border);
    --fin-text: var(--text-main);
    --fin-text-sec: var(--text-muted);

    /* Primary Colors from Theme */
    --fin-primary: var(--primary);
    /* Uses --kore-blue */
    --fin-accent: var(--accent);
    --fin-success: var(--good-text);
    --fin-danger: var(--bad-text);

    /* Shadows */
    --fin-shadow: var(--shadow-md);
    --fin-radius: var(--radius);

    /* Typography - Inherit Global */
    font-family: var(--font-main) !important;
}

/* OVERRIDE STRUCTURE */
#simulatorPanel {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--fin-bg) !important;
    height: 100vh !important;
    position: fixed;
    right: 0;
    top: 0;
    width: var(--sim-width);
    z-index: 1001;

    /* VISIBILITY LOGIC: OFF-SCREEN BY DEFAULT */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    box-shadow: none;
    border-left: 1px solid var(--border);
    /* Clean separator */
}

#simulatorPanel.open {
    transform: translateX(0);
    box-shadow: var(--fin-shadow);
}

/* 1. HEADER */
.sim-header-fin {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--fin-border);
    background: var(--fin-bg);
}

.sim-title-fin {
    font-size: 1.0rem;
    /* Smaller, punchier */
    font-weight: 700;
    color: var(--fin-text);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sim-close-fin {
    color: var(--fin-text-sec);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 8px;
    margin: -8px;
    /* Hit area increase */
    border-radius: 4px;
    transition: all 0.2s;
    z-index: 10;
}

.sim-close-fin:hover {
    color: var(--fin-danger);
    background: rgba(223, 27, 65, 0.1);
}

.sim-date-capsule {
    background: var(--bg-hover);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--fin-border);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.sim-date-capsule:hover {
    background: var(--bg-card);
}

.sim-date-icon {
    font-size: 1rem;
    opacity: 0.7;
    color: var(--fin-primary);
}

.sim-date-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sim-date-label {
    font-size: 0.6rem;
    color: var(--fin-text-sec);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: -2px;
}

.sim-date-content select {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    color: var(--fin-text) !important;
    box-shadow: none !important;
    cursor: pointer;
    outline: none !important;
}

/* 2. SEGMENTED CONTROL NAV */
/* 2. SEGMENTED CONTROL NAV */
.sim-nav-segmented {
    background: var(--fin-bg-sec);
    padding: 10px;
    display: flex !important;
    overflow-x: auto;
    gap: 6px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--fin-border);
    scrollbar-width: none;
}

.sim-nav-segmented::-webkit-scrollbar {
    display: none;
}

.sim-seg-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    padding: 10px 6px;
    border-radius: 8px;
    color: var(--fin-text-sec);
    font-weight: 600;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1 0 auto;
    min-width: 60px;
}

.sim-seg-btn:hover {
    color: var(--fin-text);
    background: rgba(0, 0, 0, 0.04);
}

.sim-seg-btn.active {
    background: var(--fin-bg);
    color: var(--fin-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-weight: 800;
    border-color: rgba(var(--fin-primary-rgb), 0.1);
    transform: translateY(-1px);
}

.sim-seg-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* 3. BODY CONTENT - FLEX GROWS */
.sim-body-fin {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: var(--fin-bg-sec);
}

/* CARD / SECTION */
.fin-card {
    border: 1px solid var(--fin-border);
    border-radius: var(--fin-radius);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--fin-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* INPUT GROUPS */
.fin-input-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fin-text-sec);
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fin-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.fin-input {
    width: 100%;
    border: 1px solid var(--fin-border);
    border-radius: 6px;
    padding: 6px 8px 6px 26px;
    /* Tighter padding for compaction */
    font-size: 0.8rem;
    /* Smaller as requested */
    font-weight: 500;
    color: var(--fin-text);
    background: var(--fin-bg);
    transition: all 0.15s;
    font-family: inherit;
    /* Remove monospace enforcement */
}

.fin-input.right-pad {
    padding-right: 28px;
    padding-left: 10px;
}

.fin-input:focus {
    border-color: var(--fin-primary);
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.15);
    /* Stripe focus ring */
    outline: none;
}

.fin-input-icon {
    position: absolute;
    color: var(--fin-text-sec);
    font-weight: 600;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 2;
}

.fin-input-icon.left {
    left: 10px;
}

.fin-input-icon.right {
    right: 10px;
}

/* SLIDER */
.fin-slider-container {
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

input[type=range].fin-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range].fin-range:focus {
    outline: none;
}

input[type=range].fin-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--fin-bg);
    border: 2px solid var(--fin-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: -7px;
}

input[type=range].fin-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--fin-primary) 0%, var(--fin-primary) var(--fill-pct, 50%), var(--fin-border) var(--fill-pct, 50%), var(--fin-border) 100%);
    border-radius: 2px;
}

/* RULES LIST */
.fin-rule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fin-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--fin-bg);
    border: 1px solid var(--fin-border);
    border-left: 3px solid var(--fin-primary);
    border-radius: 4px;
    transition: transform 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fin-rule-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.fin-rule-details {
    font-size: 0.75rem;
    color: var(--fin-text);
    font-weight: 500;
}

.fin-rule-val {
    font-family: 'JetBrains Mono';
    font-weight: 700;
    font-size: 0.8rem;
}

.fin-rule-del {
    opacity: 0;
    cursor: pointer;
    color: var(--fin-danger);
    padding: 4px;
}

.fin-rule-item:hover .fin-rule-del {
    opacity: 1;
}

/* GOAL SEEK HERO (Refined) */
.fin-goal-hero {
    text-align: center;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: var(--fin-radius);
    border: 1px solid var(--fin-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease, border-color 0.4s ease;
    font-family: var(--font-num) !important;
}

.fin-goal-hero.active {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-hover));
    border-color: var(--fin-primary);
}

.fin-goal-label {
    font-size: 0.6rem;
    color: var(--fin-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-weight: 700;
}

.fin-goal-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fin-text);
    font-family: 'JetBrains Mono';
    letter-spacing: -0.5px;
}

.goal-gap-badge {
    font-family: 'JetBrains Mono';
    font-weight: 800;
    color: var(--fin-text);
}

/* FOOTER STICKY */
.fin-footer {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--fin-bg);
    border-top: 1px solid var(--fin-border);
    z-index: 50;
    margin-top: auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}

body.dark-mode .fin-footer {
    background: var(--fin-bg);
}

.fin-btn {
    height: 32px;
    /* Smaller */
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* Icon-Only Button Variant */
.fin-btn-icon {
    width: 36px;
    /* Default Square */
    height: 36px;
    padding: 0;
    flex: none;
    border-radius: 8px;
}

/* Override for Footer Buttons to be Wide */
.fin-footer .fin-btn {
    flex: 1 1 0px;
    /* Force equal width */
    width: 0;
    /* Required for flex equality */
    height: 40px;
}

.fin-footer .fin-btn-icon {
    width: auto;
    /* Allow grow */
}

.fin-btn-icon svg {
    width: 20px;
    height: 20px;
}

.fin-btn-primary {
    background: var(--fin-primary);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    flex: 2;
    /* Default for text buttons */
}

/* Reduce shadow for icon buttons */
.fin-btn-icon.fin-btn-primary {
    box-shadow: none;
}

.fin-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.fin-btn-secondary {
    background: transparent;
    border: 1px solid var(--fin-border);
    color: var(--fin-text-sec);
    flex: 1;
}

.fin-btn-secondary:hover {
    color: var(--fin-text);
    border-color: var(--fin-text-sec);
    background: var(--fin-bg);
}

.fin-btn-ghost {
    background: transparent;
    color: var(--fin-text-sec);
    font-size: 0.75rem;
    padding: 6px 12px;
    border: 1px solid transparent;
    /* Keep layout stable */
    border-radius: 100px;
    /* Pill */
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fin-btn-ghost:hover {
    color: var(--fin-danger);
    background: rgba(239, 68, 68, 0.05);
    /* very light red */
    border-color: rgba(239, 68, 68, 0.1);
}

/* MISC FIXES */
.sim-sub-tabs {
    display: flex;
    gap: 20px;
}

.sim-sub-tab {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    opacity: 0.6;
}

.sim-sub-tab.active {
    border-bottom-color: var(--fin-primary);
    opacity: 1;
}

.select-modern {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23697386'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0px center;
    background-size: 16px;
    cursor: pointer;
    text-align: left;
    text-align-last: left;
    padding-left: 8px;
    /* Ensure some spacing from edge */
}

.select-modern option,
.select-modern optgroup {
    text-align: left;
    direction: ltr;
}

/* --- DASHBOARD HEADER CONTROLS (NEW) --- */
.dash-controls-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

/* Compact header for Dashboard Mode */
body.view-dashboard .dash-controls-header {
    margin-bottom: 14px !important;
}

.dash-ctx-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    /* Even Smaller */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dash-ctx-select {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--aleph-blue);
    font-family: var(--font-main);
    font-size: 0.85rem;
    /* Even Smaller */
    font-weight: 800;
    cursor: pointer;
    padding-right: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230D347A'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0px center;
    background-size: 14px;
    /* Smaller icon */
    outline: none;
    transition: opacity 0.2s;
}

.dash-ctx-select:hover {
    opacity: 0.8;
}

/* Active Filters Reset Button */
.active-filters-btn {
    background-color: var(--bg-select) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 1px var(--primary) !important;
}

.active-filters-btn:hover {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* Highlight Flash Animation for Jump To Row */
.highlight-flash {
    animation: flashRow 2s ease-out forwards;
}

@keyframes flashRow {
    0% {
        background-color: #fef08a;
    }

    /* Yellow-200 */
    50% {
        background-color: #fef08a;
    }

    100% {
        background-color: transparent;
    }
}

/* Ensure table rows have a transition property for smoothness */
#tBody tr {
    transition: background-color 0.3s;
}

/* --- KORE PRO KPI CARDS --- */
.kpi-pro-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Aling components to top-left */
    gap: 4px;
    /* Tighten vertical gap */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    height: 105px;
    /* Increas slightly to fit 3 lines comfortably if needed */
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    /* LEFT ALIGNMENT */
}

.kpi-pro-card:hover {
    border-color: var(--aleph-blue);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.kpi-pro-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kpi-pro-value {
    font-family: var(--font-num);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.kpi-pro-sub {
    font-size: 0.75rem;
    margin-top: 4px;
    /* Tighten gap */
    display: flex;
    flex-direction: column;
    /* Stack instead of side-by-side if gap is huge */
    align-items: flex-start;
    /* LEFT ALIGNMENT */
    gap: 2px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: left;
}

.kpi-trend-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* Separador vertical para tarjetas combo */
.kpi-split {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.kpi-v-line {
    width: 1px;
    height: 24px;
    background: var(--border);
}

.kpi-secondary-val {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* --- REFERENCE SCENARIO UI --- */
.btn-ghost-add {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    transition: all 0.2s;
    opacity: 0.7;
    margin-top: 14px;
    /* Align with inputs */
}

.btn-ghost-add:hover {
    border-color: var(--aleph-blue);
    color: var(--aleph-blue);
    background: var(--bg-hover);
    opacity: 1;
}

.btn-ghost-add.btn-ghost-remove:hover {
    border-color: var(--bad-text) !important;
    color: var(--bad-text) !important;
    background: var(--bad-bg);
    opacity: 1;
}

/* btn-close-ref removed as it is no longer used */

/* Clickable Headers for Variance Toggle */
.clickable-header {
    cursor: pointer;
    text-decoration: underline dotted var(--text-muted);
    transition: color 0.2s;
}


/* 1. Celda Madre: Estructuralmente rígida */
#pivotTable td:first-child {
    padding: 0 8px !important;
    /* Padding fijo pequeño, SIN indentación variable aquí */
    width: 350px !important;
    max-width: 350px !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

/* 2. Contenedor Flex Interno: Maneja la indentación y el flujo */
.name-cell-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Cortar lo que no quepa */
}

/* 3. El Nombre: Prioridad Alta */
.cell-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    /* Intentar no encoger esto */
    font-weight: inherit;
    margin-right: 6px;
}

/* 4. La Descripción: Prioridad Baja (Se sacrifica) */
.cell-desc-text {
    color: #94a3b8;
    font-size: 0.85em;
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    /* Este se encoge primero si falta espacio */
    min-width: 0;
    /* Vital para que flexbox active el truncado */
    border-left: 1px solid #cbd5e1;
    padding-left: 8px;
}

/* Dark Mode Fix */
body.dark-mode .cell-desc-text {
    color: #64748b;
    border-color: #475569;
}

.vs-btn:hover {
    color: var(--text-main);
}

.vs-btn.active {
    background: var(--bg-panel);
    color: var(--aleph-blue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 800;
    border: 1px solid var(--border);
}

/* Dark Mode Adjustments */
body.dark-mode .var-switch {
    background: var(--bg-sidebar);
}

body.dark-mode .vs-btn.active {
    background: var(--bg-hover);
    color: var(--text-main);
}

/* --- TOAST FIXES --- */
/* Ensure Neutral Toasts look like Info toasts but maybe gray? Or blue? */
.toast.neutral {
    border-left-color: var(--kore-blue);
}

.toast.neutral .toast-icon {
    color: var(--kore-blue);
}

/* FORCE READABILITY */
.toast-message {
    color: #0f172a !important;
    /* Always dark text on white/glass background */
    font-weight: 500;
}

body.dark-mode .toast-message {
    color: #f1f5f9 !important;
    /* Always light text on dark background */
}

/* Fix potential text cutoff */
.toast {
    width: auto;
    min-width: 280px;
    max-width: 450px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.toast-message {
    flex: 1;
    word-break: break-word;
    margin: 0 10px;
}

/* --- TABLE COLUMN STABILIZATION (SINGLE MODE FIX) --- */
/* Enforce explicit widths for auxiliary columns to satisfy table-layout: fixed */

.weight-cell,
.col-aux {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.spark-cell,
.col-trend {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* Breakdown Columns (Quarters/Months) */
/* Breakdown Columns (Quarters/Months) */
th.sub-col,
td.sub-col {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
    padding: 0 8px !important;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Parent Quarter Headers */
th.th-parent-q {
    width: 90px !important;
    min-width: 90px !important;
    background-color: var(--bg-hover) !important;
    border-bottom: 2px solid var(--kore-blue) !important;
}

/* A. ELIMINAR RESTRICCION DE ANCHO (SCROLL HORIZONTAL) */
#pivotTable {
    width: max-content !important;
    min-width: 100%;
    table-layout: fixed !important;
    border-collapse: collapse;
}

.table-area {
    overflow-x: auto !important;
    width: 100%;
}

/* FX & Oper Columns */
.val-fx,
.val-oper,
.col-fx,
.col-oper {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

/* Avg Cost / Generic Value Columns fallback */
.avg-cell,
.col-avg_cost {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* Standard Value Columns (Base/Target/Var) */
/* We already set min-width 100px earlier, but let's be explicit if needed */
.col-metric,
.val-col {
    /* Allow these to flex slightly more if space permits, or fix them too? */
    /* For now, let's keep the min-width assumption but rely on flex/auto for the main data columns unless we want 100% strictness */
    min-width: 90px;
}

/* COMPONENTE: Selects dentro del Segmented Control */
.sc-select {
    background: transparent;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 4px;
    height: 100%;
    cursor: pointer;
    outline: none;
    max-width: 120px;
    transition: color 0.2s;
}

.sc-select:hover {
    color: var(--text-main);
}

.sc-select:focus {
    color: var(--kore-blue);
}

/* Opciones del select (Nativo) */
.sc-select option {
    background: var(--bg-panel);
    color: var(--text-main);
}

/* --- FIXES FROM RECENT TASK --- */

/* Corrección para botones de Segmented Control - Connected Style */
.segmented-control {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-strong) !important;
    padding: 2px !important;
    gap: 0 !important;
    /* Buttons touch/connect */
    border-radius: 6px !important;
}

.sc-btn {
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500;
    opacity: 0.6;
    border-radius: 4px !important;
    margin: 0 !important;
    border: none !important;
}

.sc-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    opacity: 1;
}

.sc-btn.active {
    background: var(--bg-panel) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    color: var(--kore-blue) !important;
    transform: scale(0.95);
    margin: 1px !important;
    height: calc(100% - 2px) !important;
}

/* FIX: Forzar transparencia en botones inactivos del Segmented Control */
.sc-btn {
    background: transparent !important;
    /* Clave: Fondo transparente por defecto */
    box-shadow: none !important;
    /* Sin sombra por defecto */
    opacity: 0.6;
    /* Un poco apagado si no está activo */
    color: var(--text-muted) !important;
}

.sc-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    opacity: 1;
}

/* Solo el ACTIVO tiene fondo y sombra */
.sc-btn.active {
    background: var(--bg-panel) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
    color: var(--kore-blue) !important;
    font-weight: 800 !important;
}

/* Asegurar que la tabla ocupe espacio */
.view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    /* Forzar altura */
    min-height: 0;
    /* Fix para Firefox/Flex */
}

.table-area {
    flex: 1;
    overflow: auto;
    height: 100%;
}

/* Asegurar que el controles NO oculte cosas fuera de él */
.controls {
    overflow: visible !important;
    flex-shrink: 0;
    /* No dejar que se aplaste */
}

/* Ajuste KPI Card (Para que encaje en la nueva barra) */
/* Ajuste KPI Card (Para que encaje en la nueva barra) - MODIFIED FOR "BIG NUMBER" LOOK */
.kpi-card {
    height: 36px;
    /* Standardized height */
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-left: 0;

    /* NEW: Enhanced pill look */
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
    gap: 12px;
}

/* Divider inside KPI card */
.kpi-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

/* Ajustar padding interno para que entre en 38px */
.kpi-section {
    padding: 0 4px;
    /* Reduced since card has padding */
    display: flex;
    flex-direction: column;
    /* Stack label and value */
    justify-content: center;
    align-items: flex-end;
    /* Align numbers to right or center? Flex-end looks clean for dual layout */
}

/* For single big number, maybe center? */
#kpiSingle .kpi-section {
    align-items: center;
}

.kpi-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}

.kpi-val {
    font-size: 1.1rem;
    /* BIGGER */
    font-weight: 800;
    font-family: var(--font-num);
    line-height: 1;
    color: var(--text-main);
}

.kpi-val.blue {
    color: var(--kore-blue);
}

.kpi-unit {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 2px;
}

.kpi-currency {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-right: 2px;
    display: none;
    /* Hide currency usually to save space unless critical, let's keep it hidden or small */
}

.kpi-pill {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 6px;
    background: var(--bg-hover);
    /* Default */
}

/* --- MICRO-INTERACCIONES (Alive UI) --- */

/* 1. Definición de Keyframes */

/* Vibración (Para Breakdown/Calendar) */
@keyframes tingle {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Crecimiento (Para Trend/Graph) */
/* Crecimiento (Para Trend/Graph) */
@keyframes growUp {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Balanza (Para Weight) */
@keyframes balance {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Giro Suave (Para FX/Refresh) */
@keyframes spinSoft {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

/* Latido (Para Focus/Target) */
@keyframes pulseSoft {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Salto (Para Módulos Principales) */
@keyframes hop {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* 2. Asignación de Animaciones a Botones Específicos */

/* A. Grupo de Herramientas (Tool Pill) */
/* Nota: Aplicamos la animación al SVG interno para que sea más elegante */

/* Breakdown (📅) -> Tingle */
#btnBreakdown:hover svg {
    animation: tingle 0.4s ease-in-out;
    color: var(--kore-blue);
}

/* Sparklines (📈) -> Grow Up */
#btnSpark:hover svg {
    animation: growUp 0.4s ease-in-out;
    color: #7c3aed;
    /* Violet */
}

/* Weight (⚖️) -> Balance */
#btnWeight:hover svg {
    animation: balance 0.5s ease-in-out;
    transform-origin: center bottom;
    /* Pivota desde la base */
    color: #c2410c;
    /* Orange */
}

/* FX (💱) -> Spin */
#btnFX:hover svg {
    animation: spinSoft 0.6s ease-in-out;
    color: #047857;
    /* Emerald */
}

/* Focus (🎯) -> Pulse */
#btnFocus:hover svg {
    animation: pulseSoft 0.5s ease-in-out;
    color: #be123c;
    /* Rose */
}

/* Bridge & Sankey & Visual -> Hop (Salto suave) */
#btnBridge:hover svg,
#btnSankey:hover svg,
#btnVisual:hover svg,
#btnSimulate:hover svg {
    animation: hop 0.3s ease-in-out;
    color: var(--kore-blue);
}

/* B. Módulos Principales (Top Left Switcher) */
.mod-tab:hover svg {
    animation: hop 0.3s ease-in-out;
}

/* C. Botón de Reporte (Export) */
#btnReport:hover svg {
    animation: growUp 0.4s ease-in-out;
    color: var(--kore-blue);
}

/* D. Clean Up General de Botones */
/* Asegura que la transición de color de fondo sea suave para acompañar la animación */
.tool-btn,
.sc-btn,
.mod-tab {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* --- MICRO-INTERACCIONES: NAVEGACIÓN & CONTROLES --- */

/* 1. View Switcher (Grid/Dash) & Metrics (Cost/FTE) -> Grow Up */
/* Aplicamos la animación al SVG dentro del botón segmentado */
.sc-btn:hover svg {
    animation: growUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    /* Color de acento al pasar el mouse */
    color: var(--kore-blue);
}

/* 2. Refuerzo para Módulos (Tabs Izquierda) -> Hop */
/* Aseguramos que los tabs principales también salten */
.mod-tab:hover svg {
    animation: hop 0.4s ease-in-out;
}

/* --- P&L SPECIFIC STYLES --- */
.pnl-t.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: white;
    padding: 6px 16px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    position: relative;
    /* FIX: Prevent layout shift when KPI card is hidden */
    min-height: 54px;
}

/* Improved Sidebar Filters */
.pnl-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.8rem;
    color: var(--text-main);
}

.pnl-filter-item:hover {
    background: var(--bg-hover);
}

.pnl-filter-input {
    accent-color: var(--kore-blue);
    cursor: pointer;
}

/* Better Bridge Styles */
.bridge-connector {
    stroke: var(--border-strong);
    stroke-width: 1;
    stroke-dasharray: 4, 2;
}

.bridge-label {
    font-size: 10px;
    fill: var(--text-muted);
    font-weight: 600;
    text-anchor: middle;
}

.bridge-val {
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    font-family: var(--font-num);
}

/* --- P&L FINTECH UI UPDATES --- */

.pnl-header-icon {
    width: 24px;
    height: 24px;
    stroke: var(--kore-blue);
    stroke-width: 1.5;
    fill: none;
}

.pnl-kpi-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    /* Force smaller height */
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Settings Center Buttons Visibility */
.settings-btn-save {
    background: var(--kore-blue) !important;
    color: white !important;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: 0.2s;
}

.settings-btn-save:hover {
    background: var(--kore-blue-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.settings-btn-reset,
.settings-btn-cancel {
    background: var(--bg-hover);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.pnl-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.pnl-kpi-card.active-kpi {
    border-color: var(--kore-blue);
    background: var(--bg-select);
}

.pnl-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pnl-kpi-value {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: var(--font-num);
    color: var(--text-main);
    line-height: 1.1;
}

.pnl-kpi-sub {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Subtle decoration for cards */
.pnl-kpi-deco {
    position: absolute;
    right: -10px;
    bottom: -10px;
    opacity: 0.05;
}

.pnl-kpi-deco svg {
    width: 60px;
    height: 60px;
    fill: currentColor;
}


/* Clean Icon Button */
.icon-btn.clean-icon {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
}

.icon-btn.clean-icon:hover {
    color: var(--kore-blue);
    background: rgba(0, 0, 0, 0.03);
}

/* --- LAYOUT FIXES FOR VISUAL EXPLORER (Tree Map / Scatter) --- */

/* Ensure the main container fills the space and manages children */
.view-container {
    flex: 1;
    display: flex;
    /* Ensure flex context */
    flex-direction: column;
    overflow: hidden;
    position: relative;
    height: 100%;
    min-height: 0;
}

/* Ensure the specific visual area fills the view container */
.visual-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 0;
    width: 100%;
    position: relative;
    background: var(--bg-body);
    /* Ensure background is opaque */
}

/* Ensure the chart container takes all remaining space */
#tmContainer,
.tm-container,
#scatterContainer {
    flex: 1;
    width: 100%;
    height: 100% !important;
    /* Force height to match parent */
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: block;
    /* Flex parent handles the sizing */
}

/* Ensure tabs don't shrink */
.visual-tabs {
    flex-shrink: 0;
}

/* --- SELECTION STATUS BAR --- */
.selection-status-bar {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10000;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.math-active .selection-status-bar {
    bottom: 90px;
}

.selection-status-bar.hidden {
    display: none;
}

.sel-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sel-badge {
    background: var(--kore-blue);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
}

.sel-metrics {
    display: flex;
    gap: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 20px;
}

.sel-item {
    display: flex;
    flex-direction: column;
}

.sel-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: 700;
}

.sel-val {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 1rem;
}

.sel-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.5;
    transition: 0.2s;
}

.sel-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- MULTI-SELECTION STATUS BAR --- */
.selection-status-bar {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: rgba(13, 52, 122, 0.85);
    /* Polished SaaS Translucent Blue */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10000;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.selection-status-bar.hidden {
    display: none;
}

.selection-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sel-badge {
    background: #1e40af;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
}

.sel-metrics {
    display: flex;
    gap: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 20px;
}

.sel-item {
    display: flex;
    flex-direction: column;
}

.sel-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: 700;
}

.sel-val {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 1rem;
}

.sel-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.5;
    transition: 0.2s;
}

.sel-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- STRATEGY PANEL --- */
.strategy-launcher {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    margin-right: 10px;
}

.strategy-launcher:hover {
    background: #f59e0b;
    color: white;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.strategy-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100vh;
    max-height: 100vh;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.05);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.strategy-panel.open {
    transform: translateX(0);
}

body.dark-mode .strategy-panel {
    background: rgba(15, 23, 42, 0.96);
}

.strat-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.strat-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    color: var(--text-main);
}

.strat-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
}

.strat-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

.strat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
}

.strat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--kore-blue);
    font-size: 0.85rem;
}

.strat-badge {
    background: #f59e0b;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    text-transform: uppercase;
}

.strat-control {
    margin-bottom: 12px;
}

.strat-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.strat-val {
    font-weight: 800;
    color: var(--kore-blue);
    font-family: var(--font-num);
}

.strat-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.strat-elasticity-box {
    background: var(--bg-hover);
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    margin-top: 10px;
}

.slider-mini {
    height: 4px;
    margin-top: 5px;
}

.strat-val-sub {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.strat-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 5px;
    font-style: italic;
}

/* FEEDBACK VISUAL EN LA TABLA */
.simulation-mode .pnl-dashboard {
    border-top: 4px solid #f59e0b;
    position: relative;
}

.simulation-mode .pnl-dashboard::after {
    content: '⚠️ SIMULATION ACTIVE';
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    background: #f59e0b;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 10px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* Strategy Input Styles */
.strat-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.strat-num-input {
    width: 50px;
    background: transparent;
    border: none;
    text-align: right;
    font-family: var(--font-num);
    font-weight: 800;
    color: var(--kore-blue);
    font-size: 0.9rem;
}

.strat-num-input-sub {
    width: 40px;
    background: transparent;
    border: none;
    text-align: right;
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.strat-pct {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 2px;
}

.strat-num-input:focus,
.strat-num-input-sub:focus {
    outline: none;
}

/* --- COMPACT STRATEGY PANEL (PHASE 3) --- */
.strategy-panel.compact {
    width: 320px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.strat-header.compact {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-panel);
}

.strat-body.compact-mode {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

.strat-card.compact {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
}

.strat-icon {
    color: var(--kore-blue);
}

.strat-row.compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.strat-row.compact:last-child {
    margin-bottom: 0;
}

.strat-num-mini {
    width: 60px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-main);
    padding: 2px 6px;
    font-size: 0.75rem;
    text-align: right;
    font-family: var(--font-num);
}

.strat-actions.compact {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.fin-btn.tiny,
.fin-btn-ghost.tiny {
    padding: 4px 10px;
    font-size: 0.7rem;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- IMPACT VIZ (KPI GHOST VALUES) --- */
.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sim-active {
    color: #f59e0b !important;
    /* Amber */
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.strat-ghost-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: 4px;
}

.strat-ghost-was {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.8;
    font-size: 0.75rem;
}

.strat-ghost-delta {
    font-weight: 800;
}

/* ==========================================================================
   MATRIX VIEW ENHANCEMENTS
   ========================================================================== */

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.matrix-table th {
    padding: 12px 15px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    position: relative;
    /* Center header content vertically */
    vertical-align: middle;
}

.matrix-col-fixed {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--bg-panel);
    min-width: 250px;
    border-right: 2px solid var(--border) !important;
}

.matrix-col-scen {
    min-width: 140px;
    text-align: right;
    cursor: grab;
}

.matrix-col-scen:active {
    cursor: grabbing;
}

.matrix-col-scen.dragging {
    opacity: 0.4;
    background: var(--bg-hover) !important;
}

.matrix-col-scen.drag-over {
    border-left: 2px solid var(--kore-blue) !important;
}

.matrix-col-var {
    min-width: 120px;
    text-align: right;
    border-left: 2px solid var(--border) !important;
    background: rgba(248, 250, 252, 0.5);
    /* Vertically center the variance header content */
    display: table-cell;
    vertical-align: middle;
}

.matrix-table td {
    padding: 10px 15px;
    border: 1px solid var(--border);
    color: var(--text-main);
}

.matrix-table tr:hover td {
    background: var(--bg-hover);
}

/* HEATMAP PILLS */
.heatmap-pill {
    padding: 3px 8px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.75rem;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}

.bg-red-50 {
    background-color: #fef2f2;
}

.text-red-700 {
    color: #b91c1c;
}

.bg-green-50 {
    background-color: #ecfdf5;
}

.text-green-700 {
    color: #047857;
}

/* Selector Polish */
.pnl-toolbar .select-modern {
    min-width: 160px;
    /* Comfortably flow text */
}

/* Modal Height Fix */
.settings-modal-container {
    display: flex;
    flex-direction: column;
}

.settings-modal-body {
    flex: 1;
    overflow-y: auto;
}

/* Dash Back Button */
.icon-btn-small {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-main);
    transition: all 0.2s;
    padding: 0;
}

.icon-btn-small:hover {
    background: var(--kore-blue);
    color: white;
    border-color: var(--kore-blue);
}

.strat-hero-card {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.strat-hero-card:hover {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.strat-hero-icon {
    font-size: 1.4rem;
}

.strat-hero-title {
    font-weight: 700;
    color: var(--kore-blue);
    font-size: 0.95rem;
    letter-spacing: -0.3px;
}

.strat-hero-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strat-hero-arrow {
    color: var(--kore-blue);
    font-size: 1rem;
    margin-left: auto;
    font-weight: 400;
}

.strat-divider-text {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
}

/* SENSITIVITY MODAL UI */
.sens-controls {
    padding: 15px 25px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.sens-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sens-group label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.sens-sep {
    width: 1px;
    height: 35px;
    background: var(--border-strong);
    margin: 0 5px;
}

.sens-icon {
    font-size: 1.2rem;
    align-self: center;
    padding-bottom: 5px;
    color: var(--text-muted);
}

/* THE MATRIX GRID */
.sens-body {
    padding: 30px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    overflow: auto;
}

.sens-grid {
    display: grid;
    grid-template-columns: auto repeat(5, 1fr);
    grid-template-rows: auto repeat(5, 1fr);
    gap: 4px;
}

/* Cells */
.sens-cell {
    padding: 15px;
    text-align: center;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-num);
    transition: transform 0.2s;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sens-cell:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.sens-cell-sub {
    font-size: 0.65rem;
    opacity: 0.7;
    font-weight: 500;
    margin-top: 4px;
}

/* Headers */
.sens-header-x {
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding-bottom: 8px;
}

.sens-header-y {
    text-align: right;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding-right: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sens-corner {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}


/* --- SENSITIVITY LAB POLISH (Step 2329) --- */
.strat-modal-content {
    background: var(--bg-panel);
    width: 900px;
    /* Increased size */
    max-width: 95vw;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Run Matrix Button - High Visibility */
#sensRunBtn {
    background: var(--kore-blue);
    color: white;
    font-weight: 700;
    padding: 0 24px;
    height: 40px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
    font-size: 0.9rem;
    min-width: 120px;
}

#sensRunBtn:hover {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#sensRunBtn:active {
    transform: translateY(0);
}

/* --- COMPARE MODE TOGGLES --- */
.toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.5;
    transition: all 0.2s;
    padding: 2px;
    border-radius: 4px;
}

.toggle-icon:hover {
    opacity: 1;
    color: var(--text-main);
    background: var(--bg-hover);
}

.toggle-icon.active {
    opacity: 1;
    color: white;
    background: var(--kore-blue);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-color: var(--kore-blue);
}

/* --- CASH LAB ANIMATIONS --- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SENSITIVITY CELL POLISH */
.sens-cell {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.sens-cell:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sens-val-main {
    font-size: 0.95rem;
    font-weight: 800;
    font-family: var(--font-num);
    line-height: 1.1;
    margin-bottom: 2px;
}

.sens-val-sub {
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-num);
}

#sensitivityModal {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 5000;
}

/* --- MINIMALIST TOOLBAR ALIGNMENT FIX --- */
.controls .tools-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    /* Slightly reduced gap */
    height: 100%;
    padding: 0 4px;
    /* Move elements to the left */
}

.controls .tool-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    /* Remove any previous borders */
}

/* Ensure inner groups don't stack */
.tool-group>div {
    display: flex;
    align-items: center;
}

/* Specific fix for comparison group which had flex-col */
#comparisonGroup {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: auto !important;
}

/* Fix vertical alignment of text/inputs */
.sc-select,
.sc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FIX: KPI Card Alignment */
.controls .kpi-card {
    margin-top: 0 !important;
    align-self: center !important;
    margin-bottom: 0 !important;
    height: 36px !important;
    /* Standardized exactly */
    min-height: 36px !important;
    margin-left: 20px !important;
    margin-right: 40px !important;
    /* Pull away from right edge */
}



/* Ensure inner select items still look good if needed, but transparent container is key */




/* --- UI POLISH: VARIANCE PILLS --- */
.var-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 45px;
}

.var-pill.pos {
    background-color: var(--good-bg);
    /* Verde claro */
    color: var(--good-text);
    /* Verde oscuro */
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.var-pill.neg {
    background-color: var(--bad-bg);
    /* Rojo claro */
    color: var(--bad-text);
    /* Rojo oscuro */
    border: 1px solid rgba(239, 68, 68, 0.1);
}

.var-pill.neutral {
    background-color: var(--bg-hover);
    color: var(--text-muted);
}

/* --- UI POLISH: EMPTY STATE --- */
.empty-table-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    background: var(--bg-body);
    border-radius: 8px;
    margin: 20px;
    border: 2px dashed var(--border);
}

.empty-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* --- ORGANIZATIONAL CHART (D3) --- */
#hc-org-chart-view {
    cursor: grab;
}

#hc-org-chart-view:active {
    cursor: grabbing;
}

.org-card {
    filter: drop-shadow(var(--shadow-sm));
    transition: all 0.2s ease;
}

.org-link {
    stroke-dasharray: 4;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -100;
    }
}

/* --- ORG CHART SEARCH --- */
.org-search-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 14px;
    box-shadow: var(--shadow-premium);
    display: flex;
    align-items: center;
}

.org-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 0.85rem;
    width: 200px;
    margin-left: 8px;
}

/* Efecto de resaltado para el nodo encontrado */
.node-highlight rect {
    stroke: var(--kore-blue) !important;
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 10px var(--kore-blue));
}

/* --- SWAP SCENARIOS BUTTON --- */
.swap-vs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    user-select: none;
}

.swap-vs-btn:hover {
    background: var(--bg-hover);
    color: var(--kore-blue);
    transform: scale(1.1);
}

.swap-vs-btn .vs-text {
    display: block;
}

.swap-vs-btn .vs-icon {
    display: none;
    font-size: 1.1rem;
    line-height: 1;
}

.swap-vs-btn:hover .vs-text {
    display: none;
}

.swap-vs-btn:hover .vs-icon {
    display: block;
}

/* --- DRILL DOWN EXCEL-STYLE PIVOT --- */
.drill-group-header {
    cursor: pointer;
    color: var(--kore-blue) !important;
    background: var(--bg-hover) !important;
    border-left: 2px solid var(--border-strong) !important;
    transition: background 0.2s;
}

.drill-group-header:hover {
    background: #e2e8f0 !important;
}

.drill-toggle {
    font-size: 0.85em;
    font-weight: 900;
    margin-left: 4px;
    opacity: 0.7;
}

.drill-cell-total {
    font-weight: 700 !important;
    background: var(--bg-hover);
    border-left: 2px solid var(--border-strong) !important;
}



/* --- UTILS --- */
.flex-ac {
    display: flex;
    align-items: center;
}

.flex-as {
    display: flex;
    align-items: baseline;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.85rem;
}

.text-md {
    font-size: 0.95rem;
}

.text-lg {
    font-size: 1.1rem;
}

.text-bold {
    font-weight: 700;
}

.text-semibold {
    font-weight: 600;
}

.text-main {
    color: var(--text-main);
}

.text-muted {
    color: var(--text-muted);
}

.text-blue {
    color: var(--kore-blue);
}

.text-white {
    color: #ffffff;
}

.text-up {
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-auto {
    margin-top: auto;
}

.italic {
    font-style: italic;
}

.text-7k {
    font-weight: 700;
}

.text-6k {
    font-weight: 600;
}

.d-flex {
    display: flex;
}

.bg-hover {
    background: var(--bg-hover);
}

.rounded-sm {
    border-radius: 4px;
}

.border-top-dashed {
    border-top: 1px dashed var(--border);
}

.pt-1 {
    padding-top: 4px;
}

.pb-1 {
    padding-bottom: 4px;
}

.flex-1 {
    flex: 1;
}

/* --- P&L SETUP COMPONENT --- */
.fin-config-container {
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
    background: var(--bg-body);
}

.fin-config-inner {
    max-width: 1800px;
    width: 98%;
    margin: 0 auto;
    position: relative;
}

.fin-config-close {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
}

.fin-config-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
}

.fin-config-icon-box {
    background: linear-gradient(135deg, var(--kore-blue), #2563eb);
    border-radius: 16px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.3);
    margin-bottom: 20px;
}

.fin-config-card {
    background: var(--bg-panel);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.fin-config-card-header {
    padding: 15px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: -41px;
    z-index: 100;
}

.fin-config-row.dragging {
    opacity: 0.5;
    background: var(--bg-hover) !important;
    border: 1px dashed var(--kore-blue) !important;
    transform: scale(0.98);
}

.fin-config-row:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
    border-color: var(--kore-blue) !important;
    transform: translateY(-1px);
    background: #fff !important;
    z-index: 9999 !important;
}

.drag-handle:active {
    cursor: grabbing;
}

.fin-input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    transition: all 0.2s;
    background: #fdfdfd;
    width: 100%;
}

.fin-input:focus {
    border-color: var(--kore-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
    background: #fff;
}

.builder-generate-btn {
    height: 32px;
    padding: 0 24px;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--kore-blue);
    color: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.builder-generate-btn:hover {
    background: #059669 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3) !important;
}

.fin-btn-secondary {
    height: 32px;
    padding: 0 20px;
    font-weight: 700;
    font-size: 0.85rem;
    background: white;
    color: var(--kore-blue);
    border: 1px solid var(--kore-blue);
    border-radius: 8px;
    cursor: pointer;
}

.p-1 {
    padding: 4px;
}

.p-2 {
    padding: 8px;
}

.p-3 {
    padding: 12px;
}

.p-4 {
    padding: 16px;
}

.p-5 {
    padding: 20px;
}

.text-orange {
    color: #f59e0b;
}

.border-orange {
    border-left: 3px solid #f59e0b !important;
}

.border-blue {
    border-left: 3px solid var(--kore-blue) !important;
}

/* --- CELL MATH SELECTION --- */
.cell-selected {
    background-color: rgba(59, 130, 246, 0.15) !important;
    box-shadow: inset 0 0 0 1px var(--kore-blue);
}

.cell-math-bar {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-main);
    z-index: 9990;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    font-family: var(--font-main);
}

.cell-math-bar.visible {
    transform: translateY(0);
    opacity: 1;
}

.cell-math-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.cell-math-item b {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.cell-math-item span {
    font-family: var(--font-num);
    font-weight: 600;
}

/* --- INLINE EDITING --- */
.editable-cell {
    cursor: cell;
    position: relative;
}


.inline-edit-input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-num);
    font-size: 1em;
    font-weight: 700;
    color: var(--kore-blue);
    background: var(--bg-body);
    border: 2px solid var(--kore-blue);
    border-radius: 4px;
    padding: 2px 4px;
    text-align: right;
    outline: none;
}

.cell-adjusted {
    color: var(--kore-blue) !important;
    font-weight: 800 !important;
}