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

/* =====================================================================
   DESIGN SYSTEM v2 — "Institutional Finance / Executive"
   Capa aditiva: carga DESPUÉS de z_theme.css y gana por orden de cascada.
   Para revertir por completo: borrar este archivo.

   Dirección: navy de tinta + neutros fríos slate + acento dorado
   restringido (rúbrica banca/finanzas). Tipografía IBM Plex Sans + Mono
   (numerales tabulares). Iconografía Lucide en SVG (máscara CSS).
   ===================================================================== */

/* ------------------------------------------------------------------
   1. TOKENS  (re-skin global: redefine las variables de z_theme)
------------------------------------------------------------------ */
:root {
    /* Superficies / fondo */
    --color-bg: #eaeef4;
    --color-surface: #ffffff;
    --color-surface-soft: #f4f7fb;
    --color-surface-2: #eef2f8;

    /* Marca navy */
    --color-primary: #16365d;
    --color-primary-2: #1d4f8a;
    --color-primary-soft: #e7eef8;
    --brand-1: #0c1f38;
    --brand-2: #112a49;
    --brand-3: #16365d;

    /* Acento dorado (uso restringido: indicadores, foco, detalles) */
    --accent: #c79a3a;
    --accent-2: #b07f24;
    --accent-soft: #f5ecd4;

    /* Texto */
    --color-text: #15202f;
    --color-text-soft: #50607a;
    --color-text-muted: #8493ab;
    --color-on-brand: #eaf1fb;
    --color-on-brand-soft: #9fb3d0;

    /* Bordes */
    --color-border: #dce3ed;
    --color-border-strong: #c4cedd;
    --color-hairline: #eaeff6;

    /* Semánticos (datos) */
    --color-success: #1a7f4b;
    --color-success-soft: #e4f4ea;
    --color-warning: #b25e09;
    --color-warning-soft: #fbeed9;
    --color-danger: #b42318;
    --color-danger-soft: #fbe7e4;
    --color-info: #1849a9;
    --color-info-soft: #e6edfa;

    /* Sombras (tinte navy frío, profundidad por capas) */
    --shadow-xs: 0 1px 2px rgba(15, 33, 58, 0.06);
    --shadow-sm: 0 1px 2px rgba(15, 33, 58, 0.05), 0 2px 8px -2px rgba(15, 33, 58, 0.10);
    --shadow-md: 0 10px 26px -10px rgba(15, 33, 58, 0.20);
    --shadow-lg: 0 26px 54px -18px rgba(12, 28, 52, 0.34);

    /* Radios */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /* Tipografía */
    --font-base: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --font-num: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    /* Movimiento */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.16s var(--ease);
    --transition: 0.24s var(--ease);

    --sidebar-width: 264px;
    --header-height: 68px;
}

/* ------------------------------------------------------------------
   2. BASE
------------------------------------------------------------------ */
body {
    font-family: var(--font-base);
    background:
        radial-gradient(1200px 700px at 100% -5%, #eef3fa 0%, transparent 55%),
        var(--color-bg);
    color: var(--color-text);
    font-feature-settings: 'ss01', 'cv05';
    letter-spacing: -0.005em;
}

::selection {
    background: rgba(29, 79, 138, 0.16);
    color: var(--color-primary);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* Numerales tabulares por defecto en valores de datos */
.metric-value, .bal-kpi-value, .er-kpi-hero-value, .er-kpi-sec-value,
.er-ratio-value, .cc-print-kpi-value, .ag-cell, .dash-cell {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   3. ICONOS  (Lucide vía máscara CSS — background-color: currentColor)
------------------------------------------------------------------ */
.ic {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -0.18em;
    background-color: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}
.ic-sm { width: 0.95em; height: 0.95em; }
.ic-lg { width: 1.4em;  height: 1.4em;  }
.ic-xl { width: 1.7em;  height: 1.7em;  }

.ic-home          { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><path d='M9 22V12h6v10'/></svg>"); }
.ic-shopping-cart { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>"); }
.ic-package       { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4 7.55 4.24'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><path d='m3.3 7 8.7 5 8.7-5'/><path d='M12 22V12'/></svg>"); }
.ic-clock         { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
.ic-trending-up   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>"); }
.ic-file-text     { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M16 13H8'/><path d='M16 17H8'/><path d='M10 9H8'/></svg>"); }
.ic-dollar-sign   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' x2='12' y1='2' y2='22'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>"); }
.ic-bar-chart-2   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' x2='18' y1='20' y2='10'/><line x1='12' x2='12' y1='20' y2='4'/><line x1='6' x2='6' y1='20' y2='14'/></svg>"); }
.ic-credit-card   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='5' rx='2'/><line x1='2' x2='22' y1='10' y2='10'/></svg>"); }
.ic-pie-chart     { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.21 15.89A10 10 0 1 1 8 2.83'/><path d='M22 12A10 10 0 0 0 12 2v10z'/></svg>"); }
.ic-settings      { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.ic-layout-dashboard { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='9' x='3' y='3' rx='1'/><rect width='7' height='5' x='14' y='3' rx='1'/><rect width='7' height='9' x='14' y='12' rx='1'/><rect width='7' height='5' x='3' y='16' rx='1'/></svg>"); }
.ic-menu          { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' x2='20' y1='12' y2='12'/><line x1='4' x2='20' y1='6' y2='6'/><line x1='4' x2='20' y1='18' y2='18'/></svg>"); }
.ic-chevron-left  { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>"); }
.ic-chevron-right { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>"); }
.ic-chevron-down  { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.ic-arrow-right   { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' x2='19' y1='12' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>"); }
.ic-log-out       { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' x2='9' y1='12' y2='12'/></svg>"); }
.ic-log-in        { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' x2='3' y1='12' y2='12'/></svg>"); }
.ic-lock          { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
.ic-search        { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' x2='16.65' y1='21' y2='16.65'/></svg>"); }
.ic-building      { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18z'/><path d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/><path d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/><path d='M10 6h4'/><path d='M10 10h4'/><path d='M10 14h4'/><path d='M10 18h4'/></svg>"); }
.ic-user          { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.ic-users         { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ic-shield        { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>"); }
.ic-check         { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }
.ic-check-circle  { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>"); }
.ic-alert-triangle{ --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>"); }
.ic-info          { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='16' y2='12'/><line x1='12' x2='12.01' y1='8' y2='8'/></svg>"); }
.ic-x             { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>"); }
.ic-printer       { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect width='12' height='8' x='6' y='14'/></svg>"); }
.ic-download      { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' x2='12' y1='15' y2='3'/></svg>"); }
.ic-eye           { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.ic-file-spreadsheet { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M8 13h2'/><path d='M14 13h2'/><path d='M8 17h2'/><path d='M14 17h2'/></svg>"); }
.ic-rotate-cw     { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.64-6.36'/><polyline points='21 3 21 9 15 9'/></svg>"); }

/* ------------------------------------------------------------------
   4. SIDEBAR  (navy de tinta, indicador dorado en el activo)
------------------------------------------------------------------ */
.app-sidebar {
    background:
        linear-gradient(180deg, var(--brand-1) 0%, #0a1a30 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 1px 0 0 rgba(12, 28, 52, 0.5);
}
.app-sidebar-inner { padding: 22px 16px; }

.sidebar-brand {
    align-items: center;
    gap: 12px;
    padding: 4px 6px 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sidebar-brand-icon {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 11px;
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #0c1f38;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px -4px rgba(199, 154, 58, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    font-size: 1.2rem;
}
.sidebar-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    margin: 0;
}

.sidebar-section { margin-bottom: 18px; }
.sidebar-section-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-on-brand-soft);
    padding: 0 10px;
    margin-bottom: 8px;
}

.sidebar-link {
    position: relative;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 9px;
    color: #c2d0e4;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.sidebar-link .nav-ic { font-size: 1.18rem; color: #8ea4c4; transition: color var(--transition-fast); }
.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.sidebar-link:hover .nav-ic { color: #c7d6ea; }
.sidebar-link.active {
    background: linear-gradient(90deg, rgba(199, 154, 58, 0.16), rgba(255, 255, 255, 0.05));
    color: #fff;
    font-weight: 600;
}
.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -16px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(199, 154, 58, 0.6);
}
.sidebar-link.active .nav-ic { color: var(--accent); }

/* ------------------------------------------------------------------
   5. HEADER
------------------------------------------------------------------ */
.app-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 0 rgba(15, 33, 58, 0.03);
}
.header-title { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.header-subtitle { font-size: 0.82rem; color: var(--color-text-muted); }

.sidebar-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 1.1rem;
    transition: all var(--transition-fast);
}
.sidebar-toggle-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: var(--color-border-strong);
    transform: none;
}

#logout-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 8px 13px;
    font-size: 0.86rem;
    font-weight: 600;
}
#logout-btn:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: #f0c5bf;
    transform: none;
}
#logout-btn .ic { font-size: 1rem; }

.header-user-name { font-weight: 600; font-size: 0.9rem; }
.header-user-role { font-size: 0.76rem; letter-spacing: 0.01em; }

/* ------------------------------------------------------------------
   6. LOGIN
------------------------------------------------------------------ */
.login-shell {
    background:
        radial-gradient(1100px 600px at 72% -12%, #21456f 0%, transparent 58%),
        radial-gradient(900px 500px at 10% 110%, #14365d 0%, transparent 55%),
        linear-gradient(160deg, #0c1f38, #0a1730 70%);
}
.login-card {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 36px 34px;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.login-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.01em;
    text-transform: none;
}
.login-brand .ic {
    font-size: 1.5rem;
    color: var(--accent-2);
}
.login-title { color: var(--color-primary); font-weight: 700; }
.login-input {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--color-border) !important;
}
.login-submit {
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-primary-2), var(--color-primary));
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------
   7. HOME / launcher
------------------------------------------------------------------ */
.home-welcome {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(600px 240px at 92% -40%, rgba(199, 154, 58, 0.28), transparent 60%),
        linear-gradient(120deg, var(--brand-1), var(--brand-3) 85%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-md);
}
.home-welcome::after {
    content: "";
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 45%);
    opacity: 0.7;
}
.home-welcome-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.home-welcome-sub { opacity: 0.78; }
.home-role-chip {
    background: rgba(199, 154, 58, 0.16);
    border: 1px solid rgba(199, 154, 58, 0.4);
    color: #ecd9a8;
}

.home-grid { gap: 16px; }
.home-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-out, 0.3s var(--ease-out));
}
.home-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.home-card:hover::before { transform: scaleX(1); }
.home-card-icon {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: linear-gradient(150deg, var(--color-primary-soft), #dbe7f6);
    color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}
.home-card-icon .ic { font-size: 1.55rem; }
.home-card-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.home-card-action {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-primary-2);
    font-weight: 600;
}
.home-card-action::after { content: none; }
.home-card-action .ic { transition: transform var(--transition-fast); }
.home-card:hover .home-card-action .ic { transform: translateX(4px); }
.home-card.disabled::before { display: none; }

/* ------------------------------------------------------------------
   8. KPI CARDS  (numerales mono, hairline de acento, hover sutil)
------------------------------------------------------------------ */
.metric-card, .bal-kpi-card, .er-kpi-hero, .er-kpi-sec, .er-ratio-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.metric-card { position: relative; }
.bal-kpi-card { position: relative; overflow: hidden; }
.bal-kpi-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--color-primary-2); opacity: 0.85;
}
.metric-card:hover, .bal-kpi-card:hover, .er-kpi-hero:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border-strong);
}
.metric-value, .bal-kpi-value, .er-kpi-hero-value, .er-kpi-sec-value, .er-ratio-value {
    font-family: var(--font-num);
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--color-text);
}
.metric-value { color: var(--color-primary); }
.metric-label, .bal-kpi-label, .er-kpi-hero-label, .er-ratio-label {
    color: var(--color-text-muted);
    letter-spacing: 0.07em;
}
.er-kpi-hero {
    background: linear-gradient(150deg, #ffffff 0%, #f6f9fd 100%);
}

/* ------------------------------------------------------------------
   9. CARDS / secciones
------------------------------------------------------------------ */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card h3 { color: var(--color-primary); letter-spacing: -0.01em; }
.section-title, .page-title, .bal-section-title, .bal-module-title { color: var(--color-primary); }

/* ------------------------------------------------------------------
   10. BOTONES
------------------------------------------------------------------ */
button, .btn-primary {
    background: linear-gradient(135deg, var(--color-primary-2), var(--color-primary));
    border-color: var(--color-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    letter-spacing: 0.005em;
}
button:hover, .btn-primary:hover {
    background: linear-gradient(135deg, #2360a3, var(--color-primary-2));
    box-shadow: var(--shadow-sm);
}
button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
}
.btn-success { background: linear-gradient(135deg, #1f9159, var(--color-success)); border-color: var(--color-success); }
.btn-danger  { background: linear-gradient(135deg, #c63327, var(--color-danger)); border-color: var(--color-danger); }
.btn-warning { background: linear-gradient(135deg, #c76b13, var(--color-warning)); border-color: var(--color-warning); }

/* ------------------------------------------------------------------
   11. TABS
------------------------------------------------------------------ */
.tab, div[role="tab"] {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    color: var(--color-text-muted) !important;
}
.tab--selected, div[role="tab"][aria-selected="true"] {
    color: var(--color-primary) !important;
    border-top: 3px solid var(--accent) !important;
}

/* ------------------------------------------------------------------
   12. TABLAS  (header tinta, hover suave)
------------------------------------------------------------------ */
.dash-spreadsheet-inner th {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem !important;
}
.dash-spreadsheet-inner td { font-variant-numeric: tabular-nums; }
.dash-spreadsheet-inner tr:hover td { background: var(--color-primary-soft) !important; }

.ag-theme-alpine, .ag-theme-balham {
    --ag-font-family: var(--font-base);
    --ag-odd-row-background-color: #fbfcfe;
    --ag-row-hover-color: var(--color-primary-soft);
    --ag-selected-row-background-color: #e3edf9;
    --ag-border-color: var(--color-hairline);
}

/* ------------------------------------------------------------------
   13. CONTROLES (dropdown / date)  foco navy + anillo
------------------------------------------------------------------ */
.is-focused:not(.is-open) > .Select-control,
.Select.is-focused > .Select-control {
    border-color: var(--color-primary-2) !important;
    box-shadow: 0 0 0 3px rgba(29, 79, 138, 0.14) !important;
}
.Select-control { border-radius: var(--radius-sm) !important; }
.Select-option.is-focused { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; }

/* ------------------------------------------------------------------
   14. ALERTS
------------------------------------------------------------------ */
.ui-alert { border-radius: var(--radius-sm); }
.ui-alert-warning { background: var(--color-warning-soft); border-left-color: var(--color-warning); color: #7c4708; }
.ui-alert-info    { background: var(--color-info-soft);    border-left-color: var(--color-info);    color: #13357e; }

/* ------------------------------------------------------------------
   15. SCROLLBAR
------------------------------------------------------------------ */
* { scrollbar-color: #b3c1d4 transparent; }
*::-webkit-scrollbar-thumb { background: #b8c5d6; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #9cadc3; background-clip: content-box; }

/* Sidebar scrollbar más discreta sobre el navy */
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); background-clip: content-box; }

/* =====================================================================
   16. AJUSTES v2.1 — feedback de uso
   ===================================================================== */

/* --- Login / pantallas full-screen: sin scroll sobrante ---
   El .app-content aporta padding 24px; sumado al min-height:100vh del
   login-shell daba 100vh+48px → scroll. Lo anulamos cuando el contenido
   es una pantalla full-screen (login, cambio/recuperación de contraseña). */
.app-content:has(.login-shell) { padding: 0; }
.login-shell { min-height: 100vh; }
@supports (min-height: 100dvh) { .login-shell { min-height: 100dvh; } }

/* --- Home: tarjetas en sintonía (igual altura) --- */
.home-grid { align-items: stretch; }
.home-card-link { display: flex; }
.home-card { width: 100%; height: 100%; }

/* Tarjetas de módulos aún no implementados */
.home-card.disabled {
    background: var(--color-surface-soft);
    border-style: dashed;
    border-color: var(--color-border-strong);
}
.home-card.disabled .home-card-icon {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    box-shadow: none;
}
.home-card-action.muted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* --- Control de frescura + refresco de datos (header) --- */
.data-freshness {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 12px;
    margin-right: 4px;
    border-right: 1px solid var(--color-border);
}
.data-freshness-label {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.global-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface);
    color: var(--color-text-soft);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 0.82rem;
    font-weight: 600;
}
.global-refresh-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: var(--color-border-strong);
    transform: none;
}
.global-refresh-btn .ic { font-size: 0.95rem; }
.global-refresh-btn:active .ic { animation: ic-spin 0.6s linear; }
@keyframes ic-spin { to { transform: rotate(360deg); } }

@media (max-width: 992px) {
    .data-freshness-label,
    .global-refresh-btn span { display: none; }
    .data-freshness { padding-right: 8px; }
}