/*
 * Tema de Telerik UI for Blazor 12.0.0 con la marca ABHISOFT (change ui-brand-theme, design decisión 2).
 * Parte del tema Default incluido en el paquete (kendo-theme-default/all.css, cargado antes que esta hoja) y
 * redefine sus variables CSS con los tokens de rol. Como los tokens cambian con el tema oscuro, Telerik lo sigue
 * sin una segunda hoja. Al actualizar Telerik, revisar estos nombres con el catálogo de /dev/estilos.
 */

:root {
    /* Tipografía y forma */
    --kendo-font-family: var(--abhi-font-family);
    --kendo-font-size: var(--abhi-font-size-table);
    --kendo-font-size-md: var(--abhi-font-size-table);
    --kendo-font-weight-semibold: var(--abhi-font-weight-semibold);
    --kendo-border-radius-sm: var(--abhi-radius-sm);
    --kendo-border-radius-md: var(--abhi-radius-md);
    --kendo-border-radius-lg: var(--abhi-radius-lg);
    --kendo-elevation-2: var(--abhi-shadow-md);
    --kendo-elevation-4: var(--abhi-shadow-lg);

    /* Superficies y texto */
    --kendo-color-app-surface: var(--abhi-color-bg);
    --kendo-color-on-app-surface: var(--abhi-color-text);
    --kendo-color-surface: var(--abhi-color-surface-sunken);
    --kendo-color-surface-alt: var(--abhi-color-surface);
    --kendo-color-subtle: var(--abhi-color-text-muted);
    --kendo-color-border: var(--abhi-color-border);
    --kendo-color-border-alt: var(--abhi-color-border-strong);

    /* Base: botones neutros, cabeceras y estados hover */
    --kendo-color-base: var(--abhi-color-surface);
    --kendo-color-on-base: var(--abhi-color-text);
    --kendo-color-base-hover: var(--abhi-color-surface-hover);
    --kendo-color-base-active: var(--abhi-color-surface-sunken);
    --kendo-color-base-emphasis: var(--abhi-color-border-strong);
    --kendo-color-base-subtle: var(--abhi-color-surface-sunken);
    --kendo-color-base-subtle-hover: var(--abhi-color-surface-hover);
    --kendo-color-base-subtle-active: var(--abhi-color-border);
    --kendo-color-base-on-subtle: var(--abhi-color-text);
    --kendo-color-base-on-surface: var(--abhi-color-text);

    /* Primario: lima con texto gris oscuro */
    --kendo-color-primary: var(--abhi-color-accent);
    --kendo-color-on-primary: var(--abhi-color-on-accent);
    --kendo-color-primary-hover: var(--abhi-color-accent-hover);
    --kendo-color-primary-active: var(--abhi-color-accent-hover);
    --kendo-color-primary-emphasis: var(--abhi-color-accent-border);
    --kendo-color-primary-subtle: var(--abhi-color-accent-subtle);
    --kendo-color-primary-subtle-hover: var(--abhi-color-accent-subtle);
    --kendo-color-primary-subtle-active: var(--abhi-color-accent-subtle);
    --kendo-color-primary-on-subtle: var(--abhi-color-on-accent-subtle);
    /* Texto "primario" sobre superficie (enlaces, íconos activos): lima no se lee sobre blanco */
    --kendo-color-primary-on-surface: var(--abhi-color-text);

    /* Estados */
    --kendo-color-success: var(--abhi-color-success);
    --kendo-color-on-success: var(--abhi-color-on-strong);
    --kendo-color-success-subtle: var(--abhi-color-success-subtle);
    --kendo-color-success-on-subtle: var(--abhi-color-on-success-subtle);
    --kendo-color-success-on-surface: var(--abhi-color-success);
    --kendo-color-error: var(--abhi-color-danger);
    --kendo-color-on-error: var(--abhi-color-on-strong);
    --kendo-color-error-hover: var(--abhi-color-danger);
    --kendo-color-error-active: var(--abhi-color-danger);
    --kendo-color-error-subtle: var(--abhi-color-danger-subtle);
    --kendo-color-error-on-subtle: var(--abhi-color-on-danger-subtle);
    --kendo-color-error-on-surface: var(--abhi-color-danger);
    --kendo-color-warning: var(--abhi-color-warning-border);
    --kendo-color-on-warning: var(--abhi-color-on-accent);
    --kendo-color-warning-subtle: var(--abhi-color-warning-subtle);
    --kendo-color-warning-on-subtle: var(--abhi-color-on-warning-subtle);
    --kendo-color-warning-on-surface: var(--abhi-color-warning);
    --kendo-color-info: var(--abhi-color-info);
    --kendo-color-on-info: var(--abhi-color-on-strong);
    --kendo-color-info-subtle: var(--abhi-color-info-subtle);
    --kendo-color-info-on-subtle: var(--abhi-color-on-info-subtle);
    --kendo-color-info-on-surface: var(--abhi-color-info);
}

/* Foco: el tema Default usa una sombra tenue; aquí, el mismo anillo del resto de la aplicación. */
.k-button:focus-visible,
.k-button.k-focus,
.k-input.k-focus,
.k-input:focus-within,
.k-picker.k-focus,
.k-picker:focus-within,
.k-grid td.k-focus,
.k-grid th.k-focus,
.k-pager .k-focus {
    box-shadow: none;
    outline: var(--abhi-size-focus-ring) solid var(--abhi-color-focus);
    outline-offset: 0;
}

/* Bordes de campos con 3:1 de contraste (WCAG 1.4.11) */
.k-input,
.k-picker,
.k-checkbox {
    border-color: var(--abhi-color-border-strong);
}

/* Grilla: cabecera discreta, filas más altas y hover de la marca */
.k-grid {
    border-radius: var(--abhi-radius-lg);
    overflow: hidden;
    background-color: var(--abhi-color-surface);
}

.k-grid .k-table-th,
.k-grid .k-grid-header .k-table-th {
    font-weight: var(--abhi-font-weight-semibold);
    color: var(--abhi-color-text-muted);
}

.k-grid .k-table-td {
    padding-block: var(--abhi-space-3);
}

.k-grid .k-table-row:hover,
.k-grid .k-table-row.k-hover {
    background-color: var(--abhi-color-surface-hover);
}

/* Grupo de botones: el seleccionado es el primario (lima) */
.k-button-group .k-button.k-selected {
    background-color: var(--abhi-color-accent);
    border-color: var(--abhi-color-accent);
    color: var(--abhi-color-on-accent);
}