/* =================================================================================================
   Puente de tokens hacia Kendo 2024 (etapa 3 del plan de tema)

   El tema `default` de Kendo 2024 está escrito con variables CSS: sus hojas usan `var(--kendo-…)`
   más de cinco mil veces. Por eso el modo oscuro no necesita una segunda hoja ni cambiar el `href`
   al vuelo: basta darle a esas variables los tokens del panel y los widgets siguen al tema.

   <b>Esta hoja va después de `default-main.css`</b>, para que sus valores ganen.
   ================================================================================================= */

:root {
    /* Superficies y texto */
    --kendo-color-app-surface: var(--tema-superficie);
    --kendo-color-on-app-surface: var(--tema-texto);
    --kendo-color-subtle: var(--tema-texto-tenue);
    --kendo-color-surface: var(--tema-superficie-alt);
    --kendo-color-surface-alt: var(--tema-superficie);
    --kendo-color-border: var(--tema-borde);
    --kendo-color-border-alt: var(--tema-borde-fuerte);

    /* Base: lo neutro —encabezados de rejilla, botones sin color, pager— */
    --kendo-color-base-subtle: var(--tema-hundido);
    --kendo-color-base-subtle-hover: var(--tema-borde);
    --kendo-color-base-subtle-active: var(--tema-borde-fuerte);
    --kendo-color-base: var(--tema-superficie-alt);
    --kendo-color-base-hover: var(--tema-hundido);
    --kendo-color-base-active: var(--tema-borde);
    --kendo-color-base-emphasis: var(--tema-borde-fuerte);
    --kendo-color-base-on-subtle: var(--tema-texto);
    --kendo-color-on-base: var(--tema-texto);
    --kendo-color-base-on-surface: var(--tema-texto);

    /* Acento */
    --kendo-color-primary-subtle: var(--tema-acento-suave);
    --kendo-color-primary-subtle-hover: var(--tema-acento-suave);
    --kendo-color-primary-subtle-active: var(--tema-acento-suave);
    --kendo-color-primary: var(--tema-acento);
    --kendo-color-primary-hover: var(--tema-acento-hover);
    --kendo-color-primary-active: var(--tema-acento-activo);
    --kendo-color-primary-emphasis: var(--tema-acento-hover);
    --kendo-color-primary-on-subtle: var(--tema-acento);
    --kendo-color-on-primary: var(--tema-acento-texto);
    --kendo-color-primary-on-surface: var(--tema-acento);

    /* Semánticos */
    --kendo-color-success: var(--tema-correcto);
    --kendo-color-success-subtle: var(--tema-correcto-suave);
    --kendo-color-on-success: var(--tema-texto-inverso);
    --kendo-color-warning: var(--tema-aviso);
    --kendo-color-warning-subtle: var(--tema-aviso-suave);
    --kendo-color-on-warning: var(--tema-texto-inverso);
    --kendo-color-error: var(--tema-peligro);
    --kendo-color-error-subtle: var(--tema-peligro-suave);
    --kendo-color-on-error: var(--tema-texto-inverso);
    --kendo-color-info: var(--tema-info);
    --kendo-color-info-subtle: var(--tema-info-suave);
    --kendo-color-on-info: var(--tema-texto-inverso);

    /* Tipografía y radios, para que un widget no se vea de otra familia */
    --kendo-font-family: var(--tema-fuente);
    --kendo-font-size: var(--tema-texto-md);
    --kendo-border-radius-md: var(--tema-radio-sm);
    --kendo-border-radius-lg: var(--tema-radio-md);
}

/* --- Rejilla ------------------------------------------------------------------------------------ */

/*
 * Densidad: Kendo 2024 reparte 8px 12px por celda donde 2018 daba .4em .6em. Con la medida nueva los
 * renglones pasaron de 38 a 43 px —cuatro registros menos en pantalla— y las columnas de ancho fijo
 * se comieron el espacio de las de ancho automático. Se sostiene la densidad de antes, que es la que
 * el sistema visual pide para un renglón de 40 px. (Venía de la etapa 2, en `custom.css`.)
 */
.k-grid .k-table-th,
.k-grid .k-table-td {
    padding: 4px 8px;
}

/* El renglón mide 40 px, como pide el sistema visual; el que traiga texto largo crece y ya. */
.k-grid .k-table-row {
    height: var(--tema-renglon-alto);
}

/* La celda de acciones de una rejilla no parte sus botones en dos renglones. */
.k-grid td.celda-acciones {
    white-space: nowrap;
}

.k-grid {
    border-radius: var(--tema-radio-md);
    font-size: var(--tema-texto-md);
}

.k-grid .k-table-thead {
    font-weight: 600;
}

/* Los números se leen en columna: misma familia monoespaciada que el resto de las cifras. */
.k-grid .k-table-td.text-end {
    font-family: var(--tema-fuente-mono);
    font-variant-numeric: tabular-nums;
}

/* --- Botones ------------------------------------------------------------------------------------ */

/*
 * Muchos botones del panel son de Kendo y de Bootstrap a la vez: el marcado trae `btn btn-primary` y
 * `kendoButton` les agrega `k-button k-button-solid-base` encima. Como la hoja de Kendo se carga
 * después de la de Bootstrap, ganaba el gris de Kendo y el botón principal salía blanco. Aquí se le
 * devuelve el color del tema a los que lo piden por su clase de Bootstrap.
 */
.k-button.btn-primary,
.k-button.btn-primary:hover {
    background-color: var(--tema-acento);
    border-color: var(--tema-acento);
    color: var(--tema-acento-texto);
}

.k-button.btn-primary:hover {
    background-color: var(--tema-acento-hover);
    border-color: var(--tema-acento-hover);
}

.k-button.btn-success {
    background-color: var(--tema-correcto);
    border-color: var(--tema-correcto);
    color: var(--tema-texto-inverso);
}

.k-button.btn-danger {
    background-color: var(--tema-peligro);
    border-color: var(--tema-peligro);
    color: var(--tema-texto-inverso);
}

.k-button.btn-white {
    background-color: var(--tema-superficie);
    border-color: var(--tema-borde-fuerte);
    color: var(--tema-texto);
}

/*
 * Alto de la rejilla, una sola regla para todas (etapa 4 del plan de tema).
 *
 * Cada pantalla traía el suyo —`height: calc(100vh - 450px)`, `- 430px`, `- 530px`, uno por
 * archivo— y con un número fijo distinto en cada una. Aquí el contenido manda: la rejilla mide lo
 * que midan sus renglones y solo cuando pasa de lo que cabe en la ventana desplaza por dentro. Las
 * demás pantallas sueltan su regla en la etapa 5.
 */
.k-grid-content {
    max-height: calc(100vh - 20rem);
}