/* ==========================================================================
   mercado-energia.css
   Mercado Energía — App Design System

   PURPOSE:
   Defines the application's visual identity through --me-* CSS custom
   properties (colors, radius, shadows, gradients) and provides dark/light
   theme support. Also includes Bootstrap dark-mode overrides and app-wide
   layout helpers (sidebar, cards, badges, tables, etc.).

   RULE:
   This file must NOT contain .k-* class selectors or --kendo-* variable
   overrides. ALL Telerik/Kendo customizations belong exclusively in
   telerik-overrides.css.

   RELATIONSHIP TO telerik-overrides.css:
   This file defines the --me-* design tokens. telerik-overrides.css reads
   those tokens and maps them to --kendo-* variables. Changing a color here
   (e.g., --me-accent) automatically propagates to every Telerik component
   via the bridge in telerik-overrides.css — no manual sync needed.

   DARK / LIGHT THEME:
   :root          → dark theme (default)
   html.light-theme → light theme overrides
   The theme is toggled by the ThemeSwitcher component in the Blazor layout.

   TELERIK UPGRADE IMPACT:
   None — this file has no direct dependency on any Telerik version.
   Only update this file when --me-* token names or values change.

   LOAD ORDER (defined in App.razor):
   1. bootstrap.min.css
   2. kendo-theme-default/all.css
   3. telerik-overrides.css
   4. >>> mercado-energia.css <<<   ← THIS FILE
   5. app.css
   6. SziCom.DocumentosIA.styles.css (Blazor scoped CSS bundle)
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────── */
:root {
    --me-bg: #0a0e1a;
    --me-bg2: #0d1220;
    --me-card: #111827;
    --me-border: #1f2937;
    --me-accent: #22d3ee;
    --me-accent2: #a78bfa;
    --me-green: #34d399;
    --me-orange: #fb923c;
    --me-red: #f87171;
    --me-text: #f1f5f9;
    --me-muted: #94a3b8;
    --me-radius: 12px;
    --me-radius-lg: 20px;
    --me-shadow: 0 4px 24px rgba(0,0,0,0.4);
    --me-shadow-glow: 0 0 40px rgba(var(--me-accent-rgb),0.12);
    --me-gradient: linear-gradient(135deg, var(--me-accent), var(--me-accent2));
    --me-gradient-soft: linear-gradient(135deg, rgba(var(--me-accent-rgb),.1), rgba(var(--me-accent2-rgb),.1));
    --me-transition: .2s ease;

    /* RGB channel tokens — for rgba(var(--me-*-rgb), alpha) tints */
    --me-accent-rgb:  34, 211, 238;
    --me-green-rgb:   52, 211, 153;
    --me-orange-rgb: 251, 146,  60;
    --me-red-rgb:    248, 113, 113;
    --me-muted-rgb:  148, 163, 184;

    /* RGB channel tokens for surfaces & text — for rgba(var(--me-*-rgb), alpha) tints */
    --me-bg-rgb:       10,  14,  26;
    --me-bg2-rgb:      13,  18,  32;
    --me-card-rgb:     17,  24,  39;
    --me-text-rgb:    241, 245, 249;
    --me-accent2-rgb: 167, 139, 250;

    /* Light-theme accent "dark" tokens — consumed by telerik-overrides.css */
    --me-accent-dark:  var(--me-accent);
    --me-accent2-dark: var(--me-accent2);
    --me-accent-hover: #06b6d4;
    --me-green-dark:   var(--me-green);
    --me-orange-dark:  var(--me-orange);
    --me-red-dark:     var(--me-red);
    --me-muted-dark:   var(--me-muted);

    /* Scrollbar tokens consumed by the global scrollbar block below.
       They resolve through already-themed tokens, and var() substitutes at use
       time, so the light swatch is picked up automatically: no need to redeclare
       any of these in html.light-theme.
         thumb  --me-muted       #94a3b8 dark / #4e5f6d light
         track  --me-muted-rgb   148,163,184 dark / 78,95,109 light
         hover  --me-accent-dark #22d3ee dark / #0c657f light
       A translucent track reads the same over --me-bg, --me-bg2 and --me-card,
       which the app's scrollers all sit on. */
    --me-scrollbar-size: 14px;
    --me-scrollbar-track: rgba(var(--me-muted-rgb), .18);
    --me-scrollbar-thumb: var(--me-muted);
    --me-scrollbar-thumb-hover: var(--me-accent-dark);

    /* Paleta del resaltado de detalles sobre el PDF (ComprobanteDetalle → columna "Resaltar").
       Se pinta de fondo detrás del texto negro del documento, así que van tonos claros y saturados
       —no los --me-* de la app, que están pensados para fondo oscuro— y NO se invierten con el tema:
       la hoja del PDF es blanca en claro y en oscuro.

       Son 15 = el tope de detalles resaltables (MaxResaltados en ComprobanteDetalle.razor.cs); si se
       agregan o quitan colores hay que mover esa constante.

       EL ORDEN NO ES DECORATIVO. Los slots se asignan de menor a mayor, así que marcar N detalles
       usa los primeros N: la secuencia está armada para que los tonos más parecidos queden lo más
       lejos posible entre sí. Los pares que cuesta distinguir son 0/11 y 1/12 (mismo tono, distinta
       saturación o luminosidad), 3/13 y 2/7/14 — todos separados por 7 slots o más, así que sólo
       coinciden en pantalla pasando los 12 resaltados, donde cualquier paleta de 15 se degrada.
       A partir de ~10 la discriminación de tono deja de alcanzar y el segundo canal es la
       luminosidad: por eso hay claros y saturados alternados y no una rotación uniforme de tono.

       Las consume el chip de la grilla (inline, por slot) y js/pdf-pane.js, que las pone como estilo
       inline sobre las spans que Telerik genera dentro del visor. */
    --me-pdf-hl-0:  #ffe066; /* amarillo    */
    --me-pdf-hl-1:  #74c0fc; /* celeste     */
    --me-pdf-hl-2:  #8ce99a; /* verde       */
    --me-pdf-hl-3:  #ffa94d; /* naranja     */
    --me-pdf-hl-4:  #e599f7; /* violeta     */
    --me-pdf-hl-5:  #ff8787; /* rojo salmón */
    --me-pdf-hl-6:  #66d9e8; /* turquesa    */
    --me-pdf-hl-7:  #d8f5a2; /* lima claro  */
    --me-pdf-hl-8:  #faa2c1; /* rosa        */
    --me-pdf-hl-9:  #b197fc; /* lila        */
    --me-pdf-hl-10: #38d9a9; /* verde agua  */
    --me-pdf-hl-11: #ffd43b; /* oro         */
    --me-pdf-hl-12: #a5d8ff; /* celeste claro */
    --me-pdf-hl-13: #ffc078; /* durazno     */
    --me-pdf-hl-14: #c0eb75; /* lima        */

    /* Kendo/Telerik CSS variable overrides live in telerik-overrides.css */
}

/* ── Light swatch ─────────────────────────────────────────── */
html.light-theme {
    /* Surface tokens — azure-tinted ladder: deeper page bg so lighter cards sit ON it
       (light-theme refresh: fixes washed-out white-on-white / low contrast).
       Luminance: bg .705 < bg2 .825 < card .939 (monotonic, clearly separated). */
    --me-bg:    #cfdde3;
    --me-bg2:   #e2ecf0;
    --me-card:  #f4f9fb;

    /* Border & text tokens */
    --me-border: #c1cfd9;
    --me-text:   #14252f;
    --me-muted:  #4e5f6d;

    /* Shadows — cool slate-tinted two-layer lift (contact + ambient), not flat black */
    --me-shadow:      0 1px 2px rgba(13, 34, 48, .06), 0 6px 20px rgba(13, 34, 48, .09);
    --me-shadow-glow: 0 0 40px rgba(var(--me-accent-rgb),.15);

    /* Brand hues (accent/accent2/green/orange/red) keep their BRIGHT values in light too,
       so decorative fills/gradients/charts stay vibrant. Readable FOREGROUND text/borders
       reference the *-dark variants below instead — and because those equal the bright hue
       in :root (dark theme), switching foreground refs to *-dark leaves dark mode untouched.
       Tints keep using the bright *-rgb tokens. */

    /* Muted channel changes in light theme (#4e5f6d) — clears AA on bg/bg2/card */
    --me-muted-rgb: 78, 95, 109;

    /* RGB channel tokens for surfaces & text — light theme values */
    --me-bg-rgb:      207, 221, 227;
    --me-bg2-rgb:     226, 236, 240;
    --me-card-rgb:    244, 249, 251;
    --me-text-rgb:     20,  37,  47;
    --me-accent2-rgb: 167, 139, 250;

    /* Light-theme *-dark tokens — the readable FOREGROUND colors on light surfaces.
       Foreground text/borders reference these (see note above). All clear WCAG AA on
       card + their own tints (verified): accent 5.0-6.2, green 5.7-6.2, orange 6.3-6.9,
       red 5.9-6.6, accent2 6.7. */
    --me-accent-dark:  #0c657f;
    --me-accent2-dark: #6d28d9;
    --me-accent-hover: #0891b2;
    --me-green-dark:   #036b4a;
    --me-orange-dark:  #9a3412;
    --me-red-dark:     #b01818;
    --me-muted-dark:   #42535f;

    /* Kendo light-theme overrides live in telerik-overrides.css */
}

/* Targeted light-mode overrides not covered by auto-adapting tokens */
html.light-theme .btn-close {
    filter: none;
    opacity: .6;
}

/* ── Reset / Base ─────────────────────────────────────────── */
/* NOTE: .k-body included for specificity — this is a base reset, not a Telerik component override */
html, body, body.k-body {
    background-color: var(--me-bg) !important;
    color: var(--me-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
}

a {
    color: var(--me-accent-dark);
    text-decoration: none;
    transition: color var(--me-transition);
}

    a:hover {
        color: var(--me-accent2-dark);
    }

/* ── Typography ───────────────────────────────────────────── */
.me-display {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
}

.me-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.me-subtitle {
    font-size: 1.05rem;
    color: var(--me-muted);
}

.me-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--me-accent-dark);
}

.me-gradient-text {
    background: var(--me-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.me-muted {
    color: var(--me-muted);
}

/* ── Layout ───────────────────────────────────────────────── */
.me-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.me-section {
    padding: 5rem 0;
}

.me-section-alt {
    background: var(--me-bg2);
}

/* ── Navbar ───────────────────────────────────────────────── */
.me-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(var(--me-bg-rgb), 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--me-border);
    padding: .875rem 0;
}

    .me-navbar .navbar-brand {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--me-text) !important;
        gap: .5rem;
        display: flex;
        align-items: center;
    }

        .me-navbar .navbar-brand img {
            width: 32px;
            height: 32px;
        }

    .me-navbar .nav-link {
        color: var(--me-muted) !important;
        font-size: .9rem;
        transition: color var(--me-transition);
    }

        .me-navbar .nav-link:hover,
        .me-navbar .nav-link.active {
            color: var(--me-text) !important;
        }

/* ── Sidebar (Blazor layout) ──────────────────────────────── */
.me-sidebar {
    width: 260px;
    min-height: 100vh;
    background: var(--me-bg2);
    border-right: 1px solid var(--me-border);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
}

.me-sidebar-brand {
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid var(--me-border);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--me-text);
}

    .me-sidebar-brand img {
        width: 28px;
        height: 28px;
    }

.me-sidebar-label {
    padding: .5rem 1.5rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--me-muted);
    margin-top: .75rem;
}

.me-sidebar-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1.5rem;
    color: var(--me-muted);
    font-size: .9rem;
    cursor: pointer;
    transition: all var(--me-transition);
    border-left: 3px solid transparent;
    text-decoration: none;
}

    .me-sidebar-item:hover {
        color: var(--me-text);
        background: rgba(var(--me-text-rgb),.04);
    }

    .me-sidebar-item.active {
        color: var(--me-accent-dark);
        background: rgba(var(--me-accent-rgb),.08);
        border-left-color: var(--me-accent-dark);
    }

    .me-sidebar-item .me-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.me-main-content {
    margin-left: 260px;
    padding: 2rem;
    min-height: 100vh;
    background: var(--me-bg);
}

@media (max-width: 992px) {
    .me-sidebar {
        transform: translateX(-100%);
        transition: transform .3s;
    }

        .me-sidebar.open {
            transform: translateX(0);
        }

    .me-main-content {
        margin-left: 0;
    }
}

/* ── Cards ────────────────────────────────────────────────── */
.me-card {
    background: var(--me-card);
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius-lg);
    padding: 1.5rem;
    transition: border-color var(--me-transition), transform var(--me-transition), box-shadow var(--me-transition);
    position: relative;
    overflow: hidden;
}

    .me-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--me-gradient);
        opacity: 0;
        transition: opacity var(--me-transition);
    }

    .me-card:hover::before {
        opacity: 1;
    }

    .me-card:hover {
        border-color: rgba(var(--me-accent-rgb),.3);
        transform: translateY(-2px);
        box-shadow: var(--me-shadow-glow);
    }

.me-card-stat {
    padding: 1.5rem;
}

    .me-card-stat .stat-value {
        font-size: 2rem;
        font-weight: 800;
        background: var(--me-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }

    .me-card-stat .stat-label {
        font-size: .8rem;
        color: var(--me-muted);
        margin-top: .25rem;
    }

    .me-card-stat .stat-delta {
        font-size: .75rem;
        font-weight: 600;
        margin-top: .5rem;
    }

        .me-card-stat .stat-delta.up {
            color: var(--me-green-dark);
        }

        .me-card-stat .stat-delta.down {
            color: var(--me-red-dark);
        }

    .me-card-stat .stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }

        .me-card-stat .stat-icon.gas {
            background: rgba(var(--me-orange-rgb),.15);
        }

        .me-card-stat .stat-icon.elec {
            background: rgba(var(--me-accent-rgb),.15);
        }

        .me-card-stat .stat-icon.ok {
            background: rgba(var(--me-green-rgb),.15);
        }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-me-primary {
    background: var(--me-gradient);
    color: var(--me-bg) !important;
    border: none;
    padding: .6rem 1.4rem;
    border-radius: var(--me-radius);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: opacity var(--me-transition), transform var(--me-transition);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .btn-me-primary:hover {
        opacity: .85;
        transform: translateY(-1px);
    }

.btn-me-outline {
    background: transparent;
    color: var(--me-text) !important;
    border: 1px solid var(--me-border);
    padding: .6rem 1.4rem;
    border-radius: var(--me-radius);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: all var(--me-transition);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .btn-me-outline:hover {
        border-color: var(--me-accent-dark);
        color: var(--me-accent-dark) !important;
    }

.btn-me-danger {
    background: rgba(var(--me-red-rgb),.1);
    color: var(--me-red-dark) !important;
    border: 1px solid rgba(var(--me-red-rgb),.3);
    padding: .5rem 1.2rem;
    border-radius: var(--me-radius);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: all var(--me-transition);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .btn-me-danger:hover {
        background: rgba(var(--me-red-rgb),.2);
    }

/* ── Badges ───────────────────────────────────────────────── */
.me-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
}

.me-badge-success {
    background: rgba(var(--me-green-rgb),.12);
    color: var(--me-green-dark);
    border: 1px solid rgba(var(--me-green-rgb),.3);
}

.me-badge-warning {
    background: rgba(var(--me-orange-rgb),.12);
    color: var(--me-orange-dark);
    border: 1px solid rgba(var(--me-orange-rgb),.3);
}

.me-badge-danger {
    background: rgba(var(--me-red-rgb),.12);
    color: var(--me-red-dark);
    border: 1px solid rgba(var(--me-red-rgb),.3);
}

.me-badge-info {
    background: rgba(var(--me-accent-rgb),.12);
    color: var(--me-accent-dark);
    border: 1px solid rgba(var(--me-accent-rgb),.3);
}

.me-badge-muted {
    background: rgba(var(--me-muted-rgb),.1);
    color: var(--me-muted);
    border: 1px solid rgba(var(--me-muted-rgb),.2);
}

.me-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: me-pulse 2s infinite;
}

/* ── Facturas List ────────────────────────────────────────── */
.me-factura-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--me-card);
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius);
    margin-bottom: .75rem;
    transition: all var(--me-transition);
}

    .me-factura-item:hover {
        border-color: rgba(var(--me-accent-rgb),.25);
        background: rgba(var(--me-text-rgb),.025);
    }

.me-factura-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

    .me-factura-icon.gas {
        background: rgba(var(--me-orange-rgb),.15);
    }

    .me-factura-icon.elec {
        background: rgba(var(--me-accent-rgb),.15);
    }

.me-factura-info {
    flex: 1;
    min-width: 0;
}

.me-factura-title {
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-factura-sub {
    font-size: .78rem;
    color: var(--me-muted);
}

.me-factura-amount {
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

    .me-factura-amount.ok {
        color: var(--me-green-dark);
    }

    .me-factura-amount.warn {
        color: var(--me-orange-dark);
    }

    .me-factura-amount.due {
        color: var(--me-red-dark);
    }

/* ── Forms ────────────────────────────────────────────────── */
.me-form-group {
    margin-bottom: 1.25rem;
}

.me-form-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--me-muted);
    margin-bottom: .4rem;
}

.me-form-control {
    width: 100%;
    background: var(--me-card);
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius);
    color: var(--me-text);
    padding: .65rem 1rem;
    font-size: .9rem;
    transition: border-color var(--me-transition), box-shadow var(--me-transition);
    outline: none;
}

    .me-form-control:focus {
        border-color: var(--me-accent-dark);
        box-shadow: 0 0 0 3px rgba(var(--me-accent-rgb),.12);
    }

    .me-form-control::placeholder {
        color: rgba(var(--me-muted-rgb),.5);
    }

/* ── Upload Zone ──────────────────────────────────────────── */
.me-upload-zone {
    border: 2px dashed var(--me-border);
    border-radius: var(--me-radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--me-transition);
    background: rgba(var(--me-text-rgb),.015);
}

    .me-upload-zone:hover,
    .me-upload-zone.dragover {
        border-color: var(--me-accent-dark);
        background: rgba(var(--me-accent-rgb),.04);
    }

    .me-upload-zone .upload-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .me-upload-zone p {
        color: var(--me-muted);
        font-size: .9rem;
        margin: 0;
    }

    .me-upload-zone strong {
        color: var(--me-accent-dark);
    }

/* ── Progress Bar ─────────────────────────────────────────── */
.me-progress {
    height: 6px;
    background: var(--me-border);
    border-radius: 100px;
    overflow: hidden;
}

.me-progress-bar {
    height: 100%;
    background: var(--me-gradient);
    border-radius: 100px;
    transition: width .4s ease;
}

/* ── Tables (override Bootstrap) ─────────────────────────── */
.table-me {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(var(--me-text-rgb),.02);
    --bs-table-hover-bg: rgba(var(--me-accent-rgb),.05);
    --bs-table-border-color: var(--me-border);
    --bs-table-color: var(--me-text);
    font-size: .875rem;
}

    .table-me thead th {
        color: var(--me-muted);
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        border-bottom-color: var(--me-border);
        background: transparent;
        padding: .75rem 1rem;
    }

    .table-me tbody td {
        padding: .85rem 1rem;
        vertical-align: middle;
        border-bottom-color: var(--me-border);
    }

/* ── Alerts ───────────────────────────────────────────────── */
.me-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--me-radius);
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.me-alert-info {
    background: rgba(var(--me-accent-rgb),.08);
    border: 1px solid rgba(var(--me-accent-rgb),.25);
    color: var(--me-accent-dark);
}

.me-alert-success {
    background: rgba(var(--me-green-rgb),.08);
    border: 1px solid rgba(var(--me-green-rgb),.25);
    color: var(--me-green-dark);
}

.me-alert-warning {
    background: rgba(var(--me-orange-rgb),.08);
    border: 1px solid rgba(var(--me-orange-rgb),.25);
    color: var(--me-orange-dark);
}

.me-alert-danger {
    background: rgba(var(--me-red-rgb),.08);
    border: 1px solid rgba(var(--me-red-rgb),.25);
    color: var(--me-red-dark);
}

/* ── Modals ───────────────────────────────────────────────── */
.modal-me .modal-content {
    background: var(--me-card);
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius-lg);
    color: var(--me-text);
}

.modal-me .modal-header {
    border-bottom: 1px solid var(--me-border);
    padding: 1.25rem 1.5rem;
}

.modal-me .modal-title {
    font-weight: 700;
    font-size: 1.1rem;
}

.modal-me .modal-footer {
    border-top: 1px solid var(--me-border);
    padding: 1rem 1.5rem;
}

.modal-me .btn-close {
    filter: invert(1);
    opacity: .5;
}

.modal-backdrop {
    background: rgba(0,0,0,.7);
}

/* Telerik component overrides (Drawer, Grid, Chart, Notification) live in telerik-overrides.css */

/* ── Chart mini (custom bars) ─────────────────────────────── */
.me-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
}

    .me-chart-bars .bar {
        background: var(--me-gradient);
        border-radius: 3px 3px 0 0;
        flex: 1;
        transition: opacity var(--me-transition);
        cursor: pointer;
    }

        .me-chart-bars .bar:hover {
            opacity: .75;
        }

/* ── Divider ──────────────────────────────────────────────── */
.me-divider {
    border: none;
    border-top: 1px solid var(--me-border);
    margin: 2rem 0;
}

/* ── Empty State ──────────────────────────────────────────── */
.me-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--me-muted);
}

    .me-empty .empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: .5;
    }

    .me-empty h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--me-text);
        margin-bottom: .5rem;
    }

/* ── Loading Spinner ──────────────────────────────────────── */
.me-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--me-border);
    border-top-color: var(--me-accent-dark);
    border-radius: 50%;
    animation: me-spin .7s linear infinite;
}

.me-spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

/* ── Blazor Loading overlay ───────────────────────────────── */
#blazor-error-ui {
    background: rgba(var(--me-red-rgb),.95);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
    }

/* ── Animations ───────────────────────────────────────────── */
@keyframes me-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

@keyframes me-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes me-fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes me-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.me-fade-up {
    animation: me-fadeUp .5s ease both;
}

.me-fade-in {
    animation: me-fadeIn .4s ease both;
}

/* 
   SINGLE SOURCE OF TRUTH for scrollbar styling across the whole app. Do NOT
   restyle scrollbars in a .razor.css file: scoped selectors carry higher
   specificity AND their bundle loads last, so they silently override this.

   The two @supports blocks below are mutually exclusive on purpose. Per MDN,
   scrollbar-width/scrollbar-color OVERRIDE ::-webkit-scrollbar-* wherever both
   are supported (Chrome 121+), so declaring them together on the same element
   discards the sizing below without any warning.
     - Chromium/WebKit supports selector(::-webkit-scrollbar) -> pixel control.
     - Firefox does not -> it gets the standard properties instead.
   Colors come from the --me-scrollbar-* tokens, which are theme-aware. */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
        width: var(--me-scrollbar-size);
        height: var(--me-scrollbar-size);
    }

    ::-webkit-scrollbar-track {
        background: var(--me-scrollbar-track);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--me-scrollbar-thumb);
        border-radius: 100px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--me-scrollbar-thumb-hover);
        }

    /* Square where a vertical and a horizontal scrollbar meet — visible on
       wide grids, and transparent by default. */
    ::-webkit-scrollbar-corner {
        background: var(--me-scrollbar-track);
    }
}

@supports not selector(::-webkit-scrollbar) {
    /* scrollbar-width and scrollbar-color are both inherited, so declaring them
       on html reaches every scroller without paying for a universal selector.
       'auto' rather than 'thin' keeps Firefox in line with the 14px decision. */
    html {
        scrollbar-width: auto;
        scrollbar-color: var(--me-scrollbar-thumb) var(--me-scrollbar-track);
    }
}

/* ── Utilities ────────────────────────────────────────────── */
.me-glow {
    box-shadow: var(--me-shadow-glow);
}

.gap-me {
    gap: 1rem;
}

.rounded-me {
    border-radius: var(--me-radius) !important;
}

.rounded-me-lg {
    border-radius: var(--me-radius-lg) !important;
}

.border-me {
    border: 1px solid var(--me-border) !important;
}

.bg-me-card {
    background: var(--me-card) !important;
}

.bg-me-alt {
    background: var(--me-bg2) !important;
}

.text-me-accent {
    color: var(--me-accent-dark) !important;
}

.text-me-accent2 {
    color: var(--me-accent2-dark) !important;
}

.text-me-green {
    color: var(--me-green-dark) !important;
}

.text-me-orange {
    color: var(--me-orange-dark) !important;
}

.text-me-red {
    color: var(--me-red-dark) !important;
}

.text-me-muted {
    color: var(--me-muted) !important;
}

/* ── Bootstrap Dark Overrides ────────────────────────────── */
/* These ensure all Bootstrap components look correct on the
   dark background without requiring [data-bs-theme="dark"]. */

/* Body & text — .k-body included for specificity, not a Telerik component override */
.k-body,
body {
    color: var(--me-text);
}

/* Cards */
.card {
    background-color: var(--me-card);
    border-color: var(--me-border);
    color: var(--me-text);
}

.card-header {
    background-color: var(--me-bg2);
    border-bottom-color: var(--me-border);
    color: var(--me-text);
}


/* Bootstrap badge pills — tinted to match alert-* palette */
.badge.bg-primary {
    background-color: rgba(var(--me-accent-rgb), 0.15) !important;
    border: 1px solid rgba(var(--me-accent-rgb), 0.4) !important;
    color: var(--me-accent-dark) !important;
}
.badge.bg-success {
    background-color: rgba(var(--me-green-rgb), 0.15) !important;
    border: 1px solid rgba(var(--me-green-rgb), 0.4) !important;
    color: var(--me-green-dark) !important;
}
.badge.bg-danger {
    background-color: rgba(var(--me-red-rgb), 0.15) !important;
    border: 1px solid rgba(var(--me-red-rgb), 0.4) !important;
    color: var(--me-red-dark) !important;
}
.badge.bg-warning {
    background-color: rgba(var(--me-orange-rgb), 0.15) !important;
    border: 1px solid rgba(var(--me-orange-rgb), 0.4) !important;
    color: var(--me-orange-dark) !important;
}
.badge.bg-info {
    background-color: rgba(var(--me-accent-rgb), 0.15) !important;
    border: 1px solid rgba(var(--me-accent-rgb), 0.4) !important;
    color: var(--me-accent-dark) !important;
}
.badge.bg-secondary {
    background-color: rgba(var(--me-muted-rgb), 0.12) !important;
    border: 1px solid rgba(var(--me-muted-rgb), 0.35) !important;
    color: var(--me-muted) !important;
}

/* Alerts */
.alert-warning {
    background-color: rgba(var(--me-orange-rgb),.08);
    border-color: rgba(var(--me-orange-rgb),.25);
    color: var(--me-orange-dark);
}
.alert-warning .alert-link {
    color: var(--me-text) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.alert-warning .alert-link:hover {
    color: var(--me-orange-dark) !important;
}

.alert-danger {
    background-color: rgba(var(--me-red-rgb),.08);
    border-color: rgba(var(--me-red-rgb),.25);
    color: var(--me-red-dark);
}
.alert-danger .alert-link {
    color: var(--me-text) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.alert-danger .alert-link:hover {
    color: var(--me-red-dark) !important;
}

.alert-success {
    background-color: rgba(var(--me-green-rgb),.08);
    border-color: rgba(var(--me-green-rgb),.25);
    color: var(--me-green-dark);
}
.alert-success .alert-link {
    color: var(--me-text) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.alert-success .alert-link:hover {
    color: var(--me-green-dark) !important;
}

.alert-info .alert-link {
    color: var(--me-text) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.alert-info .alert-link:hover {
    color: var(--me-accent-dark) !important;
}

.alert-info {
    background-color: rgba(var(--me-accent-rgb),.08);
    border-color: rgba(var(--me-accent-rgb),.25);
    color: var(--me-accent-dark);
}

/* Light theme: accent/status-tinted alert cards get a crisp solid border in their own
   readable *-dark hue. The base rgba(...,.25) borders are near-invisible on light surfaces
   (left faint for dark mode, where they read fine on the dark background). */
html.light-theme .alert-info,
html.light-theme .me-alert-info    { border-color: var(--me-accent-dark); }
html.light-theme .alert-success,
html.light-theme .me-alert-success { border-color: var(--me-green-dark); }
html.light-theme .alert-warning,
html.light-theme .me-alert-warning { border-color: var(--me-orange-dark); }
html.light-theme .alert-danger,
html.light-theme .me-alert-danger  { border-color: var(--me-red-dark); }

/* Forms */
.form-control {
    background-color: var(--me-card);
    border-color: var(--me-border);
    color: var(--me-text);
}

    .form-control:focus {
        background-color: var(--me-card);
        border-color: var(--me-accent-dark);
        color: var(--me-text);
        box-shadow: 0 0 0 3px rgba(var(--me-accent-rgb),.12);
    }

    .form-control::placeholder {
        color: rgba(var(--me-muted-rgb),.5);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: var(--me-bg2);
        color: var(--me-muted);
    }

.form-select {
    background-color: var(--me-card);
    border-color: var(--me-border);
    color: var(--me-text);
}

    .form-select:focus {
        border-color: var(--me-accent-dark);
        box-shadow: 0 0 0 3px rgba(var(--me-accent-rgb),.12);
    }

.form-check-input {
    background-color: var(--me-bg);
    border-color: var(--me-border);
}

    .form-check-input:checked {
        background-color: var(--me-accent);
        border-color: var(--me-accent-dark);
    }

.form-label {
    color: var(--me-muted);
}

.form-text {
    color: var(--me-muted);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--me-text);
    --bs-table-border-color: var(--me-border);
    --bs-table-striped-bg: rgba(var(--me-text-rgb),.02);
    --bs-table-hover-bg: rgba(var(--me-accent-rgb),.05);
    color: var(--me-text);
}

    .table > thead {
        color: var(--me-muted);
    }

/* Modals */
.modal-content {
    background-color: var(--me-card);
    border-color: var(--me-border);
    color: var(--me-text);
}

.modal-header {
    border-bottom-color: var(--me-border);
}

.modal-footer {
    border-top-color: var(--me-border);
}

.modal-backdrop {
    background-color: rgba(0,0,0,.7);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .5;
}

/* Buttons */
.btn-primary {
    background: var(--me-gradient);
    border: none;
    color: var(--me-bg) !important;
    font-weight: 600;
}

    .btn-primary:hover {
        opacity: .85;
        background: var(--me-gradient);
        color: var(--me-bg) !important;
    }

.btn-outline-secondary {
    border-color: var(--me-border);
    color: var(--me-text);
}

    .btn-outline-secondary:hover {
        background-color: rgba(var(--me-text-rgb),.05);
        border-color: var(--me-accent-dark);
        color: var(--me-accent-dark);
    }

.btn-link {
    color: var(--me-accent-dark);
}

    .btn-link:hover {
        color: var(--me-accent2-dark);
    }

.btn-external-login {
    width: 100%;
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--me-card);
    border-color: var(--me-border);
    color: var(--me-text);
}

.dropdown-item {
    color: var(--me-text);
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: rgba(var(--me-accent-rgb),.08);
        color: var(--me-accent-dark);
    }

.dropdown-divider {
    border-top-color: var(--me-border);
}

/* List groups */
.list-group-item {
    background-color: var(--me-card);
    border-color: var(--me-border);
    color: var(--me-text);
}

    .list-group-item.active {
        background-color: rgba(var(--me-accent-rgb),.12);
        border-color: var(--me-accent-dark);
        color: var(--me-accent-dark);
    }

/* Nav pills / tabs */
.nav-pills .nav-link {
    color: var(--me-muted);
}

    .nav-pills .nav-link.active {
        background: var(--me-gradient);
        color: var(--me-bg);
    }

    .nav-pills .nav-link:hover:not(.active) {
        color: var(--me-text);
    }

.nav-tabs {
    border-bottom-color: var(--me-border);
}

    .nav-tabs .nav-link {
        color: var(--me-muted);
    }

        .nav-tabs .nav-link.active {
            background-color: var(--me-card);
            border-color: var(--me-border) var(--me-border) var(--me-card);
            color: var(--me-text);
        }

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--me-muted);
}

.breadcrumb-item a {
    color: var(--me-accent-dark);
}

.breadcrumb-item.active {
    color: var(--me-muted);
}

/* Text utilities */
.text-muted {
    color: var(--me-muted) !important;
}

.text-body {
    color: var(--me-text) !important;
}

/* Borders */
.border {
    border-color: var(--me-border) !important;
}

.border-bottom {
    border-bottom-color: var(--me-border) !important;
}

.border-top {
    border-top-color: var(--me-border) !important;
}

/* Backgrounds */
.bg-light {
    background-color: var(--me-bg2) !important;
}

.bg-white {
    background-color: var(--me-card) !important;
}

/* Pagination */
.page-link {
    background-color: var(--me-card);
    border-color: var(--me-border);
    color: var(--me-text);
}

    .page-link:hover {
        background-color: rgba(var(--me-accent-rgb),.08);
        border-color: var(--me-border);
        color: var(--me-accent-dark);
    }

.page-item.active .page-link {
    background: var(--me-gradient);
    border-color: transparent;
    color: var(--me-bg);
}

.page-item.disabled .page-link {
    background-color: var(--me-bg2);
    border-color: var(--me-border);
    color: var(--me-muted);
}

/* ── Stat Cards (Home dashboard) ── */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    background: var(--me-card);
    border: 1.5px solid var(--me-border);
    border-radius: 0.875rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

    .stat-card:hover {
        border-color: var(--me-accent-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        text-decoration: none;
        color: inherit;
    }

    .stat-card:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    .stat-card.has-action {
        border-color: rgba(var(--me-orange-rgb), 0.4);
    }

        .stat-card.has-action:hover {
            border-color: var(--me-orange-dark);
            box-shadow: 0 4px 12px rgba(var(--me-orange-rgb), 0.15);
        }

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.icon-alertas {
    background: linear-gradient(135deg, var(--me-orange), var(--me-red));
}

.icon-pendientes {
    background: linear-gradient(135deg, var(--me-accent), var(--me-accent2));
}

.icon-errores {
    background: linear-gradient(135deg, var(--me-red), var(--me-orange));
}

.icon-sites {
    background: linear-gradient(135deg, var(--me-green), var(--me-accent));
}

.icon-usuarios {
    background: linear-gradient(135deg, var(--me-accent2), var(--me-accent));
}

.icon-tenants {
    background: linear-gradient(135deg, var(--me-green), var(--me-accent2));
}

.icon-suscripciones {
    background: linear-gradient(135deg, var(--me-orange), var(--me-accent2));
}

.icon-documentos {
    background: linear-gradient(135deg, var(--me-accent), var(--me-green));
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--me-text);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--me-muted);
    font-weight: 500;
}

.stat-today {
    font-size: 0.75rem;
    color: var(--me-muted);
}

.stat-multi {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    justify-content: center;
}

.stat-multi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-value-sm {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--me-text);
    line-height: 1;
}

.stat-plan-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-plan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--me-muted);
}

.stat-plan-count {
    font-weight: 700;
    color: var(--me-text);
}

/* ==========================================================================
   Responsive helpers (mobile/tablet)
   Breakpoints are aligned with Bootstrap 5 so existing col-* classes continue
   to work as expected.

   sm : <= 575.98px  (phones)
   md : <= 767.98px  (phablets / small tablets)
   lg : <= 991.98px  (tablets / small laptops)
   xl : >= 992px     (desktop, default)

   Usage:
     .me-hide-sm        hide below 576px
     .me-hide-md        hide below 768px
     .me-hide-lg        hide below 992px
     .me-only-sm        show only below 576px (inline-block)
     .me-only-sm-block  show only below 576px (block)
     .me-stats-grid     responsive auto-fill grid for stat cards
     .me-filters        responsive flex row for filter bars (inputs stack on mobile)
   ========================================================================== */

/* --- Hide/show utilities ------------------------------------------------- */
.me-only-sm        { display: none; }
.me-only-sm-block  { display: none; }

@media (max-width: 767.98px) {
    .me-hide-md { display: none !important; }
}

@media (max-width: 575.98px) {
    .me-hide-sm        { display: none !important; }
    .me-only-sm        { display: inline-block; }
    .me-only-sm-block  { display: block; }
}

@media (max-width: 991.98px) {
    .me-hide-lg { display: none !important; }
}

/* --- Stat cards grid ----------------------------------------------------- */
.me-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

@media (max-width: 575.98px) {
    .me-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* --- Filter rows: inputs fluid on mobile, auto-width on desktop ---------- */
.me-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.me-filters > * {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 576px) {
    .me-filters > * {
        flex: 0 1 auto;
    }
}

/* --- Body cannot scroll horizontally even if a grid overflows ------------ */
html, body {
    overflow-x: hidden;
}