/* ==========================================================================
   telerik-overrides.css
   Telerik UI for Blazor 14.0.0 / kendo-theme-default overrides

   PURPOSE:
   Single source of truth for ALL Kendo/Telerik customizations.
   This file maps the app's --me-* design tokens to --kendo-* CSS variables
   and overrides structural styles on .k-* Telerik component classes.

   RULE:
   No other CSS file (.razor.css, app.css, mercado-energia.css, etc.) may
   target .k-* classes or set --kendo-* variables. If you need to restyle a
   Telerik component, add the override HERE.

   LOAD ORDER (defined in App.razor):
   1. bootstrap.min.css          — Bootstrap 5 utilities & components
   2. kendo-theme-default/all.css — Telerik built-in theme (NuGet static asset)
   3. >>> telerik-overrides.css <<< — THIS FILE (overrides Kendo tokens & components)
   4. mercado-energia.css         — App design system (--me-* vars, layout, Bootstrap dark overrides)
   5. app.css                     — Page-specific styles (login, auth pages)
   6. SziCom.DocumentosIA.styles.css — Blazor scoped .razor.css bundle

   TELERIK UPGRADE PROCEDURE:
   1. Update the Telerik.UI.for.Blazor NuGet package version.
   2. Check the Telerik release notes for CSS variable renames or removals:
      https://www.telerik.com/support/whats-new/blazor-ui/release-history
   3. Search this file for any --kendo-* variables that were renamed/removed.
   4. Test every section below (Drawer, Grid, Chart, Notification, Tooltip)
      visually in both dark and light themes.
   5. Update the version number in this header comment.

   ADDING NEW OVERRIDES:
   - For design token changes (colors, radius, fonts): add to Section 1 (:root).
   - For component structural changes: add to Section 2 with a parent scope
     class (e.g., .me-telerik-grid .k-grid) to limit blast radius.
   - Always add a comment explaining WHY the override is needed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   Map the application's --me-* brand tokens to Kendo design tokens.
   -------------------------------------------------------------------------- */

:root {
    /* ── Surfaces ──────────────────────────────────────────── */
    --kendo-color-app-surface:           var(--me-bg);
    --kendo-color-on-app-surface:        var(--me-text);
    --kendo-color-subtle:                var(--me-muted);
    --kendo-color-surface:               var(--me-card);
    --kendo-color-surface-alt:           var(--me-bg2);

    /* ── Borders ──────────────────────────────────────────── */
    --kendo-color-border:                var(--me-border);
    --kendo-color-border-alt:            rgba(var(--me-text-rgb),.12);

    /* ── Base (neutral interactive elements) ───────────────── */
    --kendo-color-base-subtle:           var(--me-bg2);
    --kendo-color-base-subtle-hover:     #1a2332;
    --kendo-color-base-subtle-active:    #1f2d3d;
    --kendo-color-base:                  var(--me-card);
    --kendo-color-base-hover:            #1a2332;
    --kendo-color-base-active:           #1f2d3d;
    --kendo-color-base-emphasis:         var(--me-border);
    --kendo-color-base-on-subtle:        var(--me-text);
    --kendo-color-on-base:               var(--me-text);
    --kendo-color-base-on-surface:       var(--me-text);

    /* ── Primary accent (cyan) ─────────────────────────────── */
    --kendo-color-primary-subtle:        rgba(var(--me-accent-rgb),.1);
    --kendo-color-primary-subtle-hover:  rgba(var(--me-accent-rgb),.18);
    --kendo-color-primary-subtle-active: rgba(var(--me-accent-rgb),.25);
    /* Solid FILL for primary buttons/badges → stays BRIGHT (its on-primary text is dark,
       so bright fill + dark text reads well in both themes). Accent used as FOREGROUND
       text instead flows through the *-on-subtle / *-on-surface tokens below (kept -dark). */
    --kendo-color-primary:               var(--me-accent);
    --kendo-color-primary-hover:         #06b6d4;
    --kendo-color-primary-active:        #0891b2;
    --kendo-color-primary-emphasis:      rgba(var(--me-accent-rgb),.5);
    --kendo-color-primary-on-subtle:     var(--me-accent-dark);
    --kendo-color-on-primary:            var(--me-bg);
    --kendo-color-primary-on-surface:    var(--me-accent-dark);

    /* ── Info ──────────────────────────────────────────────── */
    --kendo-color-info:                  var(--me-accent-dark);
    --kendo-color-info-subtle:           rgba(var(--me-accent-rgb),.1);
    --kendo-color-on-info:               var(--me-bg);

    /* ── Success ──────────────────────────────────────────── */
    --kendo-color-success:               var(--me-green-dark);
    --kendo-color-success-subtle:        rgba(var(--me-green-rgb),.1);
    --kendo-color-on-success:            var(--me-bg);

    /* ── Warning ──────────────────────────────────────────── */
    --kendo-color-warning:               var(--me-orange-dark);
    --kendo-color-warning-subtle:        rgba(var(--me-orange-rgb),.1);
    --kendo-color-on-warning:            var(--me-bg);

    /* ── Error ────────────────────────────────────────────── */
    --kendo-color-error:                 var(--me-red-dark);
    --kendo-color-error-subtle:          rgba(var(--me-red-rgb),.1);
    --kendo-color-on-error:              var(--me-bg);

    /* ── Chart series ─────────────────────────────────────── */
    --kendo-color-series-a: var(--me-accent);
    --kendo-color-series-b: var(--me-accent2);
    --kendo-color-series-c: var(--me-green);
    --kendo-color-series-d: var(--me-orange);
    --kendo-color-series-e: var(--me-red);
    --kendo-color-series-f: #fb7185;

    /* ── Scrollbar width  ──────────────────────────────
       PRE-HYDRATION FALLBACK ONLY. Telerik's JS measures the real scrollbar at
       runtime and sets --kendo-scrollbar-width (and -height) inline on <html>,
       which outranks this and is what actually keeps grid headers aligned with
       their body columns — verified drift of 0px across all columns. Note the
       measured value can differ from --me-scrollbar-size (13px vs 14px at 125%
       display scaling), so do NOT treat this declaration as the source of truth.
       It matters only before that JS runs: the theme consumes the token but
       never declares it, so consumers otherwise fall back to 17px, and
       `.k-table-header` / `.k-table-footer` reference it with no fallback at all
       (invalid padding). 14px is a closer first guess than 17px. */
    --kendo-scrollbar-width: var(--me-scrollbar-size);
}

/* ── Light swatch: Kendo token resets ─────────────────────── */
html.light-theme {
    /* Hardcoded Kendo neutral vars — not mapped to --me-* tokens; azure-tinted to sit on
       the refreshed light surface ladder (card #f4f9fb > bg2 #e2ecf0 > bg #cfdde3). */
    --kendo-color-base-subtle-hover:  #e7eff2;
    --kendo-color-base-subtle-active: #d8e4ea;
    --kendo-color-base-hover:         #e7eff2;
    --kendo-color-base-active:        #d8e4ea;
    --kendo-color-border-alt:         rgba(20, 37, 48, .10);

    /* In dark: --kendo-color-on-primary = var(--me-bg) (dark, fine on gradient).
       In light: --me-bg is a light surface → gradient button text would be invisible.
       Set explicitly to keep dark text on gradient buttons in light mode: */
    --kendo-color-on-primary: var(--me-text);
}

/* --------------------------------------------------------------------------
   2. Component Overrides
   Structural or visual overrides that target .k-* classes directly.
   Keep these scoped with parent classes where possible.
   -------------------------------------------------------------------------- */

/* ── Drawer ───────────────────────────────────────────────── */
/* Default selected state uses solid primary (#22d3ee) fill with white text
   → ~2.2:1 contrast, fails WCAG AA. Replace with subtle tint + accent text. */
.k-drawer-item.k-selected,
.k-drawer-item.k-selected:hover,
.k-drawer-item.k-selected:focus {
    background-color: rgba(var(--me-accent-rgb), 0.08) !important;
    color: var(--me-accent-dark) !important;
    border-inline-start-color: var(--me-accent-dark) !important;
}

/* Light theme: the 8% selection tint is too faint on a light surface — strengthen it so
   the active menu item clearly reads as selected (dark mode keeps the subtler 8%). */
html.light-theme .k-drawer-item.k-selected,
html.light-theme .k-drawer-item.k-selected:hover,
html.light-theme .k-drawer-item.k-selected:focus {
    background-color: rgba(var(--me-accent-rgb), 0.16) !important;
}

/* Drawer scrollbar — the theme ships its own 7px .k-drawer-wrapper
   scrollbar in Kendo colors. A .k-* class selector outranks the app's bare
   ::-webkit-scrollbar rules in mercado-energia.css, so without this the drawer
   would keep a thin, off-palette scrollbar while the rest of the app got the
   14px themed one. Re-point it at the same --me-scrollbar-* tokens. */
.k-drawer-wrapper::-webkit-scrollbar {
    width: var(--me-scrollbar-size);
    height: var(--me-scrollbar-size);
}

.k-drawer-wrapper::-webkit-scrollbar-track {
    background: var(--me-scrollbar-track);
}

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

.k-drawer-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--me-scrollbar-thumb-hover);
}

/* Firefox branch for the same element. The theme also sets
   `.k-drawer-wrapper { scrollbar-width: thin }`, which wins over the inherited
   `auto` from mercado-energia.css and renders the drawer at 10px while the rest
   of the app gets 19px. Must stay behind @supports not: setting scrollbar-width
   unconditionally would override the ::-webkit-scrollbar rules above in
   Chromium (see the note in mercado-energia.css). */
@supports not selector(::-webkit-scrollbar) {
    .k-drawer-wrapper {
        scrollbar-width: auto;
        scrollbar-color: var(--me-scrollbar-thumb) var(--me-scrollbar-track);
    }
}

/* ── Calendar / DatePicker selected & hover state ─────────── */
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected:hover .k-link {
    background-color: rgba(var(--me-accent-rgb), 0.18) !important;
    color: var(--me-accent-dark) !important;
    border-color: rgba(var(--me-accent-rgb), 0.45) !important;
    box-shadow: none !important;
}

.k-calendar .k-calendar-td:hover .k-link {
    background-color: rgba(var(--me-accent-rgb), 0.08) !important;
    color: var(--me-text) !important;
}

/* Today marker — keep a subtle accent ring instead of solid fill */
.k-calendar .k-calendar-td.k-today .k-link {
    border-color: rgba(var(--me-accent-rgb), 0.5) !important;
    color: var(--me-accent-dark) !important;
    background-color: transparent !important;
}

.k-calendar .k-calendar-td.k-today.k-selected .k-link {
    background-color: rgba(var(--me-accent-rgb), 0.18) !important;
}

/* Range selection fill (DateRangePicker) */
.k-calendar .k-calendar-td.k-range-mid {
    background-color: rgba(var(--me-accent-rgb), 0.07) !important;
}

html.light-theme .k-calendar .k-calendar-td.k-selected .k-link,
html.light-theme .k-calendar .k-calendar-td.k-selected:hover .k-link {
    background-color: rgba(var(--me-accent-rgb), 0.2) !important;
    color: var(--me-accent-dark) !important;
    border-color: rgba(var(--me-accent-rgb), 0.5) !important;
}

html.light-theme .k-calendar .k-calendar-td.k-today .k-link {
    border-color: var(--me-accent-hover) !important;
    color: var(--me-accent-dark) !important;
}

/* ── Dropdown / List selected & hover state ───────────────── */
/* Default uses solid primary fill → replace with subtle tint like primary button */
.k-list-item.k-selected,
.k-list-item.k-selected:hover,
.k-list-optionlabel.k-selected {
    background-color: rgba(var(--me-accent-rgb), 0.12) !important;
    color: var(--me-accent-dark) !important;
    border-color: transparent !important;
}

.k-list-item:hover:not(.k-selected),
.k-list-optionlabel:hover:not(.k-selected) {
    background-color: rgba(var(--me-accent-rgb), 0.06) !important;
    color: var(--me-text) !important;
}

html.light-theme .k-list-item.k-selected,
html.light-theme .k-list-item.k-selected:hover,
html.light-theme .k-list-optionlabel.k-selected {
    background-color: rgba(var(--me-accent-rgb), 0.15) !important;
    color: var(--me-accent-dark) !important;
}

html.light-theme .k-list-item:hover:not(.k-selected) {
    background-color: rgba(var(--me-accent-rgb), 0.07) !important;
    color: var(--me-text) !important;
}

/* ── Grid ─────────────────────────────────────────────────── */
.me-telerik-grid .k-grid {
    background: var(--me-card);
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius-lg);
    color: var(--me-text);
    font-size: .875rem;
}

.me-telerik-grid .k-grid-header,
.me-telerik-grid .k-grid-header th {
    background: transparent !important;
    color: var(--me-muted) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-bottom: 1px solid var(--me-border) !important;
}

.me-telerik-grid .k-grid-content tr {
    border-bottom: 1px solid var(--me-border) !important;
    transition: background var(--me-transition);
}

    .me-telerik-grid .k-grid-content tr:hover {
        background: rgba(var(--me-accent-rgb),.05) !important;
    }

.me-telerik-grid .k-grid-content td {
    color: var(--me-text) !important;
    border: none !important;
    padding: .85rem 1rem !important;
    vertical-align: middle !important;
}

/* OPT-IN PER GRID: <TelerikGrid Class="me-telerik-grid me-grid-compact">.
   Para listados cuya prioridad es ver la mayor cantidad de filas posible (ComprobanteList →
   "Procesados"). El padding de la celda es la única palanca sobre el alto de fila: con
   el .85rem de arriba la fila mide ~48px y con .45rem ~36px, o sea ~30% más filas en el mismo
   alto. Es opt-in para no tocar los demás grids .me-telerik-grid.
   Selector compuesto (las dos clases en el MISMO elemento) porque Telerik pone el Class del
   componente en la raíz del grid. Sólo padding: sin color ni tipografía no necesita rama
   html.light-theme — el resto sigue heredando de .me-telerik-grid.
   Si cambia este padding hay que actualizar ProcesadosRowHeightPx en ComprobanteList.razor. */
.me-telerik-grid.me-grid-compact .k-grid-content td {
    padding: .45rem 1rem !important;
    /* Una línea por fila. Es la palanca que más filas gana: con los nombres de archivo reales la
       celda envolvía a 2-3 líneas y la fila pasaba de ~35px a 54-74px, así que el padding compacto
       por sí solo no alcanzaba. Truncar con puntos suspensivos además vuelve la altura de fila
       uniforme, que es lo que ProcesadosRowHeightPx da por sentado. El texto completo queda en el
       title de las columnas largas (Archivo, Emisor) y la columna se puede ensanchar: Resizable. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dos celdas no llevan texto que truncar y sí cosas que overflow:hidden recortaría:
   la primera pinta el indicador de alertas, cuyo anillo animado (box-shadow del keyframe
   alerta-indicator-pulse) se dibuja por fuera de la caja, y la de comandos apila los botones. */
.me-telerik-grid.me-grid-compact .k-grid-content td:first-child,
.me-telerik-grid.me-grid-compact .k-grid-content td.k-command-cell {
    overflow: visible;
}

/* OPT-IN PER GRID: <TelerikGrid Class="me-telerik-grid me-grid-viewport"> y SIN parámetro Height.
   El grid ocupa lo que necesita y se corta recién al llegar al alto de la página.
   Por qué CSS y no el Height de Telerik: Height es una reserva fija, y encima se calcularía en C#
   sobre la lista que recibe el grid, que no sabe nada del filtrado por columna —eso pasa dentro de
   Telerik—, así que un filtro que deja 3 filas seguía reservando el alto de 20 y dejaba el hueco
   en blanco. Un max-height no reserva: .k-grid es flex column y .k-grid-content es flex:1 1 auto
   con overflow-y:auto, así que con poco contenido la grilla se encoge y con mucho el sobrante se va
   al scroll del contenido, dejando el encabezado fijo y el scroll horizontal arriba del pager.
   El tope es el viewport menos el cromo de la página (header 50px + padding del wrapper + <h3> +
   fila de tabs + fila del switch): ~210px medidos sobre el render, con un piso de 320px para que
   la grilla siga siendo usable en ventanas muy bajas. */
.me-telerik-grid.me-grid-viewport {
    max-height: max(320px, calc(100dvh - 210px));
}

/* OPT-IN PER GRID: <TelerikGrid Class="me-telerik-grid me-grid-boxed"> y SIN parámetro Height.
   Hermano de me-grid-viewport para grids que NO son el contenido principal de la página sino que
   viven embutidos en un panel que ya scrollea (ComprobanteDetalle → tab "Comprobante" → Detalles,
   dentro de .pane-content). Ahí el tope del viewport no sirve: el grid quedaría casi tan alto como
   la pantalla y su scroll horizontal —que Telerik dibuja al pie de .k-grid-content— caería por
   debajo del fold del panel, que es justamente lo que hay que evitar. Un tope chico mantiene la
   barra horizontal a la vista sin importar cuántas filas haya.
   Por qué max-height y no el Height de Telerik: Height reserva el alto siempre, así que un
   comprobante con 3 detalles renderizaba un cajón de 400px casi vacío. El max-height no reserva
   (ver el detalle del flex en me-grid-viewport, arriba) y a la vez acota el scroll del contenido.
   dvh además lo achica en ventanas bajas, donde 400px fijos se comían el panel entero. */
.me-telerik-grid.me-grid-boxed {
    max-height: min(400px, 55dvh);
}

.me-telerik-grid .k-pager {
    background: transparent !important;
    border-top: 1px solid var(--me-border) !important;
    color: var(--me-muted) !important;
    font-size: .82rem !important;
}

    .me-telerik-grid .k-pager .k-selected {
        background: var(--me-gradient) !important;
        color: var(--me-bg) !important;
        border: none !important;
    }

    .me-telerik-grid .k-pager .k-button {
        color: var(--me-muted) !important;
        background: transparent !important;
    }

        .me-telerik-grid .k-pager .k-button:hover {
            color: var(--me-accent-dark) !important;
        }

.me-telerik-grid .k-column-menu-popup,
.me-telerik-grid .k-filter-menu {
    background: var(--me-card) !important;
    border: 1px solid var(--me-border) !important;
    border-radius: var(--me-radius) !important;
}

/* ── Splitter: wider drag bar + visible collapse buttons ─────────────── */
.k-splitter .k-splitbar {
    background-color: #1e3a4a !important;
    width: 8px !important;
    transition: background-color 0.2s ease !important;
    position: relative !important;
}

.k-splitter .k-splitbar:hover {
    background-color: #1a4d5e !important;
    cursor: col-resize !important;
}

/* Collapse arrow buttons */
.k-splitter .k-splitbar .k-collapse-prev,
.k-splitter .k-splitbar .k-collapse-next {
    background-color: transparent !important;
    border: none !important;
    color: var(--me-accent-dark) !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.k-splitter .k-splitbar .k-collapse-prev:hover,
.k-splitter .k-splitbar .k-collapse-next:hover {
    background-color: rgba(var(--me-accent-rgb), 0.2) !important;
    color: var(--me-text) !important;
}

.k-splitter .k-splitbar .k-collapse-prev .k-icon,
.k-splitter .k-splitbar .k-collapse-next .k-icon {
    font-size: 18px !important;
}

/* ── Chart ────────────────────────────────────────────────── */
.me-telerik-chart .k-chart {
    background: transparent !important;
    color: var(--me-text) !important;
}

.me-telerik-chart .k-chart-surface text {
    fill: var(--me-muted) !important;
}

/* ── TileLayout ───────────────────────────────────────────── */
/* OPT-IN PER TILE: <TileLayoutItem Class="me-tile-chart-fill">.
   Use it on any tile that stacks content (a KPI strip, a toolbar, a hint line) ABOVE
   or BELOW its chart — the flex column does not care about the order.

   A tile is exactly RowHeight tall (Telerik emits `grid-auto-rows: minmax(0px, 420px)`)
   and .k-tilelayout-item is also a .k-card, which clips with overflow:hidden — content
   that does not fit is cut, with no scrollbar. Subtracting the card borders (2px), the
   header (45px) and the body padding (32px) leaves 341px of usable body in a single-row
   tile. A chart alone declares 360px and overshoots by ~2px, which is invisible; but a
   tile that also renders a KPI strip (~74px) was cutting ~17px off the bottom of the
   chart — the axis/legend band. That is what this rule fixes.

   Making that tile's body a flex column and giving the chart `flex: 1 1 0` puts
   flex-basis in charge of the chart's height, so its inline Height is ignored and it
   takes exactly the room left under the strip — at any RowSpan, and without hardcoding
   a pixel budget that a Telerik theme upgrade would silently invalidate. The inline
   Height stays in the markup as a fallback in case these classes are renamed.

   Scoped instead of global on purpose: the tiles whose chart is the only child render
   correctly as-is, and a global rule would resize all 22 charts across three dashboards
   for a defect that only affects the ones with a sibling above the chart.

   Telerik's own guidance for tile content is `width:100%; height:100%`; note that
   the Chart does not re-measure on its own, so OnResize must keep calling Refresh(). */
.me-tile-chart-fill .k-tilelayout-item-body {
    display: flex;
    flex-direction: column;
}

.me-tile-chart-fill .k-tilelayout-item-body > .k-chart {
    flex: 1 1 0;
    min-height: 0;
}

/* ── Notification ─────────────────────────────────────────── */
/* Notifications must render above open dialogs/windows (z-index 10002 in Telerik 12)
   and other popups (~11000-12000). Use a very high value so toasts are never hidden. */
.k-notification-group,
.k-notification-container {
    z-index: 20000 !important;
}

.k-notification {
    border-radius: var(--me-radius) !important;
    font-size: .875rem !important;
}

/* ── Grid content overflow (AlertaList) ───────────────────── */
.k-grid-content {
    overflow: auto !important;
}

/* ── Base/secondary button: neutral slate tint ───────────────────────── */
/* :not(.k-selected) ensures selected toggle buttons are NOT overridden here */
.k-button-solid.k-button-base:not(.k-selected),
.k-button-solid.k-button-secondary:not(.k-selected) {
    background-color: rgba(var(--me-muted-rgb), 0.08) !important;
    border-color: rgba(var(--me-muted-rgb), 0.35) !important;
    color: var(--me-muted) !important;
    box-shadow: none !important;
}

.k-button-solid.k-button-base:not(.k-selected):hover,
.k-button-solid.k-button-secondary:not(.k-selected):hover {
    background-color: rgba(var(--me-muted-rgb), 0.16) !important;
    border-color: rgba(var(--me-muted-rgb), 0.6) !important;
    color: var(--me-text) !important;
}

.k-button-solid.k-button-base:not(.k-selected):active,
.k-button-solid.k-button-base:not(.k-selected).k-active,
.k-button-solid.k-button-secondary:not(.k-selected):active,
.k-button-solid.k-button-secondary:not(.k-selected).k-active {
    background-color: rgba(var(--me-muted-rgb), 0.24) !important;
    border-color: var(--me-muted) !important;
    color: var(--me-text) !important;
}

html.light-theme .k-button-solid.k-button-base:not(.k-selected),
html.light-theme .k-button-solid.k-button-secondary:not(.k-selected) {
    background-color: rgba(var(--me-muted-rgb), 0.08) !important;
    border-color: rgba(var(--me-muted-rgb), 0.3) !important;
    color: var(--me-muted) !important;
}

html.light-theme .k-button-solid.k-button-base:not(.k-selected):hover,
html.light-theme .k-button-solid.k-button-secondary:not(.k-selected):hover {
    background-color: rgba(var(--me-muted-rgb), 0.16) !important;
    border-color: rgba(var(--me-muted-rgb), 0.55) !important;
    color: var(--me-text) !important;
}

/* ── Primary button: alert-info style (subtle tint + accent border) ── */
/* Matches the alert-info aesthetic: rgba tinted bg, accent border, accent text */
.k-button-solid.k-button-primary {
    background-color: rgba(var(--me-accent-rgb), 0.12) !important;
    border-color: rgba(var(--me-accent-rgb), 0.35) !important;
    color: var(--me-accent-dark) !important;
    box-shadow: none !important;
}

.k-button-solid.k-button-primary:hover {
    background-color: rgba(var(--me-accent-rgb), 0.2) !important;
    border-color: var(--me-accent-dark) !important;
    color: var(--me-accent-dark) !important;
}

.k-button-solid.k-button-primary:active,
.k-button-solid.k-button-primary.k-active {
    background-color: rgba(var(--me-accent-rgb), 0.28) !important;
    border-color: var(--me-accent-dark) !important;
    color: var(--me-accent-dark) !important;
}

/* Light theme: subtle accent tint. Match ALL primary buttons (.k-button.k-button-primary),
   not just those carrying .k-button-solid — some Telerik primary buttons (e.g. inside a
   TelerikForm's FormButtons, or plain submit buttons) render without the .k-button-solid
   class and would otherwise fall through to the raw token as an odd solid fill. This keeps
   every light-mode primary button consistent with the reference (e.g. "Guardar cambios").
   Scoped to html.light-theme so the dark theme (base rules above) is unchanged. */
html.light-theme .k-button.k-button-primary {
    background-color: rgba(var(--me-accent-rgb), 0.15) !important;
    border-color: rgba(var(--me-accent-rgb), 0.5) !important;
    color: var(--me-accent-dark) !important;
}

html.light-theme .k-button.k-button-primary:hover {
    background-color: rgba(var(--me-accent-rgb), 0.25) !important;
    border-color: var(--me-accent-hover) !important;
    color: var(--me-accent-dark) !important;
}

/* ── Info button: same cyan tint as primary (used for neutral view actions) ── */
.k-button-solid.k-button-info {
    background-color: rgba(var(--me-accent-rgb), 0.12) !important;
    border-color: rgba(var(--me-accent-rgb), 0.35) !important;
    color: var(--me-accent-dark) !important;
    box-shadow: none !important;
}

.k-button-solid.k-button-info:hover {
    background-color: rgba(var(--me-accent-rgb), 0.2) !important;
    border-color: var(--me-accent-dark) !important;
    color: var(--me-accent-dark) !important;
}

.k-button-solid.k-button-info:active,
.k-button-solid.k-button-info.k-active {
    background-color: rgba(var(--me-accent-rgb), 0.28) !important;
    border-color: var(--me-accent-dark) !important;
    color: var(--me-accent-dark) !important;
}

html.light-theme .k-button-solid.k-button-info {
    background-color: rgba(var(--me-accent-rgb), 0.15) !important;
    border-color: rgba(var(--me-accent-rgb), 0.5) !important;
    color: var(--me-accent-dark) !important;
}

html.light-theme .k-button-solid.k-button-info:hover {
    background-color: rgba(var(--me-accent-rgb), 0.25) !important;
    border-color: var(--me-accent-hover) !important;
    color: var(--me-accent-dark) !important;
}

/* ── Success button: alert-success style (green tint) ───────────────── */
.k-button-solid.k-button-success {
    background-color: rgba(var(--me-green-rgb), 0.12) !important;
    border-color: rgba(var(--me-green-rgb), 0.35) !important;
    color: var(--me-green-dark) !important;
    box-shadow: none !important;
}

.k-button-solid.k-button-success:hover {
    background-color: rgba(var(--me-green-rgb), 0.20) !important;
    border-color: var(--me-green-dark) !important;
    color: var(--me-green-dark) !important;
}

.k-button-solid.k-button-success:active,
.k-button-solid.k-button-success.k-active {
    background-color: rgba(var(--me-green-rgb), 0.28) !important;
    border-color: var(--me-green-dark) !important;
    color: var(--me-green-dark) !important;
}

html.light-theme .k-button-solid.k-button-success {
    background-color: rgba(var(--me-green-rgb), 0.15) !important;
    border-color: rgba(var(--me-green-rgb), 0.5) !important;
    color: var(--me-green-dark) !important;
}

html.light-theme .k-button-solid.k-button-success:hover {
    background-color: rgba(var(--me-green-rgb), 0.25) !important;
    border-color: #34d399 !important;
    color: var(--me-green-dark) !important;
}

/* ── Warning button: alert-warning style (orange tint) ──────────────── */
.k-button-solid.k-button-warning {
    background-color: rgba(var(--me-orange-rgb), 0.12) !important;
    border-color: rgba(var(--me-orange-rgb), 0.35) !important;
    color: var(--me-orange-dark) !important;
    box-shadow: none !important;
}

.k-button-solid.k-button-warning:hover {
    background-color: rgba(var(--me-orange-rgb), 0.2) !important;
    border-color: var(--me-orange-dark) !important;
    color: var(--me-orange-dark) !important;
}

.k-button-solid.k-button-warning:active,
.k-button-solid.k-button-warning.k-active {
    background-color: rgba(var(--me-orange-rgb), 0.28) !important;
    border-color: var(--me-orange-dark) !important;
    color: var(--me-orange-dark) !important;
}

html.light-theme .k-button-solid.k-button-warning {
    background-color: rgba(var(--me-orange-rgb), 0.15) !important;
    border-color: rgba(var(--me-orange-rgb), 0.5) !important;
    color: var(--me-orange-dark) !important;
}

html.light-theme .k-button-solid.k-button-warning:hover {
    background-color: rgba(var(--me-orange-rgb), 0.25) !important;
    border-color: #fb923c !important;
    color: var(--me-orange-dark) !important;
}

/* ── Error/Danger button: alert-danger style (red tint) ──────────────── */
.k-button-solid.k-button-error {
    background-color: rgba(var(--me-red-rgb), 0.12) !important;
    border-color: rgba(var(--me-red-rgb), 0.35) !important;
    color: var(--me-red-dark) !important;
    box-shadow: none !important;
}

.k-button-solid.k-button-error:hover {
    background-color: rgba(var(--me-red-rgb), 0.2) !important;
    border-color: var(--me-red-dark) !important;
    color: var(--me-red-dark) !important;
}

.k-button-solid.k-button-error:active,
.k-button-solid.k-button-error.k-active {
    background-color: rgba(var(--me-red-rgb), 0.28) !important;
    border-color: var(--me-red-dark) !important;
    color: var(--me-red-dark) !important;
}

html.light-theme .k-button-solid.k-button-error {
    background-color: rgba(var(--me-red-rgb), 0.15) !important;
    border-color: rgba(var(--me-red-rgb), 0.5) !important;
    color: var(--me-red-dark) !important;
}

html.light-theme .k-button-solid.k-button-error:hover {
    background-color: rgba(var(--me-red-rgb), 0.25) !important;
    border-color: #f87171 !important;
    color: var(--me-red-dark) !important;
}

/* ── Chips: alert-style tint per theme color ─────────────────────────── */
/* Info chip — cyan */
.k-chip-solid.k-chip-info {
    background-color: rgba(var(--me-accent-rgb), 0.12) !important;
    border-color: rgba(var(--me-accent-rgb), 0.4) !important;
    color: var(--me-accent-dark) !important;
}
.k-chip-solid.k-chip-info:hover { background-color: rgba(var(--me-accent-rgb), 0.22) !important; }

/* Warning chip — orange */
.k-chip-solid.k-chip-warning {
    background-color: rgba(var(--me-orange-rgb), 0.12) !important;
    border-color: rgba(var(--me-orange-rgb), 0.4) !important;
    color: var(--me-orange-dark) !important;
}
.k-chip-solid.k-chip-warning:hover { background-color: rgba(var(--me-orange-rgb), 0.22) !important; }

/* Success chip — green */
.k-chip-solid.k-chip-success {
    background-color: rgba(var(--me-green-rgb), 0.12) !important;
    border-color: rgba(var(--me-green-rgb), 0.4) !important;
    color: var(--me-green-dark) !important;
}
.k-chip-solid.k-chip-success:hover { background-color: rgba(var(--me-green-rgb), 0.22) !important; }

/* Error chip — red */
.k-chip-solid.k-chip-error {
    background-color: rgba(var(--me-red-rgb), 0.12) !important;
    border-color: rgba(var(--me-red-rgb), 0.4) !important;
    color: var(--me-red-dark) !important;
}
.k-chip-solid.k-chip-error:hover { background-color: rgba(var(--me-red-rgb), 0.22) !important; }

/* Light theme: bump opacity slightly */
html.light-theme .k-chip-solid.k-chip-info    { color: var(--me-accent-dark) !important; }
html.light-theme .k-chip-solid.k-chip-warning { color: var(--me-orange-dark) !important; }
html.light-theme .k-chip-solid.k-chip-success { color: var(--me-green-dark) !important; }
html.light-theme .k-chip-solid.k-chip-error   { color: var(--me-red-dark) !important; }

/* ── TelerikBadge inside ButtonGroup: inline positioning (no floating overlay) ── */
.k-button-group .k-badge-container {
    position: static !important;
    display: inline-flex !important;
    vertical-align: middle !important;
}

.k-button-group .k-badge {
    position: static !important;
    transform: none !important;
    margin-left: 4px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    padding: 2px 6px !important;
    border: 1px solid transparent !important;
}

/* ── TelerikBadge: same tint palette as Bootstrap badges ─────────────── */
.k-badge-solid.k-badge-primary {
    background-color: rgba(var(--me-accent-rgb), 0.15) !important;
    border-color: rgba(var(--me-accent-rgb), 0.4) !important;
    color: var(--me-accent-dark) !important;
}
.k-badge-solid.k-badge-warning {
    background-color: rgba(var(--me-orange-rgb), 0.15) !important;
    border-color: rgba(var(--me-orange-rgb), 0.4) !important;
    color: var(--me-orange-dark) !important;
}
.k-badge-solid.k-badge-error {
    background-color: rgba(var(--me-red-rgb), 0.15) !important;
    border-color: rgba(var(--me-red-rgb), 0.4) !important;
    color: var(--me-red-dark) !important;
}
.k-badge-solid.k-badge-success {
    background-color: rgba(var(--me-green-rgb), 0.15) !important;
    border-color: rgba(var(--me-green-rgb), 0.4) !important;
    color: var(--me-green-dark) !important;
}
.k-badge-solid.k-badge-dark,
.k-badge-solid.k-badge-secondary {
    background-color: rgba(var(--me-muted-rgb), 0.15) !important;
    border-color: rgba(var(--me-muted-rgb), 0.4) !important;
    color: var(--me-muted) !important;
}

html.light-theme .k-badge-solid.k-badge-primary  { color: var(--me-accent-dark) !important; }
html.light-theme .k-badge-solid.k-badge-warning  { color: var(--me-orange-dark) !important; }
html.light-theme .k-badge-solid.k-badge-error    { color: var(--me-red-dark) !important; }
html.light-theme .k-badge-solid.k-badge-success  { color: var(--me-green-dark) !important; }
html.light-theme .k-badge-solid.k-badge-dark,
html.light-theme .k-badge-solid.k-badge-secondary { color: var(--me-muted-dark) !important; }

/* ── ButtonGroup selected state ──────────────────────────────────────── */
/* Telerik 12 does NOT add .k-toggle-button — actual classes are:        */
/* .k-button .k-button-solid .k-button-solid.k-button-base .k-selected            */
/* Scope with .k-button-group to avoid hitting other selected elements.  */
.k-button-group .k-button.k-selected,
.k-button-group .k-button-solid.k-button-base.k-selected {
    background-color: var(--kendo-color-primary-subtle) !important;
    border-color: rgba(var(--me-accent-rgb), 0.4) !important;
    color: var(--me-accent-dark) !important;
    box-shadow: none !important;
}

.k-button-group .k-button.k-selected:hover,
.k-button-group .k-button-solid.k-button-base.k-selected:hover {
    background-color: rgba(var(--me-accent-rgb), 0.16) !important;
    border-color: rgba(var(--me-accent-rgb), 0.6) !important;
    color: var(--me-accent-dark) !important;
}

html.light-theme .k-button-group .k-button.k-selected,
html.light-theme .k-button-group .k-button-solid.k-button-base.k-selected {
    background-color: rgba(var(--me-accent-rgb), 0.12) !important;
    border-color: rgba(var(--me-accent-rgb), 0.45) !important;
    color: var(--me-accent-dark) !important;
}

/* ── ProgressBar: alert-info style track + accent fill ───────────────── */
.k-progressbar {
    background-color: rgba(var(--me-accent-rgb), 0.10) !important;
    border-color: rgba(var(--me-accent-rgb), 0.30) !important;
    border-radius: 4px !important;
}

.k-progressbar .k-selected {
    background-color: rgba(var(--me-accent-rgb), 0.55) !important;
    border-color: var(--me-accent-dark) !important;
}

.k-progressbar .k-progress-status {
    color: var(--me-accent-dark) !important;
    font-weight: 600 !important;
}

html.light-theme .k-progressbar {
    background-color: rgba(var(--me-accent-rgb), 0.12) !important;
    border-color: rgba(var(--me-accent-rgb), 0.35) !important;
}

html.light-theme .k-progressbar .k-selected {
    background-color: rgba(var(--me-accent-rgb), 0.6) !important;
}

html.light-theme .k-progressbar .k-progress-status {
    color: var(--me-accent-dark) !important;
}

/* ── Button hover lift effect (AlertaList card footers) ───── */
.card-footer-custom .k-button {
    transition: all 0.2s ease;
}

.card-footer-custom .k-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-footer-custom .k-button:active {
    transform: translateY(0);
}

/* ── Input / Picker focus: cyan accent highlight ─────────────────────────── */
.k-input-solid:focus,
.k-input-solid.k-focus,
.k-picker-solid:focus,
.k-picker-solid.k-focus {
    border-color: var(--me-accent-dark) !important;
    box-shadow: 0 0 0 2px rgba(var(--me-accent-rgb), 0.25) !important;
}

html.light-theme .k-input-solid:focus,
html.light-theme .k-input-solid.k-focus,
html.light-theme .k-picker-solid:focus,
html.light-theme .k-picker-solid.k-focus {
    border-color: var(--me-accent-dark) !important;
    box-shadow: 0 0 0 2px rgba(var(--me-accent-rgb), 0.20) !important;
}

/* ── Tooltip: dark gradient style ─────────────────────────── */
.k-tooltip {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    font-size: 0.875rem;
    font-weight: 500;
    max-width: 300px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.k-tooltip .k-callout {
    color: #2d3748;
}

/* ── Dialog / Window action buttons ──────────────────────── */
/* Telerik 12 renders <DialogButtons> as .k-dialog-actions (which also carries
   .k-actions-stretched making each direct child flex:1 0 0%, i.e. full-width).
   Override: right-align the group and collapse buttons to content width.
   Note: .k-dialog-buttongroup does NOT exist in Telerik 12 — use .k-dialog-actions. */
.k-dialog-actions {
    justify-content: flex-end !important;
}

.k-dialog-actions > * {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* ── FileSelect / Upload "Seleccionar Archivos" button ───────── */
/* Es un boton interno (.k-upload-button); en v14 no recibe la clase de
   themecolor base, asi que los overrides de boton no lo alcanzan. Se le da
   el mismo tinte neutro/muted que un boton base. */
.k-upload-button {
    background-color: rgba(var(--me-muted-rgb), 0.08) !important;
    border-color: rgba(var(--me-muted-rgb), 0.35) !important;
    color: var(--me-muted) !important;
    box-shadow: none !important;
}

.k-upload-button:hover {
    background-color: rgba(var(--me-muted-rgb), 0.16) !important;
    border-color: rgba(var(--me-muted-rgb), 0.6) !important;
    color: var(--me-text) !important;
}

/* ── FileSelect / Upload file list ─────────────────────────── */
.k-upload .k-multiple-files-wrapper,
.k-upload .k-file-single > .k-file-info {
    min-height: 0;
}

.k-upload .k-upload-files .k-file-info {
    min-height: 0;
}

/* ── PdfViewer: search highlight colour ───────────────────────────────── */

.k-pdf-viewer-pages .k-page .k-text-layer .k-search-highlight-mark {
    background-color: #0000ff;
}

/* ── PdfViewer: resaltado de detalles (ComprobanteDetalle) ─────────
   El COLOR de cada resaltado NO se declara acá: js/pdf-pane.js lo pone como estilo inline
   (background-color: var(--me-pdf-hl-N)) sobre las spans por carácter que genera el buscador del
   visor. Es a propósito y no por comodidad:
     · la paleta tiene 15 colores y acá serían 15 reglas casi idénticas;
     · un estilo inline le gana a .k-search-highlight —que el visor deja puesta mientras dura su
       búsqueda— sin necesidad de !important;
     · los colores quedan viviendo en un solo lugar, mercado-energia.css.
   La clase .me-pdf-hl sí se usa, como marca de "esta span la pintamos nosotros": la necesitan la
   limpieza del módulo JS y la regla de opacidad de abajo.

   La capa de texto del visor es semitransparente para que se vea el canvas de abajo; con el
   resaltado propio hay que subirle la opacidad o los colores quedan lavados. Sólo cuando hay al
   menos un resaltado nuestro puesto. */
.k-pdf-viewer-pages .k-page .k-text-layer:has(.me-pdf-hl) {
    opacity: .55;
}

/* ── Detalles → columna "Resaltar": destacar el checkbox ────────────────────
   Con el estilo del tema es un cuadrado casi del color de la tarjeta y la acción
   principal de la fila pasa desapercibida. Sólo color/tamaño/sombra: el cableado
   con pdf-pane.js queda intacto.
   Lo que cambia entre temas son estas variables; las reglas de abajo son comunes.
   OJO: .resaltar-celda se declara en ComprobanteDetalle.razor.css — si se la renombra,
   este bloque deja de aplicar en silencio. Las dos clases del scope son las que evitan
   pisar el resto de los .k-checkbox de la app. */
.me-comprobante-detalle .resaltar-celda .k-checkbox {
    --rs-tint:         rgba(var(--me-accent-rgb), .12);
    --rs-tint-hover:   rgba(var(--me-accent-rgb), .24);
    --rs-ring:         0 0 0 3px rgba(var(--me-accent-rgb), .10);
    --rs-ring-hover:   0 0 0 4px rgba(var(--me-accent-rgb), .18);
    --rs-ring-checked: 0 0 0 4px rgba(var(--me-accent-rgb), .30);
    /* El tilde usa currentColor, así que el par bg/fg tiene que ir junto. */
    --rs-checked-bg:   var(--me-accent);
    --rs-checked-fg:   var(--me-bg);

    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: var(--me-accent-dark);
    background-color: var(--rs-tint);
    box-shadow: var(--rs-ring);
    transition: border-color var(--me-transition), background-color var(--me-transition), box-shadow var(--me-transition);
}

/* Claro: el tinte se lava sobre la tarjeta y el tilde del tema queda ilegible sobre el cyan. */
html.light-theme .me-comprobante-detalle .resaltar-celda .k-checkbox {
    --rs-tint:         rgba(var(--me-accent-rgb), .20);
    --rs-tint-hover:   rgba(var(--me-accent-rgb), .34);
    --rs-ring:         0 0 0 3px rgba(var(--me-accent-rgb), .16);
    --rs-ring-hover:   0 0 0 4px rgba(var(--me-accent-rgb), .26);
    --rs-ring-checked: 0 0 0 4px rgba(var(--me-accent-rgb), .38);
    --rs-checked-bg:   var(--me-accent-dark);
    --rs-checked-fg:   #fff;
}

/* :not(:disabled) porque el navegador no manda eventos de mouse a un input deshabilitado.
   :not(:checked) porque el hover le gana en especificidad al marcado: sin eso, al tildar con el
   puntero encima el fondo vuelve al tinte translúcido y el tilde se pierde. */
.me-comprobante-detalle .resaltar-celda .k-checkbox:hover:not(:checked):not(:disabled) {
    background-color: var(--rs-tint-hover);
    box-shadow: var(--rs-ring-hover);
}

/* El fondo va explícito: esta regla le gana por especificidad a la del tema, así que sin
   background propio el marcado se quedaría con el tinte translúcido y el tilde invisible. */
.me-comprobante-detalle .resaltar-celda .k-checkbox:checked {
    background-color: var(--rs-checked-bg);
    color: var(--rs-checked-fg);
    box-shadow: var(--rs-ring-checked);
}

/* El foco del tema es un anillo gris que pisa el halo y parece un bug. */
.me-comprobante-detalle .resaltar-celda .k-checkbox:focus,
.me-comprobante-detalle .resaltar-celda .k-checkbox.k-focus {
    border-color: var(--me-accent-hover);
    box-shadow: 0 0 0 4px rgba(var(--me-accent-rgb), .45);
}

/* Con el PDF desanclado los checkboxes van Enabled=false. Obligatorio: Telerik 14 emite
   `disabled` pero no .k-disabled, y el tema no trae reglas para :disabled. */
.me-comprobante-detalle .resaltar-celda .k-checkbox:disabled {
    border-width: 1px;
    border-color: rgba(var(--me-muted-rgb), .5);
    background-color: transparent;
    box-shadow: none;
    opacity: .5;
    cursor: default;
}

/* Carril de la columna, para encontrarla de un vistazo. */
.me-comprobante-detalle .me-telerik-grid .k-grid-content td:has(.resaltar-celda) {
    background: rgba(var(--me-accent-rgb), .05);
}

html.light-theme .me-comprobante-detalle .me-telerik-grid .k-grid-content td:has(.resaltar-celda) {
    background: rgba(var(--me-accent-rgb), .09);
}

/* --------------------------------------------------------------------------
   3. Mobile / tablet overrides
   Breakpoints aligned with Bootstrap 5 / mercado-energia.css helpers.
   -------------------------------------------------------------------------- */

/* --- <= 991.98px (tablet) ------------------------------------------------ */
@media (max-width: 991.98px) {
    /* Dialogs / Windows must never exceed the viewport on tablets */
    .k-dialog,
    .k-window {
        max-width: 95vw !important;
    }
}

/* --- <= 767.98px (mobile / phablet) ------------------------------------- */
@media (max-width: 767.98px) {
    /* TelerikGrid: enable native horizontal pan/scroll on touch devices so
       users can reach off-screen columns with a swipe. */
    .k-grid,
    .k-grid-content {
        touch-action: pan-x pan-y;
    }

    /* Grid command column + toolbar: let buttons wrap instead of overflow */
    .k-grid .k-command-cell {
        white-space: normal;
    }

    .k-grid-toolbar {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }

    /* TelerikForm: stack multi-column FormGroup on mobile regardless of Columns="N" */
    .k-form-horizontal .k-form-field,
    .k-form .k-form-field {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .k-form-layout,
    .k-form .k-form-layout {
        grid-template-columns: 1fr !important;
    }

    .k-form-layout .k-form-field,
    .k-form-layout > * {
        grid-column: span 1 !important;
    }

    /* Dialog / Window action rows wrap on small screens */
    .k-dialog-actions,
    .k-window-actions {
        flex-wrap: wrap !important;
    }

    /* TileLayout: force single column regardless of Columns="N" */
    .k-tilelayout {
        grid-template-columns: 1fr !important;
    }

    .k-tilelayout .k-tilelayout-item {
        grid-column: 1 / -1 !important;
    }

    /* Drawer in overlay mode: full-width mini-sheet that slides over content */
    .k-drawer-overlay .k-drawer {
        max-width: 85vw;
        width: 280px !important;
    }

    /* Telerik 12 keeps the .k-drawer fixed at its width even when Expanded=false
       in Overlay mode (no built-in transform). The `k-drawer-expanded` class is
       applied to the CONTAINER, not the drawer itself — slide the drawer and
       backdrop off-screen when the container isn't expanded. */
    /* Shared transition so both open/close states animate smoothly without
       getting stuck mid-flight during Blazor re-renders. */
    .k-drawer-container.k-drawer-overlay > .k-drawer {
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .k-drawer-container.k-drawer-overlay:not(.k-drawer-expanded) > .k-drawer {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .k-drawer-container.k-drawer-overlay.k-drawer-expanded > .k-drawer {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: transform 0.25s ease, visibility 0s linear 0s;
    }

    /* Hide the scrim/backdrop when collapsed so clicks reach the content */
    .k-drawer-container.k-drawer-overlay:not(.k-drawer-expanded) > .k-overlay {
        display: none !important;
    }

    /* Chart labels/legends: shrink text slightly so they fit small viewports */
    .k-chart-surface text {
        font-size: 11px !important;
    }

    /* Pager: compact layout; numbers wrap and arrows stay visible */
    .k-pager {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        font-size: 0.78rem !important;
    }

    .k-pager-info {
        display: none !important; /* "1 - 10 of N" label doubles page height on phones */
    }
}

/* --- Header tenant-selector ComboBox: shrink on mobile ----------------- */
/* The ComboBox has inline Width="400px" from LoginDisplay.razor which pushes
   the hamburger off-screen. Cap it on narrow viewports so the whole header
   fits within 360–500 px. */
@media (max-width: 991.98px) {
    .main-header-container .k-combobox {
        width: 220px !important;
        max-width: 50vw !important;
    }
}

@media (max-width: 575.98px) {
    .main-header-container .k-combobox {
        width: 140px !important;
    }

    /* Hide the "Empresa" prefix label on very narrow screens to reclaim width */
    .main-header-container .k-combobox .k-input-prefix span {
        display: none;
    }

    /* Hide the user email text in the LoginDisplay menu; keep the avatar icon and
       caret so users can still tap to access "Cerrar sesión" etc. */
    .main-header-container .k-menu-horizontal > .k-menu-item > .k-menu-link > .k-menu-link-text {
        display: none;
    }

    .main-header-container .k-menu-horizontal > .k-menu-item > .k-menu-link {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* --- Alert filter ButtonGroup: wrap on mobile -------------------------- */
/* The AlertaList filter chips are a TelerikButtonGroup with 4 toggles.
   By default Kendo lays them out in one row; on narrow viewports the 4th
   button overflows the screen. Force wrap and re-round corner radii so
   the grouped look is preserved. */
@media (max-width: 767.98px) {
    .filter-chips .k-button-group {
        flex-wrap: wrap;
    }

    .filter-chips .k-button-group .k-button {
        border-radius: 4px !important;
    }
}

/* --- ComprobanteDetalle Splitter: stack on mobile ---------------------- */
/* The page uses a horizontal 50/50 splitter (form | PDF). Both panes get
   unusably narrow on phones, so hide the PDF pane and let the form pane
   take the full width. */
@media (max-width: 767.98px) {
    .me-comprobante-detalle .k-splitter {
        height: auto !important;
    }

    .me-comprobante-detalle .k-splitter > .k-pane:nth-child(n+2),
    .me-comprobante-detalle .k-splitter > .k-splitbar {
        display: none !important;
    }

    .me-comprobante-detalle .k-splitter > .k-pane:first-child {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* --- <= 575.98px (phones) ----------------------------------------------- */
@media (max-width: 575.98px) {
    /* Tighter grid cell padding on phones */
    .me-telerik-grid .k-grid-content td {
        padding: 0.55rem 0.65rem !important;
    }

    /* Re-declarado para .me-grid-compact: el selector compuesto de la sección Grid (0,3,1) le gana
       a la regla de arriba (0,2,1) aunque esta venga después, así que sin esto el grid compacto se
       queda con el padding lateral de escritorio (1rem) en teléfono. */
    .me-telerik-grid.me-grid-compact .k-grid-content td {
        padding: 0.4rem 0.65rem !important;
    }

    .me-telerik-grid .k-grid-header th {
        padding: 0.45rem 0.65rem !important;
    }

    /* Force all dialogs to near-full-width on phones so Width="60vw" / "500px"
       declarations don't leave dialogs unusably narrow (e.g. 60vw = 216px on 360 px). */
    .k-dialog,
    .k-window {
        width: 95vw !important;
        height: auto !important;
        max-height: 90vh !important;
    }

    /* Dialog sits near the top so the on-screen keyboard doesn't hide inputs */
    .k-dialog {
        margin-top: 1rem !important;
    }
}