/*
 * Punto único de overrides para Telerik UI for Blazor.
 * Mantener todos los overrides de variables --kendo-* acá y no dispersos en component styles.
 *
 * Las variables --kendo-* se mapean a los tokens --degas-* de degas-tokens.css
 * (fuente única de la paleta). Cambiar un color de marca se hace allá, no acá.
 *
 * DEGAS-593: el mapeo cubre las FAMILIAS COMPLETAS (primary / error / success /
 * warning / info / base / surface). El tema default de Telerik 9.1 define 154
 * variables --kendo-color-*; mapear solo la base de cada familia dejaba las
 * derivadas (-on-surface, -subtle, -hover…) en los defaults coral/rojo del tema
 * — origen del bug del "botón coral" (FillMode Flat/Outline + ThemeColor Primary
 * leía --kendo-color-primary-on-surface sin mapear). Con la familia completa
 * mapeada ese bug muere de raíz y NO hacen falta más hacks por botón.
 *
 * TEMA OSCURO: como todo apunta a tokens --degas-*, el bloque
 * :root[data-theme="dark"] de degas-tokens.css oscurece Telerik entero sin un
 * segundo stylesheet de tema.
 *
 * DEGAS-533: series-a..f (colores de gráficos) YA están mapeadas, también con
 * la familia completa — ver el bloque al final de :root.
 *
 * Familias NO mapeadas a propósito (quedan en el default claro de Telerik):
 * secondary / tertiary / light / dark / inverse (sin uso en DEGAS).
 */

:root {
    --kendo-font-family: var(--degas-font-sans);
    /* Rediseño Consola: Telerik a 13px con línea de 20px (1.5385). De ahí salen, sin tocar
       paddings del tema, los 30px de inputs/botones md (20 + 4·2 + 1·2) y los 36px de fila de
       grilla (20 + 8·2). */
    --kendo-font-size: var(--degas-text-sm);
    --kendo-line-height: 1.5385;

    /* ---- superficies / bordes / neutros ---- */
    --kendo-color-app-surface:    var(--degas-surface-muted);
    --kendo-color-on-app-surface: var(--degas-text);
    --kendo-color-surface:        var(--degas-surface-muted);
    --kendo-color-surface-alt:    var(--degas-surface);
    --kendo-color-border:         var(--degas-border);
    --kendo-color-border-alt:     var(--degas-border-strong);
    --kendo-color-subtle:         var(--degas-text-muted);

    /* ---- familia base (controles neutros: botones Base, chips, toolbars) ---- */
    /* Consola: el botón secundario es blanco con borde (≥3:1, ver .k-button-solid-base
       abajo) y el hover es el mismo tint que el de las filas de grilla. */
    --kendo-color-base:               var(--degas-surface);
    --kendo-color-base-hover:         var(--degas-surface-hover);
    --kendo-color-base-active:        var(--degas-border);
    --kendo-color-base-emphasis:      var(--degas-border-strong);
    --kendo-color-base-subtle:        var(--degas-surface-sunken);
    --kendo-color-base-subtle-hover:  var(--degas-surface-hover);
    --kendo-color-base-subtle-active: var(--degas-border);
    --kendo-color-base-on-surface:    var(--degas-text);
    --kendo-color-base-on-subtle:     var(--degas-text);
    --kendo-color-on-base:            var(--degas-text);

    /* ---- primario (marca) ---- */
    --kendo-color-primary:               var(--degas-primary);
    --kendo-color-primary-hover:         var(--degas-primary-hover);
    --kendo-color-primary-active:        var(--degas-primary-active);
    --kendo-color-primary-emphasis:      var(--degas-primary-hover);
    --kendo-color-primary-on-surface:    var(--degas-primary);
    --kendo-color-primary-on-subtle:     var(--degas-primary);
    --kendo-color-primary-subtle:        var(--degas-primary-soft);
    --kendo-color-primary-subtle-hover:  var(--degas-primary-soft-hover);
    --kendo-color-primary-subtle-active: var(--degas-primary-soft-active);
    --kendo-color-on-primary:            var(--degas-on-primary);

    /* ---- error / danger ---- */
    --kendo-color-error:               var(--degas-danger);
    --kendo-color-error-hover:         var(--degas-danger-hover);
    --kendo-color-error-active:        var(--degas-danger-active);
    --kendo-color-error-emphasis:      var(--degas-danger-hover);
    --kendo-color-error-on-surface:    var(--degas-danger);
    --kendo-color-error-on-subtle:     var(--degas-danger);
    --kendo-color-error-subtle:        var(--degas-danger-bg);
    --kendo-color-error-subtle-hover:  var(--degas-danger-bg);
    --kendo-color-error-subtle-active: var(--degas-danger-bg);
    --kendo-color-on-error:            var(--degas-on-emphasis);

    /* ---- success ---- */
    --kendo-color-success:               var(--degas-success);
    --kendo-color-success-hover:         var(--degas-success-hover);
    --kendo-color-success-active:        var(--degas-success-active);
    --kendo-color-success-emphasis:      var(--degas-success-hover);
    --kendo-color-success-on-surface:    var(--degas-success);
    --kendo-color-success-on-subtle:     var(--degas-success);
    --kendo-color-success-subtle:        var(--degas-success-bg);
    --kendo-color-success-subtle-hover:  var(--degas-success-bg);
    --kendo-color-success-subtle-active: var(--degas-success-bg);
    --kendo-color-on-success:            var(--degas-on-emphasis);

    /* ---- warning ---- */
    --kendo-color-warning:               var(--degas-warning);
    --kendo-color-warning-hover:         var(--degas-warning);
    --kendo-color-warning-active:        var(--degas-warning);
    --kendo-color-warning-emphasis:      var(--degas-warning);
    --kendo-color-warning-on-surface:    var(--degas-warning);
    --kendo-color-warning-on-subtle:     var(--degas-warning);
    --kendo-color-warning-subtle:        var(--degas-warning-bg);
    --kendo-color-warning-subtle-hover:  var(--degas-warning-bg);
    --kendo-color-warning-subtle-active: var(--degas-warning-bg);
    --kendo-color-on-warning:            var(--degas-on-emphasis);

    /* ---- info ---- */
    --kendo-color-info:               var(--degas-info);
    --kendo-color-info-hover:         var(--degas-info);
    --kendo-color-info-active:        var(--degas-info);
    --kendo-color-info-emphasis:      var(--degas-info);
    --kendo-color-info-on-surface:    var(--degas-info);
    --kendo-color-info-on-subtle:     var(--degas-info);
    --kendo-color-info-subtle:        var(--degas-info-bg);
    --kendo-color-info-subtle-hover:  var(--degas-info-bg);
    --kendo-color-info-subtle-active: var(--degas-info-bg);
    --kendo-color-on-info:            var(--degas-on-emphasis);

    /* ---- series de gráficos (DEGAS-533) ----------------------------------- *
     * El tema deriva --kendo-chart-series-1..30 de SEIS familias de 5:
     *   1..6 → series-a..f · 7..12 → -subtle · 13..18 → -bold
     *   19..24 → -subtler  · 25..30 → -bolder
     * Se mapea la familia COMPLETA, no sólo la base: mapear a medias es
     * exactamente lo que produjo el bug del "botón coral" en DEGAS-593.
     * Los 4 modificadores apuntan al MISMO token base a propósito — con el
     * tope de 6 series los slots 7..30 no se usan, y esto garantiza que un
     * <TelerikChart> crudo tampoco caiga nunca en las derivadas coral del
     * tema default en lugar de inventar 24 hues fuera de la paleta validada.
     *
     * DegasChart además pasa el hex resuelto en ChartSeries.Color: esta capa
     * es el piso anti-coral, no el mecanismo de asignación. */
    --kendo-color-series-a:         var(--degas-chart-1);
    --kendo-color-series-a-bold:    var(--degas-chart-1);
    --kendo-color-series-a-bolder:  var(--degas-chart-1);
    --kendo-color-series-a-subtle:  var(--degas-chart-1);
    --kendo-color-series-a-subtler: var(--degas-chart-1);

    --kendo-color-series-b:         var(--degas-chart-2);
    --kendo-color-series-b-bold:    var(--degas-chart-2);
    --kendo-color-series-b-bolder:  var(--degas-chart-2);
    --kendo-color-series-b-subtle:  var(--degas-chart-2);
    --kendo-color-series-b-subtler: var(--degas-chart-2);

    --kendo-color-series-c:         var(--degas-chart-3);
    --kendo-color-series-c-bold:    var(--degas-chart-3);
    --kendo-color-series-c-bolder:  var(--degas-chart-3);
    --kendo-color-series-c-subtle:  var(--degas-chart-3);
    --kendo-color-series-c-subtler: var(--degas-chart-3);

    --kendo-color-series-d:         var(--degas-chart-4);
    --kendo-color-series-d-bold:    var(--degas-chart-4);
    --kendo-color-series-d-bolder:  var(--degas-chart-4);
    --kendo-color-series-d-subtle:  var(--degas-chart-4);
    --kendo-color-series-d-subtler: var(--degas-chart-4);

    --kendo-color-series-e:         var(--degas-chart-5);
    --kendo-color-series-e-bold:    var(--degas-chart-5);
    --kendo-color-series-e-bolder:  var(--degas-chart-5);
    --kendo-color-series-e-subtle:  var(--degas-chart-5);
    --kendo-color-series-e-subtler: var(--degas-chart-5);

    --kendo-color-series-f:         var(--degas-chart-6);
    --kendo-color-series-f-bold:    var(--degas-chart-6);
    --kendo-color-series-f-bolder:  var(--degas-chart-6);
    --kendo-color-series-f-subtle:  var(--degas-chart-6);
    --kendo-color-series-f-subtler: var(--degas-chart-6);
}

/*
 * Bordes de CONTROLES a ≥3:1 (WCAG 1.4.11). El tema usa --kendo-color-border para
 * TODO borde (inputs Y separadores decorativos), así que no se puede subir el var
 * global sin engrosar grillas/cards: se overridea solo el chrome de inputs/pickers.
 */
.k-input-solid,
.k-picker-solid {
    border-color: var(--degas-border-input);
}

/* Placeholder legible (4.5:1): el default del browser (~#a9a9a9) no cumple. */
.k-input-inner::placeholder,
.k-input::placeholder {
    color: var(--degas-text-muted);
    opacity: 1;
}

/* Botón secundario (Base, el default sin ThemeColor): blanco con borde de control ≥3:1 —
   el tema usa el borde decorativo. */
.k-button-solid-base {
    border-color: var(--degas-border-input);
}

/* Botones de ícono flat (toolbar de grilla, acciones por fila, paginador): 28px, ghost. El color
   sólo se toca en la familia BASE: un flat con ThemeColor (primary/error…) conserva el suyo. */
.k-button-flat.k-icon-button {
    width: var(--degas-control-height-compact);
    height: var(--degas-control-height-compact);
    padding: 0;
}

.k-button-flat-base.k-icon-button {
    color: var(--degas-text-muted);
}

.k-button-flat-base.k-icon-button:hover,
.k-button-flat-base.k-icon-button:focus-visible {
    color: var(--degas-text);
}

.k-button-flat.k-icon-button.k-selected {
    color: var(--degas-primary);
    background: var(--degas-primary-soft) !important;   /* el tema pone background:none !important */
}

/*
 * FileSelect (DEGAS-567). El botón interno ya sale bien por el mapeo de familias de arriba; lo que
 * el tema deja fuera de la norma es el chrome del contenedor: viene con radius 0 (contra los 4px de
 * todo el resto) y con --kendo-color-border, el borde decorativo, cuando el control es un INPUT y le
 * toca el de ≥3:1 igual que a un TextBox. overflow para que el fondo del dropzone respete la esquina.
 */
.k-upload {
    border-color: var(--degas-border-input);
    border-radius: var(--degas-radius);
    overflow: hidden;
}

/*
 * ===== Grilla (rediseño Consola, oct-2026) =====
 * Sin card: la grilla vive directamente sobre el fondo del contenido. Encabezados en mayúsculas
 * chicas sobre surface-sunken, filas de --degas-grid-row-height separadas por hairlines, SIN
 * bordes verticales ni zebra (el apoyo de lectura horizontal es el hover). El panel "Arrastre
 * aquí las columnas…" se oculta salvo que DegasGrid lo pida (botón de la toolbar o estado
 * restaurado con grupos ⇒ clase degas-grid--grouping).
 */
.k-grid {
    border-width: 0;
    border-radius: 0;
    background: transparent;
}

/* Host de DegasGrid: lleva el alto (fijo inline, o medido por grid-fill.js = lo que queda del
   viewport) y el TelerikGrid va a 100% de él. min-width 0 para que la grilla pueda scrollear
   horizontalmente dentro de un contenedor flex en vez de ensancharlo. */
.degas-grid-host {
    display: block;
    min-width: 0;
}

/* Modo fill: alto inicial hasta que el JS mide (si no, el primer pintado sale a alto de contenido y
   después salta). El inline que pone grid-fill.js pisa esta regla. */
.degas-grid-host[data-height="fill"] {
    height: 600px;
}

.k-grid .k-grid-toolbar {
    background: transparent;
    border: 0;
    padding: var(--degas-space-2) 0;
    gap: var(--degas-space-1);
}

/* Sólo en las grillas gestionadas por DegasGrid (clase degas-grid): un <TelerikGrid> crudo con
   Groupable (RoleEditor, permisos por categoría) conserva el panel de Telerik tal cual. */
.k-grid.degas-grid:not(.degas-grid--grouping) .k-grouping-header {
    display: none;
}

.k-grid .k-grouping-header {
    background: var(--degas-surface-sunken);
    border-color: var(--degas-border);
    border-width: 1px 0 0;
    font-size: var(--degas-text-xs);
    color: var(--degas-text-muted);
}

.k-grid-header {
    background: var(--degas-surface-sunken);
    border-color: var(--degas-border);
    border-width: 1px 0 1px;
}

.k-grid .k-table-th {
    border-width: 0 0 1px;
    border-color: var(--degas-border);
    font-size: var(--degas-text-2xs);
    font-weight: var(--degas-font-weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--degas-text-muted);
}

.k-grid-md .k-table-th {
    padding-block: 6px;
    padding-inline: 10px;
}

/* La fila de filtros (FilterMode=FilterRow) también es <th>: lo que el usuario tipea no va en
   mayúsculas ni espaciado. */
.k-grid .k-filter-row .k-table-th {
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--degas-text-sm);
    font-weight: inherit;
    color: inherit;
}

.k-grid .k-table-td {
    border-width: 0 0 1px;
    border-color: var(--degas-border);
    font-variant-numeric: tabular-nums;
}

/* 28px de contenido + 4px arriba/abajo = fila de 36px, con o sin botones de acción (28px). */
.k-grid-md .k-table-td {
    padding-block: 4px;
    padding-inline: 10px;
    height: calc(var(--degas-grid-row-height) - 8px);
}

/* El tema lo declara también como .k-grid .k-table-row.k-table-alt-row (0,3,0): hay que igualarlo. */
.k-grid .k-table-alt-row,
.k-grid .k-table-row.k-table-alt-row {
    background-color: transparent;
}

.k-grid .k-table-tbody .k-table-row:hover > .k-table-td,
.k-grid .k-table-row.k-hover > .k-table-td {
    background-color: var(--degas-surface-hover);
}

.k-grid .k-table-row.k-selected > .k-table-td,
.k-grid .k-table-td.k-selected {
    background-color: var(--degas-primary-soft);
}

/* La fila seleccionada no pierde su tinte al pasar el mouse (la regla de hover tiene más
   especificidad que la de selección). */
.k-grid .k-table-tbody .k-table-row.k-selected:hover > .k-table-td,
.k-grid .k-table-row.k-selected.k-hover > .k-table-td {
    background-color: var(--degas-primary-soft-hover);
}

/* Fila de totales (footers de agregado): pegada abajo, en negrita, con una regla más fuerte. */
.k-grid .k-grid-footer {
    background: var(--degas-surface-sunken);
    border-top: 1px solid var(--degas-border-strong);
}

.k-grid .k-grid-footer .k-table-td {
    font-weight: var(--degas-font-weight-semibold);
    border-bottom-width: 0;
}

/* Acciones por fila (ver / editar / eliminar): íconos ghost de 28px. El de Eliminar sigue
   siendo ThemeColor=Error en el markup (norma: "el color es parte del contrato de borrar"):
   acá sólo pasa de relleno rojo sólido a ícono rojo, para que una grilla de 25 filas no sea
   una columna de botones rojos. */
.k-grid .k-table-td .k-button.k-icon-button {
    width: var(--degas-control-height-compact);
    height: var(--degas-control-height-compact);
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--degas-text-muted);
}

.k-grid .k-table-td .k-button.k-icon-button:hover,
.k-grid .k-table-td .k-button.k-icon-button:focus-visible {
    background: var(--degas-surface-hover);
    border-color: transparent;
    color: var(--degas-text);
}

.k-grid .k-table-td .k-button.k-icon-button.k-button-solid-error,
.k-grid .k-table-td .k-button.k-icon-button.k-button-solid-error:hover,
.k-grid .k-table-td .k-button.k-icon-button.k-button-solid-error:focus-visible {
    color: var(--degas-danger);
}

/* Paginador: fila compacta sin fondo ni borde; números como botones ghost de 28px. */
.k-pager {
    border-width: 0;
    background: transparent;
    padding: var(--degas-space-2) 0 0;
    gap: var(--degas-space-3);
    font-size: var(--degas-text-sm);
}

.k-pager .k-pager-numbers .k-button,
.k-pager .k-pager-nav.k-button {
    min-width: var(--degas-control-height-compact);
    height: var(--degas-control-height-compact);
    padding: 0 6px;
}

.k-pager .k-pager-numbers .k-button.k-selected {
    background: var(--degas-primary-soft) !important;
    color: var(--degas-primary);
    font-weight: var(--degas-font-weight-semibold);
}

/* El tema le da al contador `flex: 1 1 0%` (se estira hasta el borde). El paginador responsive de
   Telerik suma ESE ancho estirado al calcular si entran los números de página y, con cualquier
   resize tardío (p. ej. el swap de las fuentes web), concluye que no entran y los reemplaza por el
   input "Página _ de N" aunque sobre más de un metro de pantalla. Ancho natural + margin-left:auto
   = misma posición (a la derecha), medición correcta. */
.k-pager .k-pager-info {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--degas-text-muted);
}

/* Ventanas y diálogos: radio 8, hairline, sombra de superficie flotante, barra de título plana. */
.k-window,
.k-dialog {
    border-radius: var(--degas-radius-lg);
    border: 1px solid var(--degas-border);
    box-shadow: var(--degas-shadow-lg);
}

.k-window-titlebar {
    background: var(--degas-surface);
    color: var(--degas-text);
    border-bottom: 1px solid var(--degas-border);
    padding-block: var(--degas-space-3);
    padding-inline: var(--degas-space-5) var(--degas-space-3);
    font-size: var(--degas-text-lg);
    font-weight: var(--degas-font-weight-semibold);
}

/*
 * Bloquea interacción con el form mientras se guardan los cambios
 */
.entity-form-saving {
    pointer-events: none;
    opacity: 0.55;
    cursor: progress;
    transition: opacity 0.15s ease-out;
}

/*
 * Alto máximo de TelerikDialog — el diálogo NUNCA puede pasarse de la pantalla.
 *
 * Telerik dimensiona el diálogo según su contenido y no le pone techo: con contenido largo
 * (caso real: la respuesta de una subida ABI2 con 74 mensajes) el diálogo crece más que el
 * viewport, y como está centrado por transform el TÍTULO y el FOOTER quedan FUERA de la
 * pantalla. O sea: no se puede leer, y sobre todo **no se puede cerrar** — el usuario queda
 * trabado. Es una falla de accesibilidad, no un detalle estético.
 *
 * Se arregla acá y no en cada componente a propósito: cualquier diálogo con contenido variable
 * (una lista de errores, un mensaje de confirmación largo, un texto traducido) tiene el mismo
 * modo de falla, y no se puede depender de que cada autor se acuerde de poner un max-height.
 *
 * min-height: 0 en el content NO es opcional: un hijo flex no baja de su tamaño de contenido
 * salvo que se lo permitas explícitamente, así que sin eso el overflow:auto no scrollea nada y
 * el diálogo se sigue estirando.
 */
.k-dialog {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.k-dialog > .k-dialog-titlebar,
.k-dialog > .k-window-titlebar,
.k-dialog > .k-dialog-buttongroup,
.k-dialog > .k-actions {
    flex: 0 0 auto;   /* título y footer siempre visibles */
}

.k-dialog > .k-dialog-content,
.k-dialog > .k-window-content {
    flex: 1 1 auto;
    min-height: 0;    /* habilita el shrink del hijo flex — sin esto no hay scroll */
    overflow: auto;
}

/*
 * Footer de TelerikDialog (DegasActionDialog) → estándar DEGAS.
 * Telerik por default estira los botones del DialogButtons al ancho completo
 * (k-actions-stretched ⇒ cada botón flex:1, footer 50/50). Lo reemplazamos por
 * el cluster compacto alineado a la derecha del resto de la app: los botones
 * toman su ancho natural y se agrupan a la derecha. El ORDEN (primaria a la
 * izquierda / Cancelar a la derecha, y la excepción de baja) lo decide el markup
 * de DegasActionDialog — acá solo arreglamos alineación y tamaño.
 * Mismo look que <DegasModalFooter> (footer de los editores en popup).
 */
.k-dialog-buttongroup,
.k-dialog .k-actions {
    justify-content: flex-end !important;
    gap: var(--degas-space-2);
}

.k-dialog-buttongroup > .k-button,
.k-dialog .k-actions > .k-button {
    flex: 0 0 auto !important;   /* anula el stretch (k-actions-stretched) */
    width: auto !important;
    min-width: 104px;            /* botones cómodos, no microscópicos       */
}

/*
 * Toaster Telerik
 */
.k-notification-group {
    z-index: var(--degas-z-toast) !important;
}
.k-notification {
    min-width: 360px;
    max-width: 520px;
    padding: var(--degas-space-4) var(--degas-space-4);
    font-size: var(--degas-text-lg);
    line-height: var(--degas-leading-normal);
    box-shadow: var(--degas-shadow-lg);
}
.k-notification .k-notification-content {
    font-size: var(--degas-text-lg);
    word-break: break-word;
}

/*
 * Alineación a la derecha del ENCABEZADO de columnas numéricas (DegasGridColumn deriva esto de
 * un Format numérico y pone HeaderClass="degas-col-right"). El TextAlign de Telerik alinea las
 * CELDAS de datos, pero el header es un flex (.k-cell-inner > .k-link[título] + menú de columna),
 * así que text-align no lo mueve — hay que empujar el contenido del .k-link al final. El menú de
 * columna (⋮) queda igual a la derecha. El footer lo alinea el propio DegasGridColumn en su template.
 */
.degas-col-right .k-link {
    /* !important para ganarle a la regla de Telerik .k-grid .k-cell-inner > .k-link
       (especificidad 0,3,0); misma convención que los overrides de footer/diálogo de arriba. */
    justify-content: flex-end !important;
}

/*
 * Encabezado de GRUPO (banda) de DegasGridColumn con <Columns> (HeaderClass="degas-col-group"):
 * título centrado sobre sus hijas, como la caption de banda de DevExpress. Cada th de grupo es un
 * elemento hermano de los de sus hijas (otra fila del thead), así que no interfiere con
 * .degas-col-right de las hijas numéricas.
 */
.degas-col-group .k-link {
    justify-content: center !important;
}