/* ==========================================================
   REPORTES AsEp
   VARIABLES.CSS
   Design System v3.1
   Sistema centralizado de diseño
   ========================================================== */


/* ==========================================================
   TIPOGRAFÍA
   ========================================================== */

:root{

    --font-family-sans:
        "Inter",
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --font-family-mono:
        "JetBrains Mono",
        Consolas,
        monospace;

    --font-main:
        var(--font-family-sans);

    --font-family-display:
        Georgia,
        "Times New Roman",
        Times,
        serif;

    --font-display:
        var(--font-family-display);

    --font-mono:
        var(--font-family-mono);


    --font-size-2xs:.6875rem;
    --font-size-xs:.75rem;
    --font-size-sm:.875rem;
    --font-size-md:1rem;
    --font-size-lg:1.125rem;
    --font-size-xl:1.25rem;
    --font-size-2xl:1.5rem;
    --font-size-3xl:2rem;
    --font-size-4xl:2.75rem;
    --font-size-5xl:3.5rem;


    --font-weight-thin:100;
    --font-weight-light:300;
    --font-weight-regular:400;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;
    --font-weight-black:800;


    --line-height-tight:1.2;
    --line-height-snug:1.35;
    --line-height-normal:1.5;
    --line-height-relaxed:1.7;
    --line-height-loose:2;


    --letter-spacing-tight:-.02em;
    --letter-spacing-normal:0;
    --letter-spacing-wide:.08em;
    --letter-spacing-wider:.14em;

}


/* ==========================================================
   ESPACIADO
   ========================================================== */

:root{

    --space-0:0;

    --space-1:.25rem;
    --space-2:.50rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
    --space-7:1.75rem;
    --space-8:2rem;
    --space-9:2.5rem;
    --space-10:3rem;
    --space-11:3.5rem;
    --space-12:4rem;
    --space-14:5rem;
    --space-16:6rem;
    --space-20:8rem;
    --space-24:10rem;

}


/* ==========================================================
   BORDES
   ========================================================== */

:root{

    --border-width-none:0;
    --border-width-thin:1px;
    --border-width-normal:2px;
    --border-width-thick:3px;
    --border-width-heavy:4px;

}


/* ==========================================================
   RADIOS
   ========================================================== */

:root{

    --radius-none:0;

    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-2xl:32px;
    --radius-3xl:42px;

    --radius-pill:999px;
    --radius-circle:50%;

}


/* ==========================================================
   SOMBRAS
   ========================================================== */

:root{

    --shadow-none:none;

    --shadow-xs:
        0 1px 2px rgba(16,24,40,.05);

    --shadow-sm:
        0 4px 10px rgba(15,23,42,.06);

    --shadow-md:
        0 10px 24px rgba(15,23,42,.10);

    --shadow-lg:
        0 18px 40px rgba(15,23,42,.14);

    --shadow-xl:
        0 28px 60px rgba(15,23,42,.18);

    --shadow-2xl:
        0 40px 80px rgba(15,23,42,.22);

    --shadow-inner:
        inset 0 1px 3px rgba(0,0,0,.08);

}


/* ==========================================================
   Z-INDEX
   ========================================================== */

:root{

    --z-background:-1;
    --z-normal:1;

    --z-dropdown:1000;
    --z-sticky:1020;
    --z-navbar:1030;
    --z-sidebar:1040;
    --z-overlay:1050;
    --z-modal:1060;
    --z-toast:1080;
    --z-tooltip:1100;
    --z-loader:1200;

}


/* ==========================================================
   TRANSICIONES
   ========================================================== */

:root{

    --transition-fast:.18s;
    --transition-normal:.28s;
    --transition-slow:.45s;

    --ease-standard:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-in:cubic-bezier(.55,0,.75,.19);


    --transition-fast-standard:
        var(--transition-fast)
        var(--ease-standard);

    --transition-standard:
        var(--transition-normal)
        var(--ease-standard);

    --transition-slow-standard:
        var(--transition-slow)
        var(--ease-standard);

}


/* ==========================================================
   ANIMACIONES
   ========================================================== */

:root{

    --animation-fast:.20s;
    --animation-normal:.35s;
    --animation-slow:.60s;

    --animation-sidebar:
        .35s cubic-bezier(.4,0,.2,1);

    --animation-dropdown:
        .24s cubic-bezier(.22,1,.36,1);

    --animation-modal:
        .30s cubic-bezier(.22,1,.36,1);

}


/* ==========================================================
   LAYOUT
   ========================================================== */

:root{

    --sidebar-width:280px;
    --sidebar-collapsed-width:88px;
    --sidebar-mobile-width:310px;

    --navbar-height:74px;
    --navbar-padding-x:2rem;
    --navbar-padding-y:1rem;

    --footer-height:70px;

    --dashboard-max-width:1680px;
    --dashboard-padding:2rem;
    --dashboard-gap:2rem;

    --container-sm:640px;
    --container-md:768px;
    --container-lg:1024px;
    --container-xl:1280px;
    --container-2xl:1440px;

}


/* ==========================================================
   GRID
   ========================================================== */

:root{

    --grid-gap-sm:1rem;
    --grid-gap:1.5rem;
    --grid-gap-lg:2rem;
    --grid-gap-xl:3rem;

}


/* ==========================================================
   ICONOGRAFÍA
   ========================================================== */

:root{

    --icon-size-xs:14px;
    --icon-size-sm:18px;
    --icon-size-md:22px;
    --icon-size-lg:28px;
    --icon-size-xl:36px;

}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

:root{

    --focus-ring-width:3px;

    --focus-ring-color:
        rgba(242,92,42,.28);

    --focus-ring:
        0 0 0 var(--focus-ring-width)
        var(--focus-ring-color);

}


/* ==========================================================
   PALETA CORPORATIVA
   ========================================================== */

:root{

    --color-primary:#F25C2A;
    --color-primary-hover:#E64F1B;
    --color-primary-active:#D84516;
    --color-primary-soft:rgba(242,92,42,.12);
    --color-primary-border:rgba(242,92,42,.24);


    --color-secondary:#1E3A8A;
    --color-secondary-hover:#17337B;
    --color-secondary-active:#142D69;
    --color-secondary-soft:rgba(30,58,138,.10);
    --color-secondary-border:rgba(30,58,138,.22);


    --color-accent:#FF8A3D;
    --color-accent-soft:rgba(255,138,61,.12);

}


/* ==========================================================
   ESTADOS
   ========================================================== */

:root{

    --color-success:#22C55E;
    --color-success-hover:#16A34A;
    --color-success-soft:rgba(34,197,94,.12);
    --color-success-border:rgba(34,197,94,.24);


    --color-warning:#F59E0B;
    --color-warning-hover:#D97706;
    --color-warning-soft:rgba(245,158,11,.12);
    --color-warning-border:rgba(245,158,11,.24);


    --color-danger:#EF4444;
    --color-danger-hover:#DC2626;
    --color-danger-soft:rgba(239,68,68,.12);
    --color-danger-border:rgba(239,68,68,.24);


    --color-info:#3B82F6;
    --color-info-hover:#2563EB;
    --color-info-soft:rgba(59,130,246,.12);
    --color-info-border:rgba(59,130,246,.24);

}


/* ==========================================================
   ESCALA DE GRISES
   ========================================================== */

:root{

    --gray-0:#FFFFFF;

    --gray-50:#F8FAFC;
    --gray-100:#F1F5F9;
    --gray-200:#E2E8F0;
    --gray-300:#CBD5E1;
    --gray-400:#94A3B8;
    --gray-500:#64748B;
    --gray-600:#475569;
    --gray-700:#334155;
    --gray-800:#1E293B;
    --gray-900:#0F172A;
    --gray-950:#020617;

}


/* ==========================================================
   BLANCO / NEGRO
   ========================================================== */

:root{

    --color-white:#FFFFFF;
    --color-black:#000000;
    --color-transparent:transparent;

}


/* ==========================================================
   TEXTO
   ========================================================== */

:root{

    --color-heading:#13233C;
    --color-text:#24364E;
    --color-text-secondary:#4B5E77;
    --color-text-muted:#74849A;
    --color-placeholder:#9AA8BB;

    --color-link:
        var(--color-primary);

    --color-link-hover:
        var(--color-primary-hover);

    --color-disabled:#B8C3D2;

}


/* ==========================================================
   FONDOS
   ========================================================== */

:root{

    --bg-main:#F4F7FB;
    --bg-body:#F4F7FB;
    --bg-surface:#FFFFFF;
    --bg-card:#FFFFFF;
    --bg-card-hover:#F8FAFC;
    --bg-sidebar:#FFFFFF;
    --bg-navbar:rgba(255,255,255,.82);
    --bg-footer:#FFFFFF;
    --bg-input:#FFFFFF;
    --bg-dropdown:#FFFFFF;
    --bg-modal:#FFFFFF;
    --bg-tooltip:#13233C;
    --bg-overlay:rgba(15,23,42,.55);

}


/* ==========================================================
   BORDES VISUALES
   ========================================================== */

:root{

    --border-light:rgba(17,34,68,.08);
    --border-normal:rgba(17,34,68,.12);
    --border-strong:rgba(17,34,68,.18);

    --border-primary:rgba(242,92,42,.24);
    --border-success:rgba(34,197,94,.24);
    --border-warning:rgba(245,158,11,.24);
    --border-danger:rgba(239,68,68,.24);
    --border-info:rgba(59,130,246,.24);

}


/* ==========================================================
   GLASSMORPHISM
   ========================================================== */

:root{

    --glass-background:
        rgba(255,255,255,.78);

    --glass-background-strong:
        rgba(255,255,255,.88);

    --glass-border:
        rgba(255,255,255,.48);

    --glass-blur:18px;
    --glass-saturation:160%;

}


/* ==========================================================
   BOTONES
   ========================================================== */

:root{

    --button-height:46px;
    --button-radius:14px;
    --button-padding-x:1.25rem;
    --button-font-weight:600;


    --button-primary-bg:
        var(--color-primary);

    --button-primary-hover:
        var(--color-primary-hover);

    --button-primary-active:
        var(--color-primary-active);


    --button-primary-gradient:
        linear-gradient(
            135deg,
            #FD7A39,
            #FD5D39
        );


    --button-primary-text:
        var(--color-white);


    --button-primary-shadow:
        0 12px 28px
        rgba(242,92,42,.28);


    --button-secondary-bg:
        var(--bg-surface);

    --button-secondary-text:
        var(--color-text);

    --button-secondary-border:
        var(--border-light);


    --button-ghost-bg:
        transparent;

    --button-ghost-hover:
        rgba(15,23,42,.04);

}


/* ==========================================================
   TABLAS
   ========================================================== */

:root{

    --table-header-height:56px;
    --table-row-height:54px;

    --table-head-bg:#F8FAFC;
    --table-row-hover:#F4F7FB;

    --table-border:
        var(--border-light);

    --table-header-text:
        var(--color-primary);

    --table-stripe:
        rgba(15,23,42,.015);

}


/* ==========================================================
   BADGES
   ========================================================== */

:root{

    --badge-radius:999px;
    --badge-padding-y:.35rem;
    --badge-padding-x:.75rem;
    --badge-font-size:.75rem;
    --badge-font-weight:600;


    --badge-success-bg:
        var(--color-success-soft);

    --badge-warning-bg:
        var(--color-warning-soft);

    --badge-danger-bg:
        var(--color-danger-soft);

    --badge-info-bg:
        var(--color-info-soft);


    --badge-success-color:
        var(--color-success);

    --badge-warning-color:
        var(--color-warning);

    --badge-danger-color:
        var(--color-danger);

    --badge-info-color:
        var(--color-info);

}


/* ==========================================================
   FORMULARIOS
   ========================================================== */

:root{

    --input-height:48px;
    --input-radius:14px;
    --input-padding-x:1rem;

    --input-bg:#FFFFFF;
    --input-border:var(--border-light);
    --input-hover:#FAFBFD;
    --input-focus:rgba(242,92,42,.20);
    --input-shadow:none;

}


/* ==========================================================
   FORM CARD
   ========================================================== */

:root{

    --form-card-bg:
        var(--bg-card);

    --form-card-border:
        var(--border-light);

    --form-card-radius:
        22px;

    --form-card-shadow:
        var(--shadow-lg);


    --form-card-header-border:
        var(--border-light);

    --form-card-title:
        var(--color-heading);

    --form-card-description:
        var(--color-text-secondary);


    --form-card-icon-bg:
        var(--color-primary-soft);

    --form-card-icon-color:
        var(--color-primary);


    --form-card-footer-border:
        var(--border-light);


    --form-label-color:
        var(--color-heading);

    --form-required-color:
        var(--color-primary);


    --form-input-bg:
        var(--input-bg);

    --form-input-border:
        var(--input-border);

    --form-input-hover:
        var(--input-hover);

    --form-input-focus:
        var(--input-focus);

    --form-input-text:
        var(--color-text);

    --form-input-placeholder:
        var(--color-placeholder);


    --form-input-group-bg:
        var(--bg-surface);

    --form-input-group-color:
        var(--color-text-secondary);


    --form-help-color:
        var(--color-text-muted);


    --form-info-bg:
        var(--color-info-soft);

    --form-info-border:
        var(--color-info-border);

    --form-info-icon-bg:
        var(--color-info);

    --form-info-icon-color:
        var(--color-white);

    --form-info-text:
        var(--color-text);

}


/* ==========================================================
   HOME
   REPORTES AsEp
   Variables exclusivas del Home
   ========================================================== */

:root{


/* ==========================================================
   HOME — CONTENEDOR EXTERIOR
   ========================================================== */

    --home-max-width:
        var(--container-2xl);

    --home-padding:
        var(--space-10);

    --home-radius:
        var(--radius-2xl);

    --home-background:
        var(--glass-background-strong);

    --home-border:
        var(--glass-border);

    --home-shadow:
        var(--shadow-xl);


/* ==========================================================
   HOME — HERO CARD / GLASS CONTAINER
   ========================================================== */

    --home-hero-background:
        rgba(255,255,255,.075);

    --home-hero-border:
        rgba(255,255,255,.22);

    --home-hero-shadow:
        0 18px 45px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.12);

    --home-hero-blur:7px;

    --home-hero-radius:28px;
    --home-hero-radius-mobile:20px;

    --home-hero-highlight:
        linear-gradient(180deg, rgba(255,255,255,.09), transparent 34%);

    --home-hero-highlight-opacity:.65;

/* ==========================================================
   HOME — HERO SECTION
   ========================================================== */

    --home-hero-padding-top:
        var(--space-8);

    --home-hero-padding-x:
        var(--space-8);

    --home-hero-padding-bottom:
        var(--space-10);


/* ==========================================================
   HOME — LOGO
   ========================================================== */

    --home-logo-size:188px;
    --home-logo-size-tablet:150px;
    --home-logo-size-mobile:112px;

    --home-logo-radius:0;

    --home-logo-shadow:
        var(--shadow-sm);


/* ==========================================================
   HOME — TITLE
   ========================================================== */

    --home-title-size:
        clamp(
            2.85rem,
            4.6vw,
            4rem
        );

    --home-title-weight:
        var(--font-weight-black);

    --home-title-line-height:.98;

    --home-title-letter-spacing:
        var(--letter-spacing-tight);

    --home-title-color:
        var(--color-heading);


/* ==========================================================
   HOME — BRAND
   ========================================================== */

    --home-brand-blue:
        var(--color-secondary);

    --home-brand-orange:
        var(--color-primary);


/* ==========================================================
   HOME — SLOGAN
   ========================================================== */

    --home-slogan-size:
        var(--font-size-lg);

    --home-slogan-weight:
        var(--font-weight-semibold);

    --home-slogan-color:
        var(--color-primary);

    --home-slogan-letter-spacing:
        var(--letter-spacing-normal);


/* ==========================================================
   HOME — DESCRIPTION
   ========================================================== */

    --home-description-size:
        var(--font-size-md);

    --home-description-line-height:
        var(--line-height-relaxed);

    --home-description-color:
        var(--color-text-muted);

    --home-description-max-width:
        760px;


/* ==========================================================
   HOME — SEPARADOR
   ========================================================== */

    --home-divider:
        var(--border-light);

    --home-divider-width:
        var(--border-width-thin);


/* ==========================================================
   HOME — PORTAL GRID
   ========================================================== */

    --portal-grid-gap:
        var(--grid-gap-lg);

    --portal-grid-gap-tablet:
        1.25rem;

    --portal-grid-gap-mobile:
        1rem;


/* ==========================================================
   HOME — PORTAL CARD
   ========================================================== */

    --portal-card-background:
        var(--bg-card);

    --portal-card-background-hover:
        var(--bg-card-hover);

    --portal-card-border:
        var(--border-light);

    --portal-card-border-hover:
        var(--border-normal);

    --portal-card-radius:
        24px;

    --portal-card-shadow:
        0 14px 30px rgba(15,23,42,.065);

    --portal-card-shadow-hover:
        0 22px 42px rgba(15,23,42,.13);

    --portal-card-hover-y:
        var(--translate-hover);

    --portal-card-transition:
        var(--transition-standard);


/* ==========================================================
   HOME — PORTAL CARD TOP ACCENT
   ========================================================== */

    --portal-accent-line-width:
        70%;

    --portal-accent-line-height:
        3px;

    --portal-accent-line-radius:
        0 0 10px 10px;

    --portal-accent-line-scale:
        0;

    --portal-accent-line-scale-hover:
        1;


/* ==========================================================
   HOME — PORTAL CARD PADDING
   ========================================================== */

    --portal-card-padding-y:
        1.45rem;

    --portal-card-padding-x:
        1.25rem;

    --portal-card-padding-bottom:
        1.15rem;

    --portal-card-padding-tablet:
        1.25rem;

    --portal-card-padding-mobile:
        1.25rem;

    --portal-card-padding-small:
        1rem;


/* ==========================================================
   HOME — PORTAL LINK
   ========================================================== */

    --portal-link-padding-top:
        var(--portal-card-padding-y);

    --portal-link-padding-x:
        var(--portal-card-padding-x);

    --portal-link-padding-bottom:
        var(--portal-card-padding-bottom);


/* ==========================================================
   HOME — PORTAL CARD TOP LINE
   Compatibilidad
   ========================================================== */

    --portal-card-top-line-width:
        var(--portal-accent-line-width);

    --portal-card-top-line-height:
        var(--portal-accent-line-height);

    --portal-card-top-line-radius:
        var(--portal-accent-line-radius);

    --portal-card-top-line-scale:
        var(--portal-accent-line-scale);

    --portal-card-top-line-scale-hover:
        var(--portal-accent-line-scale-hover);


/* ==========================================================
   HOME — PORTAL ICONOS
   ========================================================== */

    --portal-icon-size:92px;
    --portal-icon-size-tablet:84px;
    --portal-icon-size-mobile:78px;
    --portal-icon-size-small:66px;

    --portal-icon-radius:20px;
    --portal-icon-radius-small:17px;

    --portal-icon-font-size:2.1rem;
    --portal-icon-font-size-tablet:1.9rem;
    --portal-icon-font-size-small:1.65rem;

    --portal-icon-border-width:
        var(--border-width-thin);

    --portal-icon-hover-y:-2px;


/* ==========================================================
   HOME — PORTAL ICON WORKER
   ========================================================== */

    --portal-icon-color-worker:
        var(--color-primary);

    --portal-icon-background-worker:
        var(--color-primary-soft);

    --portal-icon-border-worker:
        var(--color-primary-border);

    --portal-icon-shadow-worker:
        0 12px 25px rgba(242,92,42,.20);


/* ==========================================================
   HOME — PORTAL ICON CLIENT
   ========================================================== */

    --portal-icon-color-client:
        var(--color-info);

    --portal-icon-background-client:
        var(--color-info-soft);

    --portal-icon-border-client:
        var(--color-info-border);

    --portal-icon-shadow-client:
        0 12px 25px rgba(37,99,235,.20);


/* ==========================================================
   HOME — PORTAL ICON HOVER
   Compatibilidad
   ========================================================== */

    --portal-icon-hover-shadow-worker:
        var(--portal-icon-shadow-worker);

    --portal-icon-hover-shadow-client:
        var(--portal-icon-shadow-client);


/* ==========================================================
   HOME — PORTAL CONTENT
   ========================================================== */

    --portal-content-margin-top:
        1.35rem;

    --portal-title-color:
        var(--color-heading);

    --portal-title-color-dark:
        var(--color-white);

    --portal-title-size:
        1.45rem;

    --portal-title-size-tablet:
        1.3rem;

    --portal-title-size-mobile:
        1.18rem;

    --portal-title-size-small:
        1.08rem;

    --portal-title-weight:
        750;

    --portal-title-line-height:
        1.25;

    --portal-title-letter-spacing:
        -.02em;


    --portal-description-color:
        var(--color-text-muted);

    --portal-description-color-dark:
        rgba(226,232,240,.72);

    --portal-description-size:
        .94rem;

    --portal-description-size-mobile:
        .88rem;

    --portal-description-line-height:
        1.55;

    --portal-description-max-width:
        390px;

    --portal-description-max-width-mobile:
        440px;


/* ==========================================================
   HOME — PORTAL ACTION
   ========================================================== */

    --portal-action-margin-top:
        1rem;

    --portal-action-padding-top:
        1rem;

    --portal-action-border:
        rgba(148,163,184,.14);

    --portal-action-border-dark:
        rgba(255,255,255,.08);


/* ==========================================================
   HOME — PORTAL BUTTON
   ========================================================== */

    --portal-button-height:
        48px;

    --portal-button-min-width:
        182px;

    --portal-button-max-width-mobile:
        280px;

    --portal-button-max-width-small:
        100%;

    --portal-button-padding-y:
        .7rem;

    --portal-button-padding-x:
        1.4rem;

    --portal-button-radius:
        14px;

    --portal-button-font-size:
        .88rem;

    --portal-button-font-weight:
        700;

    --portal-button-gap:
        .55rem;

    --portal-button-gap-hover:
        .8rem;

    --portal-button-icon-size:
        1rem;

    --portal-button-icon-hover-x:
        3px;


/* ==========================================================
   HOME — PORTAL BUTTON WORKER
   ========================================================== */

    --portal-worker-button:
        var(--button-primary-gradient);

    --portal-worker-button-shadow:
        0 9px 20px rgba(242,92,42,.20);

    --portal-worker-button-shadow-hover:
        0 12px 25px rgba(242,92,42,.20);


/* ==========================================================
   HOME — PORTAL BUTTON CLIENT
   ========================================================== */

    --portal-client-button:
        var(--color-info);

    --portal-client-button-shadow:
        0 9px 20px rgba(37,99,235,.20);

    --portal-client-button-shadow-hover:
        0 12px 25px rgba(37,99,235,.20);


/* ==========================================================
   HOME — PORTAL FOCUS
   ========================================================== */

    --portal-focus-width:
        3px;

    --portal-focus-offset:
        -3px;

    --portal-focus-color:
        var(--color-primary);


/* ==========================================================
   HOME — THEME SWITCH
   ========================================================== */

    --theme-switch-width:82px;
    --theme-switch-height:42px;

    --theme-switch-padding-y:
        var(--space-1);

    --theme-switch-padding-x:
        var(--space-2);

    --theme-switch-background:
        var(--bg-surface);

    --theme-switch-border:
        var(--border-light);

    --theme-switch-shadow:
        var(--shadow-sm);

    --theme-switch-hover-shadow:
        var(--shadow-md);

    --theme-switch-primary:
        var(--color-primary);

    --theme-switch-secondary:
        var(--color-info);

    --theme-switch-slider:
        var(--color-primary-soft);

    --theme-switch-slider-size:
        34px;

    --theme-switch-slider-position:
        4px;

    --theme-switch-icon-size:
        26px;


/* ==========================================================
   HOME BACKGROUND
   ========================================================== */

    --home-bg-top:#f8fbff;
    --home-bg-middle:#f1f6fc;
    --home-bg-bottom:#e9f0f8;


/* ==========================================================
   BACKGROUND — GLOW BASE
   ========================================================== */

    --home-bg-glow-strong:
        rgba(255,255,255,.98);

    --home-bg-glow-medium:
        rgba(255,255,255,.72);

    --home-bg-glow-soft:
        rgba(255,255,255,.20);


/* ==========================================================
   BACKGROUND — PATTERN
   ========================================================== */

    --home-bg-pattern-opacity:.72;
    --home-bg-pattern-opacity-tablet:.68;
    --home-bg-pattern-opacity-mobile:.58;
    --home-bg-pattern-opacity-small:.48;


/* ==========================================================
   BACKGROUND — LINES
   ========================================================== */

    --home-bg-lines-opacity:.72;
    --home-bg-lines-opacity-tablet:.66;
    --home-bg-lines-opacity-mobile:.55;
    --home-bg-lines-opacity-small:.42;


/* ==========================================================
   BACKGROUND — ANIMACIÓN
   ========================================================== */

    --home-bg-pattern-duration:34s;
    --home-bg-lines-duration:42s;


/* ==========================================================
   AMBIENT LIGHT
   ========================================================== */

    --home-light-glow-strong:
        rgba(255,255,255,.96);

    --home-light-glow-medium:
        rgba(255,255,255,.72);

    --home-light-glow-soft:
        rgba(255,255,255,.20);

    --home-light-opacity:.90;
    --home-light-opacity-pulse:.82;


/* ==========================================================
   AMBIENT LIGHT — BLUR
   ========================================================== */

    --home-light-blur:70px;
    --home-light-blur-mobile:55px;


/* ==========================================================
   AMBIENT BLUE LIGHT
   ========================================================== */

    --home-blue-glow-strong:
        rgba(37,99,235,.08);

    --home-blue-glow-medium:
        rgba(37,99,235,.035);

    --home-blue-blur:65px;
    --home-blue-blur-mobile:40px;


/* ==========================================================
   GLOW — ANIMACIÓN
   ========================================================== */

    --home-glow-duration:18s;


/* ==========================================================
   NOISE
   ========================================================== */

    --home-noise-opacity:.014;

    --home-noise-color:
        rgba(0,0,0,.12);


/* ==========================================================
   DARK — BACKGROUND
   ========================================================== */

    --home-dark-bg-top:#071222;
    --home-dark-bg-middle:#09172b;
    --home-dark-bg-bottom:#0d1d35;


/* ==========================================================
   DARK — BACKGROUND GLOW
   ========================================================== */

    --home-dark-bg-glow-strong:
        rgba(52,120,255,.18);

    --home-dark-bg-glow-medium:
        rgba(52,120,255,.08);


/* ==========================================================
   DARK — PATTERN
   ========================================================== */

    --home-dark-pattern-opacity:.55;
    --home-dark-lines-opacity:.60;


/* ==========================================================
   DARK — AMBIENT LIGHT
   ========================================================== */

    --home-dark-light-opacity:.70;


/* ==========================================================
   DARK — BLUE LIGHT
   ========================================================== */

    --home-dark-light-blue-strong:
        rgba(52,120,255,.22);

    --home-dark-light-blue-medium:
        rgba(52,120,255,.10);


/* ==========================================================
   DARK — ORANGE LIGHT
   ========================================================== */

    --home-dark-light-orange-strong:
        rgba(242,92,42,.10);

    --home-dark-light-orange-medium:
        rgba(242,92,42,.04);


/* ==========================================================
   DARK — NOISE
   ========================================================== */

    --home-dark-noise-opacity:.025;

}


/* ==========================================================
   TEMA CLARO
   ========================================================== */

[data-theme="light"]{

    --bg-main:#F4F7FB;
    --bg-body:#F4F7FB;
    --bg-surface:#FFFFFF;
    --bg-card:#FFFFFF;
    --bg-card-hover:#F8FAFC;
    --bg-sidebar:#FFFFFF;

    --bg-navbar:
        rgba(255,255,255,.82);

    --bg-footer:#FFFFFF;
    --bg-input:#FFFFFF;
    --bg-dropdown:#FFFFFF;
    --bg-modal:#FFFFFF;
    --bg-tooltip:#13233C;


    --color-heading:#13233C;
    --color-text:#24364E;
    --color-text-secondary:#4B5E77;
    --color-text-muted:#74849A;
    --color-placeholder:#9AA8BB;
    --color-disabled:#B5C0CF;


    --border-light:
        rgba(17,34,68,.08);

    --border-normal:
        rgba(17,34,68,.12);

    --border-strong:
        rgba(17,34,68,.18);

    --border-primary:
        rgba(242,92,42,.24);


    --glass-background:
        rgba(255,255,255,.78);

    --glass-background-strong:
        rgba(255,255,255,.92);

    --glass-border:
        rgba(255,255,255,.48);

    --glass-blur:18px;


    --input-bg:#FFFFFF;
    --input-hover:#FAFBFD;

    --input-border:
        rgba(17,34,68,.10);

    --input-focus:
        rgba(242,92,42,.20);


    --button-secondary-bg:#FFFFFF;

    --button-secondary-text:
        var(--color-text);

    --button-secondary-border:
        rgba(17,34,68,.08);


    --table-head-bg:#F8FAFC;
    --table-row-hover:#F4F7FB;

    --table-border:
        rgba(17,34,68,.08);


    --scroll-track:#EDF2F8;

    --scroll-thumb:
        var(--color-primary);

    --scroll-thumb-hover:
        var(--color-primary-hover);


    --shadow-xs:
        0 1px 2px rgba(16,24,40,.05);

    --shadow-sm:
        0 4px 10px rgba(15,23,42,.06);

    --shadow-md:
        0 10px 24px rgba(15,23,42,.10);

    --shadow-lg:
        0 18px 40px rgba(15,23,42,.14);

    --shadow-xl:
        0 28px 60px rgba(15,23,42,.18);


    /* ======================================================
       HOME — PORTAL CARDS LIGHT
       ====================================================== */

    --portal-card-background:
        #FFFFFF;

    --portal-card-background-hover:
        #F8FAFC;

    --portal-card-border:
        #E3EAF3;

    --portal-card-border-hover:
        #D6E0EC;

    --portal-card-shadow:
        0 14px 30px rgba(15,23,42,.065);

    --portal-card-shadow-hover:
        0 22px 42px rgba(15,23,42,.13);

}


/* ==========================================================
   TEMA OSCURO
   ========================================================== */

[data-theme="dark"]{

    --bg-main:#081421;
    --bg-body:#081421;
    --bg-surface:#0E1D33;
    --bg-card:#132442;
    --bg-card-hover:#19304F;
    --bg-sidebar:#0C182C;

    --bg-navbar:
        rgba(8,20,33,.88);

    --bg-footer:#0C182C;
    --bg-input:#172B47;
    --bg-dropdown:#132442;
    --bg-modal:#132442;
    --bg-tooltip:#F4F7FC;


    --color-heading:#FFFFFF;
    --color-text:#F4F7FC;
    --color-text-secondary:#D8E1F2;
    --color-text-muted:#A9B6CF;
    --color-placeholder:#8192B3;
    --color-disabled:#64748B;


    --border-light:
        rgba(255,255,255,.08);

    --border-normal:
        rgba(255,255,255,.12);

    --border-strong:
        rgba(255,255,255,.18);

    --border-primary:
        rgba(242,92,42,.28);


    --glass-background:
        rgba(19,36,66,.78);

    --glass-background-strong:
        rgba(19,36,66,.90);

    --glass-border:
        rgba(255,255,255,.08);

    --glass-blur:20px;


    --input-bg:#172B47;
    --input-hover:#1A3253;

    --input-border:
        rgba(255,255,255,.10);

    --input-focus:
        rgba(242,92,42,.28);


    /* ======================================================
       FORM CARD — DARK
       ====================================================== */

    --form-card-bg:
        var(--bg-card);

    --form-card-border:
        var(--border-light);

    --form-card-header-border:
        var(--border-light);

    --form-card-footer-border:
        var(--border-light);

    --form-card-title:
        var(--color-heading);

    --form-card-description:
        var(--color-text-secondary);

    --form-label-color:
        var(--color-heading);

    --form-required-color:
        var(--color-primary);

    --form-input-bg:
        var(--input-bg);

    --form-input-border:
        var(--input-border);

    --form-input-hover:
        var(--input-hover);

    --form-input-focus:
        var(--input-focus);

    --form-input-text:
        var(--color-text);

    --form-input-placeholder:
        var(--color-placeholder);

    --form-input-group-bg:
        var(--bg-surface);

    --form-input-group-color:
        var(--color-text-secondary);

    --form-help-color:
        var(--color-text-muted);

    --form-info-bg:
        var(--color-info-soft);

    --form-info-border:
        var(--color-info-border);

    --form-info-icon-bg:
        var(--color-info);

    --form-info-icon-color:
        var(--color-white);

    --form-info-text:
        var(--color-text);


    /* ======================================================
       BUTTONS — DARK
       ====================================================== */

    --button-secondary-bg:#1A3253;

    --button-secondary-text:#F4F7FC;

    --button-secondary-border:
        rgba(255,255,255,.10);


    /* ======================================================
       TABLES — DARK
       ====================================================== */

    --table-head-bg:#17304D;
    --table-row-hover:#1A3253;

    --table-border:
        rgba(255,255,255,.08);


    /* ======================================================
       SCROLL — DARK
       ====================================================== */

    --scroll-track:#081421;

    --scroll-thumb:#F25C2A;
    --scroll-thumb-hover:#E14E1D;


    /* ======================================================
       SHADOWS — DARK
       ====================================================== */

    --shadow-xs:
        0 1px 2px rgba(0,0,0,.18);

    --shadow-sm:
        0 6px 14px rgba(0,0,0,.24);

    --shadow-md:
        0 14px 30px rgba(0,0,0,.32);

    --shadow-lg:
        0 24px 50px rgba(0,0,0,.40);

    --shadow-xl:
        0 36px 80px rgba(0,0,0,.50);


    /* ======================================================
       HOME — PORTAL CARDS DARK
       ====================================================== */

    --portal-card-background:
        linear-gradient(
            180deg,
            #152744,
            #10203A
        );

    --portal-card-background-hover:
        linear-gradient(
            180deg,
            #19304F,
            #132743
        );

    --portal-card-border:
        rgba(148,163,184,.17);

    --portal-card-border-hover:
        rgba(148,163,184,.28);

    --portal-card-shadow:
        0 18px 40px rgba(0,0,0,.28);

    --portal-card-shadow-hover:
        0 22px 46px rgba(0,0,0,.38);


    --portal-title-color:
        #F8FAFC;

    --portal-description-color:
        rgba(226,232,240,.72);

    --portal-action-border:
        rgba(255,255,255,.08);


    /* ======================================================
       HOME — DARK THEME
       ====================================================== */

    --home-background:
        var(--glass-background-strong);

    --home-border:
        var(--glass-border);

}


/* ==========================================================
   VARIABLES DE COMPATIBILIDAD
   ========================================================== */

:root{

    --background:
        var(--bg-main);

    --surface:
        var(--bg-card);

    --surface-hover:
        var(--bg-card-hover);

    --surface-alt:
        var(--bg-surface);


    --text-primary:
        var(--color-text);

    --text-secondary:
        var(--color-text-secondary);

    --text-muted:
        var(--color-text-muted);

    --heading:
        var(--color-heading);

    --placeholder:
        var(--color-placeholder);


    --primary:
        var(--color-primary);

    --primary-hover:
        var(--color-primary-hover);

    --primary-active:
        var(--color-primary-active);


    --secondary:
        var(--color-secondary);

    --secondary-hover:
        var(--color-secondary-hover);


    --success:
        var(--color-success);

    --warning:
        var(--color-warning);

    --danger:
        var(--color-danger);

    --info:
        var(--color-info);


    --border:
        var(--border-light);

    --border-hover:
        var(--border-normal);

    --border-focus:
        var(--border-primary);


    --shadow:
        var(--shadow-md);

}


/* ==========================================================
   UTILIDADES
   ========================================================== */

:root{

    --opacity-disabled:.45;
    --opacity-muted:.70;
    --opacity-overlay:.60;
    --opacity-hover:.90;

    --scale-hover:1.02;
    --scale-active:.98;
    --scale-card-hover:1.01;

    --translate-hover:-4px;
    --translate-small:-2px;

}


/* ==========================================================
   DASHBOARD GLOBAL
   ========================================================== */

:root{

    --dashboard-border-radius:
        20px;

    --dashboard-transition:
        var(--transition-standard);

    --dashboard-shadow:
        var(--shadow-md);

    --dashboard-shadow-hover:
        var(--shadow-lg);

}


/* ==========================================================
   COMPONENTES COMPARTIDOS
   ========================================================== */

:root{

    --component-padding:
        1.5rem;

    --component-gap:
        1.5rem;

    --component-radius:
        18px;

    --component-transition:
        var(--transition-standard);

}


/* ==========================================================
   ESTADOS DE INTERACCIÓN
   ========================================================== */

:root{

    --hover-overlay:
        rgba(255,255,255,.04);

    --active-overlay:
        rgba(255,255,255,.08);

    --selected-overlay:
        rgba(242,92,42,.10);

}


/* ==========================================================
   FOCUS
   ========================================================== */

:root{

    --focus-outline:
        0 0 0 3px
        rgba(242,92,42,.20);

    --focus-outline-strong:
        0 0 0 4px
        rgba(242,92,42,.28);

}


/* ==========================================================
   MOTION
   ========================================================== */

:root{

    --duration-fast:180ms;
    --duration-normal:280ms;
    --duration-slow:450ms;

}


/* ==========================================================
   ELEVACIÓN
   ========================================================== */

:root{

    --elevation-0:none;

    --elevation-1:
        var(--shadow-xs);

    --elevation-2:
        var(--shadow-sm);

    --elevation-3:
        var(--shadow-md);

    --elevation-4:
        var(--shadow-lg);

    --elevation-5:
        var(--shadow-xl);

}


/* ==========================================================
   DESARROLLO
   ========================================================== */

:root{

    --debug-grid:false;
    --debug-spacing:false;

}


/* ==========================================================
   HOME — FOOTER
   ========================================================== */

:root{

    --home-footer-height:54px;
    --home-footer-logo-size:24px;
    --home-footer-font-size:.72rem;
    --home-footer-gap:.65rem;

}

/* ==========================================================
   FIN DEL DESIGN SYSTEM
   REPORTES AsEp
   VARIABLES.CSS
   VERSION 3.1
   ========================================================== */

/* ==========================================================
   HOME — HERO CARD TEMA
   ========================================================== */

[data-theme="light"] {
    /* Misma transparencia real que Dark: 10%.
       Se evita el blanco puro para que el fondo siga siendo visible. */
    --home-hero-background: rgba(226,232,240,.10);
    --home-hero-border: rgba(148,163,184,.24);
    --home-hero-shadow: 0 20px 48px rgba(51,65,85,.09), inset 0 1px 0 rgba(255,255,255,.08);
    --home-hero-highlight: linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%);
    --home-hero-highlight-opacity: .18;
}

[data-theme="dark"] {
    --home-hero-background: rgba(10,28,58,.10);
    --home-hero-border: rgba(96,165,250,.26);
    --home-hero-shadow: 0 20px 48px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
    --home-hero-highlight: linear-gradient(180deg, rgba(255,255,255,.045), transparent 36%);
    --home-hero-highlight-opacity: .32;
}