/* ============================================================
   WINLEDGER STYLESHEET
   Estilos personalizados que usan variables del tema oscuro
   Todas las clases aqui referencian --kendo-color-* variables
   definidas en winledger-theme.css
   ============================================================ */

/* ==================== CARDS ==================== */

.k-card {
    margin: 2px;
    background: var(--card-gradient, var(--kendo-color-surface-alt));
    border-radius: var(--kendo-border-radius-lg);
    box-shadow: var(--wl-shadow-md);
    padding: 20px;
    border: 1px solid var(--kendo-color-border);
}

.k-card-header {
    /* 🔴 Navy fijo y NO var(--kendo-color-primary): en el tema oscuro ese token es
       un azul claro (#4C8BF5) y el texto blanco encima da 3,32 de contraste —por
       debajo del 4,5 que se considera legible—; medido en pantalla, y por eso los
       títulos de los cards se leían mal en dark. Con el navy de marca (el mismo que
       ya usan los grid headers y el hero) sube a 11,5. En claro ya era navy porque
       ahí el token vale exactamente esto. */
    background-color: #1E3A5F;
    color: var(--kendo-color-on-primary);
    padding: 5px 10px;
    border-radius: var(--kendo-border-radius-lg);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    min-height: 35px;
}

/* ==================== BUTTONS ==================== */

.custom-button {
    margin-right: 8px;
    background-color: var(--kendo-color-primary);
    border: none;
    color: var(--kendo-color-on-primary);
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: var(--kendo-color-primary-hover);
}

.custom-button-reject {
    background-color: var(--kendo-color-error);
    color: var(--kendo-color-on-error);
    transition: background-color 0.3s ease;
}

.custom-button-reject:hover {
    background-color: var(--kendo-color-error-hover);
}

/* ==================== GRID ==================== */

.custom-grid {
    font-size: var(--wl-grid-font-size, 12px);
    border-radius: var(--kendo-border-radius-lg);
    overflow: hidden;
}

.custom-grid .k-grid-header th {
    background-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid var(--kendo-color-primary-emphasis);
    font-size: var(--wl-grid-font-size, 12px);
}

.custom-grid .k-toolbar {
    font-size: var(--wl-grid-font-size, 12px);
    border-bottom: 1px solid var(--kendo-color-border);
    padding: 8px 12px;
    gap: 8px;
}

.custom-grid table {
    font-size: var(--wl-grid-font-size, 12px);
}

.custom-grid .k-table-row:hover {
    background-color: var(--kendo-color-base-subtle-hover);
}

.custom-grid .k-table-alt-row {
    background-color: var(--wl-alt-row-bg);
}

.custom-grid .k-filter-row th {
    background-color: var(--kendo-color-surface-alt);
}

.custom-grid .k-pager {
    border-top: 1px solid var(--kendo-color-border);
}

.custom-grid .k-input {
    font-size: var(--wl-grid-font-size, 12px);
}

.custom-grid .k-picker {
    font-size: var(--wl-grid-font-size, 12px);
}

.custom-grid .k-button {
    font-size: var(--wl-grid-font-size, 12px);
}

.custom-grid .k-popup,
.custom-grid .k-popup .k-input,
.custom-grid .k-popup .k-picker,
.custom-grid .k-popup .k-button,
.custom-grid .k-popup .k-list {
    font-size: var(--wl-grid-font-size, 12px);
}

/* Opciones de los popups de combos/dropdowns. Telerik renderiza el popup a nivel
   de <body> (fuera de .custom-grid), por eso la regla scopeada de arriba no aplica
   a la lista desplegada. Esta regla GLOBAL deja las opciones a 12px, consistente
   con el texto in-cell de los grids. Es puramente cosmético. */
.k-list-item {
    font-size: 12px;
}

/* ==================== FORMULARIO COMPACTO (densidad por contexto) ====================
   Aplicar wl-form-compact al <div> contenedor de un formulario de captura para que
   sus campos Telerik (textbox, numeric, combobox, dropdownlist, datepicker) queden
   a 12px, igual que los grids custom-grid. Pensado SOLO para pantallas de captura
   densas, no para dashboards/diálogos/navegación. Reutilizable y reversible. */
.wl-form-compact .k-input,
.wl-form-compact .k-picker,
.wl-form-compact .k-input-inner,
.wl-form-compact .k-input-value-text,
.wl-form-compact .form-label { font-size: 12px; }

/* ==================== MENU LAYOUTS ==================== */

[class*="menu-"] {
    border-radius: var(--kendo-border-radius-lg);
    margin-bottom: 16px;
}

[class*="menu-"] .k-svg-icon {
    margin-right: 8px;
    opacity: 0.85;
}

[class*="menu-"] .k-menu-popup .k-separator {
    margin: 4px 8px;
    border-color: var(--kendo-color-border);
}

[class*="menu-"] .k-menu-popup .k-menu-item .k-menu-popup {
    min-width: 240px;
}

/* Menu popup items: reducir padding para layout más compacto */
.k-menu-popup .k-menu-link {
    padding: 6px 12px;
}

.k-menu-popup .k-menu-item {
    margin: 0;
}

.wl-menu-category {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 560px) {
    [class*="menu-"] {
        flex-direction: column;
    }
    [class*="menu-"] > .k-menu-item {
        width: 100%;
    }
}

/* ==================== NOTIFICATIONS ==================== */

.k-notification-container {
    z-index: 9999;
    margin-top: 60px;
}

/* ==================== NAVIGATION ==================== */

.nav-link {
    background-color: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
}

.nav-link.collapsed {
    background-color: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
}

.nav-link:not(.collapsed) {
    background-color: var(--kendo-color-surface);
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
    background-color: var(--kendo-color-base);
    color: var(--kendo-color-on-app-surface);
}

.collapse .nav-link {
    background-color: transparent;
    padding-left: 20px;
}

.nav-header {
    background-color: var(--kendo-color-base-subtle);
    color: var(--kendo-color-on-app-surface);
    padding: 10px;
    border-radius: var(--kendo-border-radius-md);
    text-align: left;
    margin-bottom: 5px;
    font-weight: normal;
    font-size: 14px;
}

/* ==================== ANIMATIONS ==================== */

/* Keyframes */
@keyframes wl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wl-fade-in-scale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes wl-slide-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Modales y Diálogos — fade + scale sutil */
.k-window {
    animation: wl-fade-in-scale 0.2s ease-out;
}

.k-dialog-wrapper .k-dialog {
    animation: wl-fade-in-scale 0.2s ease-out;
}

.k-overlay {
    animation: wl-fade-in 0.15s ease-out;
}

/* Drawer items — transición suave */
.k-drawer-item {
    transition: background 0.15s ease, padding-left 0.2s ease, opacity 0.2s ease;
}

/* Cards — transición suave (sin transform para no romper popups de Telerik) */
.k-card {
    transition: box-shadow 0.2s ease;
}

/* Hover lift SOLO en cards que son enlaces/navegación (ej: PresupuestoInicio).
   NO aplicar a todos los k-card porque el transform: translateY() mueve el
   trigger de DatePicker/DropDownList y Telerik cierra el popup. */
.k-card.wl-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--wl-shadow-lg);
}

/* Grid rows — transición suave en hover */
.custom-grid .k-table-row {
    transition: background-color 0.15s ease;
}

/* Menú popups — fade in */
.k-menu-popup {
    animation: wl-fade-in 0.15s ease-out;
}

/* Botones — scale al click */
.k-button {
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.k-button:active {
    transform: scale(0.97);
}

/* Notificaciones — slide in desde la derecha */
.k-notification {
    animation: wl-slide-in-right 0.3s ease-out;
}

/* ==================== TILES DASHBOARD ==================== */

.wl-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

button.wl-tile.k-button,
.wl-tile.k-button {
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
    padding: 20px 16px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 120px;
    white-space: normal;
    line-height: normal;
}

button.wl-tile.k-button:hover,
.wl-tile.k-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--wl-shadow-lg);
    border-color: var(--kendo-color-primary);
    background: var(--kendo-color-surface-alt);
}

.wl-tile-icon {
    color: var(--kendo-color-primary);
    margin-bottom: 10px;
}

.wl-tile-title {
    color: var(--kendo-color-on-app-surface);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.wl-tile-desc {
    color: var(--kendo-color-subtle);
    font-size: 0.78rem;
    line-height: 1.3;
}

.wl-tiles-section {
    color: var(--kendo-color-on-app-surface);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--kendo-color-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wl-tiles-section .k-svg-icon {
    color: var(--kendo-color-primary);
    opacity: 0.85;
}

/* ==================== DESIGN SYSTEM — KPI & DASHBOARD ==================== */

.wl-kpi-value {
    font-size: var(--wl-kpi-font-size, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.wl-kpi-value-sm {
    font-size: var(--wl-kpi-font-size-sm, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
}

/* Monto largo en tarjeta angosta: achica con el ancho y parte antes de salirse.
   Medido en /nomina/asiento-generico: «2.683.245,90» a 1.8rem no cabe en una
   tarjeta de un cuarto de pantalla y se montaba encima del KPI de al lado. */
.wl-kpi-value-fluid {
    font-size: clamp(1rem, 1.35vw + 0.35rem, var(--wl-kpi-font-size-sm, 1.8rem));
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.wl-min-w-180 { min-width: 180px; }
.wl-min-w-200 { min-width: 200px; }
.wl-min-w-350 { min-width: 350px; }
.wl-min-w-400 { min-width: 400px; }
.wl-max-w-700 { max-width: 700px; }
.wl-max-w-1100 { max-width: 1100px; }
.wl-max-w-1400 { max-width: 1400px; }
.wl-max-w-450 { max-width: 450px; }

/* ==================== DESIGN SYSTEM — INFO BOX ==================== */

.wl-info-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--kendo-color-primary-subtle);
    border-radius: var(--kendo-border-radius-lg);
    border-left: 4px solid var(--kendo-color-primary);
}

.wl-info-box-label {
    font-size: 0.8rem;
    color: var(--kendo-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wl-info-box-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kendo-color-primary-on-subtle);
}

/* ==================== DESIGN SYSTEM — FORMS ==================== */

.wl-display-field {
    background: transparent;
    border-color: var(--kendo-color-border);
}

.wl-display-field-text {
    padding: 4px 8px;
    font-size: 0.85rem;
    color: var(--kendo-color-subtle);
}

/* ==================== DESIGN SYSTEM — BANNERS ==================== */

.wl-banner-warning {
    background: var(--kendo-color-warning-subtle);
    border: 1px solid var(--kendo-color-warning-emphasis);
    border-radius: var(--kendo-border-radius-md);
    padding: 6px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--kendo-color-warning-on-subtle);
}

.wl-banner-info {
    background: var(--kendo-color-base-subtle);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    padding: 6px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
}

/* ==================== DESIGN SYSTEM — SCROLL CONTAINER ==================== */

.wl-scroll-container {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-sm);
    padding: 6px;
}

.wl-scroll-panel {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    max-width: 100%;
}

.wl-combo-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ==================== DESIGN SYSTEM — STICKY HEADER ==================== */

.wl-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px 0;
    border-bottom: 1px solid var(--kendo-color-border);
}

/* Mesa de trabajo de la Conciliacion Manual: pegada al pie del contenido, para que
   lo marcado y los botones no se vayan de la vista al recorrer las dos listas.
   El z-index queda por debajo de .wl-sticky-header a proposito. */
/* Las dos listas de la Conciliacion Manual, una al lado de la otra.

   Delimitar: en el tema CLARO --kendo-color-surface-alt es blanco igual que
   --kendo-color-surface (medido: 255,255,255 los dos), asi que tintar con
   surface-alt no separa nada. El tono que SI contrasta en los dos temas es el
   fondo de la app puesto DENTRO de la superficie de la card: son las dos bases
   de la paleta, y la distancia entre ellas existe por construccion.
   El .k-card-header del proyecto no sirve aqui: es navy solido, pensado para
   el titulo de la pantalla, y dos barras navy competirian con el. */
.wl-panel-lista {
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
    overflow: hidden;
    /* Los dos paneles a la misma altura: el aviso de orden por parecido existe
       en UN solo lado, asi que sin esto los bordes inferiores quedan
       desparejos y parece que una lista tiene mas contenido que la otra. */
    height: 100%;
}

.wl-panel-lista .k-grid {
    border: 0;
}

.wl-panel-cabecera {
    background: var(--kendo-color-app-surface);
    border-bottom: 1px solid var(--kendo-color-border);
    padding: 8px 12px;
}

/* Los dos lados de la conciliacion son listas identicas en forma, asi que el
   unico que los distingue es el titulo. Se les da un acento propio: una barra
   arriba y un lavado del mismo color en la cabecera.

   primary y tertiary son los dos acentos de marca y NINGUNO significa un
   estado (a diferencia de success/warning/error), asi que no confunden. El
   color va SIEMPRE acompanado del rotulo: nunca es el unico canal, y por eso
   el texto conserva su color normal (tertiary es dorado en el tema claro y
   sobre fondo claro no llegaria al contraste minimo para texto). */
.wl-panel-libro {
    border-top: 3px solid var(--kendo-color-primary);
}

.wl-panel-libro .wl-panel-cabecera {
    background: color-mix(in srgb, var(--kendo-color-primary) 8%, var(--kendo-color-app-surface));
}

.wl-panel-banco {
    border-top: 3px solid var(--kendo-color-tertiary);
}

.wl-panel-banco .wl-panel-cabecera {
    background: color-mix(in srgb, var(--kendo-color-tertiary) 12%, var(--kendo-color-app-surface));
}

/* La misma clave de color en las fichas de la mesa: de un vistazo se ve de que
   lado viene cada linea del grupo. */
/* El borde completo va aqui, NO con la utilidad .border de Bootstrap: esa
   lleva !important y le gana a un border-left propio por mucha especificidad
   que se le apile (medido: el acento salia gris 222,226,230). */
.wl-ficha-libro,
.wl-ficha-banco {
    border: 1px solid var(--kendo-color-border);
}

.wl-ficha-libro {
    border-left: 3px solid var(--kendo-color-primary);
}

.wl-ficha-banco {
    border-left: 3px solid var(--kendo-color-tertiary);
}

/* Mas denso que el grid normal (13px): con seis columnas en media pantalla,
   cada pixel de ancho cuenta. */
.wl-grid-compacto,
.wl-grid-compacto .k-grid-header th,
.wl-grid-compacto .k-grid-content td {
    font-size: 11px;
}

.wl-grid-compacto .k-grid-header th,
.wl-grid-compacto .k-grid-content td {
    padding-block: 3px;
    padding-inline: 6px;
}

/* Una fila = una linea. Sin esto la descripcion se parte en tres o cuatro
   lineas al angostarse la columna y la fila se hace mas alta que antes del
   rediseno: se perdia justo lo que se queria ganar. El texto completo sigue
   disponible en el title de la celda y en la ficha de la mesa. */
.wl-grid-compacto .k-grid-content td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-mesa-trabajo {
    position: sticky;
    bottom: 0;
    z-index: 3;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.14);
}
/* 🔴 Sin esto el sticky no se pegaba a nada (shell/ux 3e): .k-drawer-content tiene overflow:auto
   pero nunca se desplaza (se desplaza la ventana), y un sticky se pega a su contenedor de scroll.
   overflow:clip NO crea contenedor de scroll, así que la mesa se pega a la ventana; y a diferencia
   de visible, recorta en vez de abrir scroll horizontal (con visible, Auxiliares abría 172 px).
   Solo en la pantalla que tiene la mesa. Un navegador sin overflow:clip lo ignora y queda como antes. */
.k-drawer-content:has(.wl-mesa-trabajo) { overflow: clip; }

/* ==================== DESIGN SYSTEM — BADGES ==================== */

.wl-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.wl-badge-success {
    background-color: var(--kendo-color-success);
    color: var(--kendo-color-on-success);
}

.wl-badge-warning {
    background-color: var(--kendo-color-warning);
    color: var(--kendo-color-on-warning);
}

.wl-badge-error {
    background-color: var(--kendo-color-error);
    color: var(--kendo-color-on-error);
}

.wl-badge-muted {
    background-color: var(--kendo-color-base-subtle);
    color: var(--kendo-color-subtle);
}

.wl-badge-info-soft {
    background-color: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info);
}

.wl-badge-primary-soft {
    background-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary);
}

.wl-badge-subtle {
    background: var(--kendo-color-base-subtle);
    color: var(--kendo-color-on-subtle);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    margin-left: 4px;
}

/* ==================== DESIGN SYSTEM — VALIDATION ==================== */

.wl-validation-msg {
    font-size: 0.8rem;
    margin-top: 4px;
}

.wl-highlight-empty {
    background-color: var(--kendo-color-warning-subtle) !important;
    border-color: var(--kendo-color-warning-emphasis) !important;
}

/* ==================== DESIGN SYSTEM — INLINE FORM ==================== */

.wl-form-inline {
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
    padding: 1rem;
    margin-top: 1rem;
    background-color: var(--kendo-color-surface-alt);
}

.wl-form-inline label {
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 4px;
    color: inherit;
}

.wl-form-inline h6 {
    font-weight: 700;
    color: inherit;
}

.wl-form-inline .campo-grupo {
    margin-bottom: 1rem;
}

.wl-form-inline hr {
    opacity: 0.3;
}

.wl-form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kendo-color-subtle);
    border-bottom: 1px solid var(--kendo-color-border);
    padding-bottom: 4px;
    margin-bottom: 0.75rem;
    margin-top: 0.25rem;
}

/* ---- Tasa de cambio en la línea del comprobante ----
   El menú que trae las tasas del BCV cuelga del campo Tasa de Cambio, así que su
   contenedor ancla el posicionamiento. Los tokens son los del tema: el menú tiene que
   leerse igual en claro y en oscuro. */

/* 🔴 «Monto Moneda Extranjera (USD)» no cabe en una línea y su etiqueta se partía en dos,
   empujando SU casilla un renglón por debajo de las otras tres. Reservando dos líneas para
   todas las etiquetas de la fila, las cuatro casillas arrancan a la misma altura sin
   depender de cuánto mida cada texto — que además cambia al traducir al inglés y con la
   moneda que se elija. */
.wl-form-inline .wl-montos-fila .campo-grupo > label {
    /* Dos líneas reservadas: la etiqueta corta deja el hueco debajo y su casilla arranca a
       la misma altura que la de la etiqueta que sí se parte.
       🔴 Sin `display: flex` a propósito. Con flex, «(USD)» pasa a ser un item aparte que
       salta de línea por su cuenta y la etiqueta se iba a 65 px —cuatro renglones— en vez
       de dos. Medido en el navegador. Como texto normal, «Monto Moneda Extranjera (USD)»
       fluye y se parte donde toca. */
    /* line-height explícito para que DOS renglones midan exactamente el min-height: así la
       etiqueta de una línea y la de dos ocupan lo mismo y las casillas arrancan iguales. */
    line-height: 1.3;
    min-height: 2.6em;
    margin-bottom: 4px;
}

.wl-tasa-campo {
    position: relative;
}

.wl-tasa-fila {
    display: flex;
    gap: 6px;
    align-items: stretch;
    /* 🔴 Cuando la columna se estrecha, el botón se baja debajo del campo en vez de
       salirse y quedar cortado encima de la casilla de al lado (visto a 1150 px con el
       panel de comprobantes abierto: se leía «$ Tr»). Va debajo del campo, así que la
       casilla no se mueve y la fila de montos sigue alineada. */
    flex-wrap: wrap;
}

/* 🔴 El input necesita un piso: con solo `flex: 1` el botón de al lado le ganaba el ancho
   y la tasa quedaba en 40 px —seis decimales en una casilla donde no cabe ni uno—.
   Medido en el navegador, no deducido del CSS. */
.wl-tasa-fila .k-numerictextbox {
    flex: 1 1 auto;
    min-width: 7.5rem;
}

/* Y el botón no crece: lo que sobre es para el número. */
.wl-tasa-fila .k-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.wl-menu-tasas {
    position: absolute;
    z-index: 30;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 20rem;
    max-height: 22rem;
    overflow-y: auto;
    padding-bottom: 4px;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    box-shadow: var(--wl-shadow-lg);
}

.wl-menu-tasas-grupo {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

.wl-menu-tasas-tabla {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.75;
}

.wl-menu-tasas-sep {
    height: 1px;
    background: var(--kendo-color-border);
    margin: 4px 0;
}

.wl-menu-tasas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px 8px;
}

/* El chip de moneda.
   🔴 El botón NO puede llevar FillMode="Flat": Kendo protege el flat con
   «background: none !important; border-color: transparent !important», y contra un
   !important no gana la especificidad. El color sí se aplicaba y el fondo no, así que el
   chip activo quedaba con texto blanco sobre transparente — en tema claro, la moneda
   seleccionada era invisible. Con el fillMode por defecto (solid) estas reglas mandan. */
.wl-form-inline .k-button.wl-chip-moneda {
    min-width: 3rem;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-sm);
    background: var(--kendo-color-surface);
    color: var(--kendo-color-subtle);
}

.wl-form-inline .k-button.wl-chip-moneda:hover {
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-app-surface);
}

.wl-form-inline .k-button.wl-chip-moneda.on,
.wl-form-inline .k-button.wl-chip-moneda.on:hover {
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

/* Una opción del menú: fecha a la izquierda, tasa a la derecha. La cifra se ve ANTES de
   elegir — en el sistema anterior había que escoger a ciegas y deshacer si no era. */
.wl-form-inline .k-button.wl-opcion-tasa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 5px 12px;
    border: 0;
    border-radius: 0;
    text-align: left;
    font-weight: 400;
    /* El aspecto plano lo da esto, NO FillMode="Flat": ese lleva !important y se llevaría
       por delante también el fondo del hover. */
    background: transparent;
    color: var(--kendo-color-on-app-surface);
}

.wl-form-inline .k-button.wl-opcion-tasa:hover:not([disabled]) {
    background: var(--kendo-color-base-hover);
}

.wl-opcion-tasa-fecha {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.wl-opcion-tasa-tag {
    font-size: 0.68rem;
    color: var(--kendo-color-subtle);
}

.wl-opcion-tasa-valor {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.wl-form-inline .k-button.wl-opcion-tasa[disabled] .wl-opcion-tasa-valor {
    font-weight: 400;
    font-size: 0.78rem;
}

/* Qué campo se acaba de calcular solo, debajo de él. */
.wl-calculado {
    font-size: 0.72rem;
    color: var(--kendo-color-success);
    margin-top: 2px;
}

/* La moneda de la línea, debajo del campo. Mismo sitio y tamaño que el aviso de
   «calculado», para que los dos renglones de ayuda se lean como uno solo. */
.wl-moneda-activa {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kendo-color-primary);
    margin-top: 2px;
    white-space: nowrap;
}

.wl-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.wl-stock-badge.ok {
    background: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success);
}

.wl-stock-badge.bajo {
    background: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning);
}

/* ==================== DESIGN SYSTEM — INVENTORY PANELS ==================== */

.wl-filter-bar {
    border-bottom: 1px solid var(--kendo-color-border);
    background: var(--kendo-color-surface-alt);
}

.wl-header-card {
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
    padding: 12px 16px;
}

.wl-totals-box {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 0.85rem;
}

.wl-totals-box .label {
    color: var(--kendo-color-subtle);
}

.wl-totals-box .value {
    font-weight: 700;
    font-size: 0.95rem;
}

.wl-badge-info {
    background-color: var(--kendo-color-info);
    color: var(--kendo-color-on-info);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wl-doc-card.k-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: var(--kendo-border-radius-md);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    margin-bottom: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    height: auto;
    white-space: normal;
}

.wl-doc-card.k-button:hover {
    background: var(--kendo-color-base-subtle-hover);
    border-color: var(--kendo-color-border);
}

.wl-doc-card.k-button.selected {
    background: var(--kendo-color-primary-subtle);
    border-color: var(--kendo-color-primary);
}

.wl-panel-left {
    overflow-y: auto;
    padding: 8px;
    height: 100%;
}

.wl-panel-right {
    padding: 12px;
    overflow-y: auto;
    height: 100%;
}

.wl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--kendo-color-subtle);
    font-size: 0.9rem;
}

.wl-empty-state .icon {
    font-size: 3rem;
    margin-bottom: 8px;
    opacity: 0.3;
}

.wl-transfer-badge {
    background: var(--kendo-color-success-subtle);
    border: 1px solid var(--kendo-color-success-emphasis);
    border-radius: var(--kendo-border-radius-md);
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--kendo-color-success);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==================== DRAWER LAYOUT ==================== */

.ai-usage-drawer .k-drawer {
    flex: none !important;
    position: sticky !important;
    top: 45.5px;
    height: calc(100vh - 45.5px);
}

.ai-usage-drawer.k-drawer-expanded .k-drawer {
    padding: var(--kendo-spacing-4, 1rem);
}

/* 🔴 Teléfono (sep-2026): DrawerLayout pasa el drawer a modo OVERLAY bajo 768 px, pero el
   sticky de arriba lo dejaba en el flujo: seguía comiéndose 312 px y el contenido quedaba en
   78 (el texto de a una palabra por renglón). En overlay flota sobre la capa oscura de Telerik
   (z-index 10000; el drawer trae 11000) y ocupa todo el alto. Tocar la capa lo cierra. */
.ai-usage-drawer.k-drawer-overlay .k-drawer {
    position: fixed !important;
    inset: 0 auto 0 0;
    top: 0;
    height: 100dvh;
    max-width: 85vw;
}

/* El scroll solo abierto: cerrado mide 0 px, y con overflow-y la barra de desplazamiento
   quedaba pintada como una franja azul en el borde izquierdo de la pantalla. */
.ai-usage-drawer.k-drawer-overlay.k-drawer-expanded .k-drawer { overflow-y: auto; }
.ai-usage-drawer.k-drawer-overlay:not(.k-drawer-expanded) .k-drawer { overflow: hidden; box-shadow: none; border: 0; }

.k-drawer-item.k-level-0 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--kendo-font-size-xs);
    letter-spacing: 0.05em;
    color: var(--kendo-color-subtle);
    padding: 10px 12px;
    margin-top: 8px;
}

.k-drawer-item.k-level-1 {
    padding-left: 16px;
    font-size: var(--kendo-font-size-sm);
    border-radius: var(--kendo-border-radius-md);
    transition: background 0.15s ease, border-color 0.15s ease;
    border-left: 3px solid transparent;
}

.k-drawer-item.k-level-2 {
    padding-left: 40px;
    font-size: var(--kendo-font-size-xs);
    border-radius: var(--kendo-border-radius-md);
    transition: background 0.15s ease;
    color: var(--kendo-color-subtle);
}

/* Asegurar que el texto del drawer use el ancho disponible y no se trunque
   prematuramente. Telerik por defecto aplica ellipsis muy temprano. */
.ai-usage-drawer .k-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.k-drawer-item.k-level-1:hover,
.k-drawer-item.k-level-2:hover {
    background: var(--kendo-color-base-subtle);
}

.k-drawer-item.k-selected.k-level-1 {
    background: var(--kendo-color-primary-subtle);
    border-left-color: var(--kendo-color-primary);
    color: var(--kendo-color-primary-on-subtle);
}

.k-drawer-item.k-selected.k-level-2 {
    background: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary-on-subtle);
    position: relative;
}

/* Punto indicador en level-2 seleccionado (dark theme) */
.k-drawer-item.k-selected.k-level-2::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kendo-color-primary);
}

/* Padre resaltado cuando un hijo está activo (dark theme) */
.k-drawer-item.k-parent-active.k-level-1 {
    background: var(--kendo-color-base-subtle);
    border-left-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-app-surface);
}

.k-drawer-item.k-parent-active.k-level-1 .k-svg-icon {
    color: var(--kendo-color-primary);
    opacity: 1;
}

.k-drawer-item .k-svg-icon {
    margin-right: 8px;
    opacity: 0.7;
}

.k-drawer-item.k-selected .k-svg-icon {
    opacity: 1;
    color: var(--kendo-color-primary);
}

.empresa-appbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
    background: var(--wl-bg-glass);
}

.empresa-appbar .k-svg-icon {
    opacity: 0.7;
}

.empresa-nombre {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--kendo-color-on-app-surface);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empresa-rif {
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
    padding-left: 8px;
    border-left: 1px solid var(--kendo-color-border);
}

.empresa-codigo {
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
    padding-right: 8px;
    border-right: 1px solid var(--kendo-color-border);
}

.appbar-flex-equal {
    flex: 1 0 0% !important;
}

@media (max-width: 768px) {
    .empresa-rif {
        display: none;
    }
    .empresa-nombre {
        max-width: 150px;
        font-size: 0.8rem;
    }
}

/* ==================== GRID EXTENSIONS ==================== */

.wl-grid-compact .k-table-td,
.wl-grid-compact .k-table-th {
    padding: 2px 6px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

.wl-grid-wrap-header th.k-header .k-column-title {
    white-space: normal;
    vertical-align: middle;
}

.wl-row-anulada {
    background-color: var(--kendo-color-error-subtle) !important;
    color: var(--kendo-color-error);
    opacity: 0.75;
}

.wl-row-empty td {
    background-color: rgba(255, 200, 200, 0.12) !important;
}

.wl-row-partial td {
    background-color: rgba(255, 235, 180, 0.15) !important;
}

.wl-row-dirty td {
    background-color: rgba(180, 220, 255, 0.2) !important;
}

/* Filas con estado semantico (OnRowRender de los reportes: caducidad, antiguedad,
   saldos negativos). Van por token, asi sirven en dark y light sin duplicar.
   El !important es necesario: las filas alternas del grid traen su propio fondo.
   Ojo: el fondo se pinta en los <td>, no en el <tr> — Telerik le da fondo a la celda. */
.wl-row-error td {
    background-color: var(--kendo-color-error-subtle) !important;
}

.wl-row-warning td {
    background-color: var(--kendo-color-warning-subtle) !important;
}

.wl-row-success td {
    background-color: var(--kendo-color-success-subtle) !important;
}

/* Barra de proporcion dentro de una celda numerica: compara magnitudes de un vistazo
   sin leer digitos (quien concentra el stock, que articulo pesa en el consumo).
   El ancho de .wl-bar es dato, no diseño — va inline y lo calcula la pagina como
   porcentaje del mayor valor de esa columna.
   Uso:
     <span class="wl-bar-cell">
         <span class="wl-bar" style="width:47%"></span>
         <span class="wl-bar-val">410,00</span>
     </span> */
.wl-bar-cell {
    position: relative;
    display: block;
}

.wl-bar-cell > .wl-bar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 0;
    background: var(--kendo-color-primary-subtle);
    border-radius: 3px;
}

/* El numero va por encima de la barra, nunca detras */
.wl-bar-cell > .wl-bar-val {
    position: relative;
}

/* ==================== DOCUMENT MANAGER ==================== */

.dm-storage-bar {
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    padding: 10px 14px;
}

.dm-storage-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--kendo-color-subtle);
    margin-bottom: 6px;
}

.dm-progress-track {
    height: 8px;
    background: var(--kendo-color-base-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.dm-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.dm-bar-ok {
    background: var(--kendo-color-success);
}

.dm-bar-caution {
    background: var(--kendo-color-warning);
}

.dm-bar-warning {
    background: var(--kendo-color-warning-emphasis);
}

.dm-bar-full {
    background: var(--kendo-color-error);
}

.dm-storage-warning {
    font-size: 11px;
    color: var(--kendo-color-error);
    margin-top: 4px;
    font-weight: 600;
}

.dm-storage-caution {
    font-size: 11px;
    color: var(--kendo-color-warning);
    margin-top: 4px;
}

.dm-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
}

.dm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.dm-tag-auto {
    background: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info);
    border: 1px solid var(--kendo-color-info-emphasis);
}

.dm-tag-manual {
    background: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success);
    border: 1px solid var(--kendo-color-success-emphasis);
}

.dm-tag-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.7;
}

.dm-tag-remove:hover {
    opacity: 1;
    color: var(--kendo-color-error);
}

.dm-tags-legend {
    font-size: 11px;
    color: var(--kendo-color-subtle);
    border-top: 1px solid var(--kendo-color-border);
    padding-top: 8px;
}

/* ==================== AUTOGESTION ==================== */

.wl-card-info {
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-info-subtle);
    border: 1px solid var(--kendo-color-border);
}

/* ==================== MISC ==================== */

.bg-primary-custom {
    background-color: var(--kendo-color-primary-emphasis);
}

.text-white {
    color: var(--kendo-color-on-app-surface) !important;
}

.field-validation-error {
    color: var(--kendo-color-error);
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
}

/* ==================== LIGHT THEME OVERRIDES — LegalManager Style ==================== */

/* ---------- Cards ---------- */
html[data-theme="light"] .k-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: var(--wl-shadow-sm);
}

html[data-theme="light"] .k-card:hover {
    box-shadow: var(--wl-shadow-md);
    border-color: #CBD5E0;
}

html[data-theme="light"] .k-card-header {
    background-color: var(--kendo-color-primary);
    color: #FFFFFF;
    border-bottom: none;
}

/* ---------- Grid headers: navy con gold accent ---------- */
html[data-theme="light"] .custom-grid .k-grid-header th {
    background-color: #1E3A5F;
    color: #FFFFFF;
    border-bottom: 2px solid var(--wl-accent-gold);
    font-weight: 600;
}

html[data-theme="light"] .custom-grid .k-grid-header th .k-column-title {
    color: #FFFFFF;
}

html[data-theme="light"] .custom-grid .k-filter-row th {
    background-color: #F7FAFC;
    border-bottom: 1px solid #E2E8F0;
}

/* Grid rows */
html[data-theme="light"] .custom-grid .k-table-row:hover {
    background-color: #EDF2F7;
}

html[data-theme="light"] .custom-grid .k-table-alt-row {
    background-color: #F7FAFC;
}

html[data-theme="light"] .custom-grid .k-pager {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}

html[data-theme="light"] .custom-grid .k-toolbar {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
}

/* ---------- Tiles — LegalManager refinado ---------- */
html[data-theme="light"] button.wl-tile.k-button,
html[data-theme="light"] .wl-tile.k-button {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: var(--wl-shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Línea dorada superior sutil (identidad LegalManager) */
html[data-theme="light"] button.wl-tile.k-button::before,
html[data-theme="light"] .wl-tile.k-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1E3A5F, #D4A853);
    opacity: 0;
    transition: opacity 0.25s ease;
}

html[data-theme="light"] button.wl-tile.k-button:hover,
html[data-theme="light"] .wl-tile.k-button:hover {
    border-color: #1E3A5F;
    box-shadow: var(--wl-shadow-md);
    background: #FAFCFF;
}

html[data-theme="light"] button.wl-tile.k-button:hover::before,
html[data-theme="light"] .wl-tile.k-button:hover::before {
    opacity: 1;
}

html[data-theme="light"] .wl-tile-icon {
    color: #1E3A5F;
    transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme="light"] button.wl-tile.k-button:hover .wl-tile-icon,
html[data-theme="light"] .wl-tile.k-button:hover .wl-tile-icon {
    color: #D4A853;
    transform: scale(1.1);
}

html[data-theme="light"] .wl-tiles-section {
    border-bottom-color: #E2E8F0;
    color: #1E3A5F;
}

html[data-theme="light"] .wl-tiles-section .k-svg-icon {
    color: #D4A853;
}

/* ---------- Forms ---------- */
html[data-theme="light"] .wl-form-inline {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
}

/* Telerik inputs en light mode */
html[data-theme="light"] .k-input,
html[data-theme="light"] .k-picker {
    border-color: #E2E8F0;
    background: #FFFFFF;
}

html[data-theme="light"] .k-input:focus,
html[data-theme="light"] .k-input.k-focus,
html[data-theme="light"] .k-picker:focus,
html[data-theme="light"] .k-picker.k-focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15);
}

/* ---------- Empresa AppBar badge ---------- */
html[data-theme="light"] .empresa-appbar {
    background: rgba(30, 58, 95, 0.04);
    border-color: #E2E8F0;
}

html[data-theme="light"] .empresa-nombre {
    color: #1A202C;
}

html[data-theme="light"] .empresa-rif {
    color: #718096;
    border-left-color: #E2E8F0;
}

html[data-theme="light"] .empresa-codigo {
    color: #718096;
    border-right-color: #E2E8F0;
}

/* ---------- Info boxes & banners ---------- */
html[data-theme="light"] .wl-info-box {
    background: #EBF0F7;
    border-left-color: #1E3A5F;
}

html[data-theme="light"] .wl-info-box-label {
    color: #1E3A5F;
}

html[data-theme="light"] .wl-info-box-value {
    color: #1A202C;
}

/* ---------- Popups & dropdowns ---------- */
html[data-theme="light"] .k-popup {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: var(--wl-shadow-lg);
}

html[data-theme="light"] .k-list-item:hover,
html[data-theme="light"] .k-list-item.k-hover {
    background: #EDF2F7;
}

html[data-theme="light"] .k-list-item.k-selected {
    background: #1E3A5F;
    color: #FFFFFF;
}

/* ---------- Nav headers ---------- */
html[data-theme="light"] .nav-header {
    background-color: #EDF2F7;
    color: #1A202C;
}

/* ---------- Window/Dialog ---------- */
html[data-theme="light"] .k-window {
    border: 1px solid #E2E8F0;
    box-shadow: var(--wl-shadow-lg);
}

html[data-theme="light"] .k-window .k-window-titlebar {
    background: #1E3A5F;
    color: #FFFFFF;
}

/* ---------- Buttons refinados ---------- */
html[data-theme="light"] .custom-button {
    background-color: #1E3A5F;
    color: #FFFFFF;
}

html[data-theme="light"] .custom-button:hover {
    background-color: #16304F;
}

/* ---------- Scrollbar para sidebar navy ---------- */
html[data-theme="light"] .k-drawer::-webkit-scrollbar {
    width: 4px;
}

html[data-theme="light"] .k-drawer::-webkit-scrollbar-track {
    background: transparent;
}

html[data-theme="light"] .k-drawer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

html[data-theme="light"] .k-drawer::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Theme toggle icon */
.wl-theme-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--kendo-border-radius-full);
    border: 1px solid var(--kendo-color-border);
    background: var(--wl-bg-glass);
    transition: background 0.2s ease, transform 0.15s ease;
    color: inherit;
}

.wl-theme-toggle:hover {
    background: var(--kendo-color-base-subtle);
    transform: scale(1.05);
}

.wl-theme-toggle:active {
    transform: scale(0.95);
}

/* ==================== S31N29 REPORTES — LOOK ESPECTACULAR ==================== */

/* --- Container principal del reporte --- */
.rpt-container {
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
    box-shadow: var(--wl-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

/* --- Cabecera del reporte con línea dorada superior --- */
.rpt-header {
    position: relative;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--kendo-color-border);
    background: var(--kendo-color-surface-alt);
}

.rpt-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kendo-color-primary), #D4A853);
}

.rpt-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kendo-color-on-app-surface);
    margin: 0 0 4px;
    letter-spacing: 0.02em;
}

/* ============================================================
   LOOK V2 GLOBAL — color con disciplina (aprobado jul-2026)
   Nació como piloto en Plan de Cuentas e Inventario/Mantenimiento
   y se promovió a default de toda la app. Estas reglas van al FINAL
   del archivo a propósito: ganan por orden los empates de
   especificidad contra las reglas viejas de .custom-grid/.wl-tile
   de arriba y contra los temas (este archivo carga último).
   1) Botones de acción por fila fantasma (color de rol solo en hover)
   2) Header de grid resaltado por tema (banda tintada + hilo dorado)
   3) Tiles con chip de icono a color (ciclo de 6 por posición)
   4) Sin rejilla vertical en grids + filas con aire
   5) Caja RESUMEN estilo KPI
   6) Toolbar con jerarquía (solo la acción principal lleva color)
   7) AppBar navy elevado con hilo dorado (solo tema oscuro)
   ============================================================ */

/* ---------- Punto 2: header de grid sutil ---------- */
.custom-grid .k-grid-header th,
html[data-theme="light"] .custom-grid .k-grid-header th {
    background-color: var(--kendo-color-surface-alt);
    color: var(--kendo-color-subtle);
    border-bottom: 1px solid var(--kendo-color-border-alt);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* En tema claro surface-alt es blanco → banda con tinte navy y títulos
   en el navy corporativo para que el header resalte de las filas */
html[data-theme="light"] .custom-grid .k-grid-header th {
    background-color: #E3EAF4;
    color: #1E3A5F;
    border-bottom: 2px solid var(--wl-accent-gold, #D4A853);
}

html[data-theme="light"] .custom-grid .k-grid-header th .k-column-title,
html[data-theme="light"] .custom-grid .k-grid-header th .k-svg-icon {
    color: #1E3A5F;
}

html[data-theme="light"] .custom-grid .k-filter-row th {
    background-color: #F8FAFC;
}

/* En tema oscuro surface-alt ≈ el fondo de las filas → banda un punto
   más clara, texto más luminoso y subrayado dorado (acento de marca) */
:root:not([data-theme="light"]) .custom-grid .k-grid-header th {
    background-color: #3D4470;
    color: #E2E5F2;
    border-bottom: 2px solid color-mix(in srgb, var(--wl-accent-gold, #CCB066) 55%, transparent);
}

:root:not([data-theme="light"]) .custom-grid .k-grid-header th .k-column-title,
:root:not([data-theme="light"]) .custom-grid .k-grid-header th .k-svg-icon {
    color: #E2E5F2;
}

.custom-grid .k-grid-header th .k-column-title,
html[data-theme="light"] .custom-grid .k-grid-header th .k-column-title {
    color: var(--kendo-color-subtle);
}

/* Iconos de sort/filter del header acompañan el gris */
.custom-grid .k-grid-header th .k-svg-icon {
    color: var(--kendo-color-subtle);
}

/* ---------- Punto 1: botones de acción fantasma ---------- */
/* Neutralizar los sólidos Info/Success/Error dentro de las celdas
   del grid; el color de rol vuelve solo en hover/focus.
   Telerik 14 renderiza .k-button-info (sin "solid"). */
.custom-grid td .k-button-info,
.custom-grid td .k-button-success,
.custom-grid td .k-button-error {
    background: transparent;
    background-image: none;
    border-color: transparent;
    box-shadow: none;
    color: var(--kendo-color-subtle);
}

.custom-grid td .k-button-info:hover,
.custom-grid td .k-button-info.k-hover,
.custom-grid td .k-button-info:focus-visible {
    background: color-mix(in srgb, var(--kendo-color-info) 12%, transparent);
    color: var(--kendo-color-info);
}

.custom-grid td .k-button-success:hover,
.custom-grid td .k-button-success.k-hover,
.custom-grid td .k-button-success:focus-visible {
    background: color-mix(in srgb, var(--kendo-color-success) 12%, transparent);
    color: var(--kendo-color-success);
}

.custom-grid td .k-button-error:hover,
.custom-grid td .k-button-error.k-hover,
.custom-grid td .k-button-error:focus-visible {
    background: color-mix(in srgb, var(--kendo-color-error) 12%, transparent);
    color: var(--kendo-color-error);
}

/* ---------- Punto 3: tiles con chip de icono a color ---------- */
/* Alineación a la izquierda + icono dentro de un chip redondeado con
   fondo tintado. El color cicla por posición (nth-child sobre los
   hijos del grid, sea TileGate o el botón directo) — sin tocar markup. */
button.wl-tile.k-button,
.wl-tile.k-button {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 18px;
    /* Mismo degradado radial de las k-card (brillo central) — aprobado jul-2026 */
    background: var(--card-gradient, var(--kendo-color-surface));
}

.wl-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--wl-tile-accent, #3B82F6);
    background: color-mix(in srgb, var(--wl-tile-accent, #3B82F6) 13%, transparent);
}

/* Los temas pintan el icono con su propio color (reglas con html/:root
   delante) — re-afirmar el color del chip a la misma altura */
:root .wl-tile-icon,
html[data-theme="light"] .wl-tile-icon {
    color: var(--wl-tile-accent, #3B82F6);
}

/* Ciclo de 6 colores por posición del tile en el grid (custom property
   para que el hover pueda re-usar el mismo color sin repetir el ciclo) */
.wl-tiles-grid > *:nth-child(6n+2) { --wl-tile-accent: #8B5CF6; }
.wl-tiles-grid > *:nth-child(6n+3) { --wl-tile-accent: #14B8A6; }
.wl-tiles-grid > *:nth-child(6n+4) { --wl-tile-accent: #D97706; }
.wl-tiles-grid > *:nth-child(6n+5) { --wl-tile-accent: #22C55E; }
.wl-tiles-grid > *:nth-child(6n+6) { --wl-tile-accent: #EC4899; }

/* Los temas recolorean el icono en hover (reglas :root / [data-theme=light]
   más específicas) — re-afirmar el color del chip con la misma altura */
:root button.wl-tile.k-button:hover .wl-tile-icon,
:root .wl-tile.k-button:hover .wl-tile-icon,
html[data-theme="light"] button.wl-tile.k-button:hover .wl-tile-icon,
html[data-theme="light"] .wl-tile.k-button:hover .wl-tile-icon {
    color: var(--wl-tile-accent, #3B82F6);
}

/* ---------- Punto 4: matar la rejilla de hoja de cálculo ---------- */
/* Sin líneas verticales entre columnas: solo separadores horizontales
   suaves. Es lo que más diferencia una tabla moderna de una FoxPro.
   .k-grid.custom-grid (mismo elemento, doble clase) para ganarle a las
   reglas de tamaño de Kendo (.k-table.k-table-sm .k-table-td, etc.) */
.k-grid.custom-grid .k-table-th,
.k-grid.custom-grid .k-table-td,
.k-grid.custom-grid .k-filter-row th {
    border-left-width: 0;
    border-right-width: 0;
    border-inline-start-width: 0;
    border-inline-end-width: 0;
}

/* Filas con más aire y tipografía un punto más grande */
.custom-grid {
    font-size: 13px;
}

.k-grid.custom-grid .k-table-td {
    padding: 9px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--kendo-color-border) 60%, transparent);
}

/* ---------- Punto 5: caja RESUMEN como KPI (adiós banner dorado) ---------- */
.wl-info-box,
html[data-theme="light"] .wl-info-box {
    /* Mismo degradado radial de las k-card (brillo central) — aprobado jul-2026 */
    background: var(--card-gradient, var(--kendo-color-surface));
    border: 1px solid var(--kendo-color-border);
    border-left: 3px solid var(--kendo-color-primary);
    width: fit-content;
    min-width: 240px;
    padding: 12px 20px;
}

.wl-info-box-label,
html[data-theme="light"] .wl-info-box-label {
    color: var(--kendo-color-subtle);
    font-size: 0.72rem;
    font-weight: 600;
}

.wl-info-box-value,
html[data-theme="light"] .wl-info-box-value {
    color: var(--kendo-color-on-app-surface);
    font-size: 1.4rem;
}

/* ---------- Punto 6: toolbar con jerarquía ---------- */
/* Las acciones con rol declarado (ThemeColor sólido: Primary/Info/
   Success/Error/Warning — ej. Aprobar Seleccionadas, Devolver con
   motivo, Generar desde RQ) conservan su color; SOLO los botones
   base (export, filtros, utilitarios) se vuelven fantasma. Antes la
   regla dejaba con color únicamente el plus-circle y las acciones
   principales de Aprobaciones quedaban invisibles en tema oscuro. */
/* El :not(:has(plus-circle)) es obligatorio: sin él esta regla (8 clases de
   especificidad) le gana el background a la del botón Agregar (4 clases) y el
   CTA queda texto blanco sobre fondo transparente — invisible en tema claro. */
.custom-grid .k-toolbar .k-button:not(.k-button-primary):not(.k-button-info):not(.k-button-success):not(.k-button-error):not(.k-button-warning):not(:has(.k-svg-i-plus-circle)) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.custom-grid .k-toolbar .k-button:not(.k-button-primary):not(.k-button-info):not(.k-button-success):not(.k-button-error):not(.k-button-warning):not(:has(.k-svg-i-plus-circle)):hover {
    background: var(--kendo-color-base-subtle);
}

.custom-grid .k-toolbar .k-button:has(.k-svg-i-plus-circle) {
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

.custom-grid .k-toolbar .k-button:has(.k-svg-i-plus-circle):hover {
    background: var(--kendo-color-primary-hover);
}

/* La lupa del search box del toolbar es un k-button interno — que siga
   discreta pero sin fondo primario */
.custom-grid .k-toolbar .k-searchbox .k-button {
    background: transparent;
    border-color: transparent;
}

/* ---------- Punto 7: barra superior con presencia (solo tema oscuro) ---------- */
/* El AppBar Inverse trae un gris neutro que no pertenece a la familia
   navy del fondo (#151828). Navy elevado + hilo dorado, misma firma
   que el header del grid. NOTA: el AppBar es del layout global — este
   cambio aplica a TODA la app en oscuro, no solo a las pantallas piloto. */
:root:not([data-theme="light"]) .k-appbar.k-appbar-inverse {
    background-color: #232A45;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--wl-accent-gold, #CCB066) 40%, transparent),
                0 4px 16px rgba(0, 0, 0, 0.35);
}

.rpt-header-subtitle {
    font-size: 0.82rem;
    color: var(--kendo-color-subtle);
    margin: 0;
}

.rpt-header-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;
    background: var(--kendo-color-primary-subtle);
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kendo-color-primary);
}

/* --- Tabla del reporte --- */
.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.rpt-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.rpt-table thead th {
    background: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--kendo-color-primary-emphasis);
    white-space: nowrap;
}

.rpt-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--kendo-color-border);
    color: var(--kendo-color-on-app-surface);
}

.rpt-table tbody tr:hover {
    background: var(--kendo-color-base-subtle-hover);
}

/* --- Filas especiales --- */
.rpt-row-title {
    background: var(--kendo-color-base-subtle) !important;
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--kendo-color-on-app-surface);
    letter-spacing: 0.01em;
}

.rpt-row-title td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--kendo-color-border);
}

.rpt-row-total {
    font-weight: 700;
    border-top: 2px double var(--kendo-color-on-app-surface) !important;
}

.rpt-row-total td {
    padding: 8px 12px;
    border-bottom: 2px solid var(--kendo-color-border);
}

.rpt-row-separator td {
    height: 8px;
    padding: 0;
    border: none;
    background: transparent;
}

/* --- Indentación jerárquica --- */
.rpt-indent-1 { padding-left: 24px !important; }
.rpt-indent-2 { padding-left: 40px !important; }
.rpt-indent-3 { padding-left: 56px !important; }
.rpt-indent-4 { padding-left: 72px !important; }
.rpt-indent-5 { padding-left: 88px !important; }
.rpt-indent-6 { padding-left: 104px !important; }

/* --- Columnas de montos --- */
.rpt-col-monto {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Negativos entre paréntesis --- */
.rpt-negative {
    color: var(--kendo-color-error);
}

/* --- Alternancia de filas --- */
.rpt-table tbody tr:nth-child(even):not(.rpt-row-title):not(.rpt-row-total):not(.rpt-row-separator) {
    background: var(--kendo-color-surface-alt);
}

/* --- Filtros del reporte --- */
.rpt-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
}

.rpt-filters label {
    font-size: 0.78rem;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: var(--kendo-color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Scroll body del reporte cuando es largo --- */
.rpt-scroll-body {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
}

/* Scrollbar personalizado para el reporte */
.rpt-scroll-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.rpt-scroll-body::-webkit-scrollbar-track {
    background: transparent;
}

.rpt-scroll-body::-webkit-scrollbar-thumb {
    background: var(--kendo-color-border);
    border-radius: 3px;
}

.rpt-scroll-body::-webkit-scrollbar-thumb:hover {
    background: var(--kendo-color-subtle);
}

/* --- Light theme overrides para reportes --- */
html[data-theme="light"] .rpt-container {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

html[data-theme="light"] .rpt-header {
    background: #F7FAFC;
    border-bottom-color: #E2E8F0;
}

html[data-theme="light"] .rpt-header::before {
    background: linear-gradient(90deg, #1E3A5F, #D4A853);
}

html[data-theme="light"] .rpt-header-title {
    color: #1A202C;
}

html[data-theme="light"] .rpt-header-period {
    background: #EBF0F7;
    color: #1E3A5F;
}

html[data-theme="light"] .rpt-table thead th {
    background: #1E3A5F;
    color: #FFFFFF;
    border-bottom-color: #D4A853;
}

html[data-theme="light"] .rpt-table tbody td {
    border-bottom-color: #E2E8F0;
    color: #1A202C;
}

html[data-theme="light"] .rpt-table tbody tr:hover {
    background: #EDF2F7;
}

html[data-theme="light"] .rpt-row-title {
    background: #F7FAFC !important;
    color: #1E3A5F;
}

html[data-theme="light"] .rpt-row-total td {
    border-bottom-color: #CBD5E0;
}

html[data-theme="light"] .rpt-table tbody tr:nth-child(even):not(.rpt-row-title):not(.rpt-row-total):not(.rpt-row-separator) {
    background: #FAFCFF;
}

html[data-theme="light"] .rpt-filters {
    background: #F7FAFC;
    border-color: #E2E8F0;
}

html[data-theme="light"] .rpt-negative {
    color: #C53030;
}

/* --- Print styles para reportes --- */
@media print {
    .rpt-filters,
    [class*="menu-"],
    .k-drawer,
    .k-appbar,
    .wl-tiles-section,
    .wl-tiles-grid {
        display: none !important;
    }

    .rpt-container {
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    .rpt-table {
        font-size: 9pt;
        width: 100%;
    }

    .rpt-table thead th {
        background: #333 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rpt-row-title {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rpt-scroll-body {
        max-height: none;
        overflow: visible;
    }

    /* Lo que no es el estado (filtros, tarjetas, grid de trabajo) no se imprime. */
    .wl-no-print {
        display: none !important;
    }

    .wl-fe-formal {
        box-shadow: none;
        border: none;
    }

    @page {
        margin: 15mm;
    }
}

/* === Formato formal del Flujo de Efectivo (auditoría): cifras alineadas, subtítulos
   NIC 7 en cursiva, notas numeradas y dos espacios de firma. === */
.wl-fe-formal td.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wl-fe-formal .wl-fe-sub td {
    font-style: italic;
    padding-left: 24px;
    color: var(--kendo-color-subtle);
}

.wl-fe-formal .wl-fe-notas ol {
    padding-left: 1.4rem;
    font-size: 0.82rem;
}

.wl-fe-firmas {
    display: flex;
    gap: 48px;
    margin-top: 48px;
    font-size: 0.82rem;
}

.wl-fe-firmas > div {
    flex: 1;
    text-align: center;
}

.wl-fe-firma-linea {
    border-top: 1px solid var(--kendo-color-on-app-surface);
    margin-bottom: 4px;
}

/* === Callout informativo (look v2) — banner sutil legible en AMBOS temas.
   Usa los tokens adaptativos del tema (primary-subtle: #1B2C4F oscuro /
   #EBF0F7 claro); el texto hereda el color del body de cada tema.
   Reemplaza los inline styles fijos background:#eff6ff que eran ilegibles
   en tema oscuro (texto claro sobre fondo claro). === */
.wl-callout-info {
    background: var(--kendo-color-primary-subtle);
    border-radius: 6px;
    border-left: 3px solid var(--kendo-color-primary);
}

/* === Cards Bootstrap siguen el tema (look v2) — los paneles .card de los
   dashboards (S31N29 AjusteNGP/CopiarCapas/EstadoPeriodos, Inventario Home)
   quedaban SIEMPRE blancos en tema oscuro: Bootstrap no conoce el toggle.
   ACOTADO al contenedor .wl-max-w-1100 de esos dashboards: el login (y
   cualquier página fuera del shell) no participa del toggle — sin data-theme
   los tokens :root son los oscuros y una regla global .card lo pintaba de
   noche sobre fondo claro. Tablas y text-muted internos incluidos. === */
/* El cuerpo va en surface, NO en surface-alt: son las cards de Bootstrap de los
   dashboards, y tienen que pesar lo mismo que las de Kendo de la misma pantalla.
   Mientras en el tema claro los dos tokens fueron blanco daba igual; al devolverle
   a surface-alt su tono propio (#F4F7FB) estas quedaron a 8 puntos del fondo y las
   de Kendo a 19. La cabecera sigue en app-surface, que es lo que las delimita. */
.wl-max-w-1100 .card {
    background-color: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    border-color: var(--kendo-color-border);
}

.wl-max-w-1100 .card .card-header {
    background-color: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-app-surface);
    border-bottom-color: var(--kendo-color-border);
}

.wl-max-w-1100 .card .text-muted {
    color: var(--kendo-color-subtle) !important;
}

.wl-max-w-1100 .card .table {
    color: var(--kendo-color-on-app-surface);
    --bs-table-bg: transparent;
    --bs-table-color: var(--kendo-color-on-app-surface);
    --bs-table-striped-color: var(--kendo-color-on-app-surface);
    --bs-table-hover-color: var(--kendo-color-on-app-surface);
    --bs-table-hover-bg: var(--kendo-color-base-subtle);
}

/* ==================== UTILIDADES SEMANTICAS (barrido hex jul-2026) ====================
   Reemplazan los hex inline de los .razor. Mantener al FINAL del archivo:
   los selectores html .k-card.wl-kpi-* empatan en especificidad con los
   overrides de tema de .k-card y ganan por orden de aparicion. */

/* KPI cards con acento lateral (patron Compras/Reportes) */
html .k-card.wl-kpi-info,
html[data-theme] .k-card.wl-kpi-info {
    background: var(--kendo-color-info-subtle);
    border-left: 4px solid var(--kendo-color-info);
}

/* Aviso (7-oct-2026): el fondo amarillo del tema (warning-subtle) daba, en oscuro, texto gris sobre
   oliva (#474300) con contraste 3,3:1, y en claro una tarjeta crema que el usuario vio «horrible». Ahora
   es el fondo de tarjeta con un tinte suave de amarillo; el aviso lo lleva el borde. */
html .k-card.wl-kpi-warning,
html[data-theme] .k-card.wl-kpi-warning {
    background: var(--kendo-color-surface);
    background: color-mix(in srgb, var(--kendo-color-warning) 7%, var(--kendo-color-surface));
    border-left: 4px solid var(--kendo-color-warning);
}

/* Número de aviso legible en los dos temas: el amarillo del tema sobre blanco da ~1,9:1. También el
   k-text-warning que ya traen por dentro las tarjetas de aviso (p. ej. «Pendiente» en Control de
   Recepciones), sin tocar cada pantalla. */
.wl-texto-aviso { color: var(--kendo-color-warning); }
html[data-theme="light"] .wl-texto-aviso,
html[data-theme="light"] .k-card.wl-kpi-warning .k-text-warning { color: var(--kendo-color-warning-on-subtle); }

html .k-card.wl-kpi-success,
html[data-theme] .k-card.wl-kpi-success {
    background: var(--kendo-color-success-subtle);
    border-left: 4px solid var(--kendo-color-success);
}

html .k-card.wl-kpi-error,
html[data-theme] .k-card.wl-kpi-error {
    background: var(--kendo-color-error-subtle);
    border-left: 4px solid var(--kendo-color-error);
}

html .k-card.wl-kpi-error-strong,
html[data-theme] .k-card.wl-kpi-error-strong {
    background: var(--kendo-color-error-subtle);
    border-left: 4px solid var(--kendo-color-error-emphasis);
}

html .k-card.wl-kpi-neutral,
html[data-theme] .k-card.wl-kpi-neutral {
    background: var(--kendo-color-surface);
    border-left: 4px solid var(--kendo-color-subtle);
}

/* Badges pastel (fondo subtle + texto fuerte) — para <span class="badge"> inline en celdas */
.wl-badge-success-subtle {
    background: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success-on-subtle);
}

.wl-badge-error-subtle {
    background: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error-on-subtle);
}

.wl-badge-warning-subtle {
    background: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning-on-subtle);
}

.wl-badge-neutral {
    background: var(--kendo-color-base-subtle);
    color: var(--kendo-color-on-subtle);
}

.wl-badge-info-subtle {
    background: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info-on-subtle);
}

/* Fichas de codigo del editor de formulas de nomina: el codigo en monoespaciada
   pegado a su nombre, dentro de un badge pastel que dice de que tipo es. */
.wl-ficha-codigo {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 400;
    max-width: 100%;
    /* Tamano propio y no el .badge de Bootstrap: aquel es .75em RELATIVO al padre, y
       dentro del tab la ficha caia a 9,75px (medido), ilegible para leer un nombre. */
    font-size: .78rem;
}

/* Un campo del concepto en la prueba con un trabajador (Formula / Detalle). Van en
   cajas separadas porque son dos magnitudes distintas: bolivares y cantidad. */
.wl-bloque-prueba {
    border: 1px solid var(--kendo-color-border);
    border-radius: 6px;
    overflow: hidden;
}

.wl-bloque-prueba-h {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    background: var(--kendo-color-base-subtle);
    color: var(--kendo-color-on-subtle);
    font-size: .82rem;
}

.wl-bloque-prueba-res {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success-on-subtle);
    font-size: .85rem;
}

.wl-bloque-prueba-res strong {
    font-size: 1rem;
}

/* Cifras que se comparan en columna: los digitos alineados evitan leer mal un monto. */
.wl-numero {
    font-variant-numeric: tabular-nums;
}

/* La formula con los valores ya sustituidos, tal como la deja el motor para su
   auditoria. Es larga por naturaleza, asi que rueda sola en vez de romper la pagina. */
.wl-formula-resuelta {
    font-family: var(--kendo-font-family-monospace, monospace);
    font-size: .78rem;
    background: var(--kendo-color-base-subtle);
    color: var(--kendo-color-on-subtle);
    border-radius: 4px;
    padding: 6px 10px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Sugerencias del editor de formulas (formula-autocompletar.js). La caja la crea el JS,
   asi que su aspecto vive aqui y no en un style inline: asi sigue los tokens del tema. */
.wl-autocompletar {
    position: fixed;
    z-index: 11000;
    max-height: 260px;
    overflow-y: auto;
    background: var(--kendo-color-surface-alt);
    color: var(--kendo-color-on-app-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.wl-autocompletar > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 10px;
    font-size: .8rem;
    cursor: pointer;
}

.wl-autocompletar > div.sel,
.wl-autocompletar > div:hover {
    background: var(--kendo-color-primary-subtle);
}

.wl-autocompletar code {
    font-family: var(--kendo-font-family-monospace, monospace);
    font-weight: 700;
    color: inherit;
    background: none;
    padding: 0;
    min-width: 3.2em;
}

.wl-autocompletar span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-autocompletar em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: .72rem;
    color: var(--kendo-color-subtle);
}

/* Ultima linea cuando la lista se corta en MAX: informa, no se elige. */
.wl-autocompletar > div.mas {
    cursor: default;
    font-size: .72rem;
    color: var(--kendo-color-subtle);
    border-top: 1px solid var(--kendo-color-border);
}

.wl-autocompletar > div.mas:hover {
    background: none;
}

/* Catalogo de codigos del editor de formulas (CatalogoCodigosFormula): pestanas
   por tipo y una lista con scroll en vez de un grid paginado. Las pestanas solo
   eligen, no tienen contenido: el panel de contenido del TabStrip se oculta. */
/* !important: Telerik le pone display inline al panel activo. */
.wl-catalogo-tabs .k-tabstrip-content {
    display: none !important;
}

/* Compactas: la columna es angosta y las cuatro se reparten en dos filas. */
.wl-catalogo-tabs .k-tabstrip-item {
    font-size: .78rem;
    padding-block: 2px;
}

.wl-catalogo-tabs .k-tabstrip-item .k-link {
    padding: 4px 8px;
}

.wl-catalogo-lista {
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--kendo-color-border);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.wl-catalogo-fila {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--kendo-color-border);
    cursor: pointer;
    font-size: .82rem;
}

.wl-catalogo-fila:last-child {
    border-bottom: 0;
}

.wl-catalogo-fila:hover {
    background: var(--kendo-color-primary-subtle);
}

.wl-catalogo-fila > .badge {
    flex: 0 0 auto;
    margin-top: 2px;
}

.wl-catalogo-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* La ficha de una base de cálculo bajo su nombre: dos líneas y puntos suspensivos;
   el texto entero va en el title de la fila. Sin esto, 188 fichas de hasta 850
   caracteres convertirían la lista en una página. */
.wl-catalogo-ficha {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wl-ficha-codigo > code {
    font-family: var(--kendo-font-family-monospace, monospace);
    font-weight: 700;
    color: inherit;
    background: none;
    padding: 0;
}

/* Badges solidos */
.wl-badge-primary-solid {
    background: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

.wl-badge-success-solid {
    background: var(--kendo-color-success);
    color: var(--kendo-color-on-success);
}

.wl-badge-warning-solid {
    background: var(--kendo-color-warning);
    color: var(--kendo-color-on-warning);
}

.wl-badge-error-solid {
    background: var(--kendo-color-error);
    color: var(--kendo-color-on-error);
}

/* Variantes "strong" (emphasis) — distinguen verde oscuro/rojo oscuro de sus versiones normales */
.wl-badge-success-strong-solid {
    background: var(--kendo-color-success-emphasis);
    color: var(--kendo-color-on-success);
}

.wl-badge-error-strong-solid {
    background: var(--kendo-color-error-emphasis);
    color: var(--kendo-color-on-error);
}

/* Morado de cadenas de aprobacion (color de marca fijo, sin token kendo) */
.wl-badge-purple {
    background: #6A0DAD;
    color: #fff;
}

/* dark es el tema por defecto (sin data-theme); light se marca con html[data-theme="light"] */
.wl-bg-purple-subtle {
    background: #3A2352;
}

html[data-theme="light"] .wl-bg-purple-subtle {
    background: #F0E6FF;
}

/* Vista Tablero de Aprobaciones de OC (Aprobaciones.razor). Solo tokens del
   tema, para que funcione igual en claro y oscuro. */
.wl-tablero-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 600;
}

/* El tema le da 20px de relleno a la tarjeta: con 40 por columna son demasiado altas. */
.wl-tablero-aprob .k-taskboard-card {
    padding: 10px 12px;
}

.wl-tablero-card {
    font-size: 0.8rem;
    line-height: 1.45;
    cursor: pointer;
}

.wl-tablero-card-oc {
    font-weight: 600;
    color: var(--kendo-color-primary);
}

.wl-tablero-card-prio {
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
}

.wl-tablero-card-prov {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-tablero-card-monto {
    font-weight: 600;
    font-size: 0.9rem;
}

.wl-tablero-card-pie {
    gap: 8px;
    font-size: 0.7rem;
    color: var(--kendo-color-subtle);
}

.wl-tablero-card-pie > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip de cadena de aprobacion (Aprobaciones*.razor) */
.wl-chip-info {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info-emphasis);
}

/* Cajas de aviso con borde (patron AsientosContablesInv) */
.wl-alert-error {
    background: var(--kendo-color-error-subtle);
    border: 1px solid var(--kendo-color-error);
    border-radius: 4px;
}

/* En oscuro (el tema por defecto) --kendo-color-warning-subtle es un oliva (#474300) que
   desentona con el azul del tema: el fondo se mezcla con la superficie, como wl-kpi-warning. */
.wl-alert-warning {
    background: color-mix(in srgb, var(--kendo-color-warning) 10%, var(--kendo-color-surface));
    border: 1px solid color-mix(in srgb, var(--kendo-color-warning) 55%, transparent);
    border-radius: 4px;
}

html[data-theme="light"] .wl-alert-warning {
    background: var(--kendo-color-warning-subtle);
    border-color: var(--kendo-color-warning);
}

.wl-alert-success {
    background: var(--kendo-color-success-subtle);
    border: 1px solid var(--kendo-color-success);
    border-radius: 4px;
}


/* ---- Lía lee la factura (ComprasFormV2): marcas por campo y resumen ----
   Dorado = lo llenó Lía; ámbar = revísalo; rojo = confírmalo contra el papel.
   La franja va por box-shadow interno para no mover el layout del input Telerik.
   El oscuro es el tema por defecto: <html> no lleva data-theme y solo el claro pone
   data-theme="light" (theme-switcher.js). Con html[data-theme="dark"] estos valores no
   aplicaban nunca y el resumen salía con el fondo crema del claro y el texto del oscuro. */
:root {
    --wl-lia: #D4A853;
    --wl-lia-subtle: #FDF8ED;
    --wl-lia-ink: #7A5A16;
}
:root:not([data-theme="light"]), .k-dark {
    --wl-lia: #D4BC7D;
    --wl-lia-subtle: #2A2618;
    --wl-lia-ink: #E9D9A8;
}
.wl-lia-leido .k-input, .wl-lia-leido .k-picker, .wl-lia-leido .k-textarea {
    border-color: var(--wl-lia);
    box-shadow: inset 3px 0 0 var(--wl-lia);
}
.wl-lia-revisar .k-input, .wl-lia-revisar .k-picker {
    border-color: var(--kendo-color-warning);
    box-shadow: inset 3px 0 0 var(--kendo-color-warning);
}
.wl-lia-dudoso .k-input, .wl-lia-dudoso .k-picker {
    border-color: var(--kendo-color-error);
    box-shadow: inset 3px 0 0 var(--kendo-color-error);
    background: var(--kendo-color-error-subtle);
}
.wl-lia-nota {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 3px;
    color: var(--kendo-color-subtle);
}
.wl-lia-dudoso .wl-lia-nota { color: var(--kendo-color-error); }
.wl-lia-revisar .wl-lia-nota { color: var(--kendo-color-warning-emphasis, var(--kendo-color-warning)); }
.wl-lia-resumen {
    background: var(--wl-lia-subtle);
    border: 1px solid var(--wl-lia);
    border-radius: 6px;
}
.wl-lia-resumen .wl-lia-titulo { color: var(--wl-lia-ink); font-weight: 600; }

/* «Lía propone la fórmula»: las cuatro partes de la receta dentro de la ventana.
   La ventana se adapta a la pantalla (ancha en escritorio, 96vw si no cabe) y su
   contenido tiene desplazamiento propio: una receta larga no puede crecer más que
   la pantalla, porque TelerikWindow no agrega scroll por su cuenta. */
.k-window.wl-lia-ventana { max-width: 96vw; }
.k-window.wl-lia-ventana .k-window-content { max-height: calc(100vh - 120px); overflow-y: auto; padding-bottom: 0; }
/* Los botones (Aplicar, Proponer) quedan pegados al borde inferior mientras se
   desplaza la receta: nunca hay que bajar hasta el final para actuar. El fondo es el
   mismo de la ventana (surface-alt) para que el texto no se vea pasar por debajo. */
.wl-lia-pie { position: sticky; bottom: 0; margin: 0 -16px 0; padding: 10px 16px 16px;
              background: var(--kendo-color-surface-alt, #fff); border-top: 1px solid var(--kendo-color-border, #ddd); }
/* En escritorio la receta va en dos columnas: fórmula y casillas a la izquierda,
   salvedades y precedentes a la derecha. En pantallas angostas, una sola. */
.wl-receta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.wl-receta-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 991px) { .wl-receta-grid { grid-template-columns: 1fr; } }
.wl-receta { border: 1px solid var(--kendo-color-border); border-radius: 6px; overflow: hidden; }
.wl-receta-h { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-weight: 600; font-size: .9rem;
               background: var(--kendo-color-base-subtle, var(--kendo-color-surface)); border-bottom: 1px solid var(--kendo-color-border); }
.wl-receta-aviso { border-color: var(--kendo-color-warning); }
.wl-receta-aviso .wl-receta-h { background: var(--kendo-color-warning-subtle); }
.wl-receta-code { font-family: var(--kendo-font-family-monospace, monospace); font-size: .95rem; color: inherit; background: none; padding: 0; }
.wl-receta .table td, .wl-receta .table th { font-size: .85rem; }
.wl-lia-resumen ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.wl-lia-resumen li { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; }
.wl-lia-resumen .wl-lia-ic {
    width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 2px;
    display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.wl-lia-ic-leido   { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success); }
.wl-lia-ic-revisar { background: var(--kendo-color-warning-subtle); color: var(--kendo-color-warning); }
.wl-lia-ic-dudoso  { background: var(--kendo-color-error-subtle);   color: var(--kendo-color-error); }
.wl-lia-leyenda { font-size: 11.5px; color: var(--kendo-color-subtle); display: flex; gap: 14px; flex-wrap: wrap; }
.wl-lia-leyenda i { display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
.wl-btn-lia.k-button { background: var(--wl-lia); border-color: var(--wl-lia); color: #2A1F05; font-weight: 600; }
.wl-btn-lia.k-button:hover { filter: brightness(0.95); }

/* ═══ El isotipo de Lía (refrescamiento de marca, v3, oct-2026) ══════════════
   Cuatro hojas apiladas (dos en la versión mini, por debajo de 20 px) que respiran
   en espera, se abren en ola mientras piensa y fluyen de lado a lado mientras
   responde. Lo dibuja el componente LiaAvatar (SVG en línea) en el chat, los
   botones, los títulos de ventana y las notas; LiaAvatarSvg genera el mismo SVG
   como imagen para donde no cabe el componente. El dorado (--wl-lia) queda como
   HUELLA de lo que Lía tocó en un formulario, no como identidad.
   Tokens: en claro el primario es navy y las hojas quedarían apagadas, por eso
   pasa al info del tema. LiaAvatarSvg lleva estos mismos valores en hexadecimal:
   si cambian aquí, cambian allá. */
:root { --lia-1: var(--kendo-color-primary); --lia-2: var(--wl-accent-violet); --lia-3: var(--wl-accent-gold); }
html[data-theme="light"] { --lia-1: var(--kendo-color-info); }
.lia { --lia-c1: #f8c818; --lia-c2: #205090; --lia-c3: #a01830; --lia-c4: #205090; display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Paletas: --tema (por defecto, sigue el modo claro/oscuro) | --marca | --marca-oscuro | --mono */
.lia--tema { --lia-c1: var(--lia-3); --lia-c2: var(--lia-1); --lia-c3: var(--lia-2); --lia-c4: var(--lia-1); }
.lia--marca-oscuro { --lia-c2: #6b9be3; --lia-c3: #e35a72; --lia-c4: #6b9be3; }
.lia--mono { --lia-c1: currentColor; --lia-c2: currentColor; --lia-c3: currentColor; --lia-c4: currentColor; }
.lia-leaf-0 { fill: var(--lia-c1); } .lia-leaf-1 { fill: var(--lia-c2); } .lia-leaf-2 { fill: var(--lia-c3); } .lia-leaf-3 { fill: var(--lia-c4); }
/* Estados: --quieto (sin animación) | --espera | --pensando | --respondiendo */
.lia .lia-leaf { transform-box: fill-box; transform-origin: center; }
.lia--espera .lia-leaf { transform-box: view-box; animation: lia-idle 3.2s ease-in-out infinite; }
.lia--pensando .lia-leaf { animation: lia-think 1.6s cubic-bezier(.45,0,.55,1) infinite; }
.lia--pensando .lia-leaf-1 { animation-delay: .16s; }
.lia--pensando .lia-leaf-2 { animation-delay: .32s; }
.lia--pensando .lia-leaf-3 { animation-delay: .48s; }
.lia--respondiendo .lia-leaf { animation: lia-flow .9s ease-in-out infinite; }
.lia--respondiendo .lia-leaf-1 { animation-delay: -.225s; }
.lia--respondiendo .lia-leaf-2 { animation-delay: -.45s; }
.lia--respondiendo .lia-leaf-3 { animation-delay: -.675s; }
.lia--mini.lia--espera .lia-leaf { animation: none; }
.lia--mini.lia--pensando .lia-leaf-1 { animation-delay: .3s; }
.lia--mini.lia--respondiendo .lia-leaf-1 { animation-delay: -.45s; }
@keyframes lia-idle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes lia-think { 0%, 100% { transform: scaleX(.5); opacity: .3; } 40% { transform: scaleX(1); opacity: 1; } }
@keyframes lia-flow { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
.wl-btn-lia .lia, .k-window-title .lia, .wl-lia-titulo .lia, .wl-receta-h .lia, .wl-footnote .lia { margin-right: .35rem; }
@media (prefers-reduced-motion: reduce) { .lia .lia-leaf { animation: none !important; } }

/* Fondos utilitarios */
.wl-bg-surface {
    background: var(--kendo-color-surface);
}

.wl-bg-info-subtle {
    background: var(--kendo-color-info-subtle);
}

.wl-bg-success-subtle {
    background: var(--kendo-color-success-subtle);
}

.wl-bg-warning-subtle {
    background: var(--kendo-color-warning-subtle);
}

.wl-bg-error-subtle {
    background: var(--kendo-color-error-subtle);
}

/* Textos con enfasis que no cubre k-text-* */
.wl-text-error-strong {
    color: var(--kendo-color-error-emphasis);
}

.wl-text-warning-strong {
    color: var(--kendo-color-warning-on-subtle);
}

/* Hero navy de S31N29 (gradiente corporativo; el titulo cambia a primario en dark) */
.wl-hero-gradient {
    background: linear-gradient(135deg, #1E3A5F, #2C5282);
    color: #fff;
}

.wl-hero-header {
    background: linear-gradient(135deg, var(--wl-hero-from, #1E3A5F), var(--wl-hero-to, #2C5282));
    color: var(--kendo-color-on-primary);
    border-radius: 8px 8px 0 0;
}

/* Bootstrap fija color directamente en h1-h6 (var(--bs-heading-color)), ganándole
   al color heredado del contenedor — en tema claro eso dejaba el título oscuro e
   ilegible sobre el navy. Forzar el color de contraste en los headings del hero. */
.wl-hero-header :is(h1, h2, h3, h4, h5, h6) {
    color: var(--kendo-color-on-primary);
}

.wl-bg-hero {
    background: var(--kendo-color-primary);
}

.wl-text-hero {
    color: var(--kendo-color-primary);
}

html[data-theme="light"] .wl-bg-hero {
    background: #1E3A5F;
}

html[data-theme="light"] .wl-text-hero {
    color: #1E3A5F;
}

/* Nota al pie de reportes (BalanceRevision) */
.wl-footnote {
    color: var(--kendo-color-subtle);
    border-top: 1px solid var(--kendo-color-border);
    background: var(--kendo-color-surface);
}

/* Borde lateral sutil (alertas informativas de reportes) */
.wl-border-start-subtle {
    border-left: 4px solid var(--kendo-color-subtle);
}

/* Sub-header de seleccion (Compradores) */
.wl-subheader {
    background: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-on-app-surface);
}

/* Subtitulo tenue SOBRE el hero navy (.k-card-header): k-text-subtle da gris
   ilegible sobre el primary; esto usa on-primary atenuado, legible en dark y light. */
.wl-hero-subtle {
    color: var(--kendo-color-on-primary);
    opacity: 0.75;
}

/* Chip SOBRE el hero (.k-card-header), misma trampa que el subtitulo de arriba:
   wl-chip-info pinta info-subtle con texto info-emphasis, o sea azul sobre azul,
   y encima del primary no se lee. Este se apoya en on-primary translucido, que
   contrasta en dark y en light sin fijar ningun color. */
.wl-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--kendo-color-on-primary) 18%, transparent);
    color: var(--kendo-color-on-primary);
}

/* Un boton flat dentro del chip hereda el color primary del tema, que sobre el
   propio primary es invisible. */
.wl-hero-chip .k-button-flat,
.wl-hero-chip .k-button-flat .k-button-text {
    color: var(--kendo-color-on-primary);
}

.wl-hero-chip .k-button-flat:hover {
    background: color-mix(in srgb, var(--kendo-color-on-primary) 15%, transparent);
}

/* Formula de nomina evaluada (Revision de Conceptos): texto tecnico, monoespaciado
   y con salto de linea para que no desborde el modal. */
.wl-formula {
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    padding: 8px 10px;
    margin: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
}

/* Composicion de la formula en sus tres lecturas: definicion, en palabras y
   con los montos. Cada lectura lleva su etiqueta a la izquierda. */
.wl-formula-bloque {
    border-left: 3px solid var(--kendo-color-primary);
    padding-left: 12px;
}

.wl-formula-titulo {
    font-weight: 600;
    margin-bottom: 6px;
}

.wl-formula-fila + .wl-formula-fila {
    margin-top: 8px;
}

.wl-formula-etiqueta {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    margin-bottom: 2px;
}

/* La traduccion se lee como prosa: tipografia normal, no monoespaciada. */
.wl-formula-palabras {
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    padding: 8px 10px;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Fondo gris del visor PDF (chrome del visor, independiente del tema) */
.wl-pdf-surface {
    background: #525659;
}

/* Salida de un arranque de migraciones (Administracion > Migraciones): se lee como
   consola, conserva los saltos de linea y hace su propio scroll para no estirar la
   ventana ni la tarjeta del error. */
.wl-log-migracion {
    background: var(--kendo-color-surface-alt);
    color: var(--kendo-color-on-app-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    padding: 8px 10px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 60vh;
    overflow: auto;
}

/* El Width de TelerikWindow es fijo: sin techo se corta por los dos lados en pantallas
   chicas (ver skill telerik-gotchas). */
.k-window.wl-ventana-log-migracion {
    max-width: 96vw;
}

/* El mismo techo, sin nombre de pantalla: para cualquier TelerikWindow ancha
   (Class="wl-ventana-ancha"). El contenido que no quepa hace scroll DENTRO de la ventana. */
.k-window.wl-ventana-ancha {
    max-width: 96vw;
    max-height: 94vh;
}
.k-window.wl-ventana-ancha .k-window-content {
    overflow: auto;
}

/* === Superficie de las secciones de formulario ==============================
   Los formularios armados con <fieldset class="border"> no tenian area de
   trabajo: se midio la cadena completa en Registro de Compras y TODOS los
   contenedores eran transparentes —fieldset, div.compras-form-v2, div.col.p-3,
   div.k-drawer-content— asi que el formulario se apoyaba directo sobre el fondo
   del body. Mientras el fondo del tema claro fue #F7FAFC (3 puntos del blanco)
   nadie lo noto; con #ECF0F6 (19 puntos) quedo a la vista que esa superficie
   nunca existio. En oscuro faltaba desde siempre: #151828 contra #2F344C.

   🔴 El !important del borde no es capricho: Bootstrap declara .border con
   !important y sin el gana el gris 222,226,230. Mismo gotcha que las fichas de
   la mesa en Conciliacion Manual.

   Alcance: los 17 archivos que usan este patron, en Compras y Contabilidad
   (`grep -rl 'fieldset class="border"' --include=*.razor`). NO cubre las demas
   pantallas sin superficie, que usan otras estructuras y van aparte. */
fieldset.border {
    background: var(--kendo-color-surface);
    border-color: var(--kendo-color-border) !important;
}

/* === PORTAL DEL EMPLEADO — portada 2026 (wl-portal-*) =========================
   Nació con el Inicio nuevo de Autogestión de Nómina (sep-2026, maqueta en
   https://claude.ai/artifact/CPUm5Q9H3zehVUfte6uKRx). La portada deja de ser solo
   baldosas: responde primero lo que el trabajador viene a ver (su último pago,
   cuántos días le quedan, en qué va su trámite) y las baldosas quedan debajo.

   Reglas de la sección:
   - Solo tokens del tema (--kendo-color-*, --wl-*): cero hex, se adapta a claro/oscuro.
   - Los números van en tabular-nums para que las cifras no bailen al animarse.
   - Toda animación se apaga con prefers-reduced-motion (al final de la sección).
   - El único estilo en línea permitido es la variable de datos (--wl-anillo-fin,
     --wl-parte), nunca un color ni un espaciado. */

.wl-portal {
    /* Fondo de lo que "falta" (pista del anillo, segmentos vacíos, pasos pendientes).
       Sale del color del texto y no de --kendo-color-base-subtle: en claro ése es
       #EDF2F7 y sobre la tarjeta blanca las cuotas por pagar no se veían. */
    --wl-portal-pista: color-mix(in srgb, var(--kendo-color-on-app-surface) 13%, transparent);
    max-width: 1180px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-block: 16px 32px;
}

.wl-portal-num {
    font-variant-numeric: tabular-nums;
}

.wl-portal-sutil {
    color: var(--kendo-color-subtle);
    font-size: 12.5px;
}

.wl-portal-fuerte {
    color: var(--kendo-color-on-app-surface);
    font-weight: 700;
}

/* ---------- Hero: saludo + último pago ---------- */
.wl-portal-hero {
    /* 🔴 La animación de entrada crea una capa propia y las acciones rápidas (que también
       se animan) se pintaban ENCIMA de la lista del buscador. Con z-index el hero, y la
       lista que cuelga de él, quedan por delante de lo que viene después. */
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px 28px;
    border-radius: 18px;
    color: var(--kendo-color-on-primary);
    background:
        radial-gradient(600px 240px at 50% 0%, color-mix(in srgb, var(--kendo-color-on-primary) 12%, transparent), transparent 70%),
        linear-gradient(120deg, var(--wl-hero-from), var(--wl-hero-to));
    border-bottom: 2px solid var(--wl-accent-gold);
    box-shadow: var(--wl-shadow-md);
    animation: wl-portal-entrar .5s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-portal-eyebrow {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wl-accent-gold);
}

.wl-portal-hero h1 {
    margin: 4px 0 6px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--kendo-color-on-primary);
    text-wrap: balance;
}

.wl-portal-hero-sub {
    margin: 0;
    max-width: 52ch;
    color: color-mix(in srgb, var(--kendo-color-on-primary) 78%, transparent);
}

.wl-portal-pago {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    padding: 14px 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--kendo-color-on-primary) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kendo-color-on-primary) 14%, transparent);
}

.wl-portal-pago small {
    color: color-mix(in srgb, var(--kendo-color-on-primary) 75%, transparent);
    font-size: 12px;
}

.wl-portal-pago-monto {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin-block: 2px;
    font-variant-numeric: tabular-nums;
}

/* El outline del tema es gris (#4A5568): sobre el navy del hero no se veía.
   Solo el hijo directo ("Ver mi recibo"): el ojito vive en la cabecera y es plano. */
.wl-portal-pago > .k-button {
    align-self: flex-start;
    margin-top: 8px;
    color: var(--kendo-color-on-primary);
    border-color: color-mix(in srgb, var(--kendo-color-on-primary) 45%, transparent);
}

.wl-portal-pago > .k-button:hover {
    background: color-mix(in srgb, var(--kendo-color-on-primary) 12%, transparent);
    color: var(--kendo-color-on-primary);
}

/* ---------- El ojito de los montos ---------- */
.wl-portal-pago-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* FillMode Flat lleva background:none !important (telerik-gotchas): solo se toca el color. */
.k-button.wl-portal-ojo {
    color: var(--kendo-color-on-primary);
    opacity: .8;
    margin: -6px -8px -6px 0;
}

.k-button.wl-portal-ojo:hover,
.k-button.wl-portal-ojo:focus-visible {
    opacity: 1;
}

.wl-portal-ojo-suelto {
    align-self: flex-start;
}

/* Sobre una tarjeta normal (no el navy del hero): ícono del color del texto. */
.k-button.wl-portal-ojo.wl-portal-ojo-tarjeta {
    color: var(--kendo-color-subtle);
    margin: -8px -8px -8px 0;
}

/* ---------- Recibo explicado (EmisionComprobantesPago) ---------- */
.wl-recibo-neto {
    margin-block: 6px 6px;
    font-size: clamp(30px, 4.5vw, 42px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.wl-recibo-porque {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--wl-accent-gold) 14%, transparent);
}

.wl-recibo-porque .k-svg-icon {
    flex: none;
    margin-top: 2px;
    color: var(--wl-accent-gold);
}

.wl-recibo-porque p {
    margin: 0;
    font-size: 13px;
}

.wl-de-cada-100 {
    display: flex;
    height: 42px;
    margin-block: 4px 12px;
    border-radius: 12px;
    overflow: hidden;
}

.wl-de-cada-100 > span {
    display: grid;
    place-items: center;
    width: calc(var(--wl-parte, 0) * 1%);
    min-width: 44px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kendo-color-on-primary);
    transform-origin: left;
    animation: wl-portal-crecer .9s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-de-cada-100-queda { background: var(--kendo-color-primary); }
.wl-de-cada-100-sale { background: var(--kendo-color-error); }
.wl-parte-roja { background: var(--kendo-color-error); }

/* Cascada (WlCascadaRecibo) */
.wl-cascada-suma,
.wl-cascada-resta,
.wl-cascada-total {
    transform-box: fill-box;
    animation: wl-cascada-crecer .7s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-cascada-suma { fill: var(--kendo-color-primary); transform-origin: bottom; }
.wl-cascada-resta { fill: var(--kendo-color-error); transform-origin: top; }
.wl-cascada-total { fill: var(--wl-accent-gold); transform-origin: bottom; }

.wl-cascada-union {
    stroke: var(--kendo-color-border-alt);
    stroke-dasharray: 3 3;
}

.wl-cascada-valor {
    fill: var(--kendo-color-on-app-surface);
    font-size: 11.5px;
    font-weight: 700;
    animation: wl-portal-aparecer .5s .6s both;
}

/* Las barras entran una detrás de otra (el primer hijo del svg es la línea base). */
.wl-grafico g:nth-child(3) rect { animation-delay: .05s; }
.wl-grafico g:nth-child(4) rect { animation-delay: .1s; }
.wl-grafico g:nth-child(5) rect { animation-delay: .15s; }
.wl-grafico g:nth-child(6) rect { animation-delay: .2s; }
.wl-grafico g:nth-child(7) rect { animation-delay: .25s; }
.wl-grafico g:nth-child(8) rect { animation-delay: .3s; }
.wl-grafico g:nth-child(9) rect { animation-delay: .35s; }
.wl-grafico g:nth-child(10) rect { animation-delay: .4s; }

@keyframes wl-cascada-crecer {
    from { transform: scaleY(0); }
}

/* ---------- Notas de color (reemplazan las .alert de Bootstrap en el portal) ---------- */
/* Ícono a la izquierda y el texto en UN div a la derecha: <div class="wl-nota wl-nota-alerta">
   <TelerikSvgIcon/> <div>…</div></div>. Solo tokens: se ven igual de bien en claro y oscuro. */
.wl-nota {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--kendo-color-on-app-surface);
    background: color-mix(in srgb, var(--kendo-color-primary) 10%, transparent);
    border-left: 3px solid var(--kendo-color-primary);
}

.wl-nota > .k-svg-icon {
    flex: none;
    margin-top: 1px;
    color: var(--kendo-color-primary-on-surface);
}

.wl-nota-alerta {
    background: color-mix(in srgb, var(--kendo-color-warning) 14%, transparent);
    border-left-color: var(--kendo-color-warning);
}
.wl-nota-alerta > .k-svg-icon { color: var(--kendo-color-warning-on-subtle, var(--kendo-color-warning)); }

.wl-nota-error {
    background: color-mix(in srgb, var(--kendo-color-error) 12%, transparent);
    border-left-color: var(--kendo-color-error);
}
.wl-nota-error > .k-svg-icon { color: var(--kendo-color-error); }

.wl-nota-ok {
    background: color-mix(in srgb, var(--kendo-color-success) 12%, transparent);
    border-left-color: var(--kendo-color-success);
}
.wl-nota-ok > .k-svg-icon { color: var(--kendo-color-success); }

.wl-portal-pill-neutra {
    background: var(--wl-portal-pista, color-mix(in srgb, var(--kendo-color-on-app-surface) 13%, transparent));
    color: var(--kendo-color-subtle);
}

/* ---------- Resumen del trámite antes de enviar (WlResumenTramite) ---------- */
.wl-resumen {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    animation: wl-portal-entrar .35s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-resumen-titulo {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--kendo-color-subtle);
}

.wl-resumen-frase {
    font-size: 19px;
    line-height: 1.35;
    text-wrap: balance;
}

.wl-resumen-frase strong {
    color: var(--kendo-color-primary-on-surface);
}

.wl-resumen-medidor-texto {
    font-size: 14px;
    font-weight: 600;
}

.wl-resumen-medidor .wl-barra-partes {
    margin-block: 8px 0;
}

.wl-resumen-destacadas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.wl-resumen-valor {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.wl-resumen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wl-resumen-chip {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--kendo-color-subtle);
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 6%, transparent);
}

.wl-resumen-chip strong {
    color: var(--kendo-color-on-app-surface);
    font-variant-numeric: tabular-nums;
}

/* ---------- Detalle de una solicitud (Mis Solicitudes) ---------- */
.wl-solicitud-detalle {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--kendo-color-border);
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 3%, transparent);
}

.wl-solicitud-pasos {
    font-size: 12.5px;
}

.wl-solicitud-pasos .wl-portal-pill {
    min-width: 22px;
    justify-content: center;
}

/* ---------- Calendario de vacaciones (WlCalendarioVacaciones) ---------- */
.wl-cal {
    --wl-portal-pista: color-mix(in srgb, var(--kendo-color-on-app-surface) 13%, transparent);
    max-width: 560px;
    padding: 16px;
    border-radius: 18px;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
}

.wl-cal-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wl-cal-mes {
    font-size: 16px;
    font-weight: 800;
}

.wl-cal-grilla {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.wl-cal-dow {
    padding-bottom: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kendo-color-subtle);
}

/* El día es un TelerikButton sólido: .k-button.wl-cal-dia le gana a .k-button-solid-base. */
.k-button.wl-cal-dia,
div.wl-cal-dia {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--kendo-color-on-app-surface);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background .15s, transform .15s;
}

.k-button.wl-cal-dia .k-button-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.k-button.wl-cal-dia:hover {
    background: var(--wl-portal-pista);
}

div.wl-cal-pasado {
    color: var(--kendo-color-subtle);
    opacity: .45;
}

.k-button.wl-cal-descanso { color: var(--kendo-color-subtle); }

.k-button.wl-cal-feriado { color: var(--wl-accent-gold); }

.k-button.wl-cal-feriado::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wl-accent-gold);
}

.k-button.wl-cal-rango {
    border-radius: 0;
    background: color-mix(in srgb, var(--kendo-color-primary) 16%, transparent);
}

.k-button.wl-cal-rango.wl-cal-descanso,
.k-button.wl-cal-rango.wl-cal-feriado {
    background: color-mix(in srgb, var(--kendo-color-primary) 7%, transparent);
}

/* 🔴 Tres clases, y DESPUÉS de .wl-cal-rango.wl-cal-descanso: si el último día libre cae
   en su descanso (regresa el lunes, el domingo es el fin), esa regla le pisaba el fondo y
   el número quedaba blanco sobre gris claro (medido en el navegador). */
.k-button.wl-cal-dia.wl-cal-inicio,
.k-button.wl-cal-dia.wl-cal-fin {
    border-radius: 10px;
    background: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
    transform: scale(1.03);
}

.k-button.wl-cal-dia.wl-cal-inicio:hover,
.k-button.wl-cal-dia.wl-cal-fin:hover {
    background: var(--kendo-color-primary-hover);
}

.k-button.wl-cal-regreso {
    box-shadow: inset 0 0 0 2px var(--wl-accent-gold);
}

.k-button.wl-cal-hoy .wl-cal-num {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wl-cal-marcas {
    display: flex;
    gap: 3px;
    height: 5px;
}

.wl-cal-marcas i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kendo-color-error);
}

.wl-cal-inicio .wl-cal-marcas i,
.wl-cal-fin .wl-cal-marcas i {
    background: var(--kendo-color-on-primary);
}

.wl-cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--kendo-color-subtle);
}

.wl-cal-leyenda span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wl-cal-leyenda i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.wl-cal-muestra-rango { background: var(--kendo-color-primary); }
.wl-cal-muestra-regreso { box-shadow: inset 0 0 0 2px var(--wl-accent-gold); }
.wl-cal-muestra-feriado { background: var(--wl-accent-gold); border-radius: 50%; }
.wl-cal-muestra-descanso { background: var(--wl-portal-pista); }
.wl-cal-muestra-fuera { background: var(--kendo-color-error); border-radius: 50%; }

.wl-cal-companeros {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    background: color-mix(in srgb, var(--kendo-color-error) 9%, transparent);
}

.wl-cal-companeros .k-svg-icon {
    flex: none;
    color: var(--kendo-color-error);
}

.wl-cal-companeros ul {
    margin: 4px 0;
    padding-left: 18px;
}

@media (max-width: 600px) {
    .wl-cal { padding: 10px; }
    .k-button.wl-cal-dia, div.wl-cal-dia { height: 40px; }
}

/* Tabla del detalle: la del look v2 (sin rejilla vertical, cabecera con hilo dorado) */
.wl-portal-tabla-caja {
    overflow-x: auto;
}

.wl-portal-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wl-portal-tabla th {
    padding: 0 10px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kendo-color-subtle);
    border-bottom: 2px solid color-mix(in srgb, var(--wl-accent-gold) 60%, transparent);
}

.wl-portal-tabla td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--kendo-color-border);
    vertical-align: top;
}

/* La explicación del concepto (nom_concepto_ayuda): entre el nombre y el código. */
.wl-portal-tabla .wl-recibo-ayuda {
    display: block;
    max-width: 60ch;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--kendo-color-subtle);
}

.wl-portal-tabla td small {
    display: block;
    font-size: 11px;
    color: var(--kendo-color-subtle);
}

.wl-portal-tabla tbody tr:hover {
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 4%, transparent);
}

.wl-portal-tabla tfoot td {
    font-weight: 800;
    border-bottom: 0;
}

.wl-portal-tabla-neto td {
    font-size: 15px;
    color: var(--wl-accent-gold);
}

.wl-portal-tabla .wl-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wl-portal-tabla .wl-num-suma { color: var(--kendo-color-success); }
.wl-portal-tabla .wl-num-resta { color: var(--kendo-color-error); }

/* ---------- Buscador "¿Qué necesita?" (WlBuscadorPortal), dentro del hero ---------- */
.wl-buscador {
    position: relative;
    max-width: 520px;
    margin-top: 16px;
}

.wl-buscador-caja {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
    border-radius: 12px;
    color: var(--kendo-color-on-primary);
    background: color-mix(in srgb, var(--kendo-color-on-primary) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kendo-color-on-primary) 20%, transparent);
    transition: background .2s, box-shadow .2s;
}

.wl-buscador-caja:focus-within {
    background: color-mix(in srgb, var(--kendo-color-on-primary) 18%, transparent);
    box-shadow: inset 0 0 0 2px var(--wl-accent-gold);
}

.wl-buscador .k-textbox,
.wl-buscador .k-textbox.k-focus {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--kendo-color-on-primary);
}

/* 🔴 En tema claro la regla global html[data-theme="light"] .k-input (fondo blanco) pesa más que
   la de arriba, y la caja salía blanca sobre el hero navy (portada y Directorio, 26-sep). */
html[data-theme="light"] .wl-buscador .k-textbox { background: transparent; }

.wl-buscador .k-textbox .k-input-inner::placeholder {
    color: color-mix(in srgb, var(--kendo-color-on-primary) 65%, transparent);
}

.wl-buscador-atajo {
    padding: 2px 7px;
    border-radius: 6px;
    font: 600 11px Inter, sans-serif;
    color: color-mix(in srgb, var(--kendo-color-on-primary) 75%, transparent);
    background: color-mix(in srgb, var(--kendo-color-on-primary) 12%, transparent);
    white-space: nowrap;
}

.wl-buscador-lista {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 380px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 14px;
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    box-shadow: var(--wl-shadow-lg), 0 0 0 1px var(--kendo-color-border);
    animation: wl-portal-entrar .18s ease-out both;
}

.k-button.wl-buscador-item {
    justify-content: flex-start;
    height: auto;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--kendo-color-on-app-surface);
    text-align: left;
    white-space: normal;
}

.wl-buscador-item .k-button-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wl-buscador-item strong {
    display: block;
    font-size: 13.5px;
}

.wl-buscador-item small {
    display: block;
    font-size: 12px;
    color: var(--kendo-color-subtle);
}

.k-button.wl-buscador-item:hover,
.k-button.wl-buscador-item.wl-buscador-activo {
    background: color-mix(in srgb, var(--kendo-color-primary) 12%, transparent);
}

.wl-buscador-vacio {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--kendo-color-subtle);
}

@media (max-width: 600px) {
    .wl-buscador-atajo { display: none; }
}

/* ---------- Pastillas de estado ---------- */
.wl-portal-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    background: color-mix(in srgb, var(--kendo-color-primary) 15%, transparent);
    color: var(--kendo-color-primary-on-surface);
}

.wl-portal-pill-ok {
    background: color-mix(in srgb, var(--kendo-color-success) 15%, transparent);
    color: var(--kendo-color-success);
}

/* 🔴 En tema oscuro --kendo-color-warning-on-subtle es #F2F0D9 (casi blanco): la pastilla
   ámbar salía gris. El ámbar va en oscuro y el tono oscuro solo en claro (26-sep-2026). */
.wl-portal-pill-alerta {
    background: color-mix(in srgb, var(--kendo-color-warning) 18%, transparent);
    color: var(--kendo-color-warning);
}

html[data-theme="light"] .wl-portal-pill-alerta {
    color: var(--kendo-color-warning-on-subtle, var(--kendo-color-warning));
}

.wl-portal-pill-error {
    background: color-mix(in srgb, var(--kendo-color-error) 15%, transparent);
    color: var(--kendo-color-error);
}

/* Sobre el navy del hero las pastillas necesitan su propio contraste */
.wl-portal-hero .wl-portal-pill,
html[data-theme="light"] .wl-portal-hero .wl-portal-pill {
    background: color-mix(in srgb, var(--kendo-color-on-primary) 16%, transparent);
    color: var(--kendo-color-on-primary);
    align-self: flex-start;
}

/* ---------- Acciones rápidas ---------- */
.wl-portal-acciones {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.k-button.wl-portal-accion {
    justify-content: flex-start;
    height: auto;
    padding: 14px 16px;
    border-radius: 14px;
    white-space: normal;
    text-align: left;
    box-shadow: var(--wl-shadow-sm);
    transition: transform .2s, box-shadow .2s;
    animation: wl-portal-entrar .5s cubic-bezier(.2, .7, .2, 1) both;
}

/* 🔴 Telerik 15 marca el primario como .k-button-primary (sin "solid"): con
   :not(.k-button-solid-primary) el botón principal quedaba blanco como los demás. */
.k-button.wl-portal-accion:not(.k-button-primary) {
    background: var(--kendo-color-surface);
    border-color: var(--kendo-color-border);
    color: var(--kendo-color-on-app-surface);
}

.k-button.wl-portal-accion:hover {
    transform: translateY(-2px);
    box-shadow: var(--wl-shadow-md);
}

.k-button.wl-portal-accion:active {
    transform: translateY(0) scale(.98);
}

.wl-portal-accion .k-button-text {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wl-portal-accion strong {
    display: block;
    font-size: 13.5px;
}

.wl-portal-accion small {
    display: block;
    font-size: 12px;
    opacity: .75;
}

.wl-portal-acciones > :nth-child(2) { animation-delay: .06s; }
.wl-portal-acciones > :nth-child(3) { animation-delay: .12s; }
.wl-portal-acciones > :nth-child(4) { animation-delay: .18s; }

/* ---------- Chips de icono ---------- */
.wl-portal-chip {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent);
    color: var(--kendo-color-primary-on-surface);
}

.wl-portal-chip-oro {
    background: color-mix(in srgb, var(--wl-accent-gold) 16%, transparent);
    color: var(--wl-accent-gold);
}

.wl-portal-chip-verde {
    background: color-mix(in srgb, var(--kendo-color-success) 14%, transparent);
    color: var(--kendo-color-success);
}

.k-button-primary .wl-portal-chip {
    background: color-mix(in srgb, var(--kendo-color-on-primary) 16%, transparent);
    color: var(--kendo-color-on-primary);
}

/* ---------- Tarjetas ---------- */
.wl-portal-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.wl-portal-s4 { grid-column: span 4; }
.wl-portal-s5 { grid-column: span 5; }
.wl-portal-s7 { grid-column: span 7; }
.wl-portal-s12 { grid-column: span 12; }

.wl-portal-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    border-radius: 18px;
    background: var(--card-gradient, var(--kendo-color-surface));
    border: 1px solid var(--kendo-color-border);
    box-shadow: var(--wl-shadow-sm);
    animation: wl-portal-entrar .5s cubic-bezier(.2, .7, .2, 1) both;
}

/* En claro --card-gradient vale "none" y el fondo quedaba transparente. */
html[data-theme="light"] .wl-portal-card {
    background: var(--kendo-color-surface);
}

.wl-portal-grid > :nth-child(2) { animation-delay: .06s; }
.wl-portal-grid > :nth-child(3) { animation-delay: .12s; }
.wl-portal-grid > :nth-child(4) { animation-delay: .18s; }
.wl-portal-grid > :nth-child(5) { animation-delay: .24s; }
.wl-portal-grid > :nth-child(6) { animation-delay: .30s; }

.wl-portal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.wl-portal-card-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14.5px;
}

.wl-portal-card-pie {
    margin-top: auto;
    padding-top: 12px;
}

.wl-portal-cifra {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.wl-portal-dato {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wl-portal-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 -4px;
    font-size: 16px;
    font-weight: 800;
}

/* ---------- Anillo (WlAnillo) ---------- */
.wl-anillo {
    position: relative;
    width: 96px;
    height: 96px;
    flex: none;
}

.wl-anillo svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wl-anillo-pista {
    fill: none;
    stroke: var(--wl-portal-pista);
    stroke-width: 9;
}

.wl-anillo-barra {
    fill: none;
    stroke: var(--kendo-color-primary);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: var(--wl-anillo-fin, 100);
    animation: wl-anillo-llenar 1.2s .15s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-anillo-oro .wl-anillo-barra { stroke: var(--wl-accent-gold); }

.wl-anillo-centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1;
}

.wl-anillo-centro strong {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.wl-anillo-centro small {
    margin-top: 3px;
    font-size: 11px;
    color: var(--kendo-color-subtle);
}

@keyframes wl-anillo-llenar {
    from { stroke-dashoffset: 100; }
}

/* ---------- Barra por segmentos (WlBarraSegmentos) y barra de partes ---------- */
.wl-segmentos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin-block: 12px 10px;
}

.wl-segmento {
    height: 10px;
    border-radius: 3px;
    background: var(--wl-portal-pista);
}

.wl-segmento-lleno {
    background: var(--kendo-color-primary);
    transform-origin: left;
    animation: wl-portal-crecer .5s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-barra-partes {
    display: flex;
    height: 12px;
    margin-block: 12px 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--wl-portal-pista);
}

.wl-barra-partes > span {
    height: 100%;
    width: calc(var(--wl-parte, 0) * 1%);
    transform-origin: left;
    animation: wl-portal-crecer .9s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-parte-apagada { background: var(--kendo-color-subtle); }
.wl-parte-oro { background: var(--wl-accent-gold); }
.wl-parte-azul { background: var(--kendo-color-primary); }

.wl-leyenda {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
}

.wl-leyenda > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wl-leyenda i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: none;
}

.wl-leyenda .wl-leyenda-valor {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wl-leyenda .wl-parte-resto {
    background: var(--wl-portal-pista);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border-alt);
}

@keyframes wl-portal-crecer {
    from { transform: scaleX(0); }
}

/* ---------- Pasos de un trámite (WlPasosTramite) ---------- */
.wl-tramite {
    padding-block: 12px;
    border-top: 1px solid var(--kendo-color-border);
}

.wl-tramite:first-child {
    border-top: 0;
    padding-top: 0;
}

.wl-tramite-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.wl-pasos {
    display: flex;
    align-items: flex-start;
    margin-block: 10px 6px;
    overflow-x: auto;
}

.wl-paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    flex: none;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.2;
    color: var(--kendo-color-subtle);
}

.wl-paso i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--wl-portal-pista);
    box-shadow: inset 0 0 0 2px var(--kendo-color-border-alt);
}

.wl-paso-hecho i { background: var(--kendo-color-success); box-shadow: none; }
.wl-paso-error i { background: var(--kendo-color-error); box-shadow: none; }

.wl-paso-ahora {
    color: var(--kendo-color-on-app-surface);
    font-weight: 700;
}

.wl-paso-ahora i {
    background: var(--kendo-color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kendo-color-primary) 22%, transparent);
    animation: wl-paso-pulso 1.8s infinite;
}

.wl-paso-espera {
    color: var(--kendo-color-on-app-surface);
    font-weight: 700;
}

.wl-paso-espera i {
    background: var(--kendo-color-warning);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kendo-color-warning) 22%, transparent);
}

.wl-paso-linea {
    flex: 1;
    min-width: 12px;
    height: 2px;
    margin-top: 6px;
    margin-inline: -18px;
    background: var(--kendo-color-border-alt);
}

.wl-paso-linea-hecha { background: var(--kendo-color-success); }

@keyframes wl-paso-pulso {
    50% { box-shadow: 0 0 0 8px transparent; }
}

/* ---------- Gráfico de netos (WlGraficoNetos) ---------- */
.wl-grafico {
    overflow-x: auto;
}

.wl-grafico svg {
    display: block;
    width: 100%;
    min-width: 480px;
    height: auto;
}

.wl-grafico-eje {
    fill: var(--kendo-color-subtle);
    font-size: 11px;
}

.wl-grafico-rejilla {
    stroke: var(--kendo-color-border);
    stroke-width: 1;
}

.wl-grafico-linea {
    fill: none;
    stroke: var(--kendo-color-primary);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: wl-grafico-trazar 1.4s .2s cubic-bezier(.3, .6, .2, 1) both;
}

.wl-grafico-area {
    fill: var(--kendo-color-primary);
    fill-opacity: .14;
    animation: wl-portal-aparecer .8s .6s both;
}

.wl-grafico-punto {
    fill: var(--kendo-color-surface);
    stroke: var(--kendo-color-primary);
    stroke-width: 2;
    animation: wl-portal-aparecer .6s .8s both;
}

.wl-grafico-punto-ultimo {
    fill: var(--wl-accent-gold);
    stroke: var(--kendo-color-surface);
    stroke-width: 3;
}

.wl-grafico-valor {
    fill: var(--kendo-color-on-app-surface);
    font-size: 13px;
    font-weight: 800;
    animation: wl-portal-aparecer .6s 1s both;
}

@keyframes wl-grafico-trazar {
    from { stroke-dashoffset: 1; }
}

@keyframes wl-portal-aparecer {
    from { opacity: 0; }
}

/* ---------- Esqueleto mientras carga ---------- */
.wl-portal-esqueleto {
    min-height: 150px;
    border-radius: 18px;
    background:
        linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--kendo-color-on-app-surface) 6%, transparent) 50%, transparent 70%),
        var(--kendo-color-surface);
    background-size: 200% 100%, auto;
    border: 1px solid var(--kendo-color-border);
    animation: wl-portal-brillo 1.3s linear infinite;
}

@keyframes wl-portal-brillo {
    from { background-position: 150% 0, 0 0; }
    to { background-position: -50% 0, 0 0; }
}

@keyframes wl-portal-entrar {
    from { opacity: 0; transform: translateY(12px); }
}

/* ---------- Pantallas medianas y teléfono ---------- */
@media (max-width: 1020px) {
    .wl-portal-s4 { grid-column: span 6; }
    .wl-portal-s5, .wl-portal-s7 { grid-column: span 12; }
    .wl-portal-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .wl-portal { gap: 16px; padding-block: 8px 24px; }
    .wl-portal-hero { padding: 20px; }
    .wl-portal-pago { width: 100%; min-width: 0; }
    .wl-portal-s4 { grid-column: span 12; }
    .wl-portal-card { padding: 16px; }
    .k-button.wl-portal-accion { padding: 12px; }
    .wl-portal-accion .k-button-text { flex-direction: column; align-items: flex-start; gap: 8px; }
    .wl-portal-accion small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-portal *,
    .wl-portal *::before,
    .wl-portal *::after,
    .wl-portal-hero,
    .wl-portal-card {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Barra de abajo en el TELÉFONO (sep-2026). La pinta DrawerLayout con el componente
   que registre el módulo de la ruta abierta (ComplementoRuta); hoy, el portal del
   empleado (WlBarraInferiorPortal). En pantallas anchas no existe: manda el menú lateral.
   Mismo corte que DrawerLayout.razor.js (767.98px), que ahí cierra el menú y lo abre encima.
   ========================================================================== */
.wl-barra-inferior { display: none; }

@media (max-width: 767.98px) {
    .wl-barra-inferior {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1000; /* debajo del drawer en overlay, las ventanas y los popups de Telerik */
        display: flex;
        align-items: stretch;
        gap: 2px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--kendo-color-surface) 92%, transparent);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--kendo-color-border);
        box-shadow: 0 -6px 20px color-mix(in srgb, var(--kendo-color-on-app-surface) 10%, transparent);
        animation: wl-barra-subir .35s cubic-bezier(.2, .7, .2, 1) both;
    }

    /* Que lo último de cada pantalla no quede debajo de la barra. */
    .wl-con-barra-inferior { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }

    .wl-barra-item,
    .k-button.wl-barra-item {
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        border: 0;
        border-radius: 12px;
        color: var(--kendo-color-subtle);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s;
    }

    /* El velo gris del botón flat de Telerik quedaba pegado a "Menú" tras tocarlo (foco):
       aquí la respuesta al toque es la píldora y el foco de teclado lleva su contorno.
       !important porque el tema lo fuerza así: `.k-button.k-button-flat::before { display: block !important }`. */
    .k-button.wl-barra-item::before,
    .k-button.wl-barra-item::after { display: none !important; }

    .k-button.wl-barra-item .k-button-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    .wl-barra-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* El icono va en una "píldora" que se enciende en la pantalla abierta. */
    .wl-barra-item .k-svg-icon {
        width: 44px;
        height: 28px;
        padding: 4px 12px;
        border-radius: 999px;
        transition: background-color .25s, transform .25s;
    }

    .wl-barra-item.wl-barra-activa { color: var(--kendo-color-primary); }

    .wl-barra-item.wl-barra-activa .k-svg-icon {
        background: color-mix(in srgb, var(--kendo-color-primary) 16%, transparent);
        animation: wl-barra-pulso .35s cubic-bezier(.2, .7, .2, 1);
    }

    .wl-barra-item:active .k-svg-icon { transform: scale(.9); }
    .wl-barra-item:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: -2px; }

    /* Cuántos comprobantes nuevos hay detrás del botón (portal de proveedores, idea 6): pegado
       a la esquina de la píldora del ícono, como la insignia del menú lateral. */
    .wl-barra-item { position: relative; }
    .wl-barra-item .wl-barra-insignia {
        position: absolute;
        top: 2px;
        left: calc(50% + 10px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 800;
        line-height: 16px;
        text-align: center;
        font-variant-numeric: tabular-nums;
        color: var(--kendo-color-on-primary);
        background: var(--kendo-color-primary);
        box-shadow: 0 0 0 2px var(--kendo-color-surface);
    }
}

@keyframes wl-barra-subir {
    from { transform: translateY(100%); }
}

@keyframes wl-barra-pulso {
    from { transform: scale(.6); }
}

@media (prefers-reduced-motion: reduce) {
    .wl-barra-inferior,
    .wl-barra-item .k-svg-icon {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Mis Vacaciones del portal (sep-2026): dos anillos arriba y el período a período
   como lista (antes, grilla de 7 columnas que en el teléfono no se leía).
   ========================================================================== */
.wl-vac-resumen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.wl-vac-programadas {
    margin: 8px 0;
    padding-left: 18px;
}

.wl-vac-programadas li { margin-bottom: 4px; }
.wl-vac-programadas .wl-portal-pill { margin-left: 6px; }

.wl-vac-periodos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl-vac-periodo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--kendo-color-border);
    animation: wl-portal-entrar .45s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-vac-periodo:first-child { border-top: 0; padding-top: 4px; }
.wl-vac-periodo:nth-child(2) { animation-delay: .05s; }
.wl-vac-periodo:nth-child(3) { animation-delay: .1s; }
.wl-vac-periodo:nth-child(n+4) { animation-delay: .15s; }

.wl-vac-periodo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
}

@media (max-width: 600px) {
    /* Encabezados de las pantallas del portal: con botones al lado, el subtítulo quedaba en
       una columna de tres palabras por renglón. Si no caben, los botones bajan a su renglón. */
    .wl-portal-card-head { flex-wrap: wrap; }
    .wl-portal-card-titulo { flex: 1 1 240px; }

    .wl-vac-resumen { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-vac-periodo { animation: none !important; }
}

/* ==========================================================================
   Paleta Ctrl/Cmd+K de TODO Winledger (DrawerLayout, shell/ux lote 2a, sep-2026).
   Absorbió a la del portal (WlPaletaPortal): mismo aspecto, ahora para el ERP y el portal.
   Por encima del AppBar (1000), la barra de abajo (1000), el drawer (11000) y el
   selector de aplicación (11500).
   ========================================================================== */
.wl-pal-fondo,
.wl-atajos-fondo {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: color-mix(in srgb, var(--kendo-color-app-surface) 55%, transparent);
    backdrop-filter: blur(6px);
    animation: wl-pal-fundido .15s ease-out both;
}

.wl-pal,
.wl-atajos-ayuda {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: 76vh;
    padding: 12px;
    border-radius: 16px;
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    box-shadow: var(--wl-shadow-lg), 0 0 0 1px var(--kendo-color-border);
    animation: wl-pal-entrar .2s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-pal-caja {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 5%, transparent);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border);
}
.wl-pal-caja:focus-within { box-shadow: inset 0 0 0 2px var(--kendo-color-primary); }
.wl-pal-caja .k-textbox,
.wl-pal-caja .k-textbox.k-focus {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    color: var(--kendo-color-on-app-surface);
}
html[data-theme="light"] .wl-pal-caja .k-textbox { background: transparent; }
.wl-pal-caja .k-input-inner { font-size: 16px; }
.wl-pal-caja .k-input-inner::placeholder { color: var(--kendo-color-subtle); }

.wl-pal kbd {
    padding: 1px 6px;
    border-radius: 5px;
    font: 600 11px Inter, sans-serif;
    color: var(--kendo-color-subtle);
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 8%, transparent);
    white-space: nowrap;
}

.wl-pal-lista {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
    margin-top: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wl-pal-grupo {
    margin: 8px 8px 2px;
    font-size: var(--kendo-font-size-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}
.wl-pal-bloque { display: flex; flex-direction: column; gap: 1px; }
.wl-pal-bloque:first-child .wl-pal-grupo { margin-top: 2px; }

.wl-pal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.wl-pal-item:hover,
.wl-pal-item.is-activo { background: color-mix(in srgb, var(--kendo-color-primary) 12%, transparent); }
.wl-pal-item:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: -2px; }
.wl-pal-item .wl-app-chip .k-svg-icon { margin: 0; }

.wl-pal-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* La respuesta (lote 2c): se lee sin abrir nada, así que va más grande y con fondo propio. */
.wl-pal-item.is-respuesta { padding: 10px; background: color-mix(in srgb, var(--kendo-color-primary) 7%, transparent); }
.wl-pal-item.is-respuesta .wl-pal-txt b { font-size: 15px; }
.wl-pal-item.is-respuesta .wl-pal-txt small { white-space: normal; }
.wl-pal-txt b { font-weight: 600; font-size: 13.5px; }
.wl-pal-txt small {
    overflow: hidden;
    font-size: 12px;
    color: var(--kendo-color-subtle);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.wl-pal-donde { flex: none; max-width: 40%; font-size: 12px; color: var(--kendo-color-subtle); text-align: right; }

.wl-pal-vacio { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; font-size: 13px; }
.wl-pal-vacio span { color: var(--kendo-color-subtle); }

.wl-pal-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    padding: 8px 4px 0;
    border-top: 1px solid var(--kendo-color-border);
    font-size: 12px;
    color: var(--kendo-color-subtle);
}
.wl-pal-pie kbd { margin-right: 2px; color: var(--kendo-color-on-app-surface); }

/* La ayuda de atajos (tecla ?, lote 2d): la misma ventana que la paleta, con filas «qué · teclas». */
.wl-atajos-ayuda { overflow-y: auto; }
.wl-atajos-ayuda kbd {
    padding: 1px 6px;
    border-radius: 5px;
    font: 600 11px Inter, sans-serif;
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 8%, transparent);
    white-space: nowrap;
}
.wl-atajos-titulo { margin: 2px 4px 2px; font-size: 16px; font-weight: 700; }
.wl-atajos-nota { margin: 0 4px 6px; font-size: 12px; color: var(--kendo-color-subtle); }
.wl-atajos-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
}
.wl-atajos-fila:nth-child(even) { background: color-mix(in srgb, var(--kendo-color-on-app-surface) 4%, transparent); }
.wl-atajos-fila > span:last-child { display: inline-flex; gap: 4px; flex: none; }
.wl-atajos-fila kbd { min-width: 22px; text-align: center; color: var(--kendo-color-on-app-surface); }
.wl-atajos-pie { display: flex; justify-content: flex-end; margin-top: 10px; }
.wl-atajos-sep { align-self: center; font-size: 11px; color: var(--kendo-color-subtle); }

@keyframes wl-pal-fundido { from { opacity: 0; } }
@keyframes wl-pal-entrar { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
    .wl-pal-fondo, .wl-pal, .wl-atajos-fondo, .wl-atajos-ayuda { animation: none !important; }
}

/* En el teléfono: pegada arriba y a lo ancho, sin pistas de teclado (no hay teclado físico). */
@media (max-width: 767.98px) {
    .wl-pal-fondo { padding: 8px; }
    .wl-pal { max-height: calc(100dvh - 16px); }
    .wl-pal-pie, .wl-pal-esc { display: none; }
    .wl-pal-donde { max-width: 34%; }
}

/* El foco lo marca la caja (.wl-buscador-caja:focus-within). El anillo de foco del tema en el
   input interior le ganaba al "box-shadow: none" de arriba y dibujaba una caja dentro de la caja. */
.wl-buscador .k-textbox.k-focus { box-shadow: none !important; }

/* ==========================================================================
   Datos Personales del portal (sep-2026): la ficha como texto en tarjetas, no como
   campos deshabilitados dentro de un PanelBar.
   ========================================================================== */
.wl-datos-quien {
    display: flex;
    flex-direction: row; /* .wl-portal-card es columna: sin esto el círculo quedaba encima del nombre */
    align-items: flex-start;
    gap: 20px;
}

.wl-datos-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--kendo-color-on-primary);
    background: linear-gradient(135deg, var(--kendo-color-primary), color-mix(in srgb, var(--kendo-color-primary) 55%, var(--wl-accent-gold)));
    box-shadow: var(--wl-shadow-sm);
}

.wl-datos-avatar-chico { width: 40px; height: 40px; font-size: 14px; }

.wl-datos-quien-texto { flex: 1; min-width: 0; }

.wl-datos-nombre {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.wl-datos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.wl-datos-hechos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin-top: 10px;
}

.wl-datos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.wl-datos-lista { margin: 0; }

.wl-datos-lista > div {
    display: grid;
    grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--kendo-color-border);
}

.wl-datos-lista > div:first-child { border-top: 0; padding-top: 0; }

.wl-datos-lista dt {
    font-weight: 500;
    font-size: 13px;
    color: var(--kendo-color-subtle);
}

.wl-datos-lista dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.wl-datos-lista dd.wl-portal-sutil { font-weight: 400; }

.wl-datos-familia {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.wl-datos-familiar {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--kendo-color-border);
    animation: wl-portal-entrar .45s cubic-bezier(.2, .7, .2, 1) both;
}

@media (max-width: 767.98px) {
    .wl-datos-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 600px) {
    .wl-datos-quien { gap: 14px; }
    .wl-datos-avatar { width: 52px; height: 52px; font-size: 18px; }
    .wl-datos-nombre { font-size: 19px; }
    .wl-datos-lista > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-datos-familiar { animation: none !important; }
}

/* ==========================================================================
   Mis Aprobaciones del portal (sep-2026): una tarjeta por solicitud que espera firma.
   ========================================================================== */
.wl-aprob { gap: 14px; }

.wl-aprob-quien {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wl-aprob-quien-texto { flex: 1; min-width: 0; }

.wl-aprob-que {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.wl-aprob-que:empty { display: none; }

.wl-aprob-motivo {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid var(--kendo-color-border);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 4%, transparent);
    font-size: 13.5px;
    font-style: italic;
    overflow-wrap: anywhere;
}

.wl-aprob-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wl-aprob-vacio {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

@media (max-width: 600px) {
    .wl-aprob-acciones .k-button { flex: 1 1 0; }
}

@media (max-width: 600px) {
    /* El círculo chico sigue chico: la regla del teléfono para el grande (52 px) le ganaba. */
    .wl-datos-avatar.wl-datos-avatar-chico { width: 40px; height: 40px; font-size: 14px; }

    /* La pastilla de "espera" baja debajo del nombre en vez de apretarlo a dos renglones. */
    .wl-aprob > .wl-aprob-quien { flex-wrap: wrap; }
    .wl-aprob > .wl-aprob-quien .wl-portal-pill { margin-left: 52px; }
    .wl-aprob > .wl-aprob-quien .wl-aprob-quien-texto { flex-basis: calc(100% - 52px); }
}

/* ==========================================================================
   Mi Equipo del portal (sep-2026). La semana de ausencias con colores del TEMA: antes eran
   hex fijos en el código (#4f8ef7, #e8b93e, #a9c8fb) que no seguían el modo oscuro.
   Azul = vacaciones; azul pálido = aprobada sin cargar (la misma ausencia, aún sin
   registrar); ámbar = cualquier otra ausencia.
   ========================================================================== */
.wl-portal-pill-vac {
    background: color-mix(in srgb, var(--kendo-color-primary) 16%, transparent);
    color: var(--kendo-color-primary);
}

.wl-eq-foto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
}

.wl-eq-cifras { display: flex; gap: 32px; }
.wl-eq-alerta { color: var(--kendo-color-warning-on-subtle, var(--kendo-color-warning)); }
.wl-eq-firma { color: var(--kendo-color-primary); }

.wl-eq-firmas,
.wl-eq-gente {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl-eq-firmas li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--kendo-color-border);
}

.wl-eq-firmas li:first-child { border-top: 0; padding-top: 0; }

.wl-eq-semana {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: auto;
}

.wl-eq-fila {
    display: grid;
    grid-template-columns: minmax(120px, 13rem) repeat(7, minmax(34px, 1fr));
    align-items: center;
    gap: 4px;
    min-width: 420px;
}

.wl-eq-fila-cabeza span {
    font-size: 11.5px;
    text-align: center;
    color: var(--kendo-color-subtle);
}

.wl-eq-fila-cabeza .wl-eq-hoy { color: var(--kendo-color-primary); font-weight: 700; }

.wl-eq-persona {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-eq-dia {
    display: inline-block;
    height: 22px;
    border-radius: 6px;
}

.wl-eq-trabaja { background: color-mix(in srgb, var(--kendo-color-on-app-surface) 9%, transparent); }
.wl-eq-finde { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kendo-color-on-app-surface) 10%, transparent); }
.wl-eq-vacaciones { background: var(--kendo-color-primary); }
/* Rayada: la MISMA vacación, todavía sin registrar. Un azul pálido liso se confundía con un día
   de trabajo en el tema claro (el primario es azul marino). */
.wl-eq-programada {
    background: repeating-linear-gradient(135deg,
        var(--kendo-color-primary) 0 4px,
        color-mix(in srgb, var(--kendo-color-primary) 30%, transparent) 4px 8px);
}
.wl-eq-otra { background: var(--kendo-color-warning); }

.wl-eq-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--kendo-color-subtle);
}

.wl-eq-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.wl-eq-leyenda .wl-eq-dia { width: 14px; height: 14px; border-radius: 4px; }

.wl-eq-gente {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.wl-eq-miembro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--kendo-color-border);
    animation: wl-portal-entrar .45s cubic-bezier(.2, .7, .2, 1) both;
}

/* Teléfono: los 7 días tienen que caber sin desplazar (a 390 px "hoy" quedaba cortado). */
@media (max-width: 600px) {
    .wl-eq-fila {
        grid-template-columns: minmax(64px, 5.5rem) repeat(7, minmax(24px, 1fr));
        gap: 3px;
        min-width: 0;
    }
    .wl-eq-fila-cabeza span { font-size: 10px; line-height: 1.15; }
    .wl-eq-persona { font-size: 12px; }
    .wl-eq-foto { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-eq-miembro { animation: none !important; }
}

/* ==========================================================================
   Mis Activos del portal (sep-2026): un equipo por tarjeta.
   ========================================================================== */
.wl-act-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.wl-act-equipo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--kendo-color-border);
    animation: wl-portal-entrar .45s cubic-bezier(.2, .7, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .wl-act-equipo { animation: none !important; }
}

@media (max-width: 600px) {
    /* Listas con botón al final (devueltos de Mis Activos): el botón baja de renglón en vez de
       apretar el texto a una columna de dos palabras. */
    .wl-eq-firmas li { flex-wrap: wrap; }
    .wl-eq-firmas li > .wl-aprob-quien-texto { flex-basis: calc(100% - 56px); }
    .wl-eq-firmas li > .k-button { margin-left: 44px; }
}

/* Aviso de empresa del portal (WlAvisoEmpresaPortal): va arriba de la página, fuera de .wl-portal,
   así que toma su mismo ancho para alinear con las tarjetas. */
.wl-portal-aviso-empresa {
    max-width: 1180px;
    margin: 8px auto -4px;
}

/* ---------- Mis Activos: cuánto lleva, línea de tiempo y credencial con QR ---------- */
.wl-act-lleva {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kendo-color-primary);
}

.wl-act-linea { display: flex; flex-direction: column; gap: 8px; }

.wl-act-fila {
    display: grid;
    grid-template-columns: minmax(120px, 15rem) 1fr;
    align-items: center;
    gap: 12px;
}

.wl-act-nombre {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
}

/* El ícono no se encoge (se veía un "‹" o nada) y el texto es el que se corta con "…". */
.wl-act-nombre .k-svg-icon { flex: none; }

.wl-act-nombre-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-act-pista {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: var(--wl-portal-pista, color-mix(in srgb, var(--kendo-color-on-app-surface) 12%, transparent));
}

/* Dónde empieza y cuánto ocupa vienen en --wl-act-ini / --wl-act-ancho (datos, no estilo). */
.wl-act-tramo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--wl-act-ini, 0%);
    width: var(--wl-act-ancho, 0%);
    border-radius: 999px;
    background: var(--kendo-color-primary);
    transform-origin: left center;
    animation: wl-act-crecer .6s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-act-tramo-devuelto { background: color-mix(in srgb, var(--kendo-color-success) 70%, transparent); }

.wl-act-eje .wl-act-eje-marcas {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--kendo-color-subtle);
}

.wl-act-muestra {
    display: inline-block;
    width: 14px;
    height: 8px;
    border-radius: 999px;
    background: var(--kendo-color-primary);
}

/* La muestra de "Ya devuelto" en verde, como su barra: la regla de arriba le ganaba. */
.wl-act-muestra.wl-act-tramo-devuelto { background: color-mix(in srgb, var(--kendo-color-success) 70%, transparent); }

@keyframes wl-act-crecer {
    from { transform: scaleX(0); }
}

.wl-act-credencial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--kendo-color-border);
    background: var(--kendo-color-surface);
    text-align: center;
}

.wl-act-credencial-empresa {
    align-self: stretch;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kendo-color-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

.wl-act-credencial-equipo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

/* El blanco y negro del QR van como parámetros del componente (los necesita el lector, en los
   dos temas); aquí solo la forma. */
.wl-act-qr {
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

@media (max-width: 600px) {
    .wl-act-fila { grid-template-columns: minmax(80px, 7rem) 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-act-tramo { animation: none !important; }
}

/* 🔴 Code review 26-sep: .wl-portal-pill-neutra está escrita ANTES que .wl-portal-pill (misma
   especificidad), así que la base le ganaba y todas las pastillas "grises" salían azules (Serial,
   edades, "Terminado"…). Con las dos clases juntas gana la variante. */
.wl-portal-pill.wl-portal-pill-neutra {
    background: var(--wl-portal-pista, color-mix(in srgb, var(--kendo-color-on-app-surface) 13%, transparent));
    color: var(--kendo-color-subtle);
}

/* ==========================================================================
   Mi Dotación del portal (sep-2026): "su probador". Las prendas son siluetas propias
   (WlPrenda, trazo en currentColor: el set de Telerik no trae ropa); las tallas, botones
   para tocar; lo recibido, una línea de tiempo por entrega.
   ========================================================================== */
svg.wl-prenda {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wl-portal-chip svg.wl-prenda { width: 18px; height: 18px; }

.wl-dot-avance {
    display: flex;
    align-items: center;
    gap: 16px 20px;
    margin-bottom: 18px;
}

/* El texto se acomoda al lado del anillo en vez de bajar y arrastrarlo. */
.wl-dot-avance > div:last-child { flex: 1; min-width: 0; }

.wl-dot-probador {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.wl-dot-prenda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--kendo-color-border);
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--kendo-color-primary) 7%, transparent), transparent 70%),
        var(--kendo-color-surface);
    text-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    animation: wl-portal-entrar .45s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-dot-prenda:hover { transform: translateY(-3px); box-shadow: var(--wl-shadow-md); }

/* Lo que falta por declarar se ve de lejos: borde ámbar punteado. */
.wl-dot-prenda.wl-dot-falta {
    border: 1.5px dashed color-mix(in srgb, var(--kendo-color-warning) 70%, transparent);
    background:
        radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--kendo-color-warning) 10%, transparent), transparent 70%),
        var(--kendo-color-surface);
}

.wl-dot-figura {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 12px;
    border-radius: 50%;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 10%, transparent);
    transform-origin: 50% 10%;
}

/* Oscuro es el tema por defecto: ahí el ámbar de verdad (warning-on-subtle es un gris claro y lo
   que falta no se distinguía). En claro, el ámbar oscuro para que tenga contraste sobre blanco. */
.wl-dot-falta .wl-dot-figura {
    color: var(--kendo-color-warning);
    background: color-mix(in srgb, var(--kendo-color-warning) 14%, transparent);
}

html[data-theme="light"] .wl-dot-falta .wl-dot-figura {
    color: var(--kendo-color-warning-on-subtle, var(--kendo-color-warning));
}

/* La prenda "se mece" en su percha al pasar el mouse. */
.wl-dot-prenda:hover .wl-dot-figura { animation: wl-dot-percha .9s ease-in-out; }

.wl-dot-nombre { font-weight: 700; font-size: 14px; }

.wl-dot-tallas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.wl-dot-tallas-numero {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
}

.k-button.wl-dot-talla {
    min-width: 40px;
    height: 34px;
    padding: 0 8px;
    /* !important: el FillMode Flat de Telerik fuerza "background: none !important" y el botón
       quedaba como texto suelto, sin borde ni fondo. */
    border: 1px solid var(--kendo-color-border) !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface) !important;
    transition: transform .15s, border-color .15s, background-color .15s, color .15s;
}

/* El velo gris del botón flat de Telerik taparía el color de la talla elegida. */
.k-button.wl-dot-talla::before,
.k-button.wl-dot-talla::after { display: none !important; }

.k-button.wl-dot-talla:hover { border-color: var(--kendo-color-primary) !important; transform: translateY(-1px); }
.k-button.wl-dot-talla:active { transform: scale(.94); }

.k-button.wl-dot-talla.wl-dot-talla-elegida {
    border-color: var(--kendo-color-primary) !important;
    background: var(--kendo-color-primary) !important;
    color: var(--kendo-color-on-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--kendo-color-primary) 35%, transparent);
    animation: wl-dot-pop .3s cubic-bezier(.2, .7, .2, 1);
}

/* Recién guardada: anillo verde que se apaga. Dos clases con el mismo dibujo y distinto nombre de
   animación: al guardar otra vez se alterna, y el navegador solo repite una animación si cambia
   su nombre (antes se cambiaba la @key y la tarjeta se recreaba entera). */
.wl-dot-prenda.wl-dot-guardada-a,
.wl-dot-prenda.wl-dot-guardada-b { border-color: var(--kendo-color-success); }
.wl-dot-prenda.wl-dot-guardada-a { animation: wl-dot-guardada-a 1.4s ease-out; }
.wl-dot-prenda.wl-dot-guardada-b { animation: wl-dot-guardada-b 1.4s ease-out; }

.k-button.wl-dot-quitar {
    height: auto;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--kendo-color-subtle);
}

.k-button.wl-dot-quitar:hover { color: var(--kendo-color-error); }

.wl-dot-entregas {
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
    position: relative;
}

.wl-dot-entregas::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--kendo-color-border);
}

.wl-dot-entrega { position: relative; padding-bottom: 16px; }
.wl-dot-entrega:last-child { padding-bottom: 0; }

.wl-dot-entrega::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--kendo-color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kendo-color-primary) 18%, transparent);
}

.wl-dot-entrega-fecha { font-weight: 700; margin-bottom: 6px; }

.wl-dot-entrega-prendas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl-dot-entrega-prendas li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.wl-dot-mini {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 9px;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 10%, transparent);
}

@keyframes wl-dot-percha {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-6deg); }
    65% { transform: rotate(4deg); }
}

@keyframes wl-dot-pop {
    from { transform: scale(.8); }
}

@keyframes wl-dot-guardada-a {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kendo-color-success) 45%, transparent); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 14px transparent; transform: scale(1); }
}

@keyframes wl-dot-guardada-b {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kendo-color-success) 45%, transparent); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 14px transparent; transform: scale(1); }
}

@media (max-width: 600px) {
    .wl-dot-probador { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .wl-dot-prenda,
    .wl-dot-prenda:hover .wl-dot-figura,
    .k-button.wl-dot-talla.wl-dot-talla-elegida,
    .wl-dot-prenda.wl-dot-guardada-a,
    .wl-dot-prenda.wl-dot-guardada-b { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Capacitación del portal (sep-2026): "su formación" como línea de tiempo por año. El punto de
   cada curso dice su estado: verde con check = completado, azul que late = en curso, gris
   tachado = cancelado.
   ========================================================================== */
.wl-cap-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
}

.wl-cap-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.wl-cap-vacio-icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 20px;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 12%, transparent);
}

.wl-cap-vacio-icono .k-svg-icon { width: 32px; height: 32px; }

.wl-cap-anios { display: flex; flex-direction: column; gap: 24px; }

.wl-cap-anio-titulo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.wl-cap-cursos {
    list-style: none;
    margin: 0;
    padding: 0 0 0 34px;
    position: relative;
}

.wl-cap-cursos::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(var(--kendo-color-primary), var(--kendo-color-border));
}

.wl-cap-curso { position: relative; padding-bottom: 14px; }
.wl-cap-curso:last-child { padding-bottom: 0; }

.wl-cap-punto {
    position: absolute;
    left: -34px;
    top: 10px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
    box-shadow: 0 0 0 4px var(--kendo-color-surface);
}

.wl-cap-punto .k-svg-icon { width: 14px; height: 14px; }

.wl-cap-completado .wl-cap-punto { background: var(--kendo-color-success); color: var(--kendo-color-on-primary); }
.wl-cap-cancelado .wl-cap-punto { background: var(--kendo-color-border); color: var(--kendo-color-subtle); }
.wl-cap-encurso .wl-cap-punto { animation: wl-cap-late 2.4s ease-out infinite; }

.wl-cap-curso-cuerpo {
    padding: 12px 14px;
    border: 1px solid var(--kendo-color-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 2%, transparent);
    transition: border-color .15s, transform .15s;
}

.wl-cap-curso-cuerpo:hover { border-color: var(--kendo-color-primary); transform: translateX(2px); }
.wl-cap-cancelado .wl-cap-curso-cuerpo { opacity: .7; }
.wl-cap-cancelado .wl-cap-curso-cabeza .wl-portal-fuerte { text-decoration: line-through; }

.wl-cap-curso-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    overflow-wrap: anywhere;
}

.wl-cap-acciones { display: flex; flex-shrink: 0; margin: -6px -8px 0 0; }
.k-button.wl-cap-accion { color: var(--kendo-color-subtle); }
.k-button.wl-cap-accion:hover { color: var(--kendo-color-primary); }
.k-button.wl-cap-borrar:hover { color: var(--kendo-color-error); }
.k-button.wl-cap-terminar { margin-top: 8px; }

.wl-cap-curso .wl-aprob-motivo { margin-top: 6px; }

@keyframes wl-cap-late {
    0% { box-shadow: 0 0 0 4px var(--kendo-color-surface), 0 0 0 4px color-mix(in srgb, var(--kendo-color-primary) 45%, transparent); }
    100% { box-shadow: 0 0 0 4px var(--kendo-color-surface), 0 0 0 14px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-cap-encurso .wl-cap-punto,
    .wl-cap-curso-cuerpo { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Directorio del portal (sep-2026): "¿A quién busca?" con el buscador en el hero, los
   aniversarios de servicio del mes al lado y las personas como tarjetas. Cada persona tiene
   uno de 6 tonos para su círculo de iniciales (siempre el mismo: DirectorioPortal.Tono).
   ========================================================================== */
.wl-dir-hero { align-items: stretch; }
.wl-dir-hero-texto { flex: 1 1 360px; min-width: 0; }
.wl-dir-buscador { max-width: 560px; margin-top: 14px; }
.wl-dir-buscador .wl-buscador-caja { padding: 6px 14px; }
.wl-dir-buscador .k-textbox .k-input-inner { font-size: 16px; }

.wl-dir-aniv { flex: 0 1 300px; gap: 8px; }

/* Con .wl-portal-pago delante: .wl-portal-pago small (0,1,1) le ganaba y el título salía gris. */
.wl-portal-pago .wl-dir-aniv-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--wl-accent-gold);
}

.wl-dir-aniv-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl-dir-aniv-lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}

.wl-dir-aniv-quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-dir-aniv-anios { font-weight: 800; color: var(--wl-accent-gold); white-space: nowrap; }

.wl-dir-aniv-dia {
    min-width: 28px;
    padding: 1px 6px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--kendo-color-on-primary) 12%, transparent);
}

.wl-dir-aniv-hoy .wl-dir-aniv-dia {
    font-weight: 800;
    color: var(--wl-hero-to);
    background: var(--wl-accent-gold);
    animation: wl-dir-brillo 2.4s ease-in-out infinite;
}

/* ---- Círculo de iniciales con tono ---- */
.wl-dir-avatar {
    --wl-dir-tono: var(--kendo-color-primary);
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--kendo-color-on-primary);
    background: linear-gradient(135deg, var(--wl-dir-tono), color-mix(in srgb, var(--wl-dir-tono) 55%, var(--kendo-color-primary)));
    box-shadow: var(--wl-shadow-sm);
}

.wl-dir-avatar-mini { width: 26px; height: 26px; font-size: 10.5px; box-shadow: none; }

/* 🔴 Code review 26-sep: tertiary y el dorado son el MISMO color en tema claro (salían 5 tonos),
   y el blanco sobre dorado (y sobre el verde claro del tema oscuro) no se leía: esos llevan
   letra oscura y su degradado se oscurece poco. */
.wl-dir-tono-0 { --wl-dir-tono: var(--kendo-color-primary); }
.wl-dir-tono-1 { --wl-dir-tono: var(--kendo-color-success); }
.wl-dir-tono-2 { --wl-dir-tono: var(--kendo-color-info); }
.wl-dir-tono-3 { --wl-dir-tono: var(--kendo-color-secondary); }
.wl-dir-tono-4 { --wl-dir-tono: var(--wl-accent-gold); }
.wl-dir-tono-5 { --wl-dir-tono: var(--kendo-color-error); }

.wl-dir-avatar.wl-dir-tono-4,
.wl-dir-avatar.wl-dir-tono-1 {
    color: var(--kendo-color-dark);
    background: linear-gradient(135deg, var(--wl-dir-tono), color-mix(in srgb, var(--wl-dir-tono) 82%, var(--kendo-color-dark)));
}

/* En tema claro el verde es oscuro (#2E7D32): ahí vuelve la letra blanca. */
html[data-theme="light"] .wl-dir-avatar.wl-dir-tono-1 {
    color: var(--kendo-color-on-primary);
    background: linear-gradient(135deg, var(--wl-dir-tono), color-mix(in srgb, var(--wl-dir-tono) 55%, var(--kendo-color-primary)));
}

/* ---- Filtros ---- */
/* La tarjeta del portal es columna: sin flex-direction: row, el flex-basis de las listas se
   volvía ALTURA y cada filtro medía 120 px de alto. */
.wl-portal-card.wl-dir-filtros {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wl-dir-filtros-listas {
    flex: 1 1 420px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.wl-dir-conteo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 0 4px;
}

/* ---- Tarjetas ---- */
.wl-dir-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.wl-dir-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--kendo-color-border);
    border-radius: 16px;
    background: var(--card-gradient, var(--kendo-color-surface));
    box-shadow: var(--wl-shadow-sm);
    transition: transform .18s, border-color .18s, box-shadow .18s;
    animation: wl-portal-entrar .35s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-dir-tarjeta:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--kendo-color-primary) 55%, var(--kendo-color-border));
    box-shadow: var(--wl-shadow-md);
}

.wl-dir-tarjeta:hover .wl-dir-avatar { transform: scale(1.06) rotate(-3deg); }
.wl-dir-avatar { transition: transform .2s; }

.wl-dir-usted {
    border-color: var(--wl-accent-gold);
    box-shadow: 0 0 0 1px var(--wl-accent-gold), var(--wl-shadow-sm);
}

.wl-dir-cabeza { display: flex; align-items: center; gap: 12px; }
.wl-dir-quien { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.wl-dir-donde {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 13px;
}

.wl-dir-donde .wl-portal-pill .k-svg-icon { width: 12px; height: 12px; }

.k-button.wl-dir-area {
    height: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 10%, transparent) !important;
}

.k-button.wl-dir-area:hover { background: color-mix(in srgb, var(--kendo-color-primary) 20%, transparent) !important; }

.wl-dir-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--kendo-color-border);
    font-size: 12.5px;
}

.wl-dir-contacto { display: flex; gap: 6px; flex-shrink: 0; }

.wl-dir-boton {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 10%, transparent);
    transition: background .15s, color .15s, transform .15s;
}

.wl-dir-boton:hover,
.wl-dir-boton:focus-visible {
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
    transform: scale(1.08);
}

.wl-dir-mas { display: flex; justify-content: center; }

/* ---- Recién llegados y vacío ---- */
.wl-dir-nuevos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.wl-dir-nuevo { display: flex; align-items: center; gap: 12px; }

.wl-dir-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.wl-dir-vacio-icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 20px;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 12%, transparent);
}

.wl-dir-vacio-icono .k-svg-icon { width: 30px; height: 30px; }

@keyframes wl-dir-brillo {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wl-accent-gold) 50%, transparent); }
    50% { box-shadow: 0 0 0 5px transparent; }
}

@media (max-width: 600px) {
    .wl-dir-aniv { flex-basis: 100%; }
    .wl-dir-vista { width: 100%; }
    .wl-dir-vista .k-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-dir-tarjeta,
    .wl-dir-avatar,
    .wl-dir-aniv-hoy .wl-dir-aniv-dia { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Mi Expediente del portal (sep-2026): reconocimientos, notas y llamados de atención en la
   línea de tiempo de Capacitación (.wl-cap-*). Las cifras del resumen también filtran.
   El reconocimiento brilla en dorado; el llamado de atención va en ámbar, sin rojo.
   ========================================================================== */
.wl-exp-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

/* TelerikButton Flat fuerza background:none !important: el fondo de la cifra también. */
.k-button.wl-exp-cifra {
    --wl-exp-tono: var(--kendo-color-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    height: auto;
    padding: 12px 14px;
    border: 1px solid var(--kendo-color-border) !important;
    border-radius: 14px;
    text-align: left;
    background: color-mix(in srgb, var(--wl-exp-tono) 7%, transparent) !important;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.k-button.wl-exp-cifra::before,
.k-button.wl-exp-cifra::after { display: none !important; }

.k-button.wl-exp-cifra .k-button-text { display: contents; }
.k-button.wl-exp-cifra .k-svg-icon { align-self: flex-start; margin: 0 0 4px; color: var(--wl-exp-tono); }
.k-button.wl-exp-cifra:hover { transform: translateY(-2px); border-color: var(--wl-exp-tono) !important; }

.k-button.wl-exp-cifra.wl-exp-cifra-elegida {
    border-color: var(--wl-exp-tono) !important;
    box-shadow: 0 0 0 1px var(--wl-exp-tono), 0 6px 16px color-mix(in srgb, var(--wl-exp-tono) 22%, transparent);
}

.wl-exp-cifra-valor {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.wl-exp-cifra-texto { font-size: 12.5px; color: var(--kendo-color-subtle); }

.k-button.wl-exp-cifra-oro { --wl-exp-tono: var(--wl-accent-gold); }
.k-button.wl-exp-cifra-nota { --wl-exp-tono: var(--kendo-color-info); }
.k-button.wl-exp-cifra-llamado { --wl-exp-tono: var(--kendo-color-warning); }

/* Los puntos de la línea de tiempo según el tipo. */
.wl-exp-reconocimiento .wl-cap-punto {
    color: var(--kendo-color-dark);
    background: var(--wl-accent-gold);
    animation: wl-exp-brillo 3s ease-in-out infinite;
}
.wl-exp-nota .wl-cap-punto { background: var(--kendo-color-info); }
.wl-exp-llamado .wl-cap-punto { color: var(--kendo-color-dark); background: var(--kendo-color-warning); }

.wl-exp-reconocimiento .wl-cap-curso-cuerpo {
    border-color: color-mix(in srgb, var(--wl-accent-gold) 55%, var(--kendo-color-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--wl-accent-gold) 10%, transparent), transparent 60%);
}

.wl-exp-llamado .wl-cap-curso-cuerpo {
    border-left: 3px solid var(--kendo-color-warning);
}

.wl-exp-cabeza { margin: 0 0 4px; align-items: center; }

.wl-exp-detalle {
    margin: 6px 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.wl-exp-firma { margin-top: 6px; font-style: italic; }

@keyframes wl-exp-brillo {
    0%, 100% { box-shadow: 0 0 0 4px var(--kendo-color-surface), 0 0 0 4px color-mix(in srgb, var(--wl-accent-gold) 40%, transparent); }
    50% { box-shadow: 0 0 0 4px var(--kendo-color-surface), 0 0 0 10px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .wl-exp-reconocimiento .wl-cap-punto,
    .k-button.wl-exp-cifra { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Constancias del portal (sep-2026): los documentos como tarjetas que se eligen, el
   resultado con el código de verificación grande, y «Mis constancias» (lo ya emitido).
   ========================================================================== */
.wl-const-paso {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
}

.wl-const-docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

/* TelerikButton Flat fuerza background:none !important: la tarjeta también. */
.k-button.wl-const-doc {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    padding: 14px;
    border: 1px solid var(--kendo-color-border) !important;
    border-radius: 16px;
    text-align: left;
    white-space: normal;
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 2%, transparent) !important;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.k-button.wl-const-doc::before,
.k-button.wl-const-doc::after { display: none !important; }

.k-button.wl-const-doc .k-button-text { display: contents; }
.k-button.wl-const-doc:hover { transform: translateY(-2px); border-color: var(--wl-accent-gold) !important; }

.k-button.wl-const-doc.wl-const-doc-elegido {
    border-color: var(--wl-accent-gold) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--wl-accent-gold) 14%, transparent), transparent 70%) !important;
    box-shadow: 0 0 0 1px var(--wl-accent-gold), 0 8px 20px color-mix(in srgb, var(--wl-accent-gold) 20%, transparent);
}

.wl-const-doc-icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--kendo-color-dark);
    background: linear-gradient(135deg, var(--wl-accent-gold), color-mix(in srgb, var(--wl-accent-gold) 75%, var(--kendo-color-dark)));
}

.wl-const-doc-icono .k-svg-icon { width: 22px; height: 22px; }
.wl-const-doc-icono-chico { width: 34px; height: 34px; border-radius: 10px; }
.wl-const-doc-icono-chico .k-svg-icon { width: 17px; height: 17px; }

.wl-const-doc-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wl-const-doc-texto .wl-portal-pill { align-self: flex-start; }

.wl-const-doc-marca {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--kendo-color-dark);
    background: var(--wl-accent-gold);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
}

.wl-const-doc-marca .k-svg-icon { width: 13px; height: 13px; }
.wl-const-doc-elegido .wl-const-doc-marca { opacity: 1; transform: scale(1); }

.k-button.wl-const-sugerencia {
    height: auto;
    padding: 4px 12px;
    border: 1px solid var(--kendo-color-border) !important;
    border-radius: 999px;
    font-size: 13px;
    background: color-mix(in srgb, var(--kendo-color-primary) 6%, transparent) !important;
}

.k-button.wl-const-sugerencia:hover { border-color: var(--kendo-color-primary) !important; }

.wl-const-accion { display: flex; justify-content: flex-end; margin-top: 16px; }

.wl-const-listo {
    border-color: color-mix(in srgb, var(--kendo-color-success) 55%, var(--kendo-color-border));
    animation: wl-portal-entrar .4s cubic-bezier(.2, .7, .2, 1) both;
}

.wl-const-listo.wl-const-tramite { border-color: color-mix(in srgb, var(--kendo-color-warning) 55%, var(--kendo-color-border)); }

.wl-const-listo-icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--kendo-color-success);
    background: color-mix(in srgb, var(--kendo-color-success) 14%, transparent);
}

.wl-const-listo-icono .k-svg-icon { width: 26px; height: 26px; }
.wl-const-tramite .wl-const-listo-icono { color: var(--kendo-color-warning); background: color-mix(in srgb, var(--kendo-color-warning) 14%, transparent); }

.wl-const-codigo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px dashed var(--kendo-color-border);
    border-radius: 12px;
}

.wl-const-codigo-valor {
    flex: 1;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wl-const-codigo-chico { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }

.wl-const-historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.wl-const-historial li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--kendo-color-border);
}

.wl-const-historial li:last-child { border-bottom: 0; }
.wl-const-historial-texto { flex: 1; min-width: 0; }
.wl-const-anulada { opacity: .6; }
.wl-const-anulada .wl-portal-fuerte { text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
    .k-button.wl-const-doc,
    .wl-const-doc-marca,
    .wl-const-listo { animation: none !important; transition: none !important; }
}

.wl-const-historial li { flex-wrap: wrap; }
.wl-const-error-fila {
    flex-basis: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--kendo-color-error);
    background: color-mix(in srgb, var(--kendo-color-error) 10%, transparent);
}

/* ==========================================================================
   SHELL UX (shell/ux, sep-2026) · MENÚ POR APLICACIÓN Y SELECTOR DE LA BARRA
   El drawer muestra la aplicación abierta; el selector de la barra cambia de
   aplicación. Solo tokens del tema. OJO: prefijo wl-nav y NO wl-menu-: la regla heredada
   [class*="menu-"] (MENU LAYOUTS, arriba) pega margen, columna en el teléfono y display:none
   al imprimir a cualquier clase que contenga «menu-». Borrar esta sección = vuelve el look viejo
   de los ítems, no el árbol (ese lo arma DrawerLayout).
   ========================================================================== */

/* El color de cada grupo del selector (el chip del ícono). */
.wl-app-chip {
    --wl-app-color: var(--kendo-color-subtle);
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    color: var(--wl-app-color);
    background: color-mix(in srgb, var(--wl-app-color) 18%, transparent);
}
.wl-app-chip[data-grupo="Finanzas"] { --wl-app-color: var(--kendo-color-primary); }
.wl-app-chip[data-grupo="Operaciones"] { --wl-app-color: var(--kendo-color-success); }
.wl-app-chip[data-grupo="Personas"] { --wl-app-color: var(--wl-accent-gold); }
.wl-app-chip .k-svg-icon { margin: 0 !important; opacity: 1 !important; color: inherit !important; }

/* Botón de la aplicación abierta en la barra (sobre el azul de la AppBar). */
.k-button.wl-app-actual {
    gap: 8px;
    font-weight: 700;
    white-space: nowrap;
    color: inherit;
}
.k-appbar .wl-app-chip { color: inherit; background: rgba(255, 255, 255, .14); }
.wl-app-actual-flecha { opacity: .65; }

/* La lupa de la barra: abre la paleta Ctrl+K (shell/ux lote 2a). En el teléfono, solo la lupa. */
.wl-buscar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 10px;
    color: inherit;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font: inherit;
    font-size: var(--kendo-font-size-sm);
    cursor: pointer;
    white-space: nowrap;
}
.wl-buscar-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.wl-buscar-btn:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; }
.wl-buscar-btn .k-svg-icon { margin: 0; }
.wl-buscar-txt { opacity: .85; }
.wl-buscar-kbd {
    padding: 1px 6px;
    border-radius: 5px;
    font: 600 11px Inter, sans-serif;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
@media (max-width: 1199.98px) {
    .wl-buscar-txt, .wl-buscar-kbd { display: none; }
    .wl-buscar-btn { width: 36px; padding: 0; justify-content: center; border-radius: var(--kendo-border-radius-full); }
}

/* Cabecera y filtro del menú */
.wl-nav { display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.wl-nav-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px 4px;
    font-weight: 750;
    font-size: var(--kendo-font-size-md, 14px);
    color: var(--kendo-color-on-app-surface);
}
/* El botón «Aplicaciones» (oct-2026) le quita ancho al nombre: en vez de cortarlo con «…»
   («Gestión de C…»), el nombre usa hasta dos líneas. */
.wl-nav-app-nombre {
    flex: 1; min-width: 0; line-height: 1.2; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.k-button.wl-nav-cambiar { flex: none; }
.k-button.wl-nav-cambiar { color: inherit; }
.wl-nav-filtro { margin-bottom: 4px; }
.wl-nav .k-drawer-items { margin: 0; }
.wl-nav-cuenta {
    font-size: var(--kendo-font-size-xs);
    opacity: .6;
    margin-right: 2px;
    font-variant-numeric: tabular-nums;
}
.wl-nav-flecha { display: inline-grid; place-items: center; border-radius: 6px; padding: 2px; }
.wl-nav-flecha:hover { background: var(--kendo-color-base-subtle); }
.wl-nav-flecha .k-svg-icon { margin: 0 !important; }
.wl-nav-detalle {
    margin-left: auto;
    padding-left: 8px;
    font-size: var(--kendo-font-size-xs);
    opacity: .6;
    white-space: nowrap;
    /* El nombre de la pantalla manda: la aplicación se recorta primero. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-nav-vacio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    font-size: var(--kendo-font-size-sm);
    color: var(--kendo-color-subtle);
    list-style: none;
}
.wl-nav-seccion {
    list-style: none;
    padding: 8px 12px 4px;
    font-size: var(--kendo-font-size-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}
.wl-nav-pie { margin-top: auto !important; padding-top: 6px; border-top: 1px solid var(--kendo-color-border); }
.wl-nav-version { padding: 4px 12px 2px; font-size: var(--kendo-font-size-xs); color: var(--kendo-color-subtle); opacity: .7; }

/* Secciones plegables, pasos numerados e insignias (nomina/menu, sep-2026). Los neutros salen de
   currentColor: el menú es oscuro en los dos temas (azul marino en el claro) y así no hay que
   repetir cada regla para el claro. Los estados usan los mismos colores que los pasos de la cinta. */
.wl-nav-grupo { list-style: none; }
.wl-nav-grupo > button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px 4px;
    border: 0;
    background: none;
    color: var(--kendo-color-subtle);
    font: inherit;
    font-size: var(--kendo-font-size-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.wl-nav-grupo > button:hover { color: var(--kendo-color-on-app-surface); }
.wl-nav-grupo > button:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: -2px; border-radius: 6px; }
.wl-nav-grupo > button > .k-svg-icon { margin: 0 !important; flex: none; transition: transform .15s; }
.wl-nav-grupo.is-cerrada > button > .k-svg-icon { transform: rotate(-90deg); }
.wl-nav-grupo-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-nav-grupo .wl-nav-cuenta { letter-spacing: 0; }
html[data-theme="light"] .wl-nav-grupo > button { color: var(--wl-sidebar-header-text); }
html[data-theme="light"] .wl-nav-grupo > button:hover { color: var(--wl-sidebar-text-active); }

.wl-nav-paso {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
.wl-nav-paso .k-svg-icon { margin: 0 !important; opacity: 1 !important; color: inherit !important; }
.wl-nav-paso.is-hecho { color: var(--kendo-color-success); background: color-mix(in srgb, var(--kendo-color-success) 24%, transparent); }
.wl-nav-paso.is-sigue { color: var(--kendo-color-on-primary); background: var(--kendo-color-primary); }
/* Ámbar y además rayado: se distingue del hecho sin depender del color (como en la cinta). */
.wl-nav-paso.is-viejo {
    color: var(--kendo-color-warning);
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--kendo-color-warning) 28%, transparent) 0 3px,
        transparent 3px 6px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kendo-color-warning) 60%, transparent);
}
.wl-nav-paso.is-opcional { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.wl-nav-paso.is-error { color: var(--kendo-color-on-primary); background: var(--kendo-color-error); }

.wl-nav-insignia {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
}
.wl-nav-insignia.is-aviso { color: var(--kendo-color-on-warning, var(--kendo-color-dark)); background: var(--kendo-color-warning); }
.wl-nav-insignia.is-error { color: var(--kendo-color-on-primary); background: var(--kendo-color-error); }
.wl-nav-insignia + .wl-nav-estrella { margin-left: 4px; }
.wl-riel-seccion,
.wl-riel-opcion { position: relative; }
.wl-riel-punto {
    position: absolute;
    top: 6px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kendo-color-primary);
    box-shadow: 0 0 0 2px var(--wl-sidebar-bg, var(--kendo-color-app-surface));
}
.wl-riel-punto.is-aviso { background: var(--kendo-color-warning); }
.wl-riel-punto.is-error { background: var(--kendo-color-error); }

/* Barra de íconos (MiniMode en escritorio) */
.wl-nav-riel { padding: 8px 0; }
.wl-nav-riel .k-drawer-item { justify-content: center; padding: 9px 0 !important; border-left-width: 0 !important; }
.wl-nav-riel .k-drawer-item .k-svg-icon { margin: 0 !important; }
.wl-riel-app { margin-bottom: 4px; }
.wl-riel-sep { list-style: none; height: 1px; margin: 8px 8px; background: var(--kendo-color-border); }

/* Tema claro: el drawer es azul marino (--wl-sidebar-*) */
html[data-theme="light"] .wl-nav-app { color: var(--wl-sidebar-text-active); }
html[data-theme="light"] .wl-nav-seccion,
html[data-theme="light"] .wl-nav-vacio,
html[data-theme="light"] .wl-nav-version { color: var(--wl-sidebar-header-text); }
html[data-theme="light"] .wl-nav-pie { border-color: var(--wl-sidebar-border); }
html[data-theme="light"] .wl-riel-sep { background: var(--wl-sidebar-border); }
html[data-theme="light"] .wl-nav-flecha:hover { background: var(--wl-sidebar-bg-hover); }
html[data-theme="light"] .ai-usage-drawer .wl-app-chip { color: var(--wl-sidebar-text-active); background: var(--wl-sidebar-bg-active); }
html[data-theme="light"] .ai-usage-drawer .wl-app-chip[data-grupo="Personas"] { color: var(--wl-sidebar-accent); }
/* El filtro sobre el azul marino: sin esto el tema claro lo pinta gris, como deshabilitado.
   Especificidad a propósito: html[data-theme="light"] .k-input (0,2,1) gana a una clase sola. */
html[data-theme="light"] .ai-usage-drawer .k-input.wl-nav-filtro {
    background: var(--wl-sidebar-bg-hover);
    border-color: var(--wl-sidebar-border);
    color: var(--wl-sidebar-text-active);
}
html[data-theme="light"] .ai-usage-drawer .k-input.wl-nav-filtro .k-input-inner::placeholder { color: var(--wl-sidebar-header-text); }
html[data-theme="light"] .ai-usage-drawer .k-input.wl-nav-filtro .k-clear-value { color: var(--wl-sidebar-text); }

/* Selector de aplicación (fuera del drawer: flota sobre todo menos la paleta Ctrl+K, 12000) */
.wl-apps-fondo { position: fixed; inset: 0; z-index: 11400; background: transparent; }
.wl-apps {
    position: fixed;
    top: 52px;
    left: 12px;
    z-index: 11500;
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100dvh - 70px);
    overflow: auto;
    padding: 12px 14px 14px;
    border-radius: 14px;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    animation: wl-apps-entra .16s ease-out;
}
@keyframes wl-apps-entra { from { opacity: 0; transform: translateY(-6px); } }
.wl-apps-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wl-apps-buscar { flex: 1; }
.wl-apps-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.wl-apps-titulo {
    margin: 0 0 4px 6px;
    font-size: var(--kendo-font-size-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}
.wl-apps-app {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 0;
    border-radius: 9px;
    text-align: left;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
.wl-apps-app:hover { background: var(--kendo-color-base-subtle); }
.wl-apps-app.is-actual { background: var(--kendo-color-primary-subtle); }
.wl-apps-app:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 1px; }
.wl-apps-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wl-apps-txt b { font-size: var(--kendo-font-size-sm); font-weight: 650; }
.wl-apps-txt small { font-size: var(--kendo-font-size-xs); color: var(--kendo-color-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-apps-vacio { margin: 8px 6px; color: var(--kendo-color-subtle); }

/* La empresa de la barra, ahora botón (shell/ux 1c) y su lista */
button.empresa-appbar.wl-empresa-btn { color: inherit; font: inherit; cursor: pointer; }
button.empresa-appbar.wl-empresa-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
button.empresa-appbar.wl-empresa-btn:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; }
.wl-apps.wl-empresas { left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 24px)); animation: none; }
.wl-emp-codigo {
    flex: none;
    min-width: 42px;
    padding: 3px 6px;
    border-radius: 6px;
    text-align: center;
    font-size: var(--kendo-font-size-xs);
    font-weight: 700;
    color: var(--kendo-color-primary);
    background: var(--kendo-color-primary-subtle);
}
.wl-emp-actual { margin-left: auto; color: var(--kendo-color-primary); display: inline-grid; place-items: center; }
.wl-emp-nota { margin: 10px 6px 0; font-size: var(--kendo-font-size-xs); color: var(--kendo-color-subtle); }
.wl-emp-confirmar {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: var(--kendo-font-size-sm);
    background: color-mix(in srgb, var(--kendo-color-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--kendo-color-warning) 45%, transparent);
}
.wl-emp-confirmar p { margin: 0 0 10px; }
.wl-emp-confirmar-botones { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 767.98px) {
    /* En el teléfono la barra no tiene sitio: se cambia de aplicación desde el menú. */
    .k-button.wl-app-actual { display: none; }
    .wl-apps { left: 8px; right: 8px; width: auto; top: 56px; }
    .wl-apps.wl-empresas { left: 8px; right: 8px; width: auto; transform: none; }
    .wl-apps-grupos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .wl-apps { animation: none; } }

/* Favoritos (shell/ux 1b): la estrella aparece al pasar el mouse y queda fija en los favoritos. */
.wl-nav-estrella {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: inherit;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    transition: opacity .12s ease;
}
.wl-nav-estrella .k-svg-icon { margin: 0 !important; }
.k-drawer-item:hover .wl-nav-estrella,
.wl-nav-estrella:focus-visible,
.wl-nav-estrella.is-on { opacity: 1; }
.wl-nav-estrella.is-on { color: var(--wl-accent-gold); }
.wl-nav-estrella.is-on .k-svg-icon { opacity: 1 !important; color: inherit !important; }
.wl-nav-estrella:hover { background: var(--kendo-color-base-subtle); }
.wl-nav-estrella:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 1px; }
html[data-theme="light"] .wl-nav-estrella.is-on { color: var(--wl-sidebar-accent); }
html[data-theme="light"] .wl-nav-estrella:hover { background: var(--wl-sidebar-bg-hover); }
.wl-nav-otra-app { display: inline-grid; place-items: center; flex: none; margin-left: 4px; opacity: .55; }
.wl-nav-otra-app .k-svg-icon { margin: 0 !important; }
/* En pantallas táctiles no hay «pasar el mouse»: la estrella se ve siempre, tenue. */
@media (hover: none) { .wl-nav-estrella { opacity: .45; } }

/* ==========================================================================
   CAMPANAS DE LA BARRA (tareas y avisos) Y «ASIGNAR TAREA» (shell/ux 1c)
   Antes cada componente traía su <style> con ~70 colores fijos: la ventana
   salía BLANCA también en tema oscuro. Ahora solo tokens del tema.
   ========================================================================== */
.wl-campana-wrapper, .wl-aviso-wrapper { position: relative; display: inline-block; }

.wl-campana-btn, .wl-aviso-btn, .wl-asignar-btn {
    background: transparent;
    border: none;
    color: inherit;                 /* el de la AppBar: blanco en oscuro, oscuro en claro */
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.wl-campana-btn:hover, .wl-aviso-btn:hover, .wl-asignar-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.wl-campana-btn .k-svg-icon, .wl-aviso-btn .k-svg-icon, .wl-asignar-btn .k-svg-icon { width: 20px; height: 20px; }
.wl-campana-btn .k-svg-icon svg, .wl-aviso-btn .k-svg-icon svg { width: 100%; height: 100%; }

.wl-campana-badge, .wl-aviso-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
}
.wl-campana-badge-urgent, .wl-aviso-badge-error { color: var(--kendo-color-on-error); background: var(--kendo-color-error); }
.wl-aviso-badge-warning { color: var(--kendo-color-on-warning); background: var(--kendo-color-warning); }

.wl-campana-backdrop, .wl-aviso-backdrop { position: fixed; inset: 0; background: transparent; z-index: 9998; }

.wl-campana-popup, .wl-aviso-popup {
    position: fixed;
    top: 56px;
    right: 12px;
    width: 400px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    border-radius: 12px;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    animation: wl-campana-entra .18s ease-out;
}
.wl-aviso-popup { width: 420px; }
@keyframes wl-campana-entra { from { opacity: 0; transform: translateY(-8px); } }

.wl-campana-header, .wl-aviso-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: .92rem;
    background: var(--kendo-color-surface-alt);
    border-bottom: 1px solid var(--kendo-color-border);
}
.wl-aviso-header-actions { display: inline-flex; gap: 4px; align-items: center; }
.wl-aviso-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--kendo-color-primary);
    background: transparent;
    border: 1px solid var(--kendo-color-border);
}
.wl-aviso-link:hover { background: var(--kendo-color-primary-subtle); border-color: var(--kendo-color-primary); }
.wl-aviso-link .k-svg-icon { width: 14px; height: 14px; }
.wl-campana-close, .wl-aviso-close {
    padding: 4px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--kendo-color-subtle);
    background: transparent;
}
.wl-campana-close:hover, .wl-aviso-close:hover { background: var(--kendo-color-base-subtle); }

.wl-campana-loading, .wl-campana-empty, .wl-aviso-loading, .wl-aviso-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--kendo-color-subtle);
}
.wl-campana-empty .k-svg-icon { color: var(--kendo-color-success); opacity: .7; margin-bottom: 8px; }
.wl-aviso-empty .k-svg-icon { color: var(--kendo-color-primary); opacity: .6; margin-bottom: 8px; }
.wl-campana-empty div, .wl-aviso-empty div { font-weight: 600; color: var(--kendo-color-on-app-surface); }

.wl-campana-list, .wl-aviso-list { max-height: 460px; overflow-y: auto; }
.wl-campana-item, .wl-aviso-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kendo-color-border);
    transition: background .1s ease;
}
.wl-aviso-item { align-items: flex-start; }
.wl-campana-item:hover, .wl-aviso-item:hover { background: var(--kendo-color-base-subtle); }
.wl-campana-item:last-child, .wl-aviso-item:last-child { border-bottom: none; }
.wl-campana-item-vencida { background: color-mix(in srgb, var(--kendo-color-error) 8%, transparent); }
.wl-campana-item-vencida:hover { background: color-mix(in srgb, var(--kendo-color-error) 13%, transparent); }
.wl-aviso-item-leida { opacity: .6; }
.wl-campana-item-prio, .wl-aviso-item-color { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.wl-aviso-item-color { min-height: 32px; }
.wl-campana-item-content, .wl-aviso-item-content { flex: 1; min-width: 0; }
.wl-campana-item-title, .wl-aviso-item-title { font-size: .88rem; font-weight: 600; }
.wl-campana-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-aviso-item-desc {
    margin-top: 2px;
    font-size: .78rem;
    line-height: 1.3;
    color: var(--kendo-color-subtle);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wl-campana-item-meta, .wl-aviso-item-meta { margin-top: 2px; font-size: .74rem; color: var(--kendo-color-subtle); }
.wl-campana-badge-user, .at-badge-user {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 700;
    vertical-align: middle;
    color: var(--kendo-color-primary-on-subtle);
    background: var(--kendo-color-primary-subtle);
}
.at-badge-user { margin-left: 0; }
.wl-campana-badge-user .k-svg-icon { width: 11px; height: 11px; }
.wl-campana-vencida { color: var(--kendo-color-error); font-weight: 600; }
.wl-campana-hoy { color: var(--kendo-color-warning); font-weight: 600; }
.wl-campana-pronto { color: var(--kendo-color-warning); }
/* En claro el amarillo del tema no se lee sobre blanco: el tono «on-subtle». */
html[data-theme="light"] .wl-campana-hoy,
html[data-theme="light"] .wl-campana-pronto { color: var(--kendo-color-warning-on-subtle); }

.wl-campana-item-actions, .wl-aviso-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.wl-campana-action, .wl-aviso-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: var(--kendo-color-subtle);
    background: transparent;
    border: 1px solid transparent;
    transition: all .1s ease;
}
.wl-campana-action:hover, .wl-aviso-action:hover { background: var(--kendo-color-base-subtle); text-decoration: none; }
.wl-campana-action-done:hover, .wl-aviso-action-read:hover { color: var(--kendo-color-success); border-color: var(--kendo-color-success); }
.wl-campana-action-go:hover, .wl-aviso-action-go:hover { color: var(--kendo-color-primary); border-color: var(--kendo-color-primary); }

.wl-campana-overflow, .wl-aviso-overflow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: .82rem;
    background: color-mix(in srgb, var(--kendo-color-warning) 12%, transparent);
    border-top: 1px dashed var(--kendo-color-border);
}
.wl-campana-overflow .k-svg-icon, .wl-aviso-overflow .k-svg-icon { color: var(--kendo-color-warning); }
.wl-campana-footer, .wl-aviso-footer {
    padding: 10px 14px;
    text-align: center;
    background: var(--kendo-color-surface-alt);
    border-top: 1px solid var(--kendo-color-border);
}
.wl-campana-footer a, .wl-aviso-footer a { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--kendo-color-primary); }
.wl-campana-footer a:hover, .wl-aviso-footer a:hover { text-decoration: underline; }

/* Ventana «Asignar tarea» */
.at-form { padding: 4px; }
.at-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.at-row label { font-size: .85rem; }
.at-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.at-grid-2 label { display: block; margin-bottom: 4px; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .wl-campana-popup, .wl-aviso-popup { animation: none; } }

/* ==========================================================================
   PIEZAS COMUNES wl-* (shell/ux lote 3a, sep-2026): cabecera, estado y vacío.
   Componentes en Winledger.Plataforma/Components (WlCabecera, WlEstado, WlVacio).
   Solo tokens del tema: oscuro por defecto, claro con html[data-theme="light"].
   ========================================================================== */

/* ---------- Cabecera de página ---------- */
.wl-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}
.wl-cabecera-texto { min-width: 0; }
.wl-migas {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 2px;
    font-size: var(--kendo-font-size-xs, 12px);
    color: var(--kendo-color-subtle);
}
.wl-migas a { color: inherit; text-decoration: none; }
.wl-migas a:hover { color: var(--kendo-color-primary); text-decoration: underline; }
.wl-migas a:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; border-radius: 3px; }
.wl-migas .wl-migas-sep { width: 11px; height: 11px; opacity: .6; }
.wl-cabecera-titulo { display: flex; align-items: center; gap: 8px; }
.wl-cabecera-titulo h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--kendo-color-on-app-surface);
}
.wl-cabecera-icono {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent);
}
.wl-cabecera-estrella {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: var(--kendo-color-subtle);
    background: transparent;
    cursor: pointer;
}
.wl-cabecera-estrella:hover { color: var(--wl-accent-gold); background: color-mix(in srgb, var(--kendo-color-on-app-surface) 8%, transparent); }
.wl-cabecera-estrella.is-on { color: var(--wl-accent-gold); }
.wl-cabecera-estrella:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 1px; }
.wl-cabecera-estrella .k-svg-icon { margin: 0; }
.wl-cabecera-sub { margin: 2px 0 0; color: var(--kendo-color-subtle); }
.wl-cabecera-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Estado: ícono + color + palabra ---------- */
.wl-estado {
    --wl-estado-color: var(--kendo-color-subtle);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px 1px 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
    color: var(--wl-estado-color);
    background: color-mix(in srgb, var(--wl-estado-color) 15%, transparent);
}
.wl-estado .k-svg-icon { width: 12px; height: 12px; margin: 0; }
.wl-estado-ok { --wl-estado-color: var(--kendo-color-success); }
.wl-estado-aviso { --wl-estado-color: var(--kendo-color-warning); }
.wl-estado-error { --wl-estado-color: var(--kendo-color-error); }
.wl-estado-info { --wl-estado-color: var(--kendo-color-primary); }
.wl-estado-oro { --wl-estado-color: var(--wl-accent-gold); }
.wl-estado-violeta { --wl-estado-color: var(--wl-accent-violet); }
/* En claro los tonos puros quedan pálidos sobre blanco: se oscurecen para leerse. Con 75 % el
   amarillo y el dorado quedaban en ~3:1 (code review 3a); con 55 % pasan de 4,5:1. */
html[data-theme="light"] .wl-estado { color: color-mix(in srgb, var(--wl-estado-color) 55%, black); }

/* Plantillas de documentos (Nómina): las fichas y los bloques condicionales dentro del editor
   (editor-plantillas.js les pone estas clases), con los tokens del tema para que se lean en
   claro y en oscuro. Antes vivían en la página con colores fijos. */
.wl-ficha-editor {
    display: inline-block;
    background: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent);
    color: var(--kendo-color-primary);
    border: 1px solid color-mix(in srgb, var(--kendo-color-primary) 40%, transparent);
    border-radius: 3px;
    padding: 0 6px;
    font-size: .9em;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}
.wl-bloque-editor {
    border-left: 3px solid var(--kendo-color-warning);
    background: color-mix(in srgb, var(--kendo-color-warning) 10%, transparent);
    padding: 6px 12px;
    margin: 8px 0;
    border-radius: 0 3px 3px 0;
}
.wl-bloque-editor::before {
    content: attr(data-si);
    display: block;
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--kendo-color-warning) 70%, var(--kendo-color-on-app-surface));
}
/* La vista previa es la HOJA que se va a imprimir: blanca con texto oscuro en los dos temas, a
   propósito (como el visor de PDF). Solo el borde sigue al tema. */
.wl-vista-previa {
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    background: #fff;
    color: #1a1a1a;
    padding: 22px 26px;
    min-height: 300px;
}
/* La misma hoja dentro de una ventana (Documentos Emitidos → Ver): se desplaza sola si es
   larga, en vez de estirar la ventana. Antes, 60vh en línea en la página. */
.wl-vista-previa-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

/* Vista previa de un archivo de texto plano (archivo al banco): monoespaciada y con su propio
   desplazamiento horizontal. Antes vivía en la página con colores hex de respaldo. */
.wl-preview-archivo {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    padding: 10px;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

/* ---------- Lista de verificación «antes de…» (nomina/ux, idea 16: WlChecklist) ---------- */
.wl-checklist-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 4px; }
.wl-checklist-cabeza h3 { font-size: 15px; font-weight: 700; margin: 0; }
.wl-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wl-checklist li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 6px;
    border-bottom: 1px solid var(--kendo-color-border);
}
.wl-checklist li:last-child { border-bottom: 0; }
.wl-checklist-accion { display: inline-flex; align-items: center; gap: 6px; }
.wl-check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.wl-check .k-svg-icon { width: 12px; height: 12px; }
.wl-check.is-hecho { background: var(--kendo-color-success); color: var(--kendo-color-on-success); }
.wl-check.is-falta { box-shadow: inset 0 0 0 2px var(--kendo-color-error); }
.wl-check.is-recordar { box-shadow: inset 0 0 0 2px var(--kendo-color-warning); color: var(--kendo-color-warning); }
.wl-check.is-opcional {
    box-shadow: inset 0 0 0 2px var(--kendo-color-border-alt);
    background: repeating-linear-gradient(135deg, var(--kendo-color-border) 0 1px, transparent 1px 5px);
}
@media (max-width: 560px) {
    /* En el teléfono el estado y el «Ir» bajan debajo del texto. */
    .wl-checklist li { grid-template-columns: 22px minmax(0, 1fr); }
    .wl-checklist-accion { grid-column: 2; }
}

/* ---------- Vacío que orienta ---------- */
.wl-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
    color: var(--kendo-color-on-app-surface);
}
.wl-vacio-icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--kendo-color-subtle);
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border);
}
.wl-vacio-icono .k-svg-icon { width: 22px; height: 22px; margin: 0; }
.wl-vacio-sinpermiso .wl-vacio-icono { color: var(--kendo-color-warning); }
.wl-vacio-error .wl-vacio-icono { color: var(--kendo-color-error); }
.wl-vacio b { font-size: 14px; }
.wl-vacio p { max-width: 52ch; margin: 0; font-size: 12.5px; color: var(--kendo-color-subtle); }
.wl-vacio-acciones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }

/* ==========================================================================
   TABLA DENSA (shell/ux lote 3b, idea 16): es el TelerikGrid de siempre con Class="wl-tabla".
   Sobre el «Look V2» de .custom-grid (encabezado en mayúsculas con hilo dorado) agrega lo que
   faltaba: filas de ~30 px, números alineados (tabular-nums), una franja a la izquierda cuando
   la fila pide atención (las wl-row-* que ya ponen los OnRowRender) y la fila marcada.
   NO corta el texto en una línea: en grids con columnas sin Width lo dejaría ilegible.
   ========================================================================== */
.k-grid.wl-tabla .k-table-td {
    padding-block: 5px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.k-grid.wl-tabla .k-grid-header .k-table-th { padding-block: 7px; }
/* La franja va por variable (--wl-franja) para combinarla con el anillo de foco de Kendo, que
   también es un box-shadow y se perdía en la primera celda (code review 3b). Orden: la selección
   primero y las marcas después, para que una fila marcada con aviso siga diciendo «aviso». */
.k-grid.wl-tabla .k-table-row.k-selected { --wl-franja: var(--kendo-color-primary); }
.k-grid.wl-tabla .k-table-row.wl-row-warning { --wl-franja: var(--kendo-color-warning); }
.k-grid.wl-tabla .k-table-row.wl-row-error { --wl-franja: var(--kendo-color-error); }
.k-grid.wl-tabla .k-table-row.wl-row-success { --wl-franja: var(--kendo-color-success); }
.k-grid.wl-tabla :is(.k-selected, .wl-row-warning, .wl-row-error, .wl-row-success, .nom-fila-nueva) > .k-table-td:not(.k-group-cell):first-child {
    box-shadow: inset 3px 0 0 var(--wl-franja);
}
.k-grid.wl-tabla :is(.k-selected, .wl-row-warning, .wl-row-error, .wl-row-success, .nom-fila-nueva) > .k-table-td:not(.k-group-cell):first-child:is(:focus, .k-focus) {
    box-shadow: inset 3px 0 0 var(--wl-franja), inset 0 0 0 2px var(--kendo-color-border-alt);
}
/* Lo cambiado y sin guardar: dorado, como en la bandeja de cambios (lote 3c). */
.k-grid.wl-tabla .wl-row-dirty > td,
.k-grid.wl-tabla .wl-row-dirty > .k-table-td { background-color: color-mix(in srgb, var(--wl-accent-gold) 16%, transparent) !important; }
.k-grid.wl-tabla .k-table-row.k-selected > .k-table-td:not(.k-group-cell) {
    background-color: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent);
}

/* Códigos (cuenta, auxiliar, artículo, número de documento) en letra de máquina: se comparan de un vistazo. */
.wl-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .95em;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ==========================================================================
   BARRA DE ACCIONES MASIVAS (shell/ux lote 3b, idea 17): aparece al marcar filas, fija abajo,
   con cuántas, cuánto suman y las acciones para todas. Invertida (fondo del color del texto)
   para que se distinga del contenido. Debajo de la barra inferior del portal (z-index 1000).
   🔴 FIJA a la ventana, no «sticky»: el contenido vive en .k-drawer-content, que tiene
   overflow:auto pero crece con la página (nunca se desplaza: se desplaza la ventana), y un
   sticky adentro no se pegaba a nada (code review 3b, medido: quedaba a 1017 px en una ventana
   de 802). Hacer visible ese overflow sí lo pegaba, pero abría 172 px de desplazamiento
   horizontal en Auxiliares. El .k-drawer-content no tiene transform, así que fixed es a la
   ventana. WlBarraMasiva deja un espacio al final para que la barra no tape las últimas filas.
   ========================================================================== */
.wl-barra-masiva-espacio { height: 72px; }
.wl-barra-masiva {
    position: fixed;
    bottom: 16px;
    left: 50%;
    translate: -50% 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 8px 10px 8px 14px;
    border-radius: 12px;
    color: var(--kendo-color-app-surface);
    background: var(--kendo-color-on-app-surface);
    box-shadow: var(--wl-shadow-lg);
    animation: wl-barra-masiva-entra .2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes wl-barra-masiva-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .wl-barra-masiva { animation: none; } }
.wl-barra-masiva-cuenta { font-weight: 700; font-size: 13px; white-space: nowrap; }
.wl-barra-masiva-resumen { font-size: 12.5px; opacity: .8; white-space: nowrap; }
.wl-barra-masiva-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Los botones SIN color (base) heredan el invertido; los de color (Primary, Error) quedan como son. */
.wl-barra-masiva .k-button-flat-base,
.wl-barra-masiva .k-button-outline-base,
.wl-barra-masiva .k-button-clear-base { color: inherit; }
.wl-barra-masiva .k-button-outline-base { border-color: color-mix(in srgb, var(--kendo-color-app-surface) 40%, transparent); }
.wl-barra-masiva .k-button-outline-base:hover,
.wl-barra-masiva .k-button-flat-base:hover,
.wl-barra-masiva .k-button-clear-base:hover { background: color-mix(in srgb, var(--kendo-color-app-surface) 14%, transparent); }
/* En claro el Primary navy casi desaparece sobre el fondo oscuro de la barra: un borde claro lo marca. */
.wl-barra-masiva .k-button-solid { box-shadow: 0 0 0 1px color-mix(in srgb, var(--kendo-color-app-surface) 45%, transparent); }
.wl-barra-masiva-quitar { opacity: .75; }
@media (max-width: 767.98px) {
    .wl-barra-masiva { left: 8px; right: 8px; width: auto; translate: none; }
}

/* ==========================================================================
   BANDEJA DE CAMBIOS (shell/ux lote 3c, idea 18): WlCambios. Fija abajo como la barra masiva
   (mismo motivo: dentro de .k-drawer-content un sticky no se pega), pero en superficie y con
   hilo dorado: es lo de la pantalla que está pendiente, no una acción sobre una selección.
   ========================================================================== */
.wl-cambios-espacio { height: 76px; }
.wl-cambios {
    position: fixed;
    bottom: 16px;
    left: 50%;
    translate: -50% 0;
    z-index: 901;
    display: flex;
    align-items: center;
    gap: 10px 12px;
    width: min(780px, calc(100vw - 24px));
    padding: 8px 10px 8px 14px;
    border-radius: 12px;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface-alt);
    box-shadow: var(--wl-shadow-lg), inset 0 0 0 1px var(--wl-accent-gold);
    animation: wl-barra-masiva-entra .2s cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .wl-cambios { animation: none; } }
/* Con la barra masiva a la vista, la bandeja va encima de ella. */
body:has(.wl-barra-masiva) .wl-cambios { bottom: 80px; }
.wl-cambios-icono { color: var(--wl-accent-gold); flex: none; }
.wl-cambios-texto {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--kendo-color-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-cambios-texto b { color: var(--kendo-color-on-app-surface); }
.wl-cambios-acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.wl-cambios-kbd {
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 4px;
    font: 600 10.5px Inter, sans-serif;
    color: inherit;
    background: color-mix(in srgb, currentColor 18%, transparent);
    white-space: nowrap;
}
/* La confirmación de «Descartar» ocupa la bandeja entera. */
.wl-cambios .wl-cambios-descartar { flex: 1; padding: 2px 0; background: none; box-shadow: none; animation: none; }
.wl-cambios-dialogo-resumen {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--kendo-color-subtle);
    overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
    .wl-cambios { left: 8px; right: 8px; width: auto; translate: none; flex-wrap: wrap; }
    /* El texto en su renglón (si no, se cortaba hasta la cantidad) y los botones debajo, a la derecha. */
    .wl-cambios-texto { flex: 1 1 calc(100% - 34px); }
    .wl-cambios-acciones { margin-left: auto; }
    .wl-cambios-espacio { height: 118px; }
    /* En el teléfono no hay teclado físico. */
    .wl-cambios-kbd { display: none; }
}

/* ==========================================================================
   CONFIRMAR EN LA PÁGINA (shell/ux lote 3c, idea 19): WlConfirmar. Una franja junto a lo que se
   va a hacer, con el número exacto. Rojo si no se puede deshacer; azul si es un trámite.
   ========================================================================== */
.wl-confirmar {
    --wl-confirmar-color: var(--kendo-color-error);
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--wl-confirmar-color) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wl-confirmar-color) 40%, transparent);
    animation: wl-barra-masiva-entra .18s cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .wl-confirmar { animation: none; } }
.wl-confirmar.is-tramite { --wl-confirmar-color: var(--kendo-color-primary); }
.wl-confirmar-icono { color: var(--wl-confirmar-color); flex: none; }
.wl-confirmar-texto { flex: 1; min-width: 220px; margin: 0; font-size: 13px; color: var(--kendo-color-on-app-surface); }
.wl-confirmar-texto b { margin-right: 4px; }
.wl-confirmar-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   CAMPO CAMBIADO Y MARCA DE CAMBIOS (nomina/ux, idea 15): WlCampo + WlMarcaCambios. El dorado
   de WlCambios y de wl-row-dirty, ahora en el campo que cambió y en la pestaña que lo contiene.
   ========================================================================== */
.wl-campo { min-width: 0; }
/* Especificidad a propósito (0,3,1): los temas pintan los controles con html[data-theme="light"] .k-input
   (0,2,1) y :root:not([data-theme="light"]) .k-input (0,3,0), y con una clase sola el dorado no llegaba. */
html .wl-campo.wl-campo-cambiado :is(.k-input, .k-picker) {
    border-color: var(--wl-accent-gold);
    background-color: color-mix(in srgb, var(--wl-accent-gold) 10%, var(--kendo-color-surface));
}
.wl-campo-antes {
    margin-top: 2px;
    font-size: 11.5px;
    color: color-mix(in srgb, var(--wl-accent-gold) 70%, var(--kendo-color-on-app-surface));
    overflow-wrap: anywhere;
}
/* En claro el dorado puro no llega a 4,5:1 sobre blanco. */
html[data-theme="light"] .wl-campo-antes { color: color-mix(in srgb, var(--wl-accent-gold) 50%, black); }
.wl-marca-cambios {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--wl-accent-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wl-accent-gold) 30%, transparent);
}
/* ==========================================================================
   CAMPOS QUE SE LEEN COMO TEXTO (nomina/ux2, idea 5 de la ficha): wl-campos-lectura en un
   contenedor. Los controles de cada WlCampo (y los de una etiqueta seguida de su control) pierden
   la caja hasta que se pasa el ratón o se entra con Tab: la pantalla se lee como una hoja de datos
   y se edita en el mismo sitio, sin botón «Editar». Al pasar el ratón o al enfocar, la regla deja
   de aplicar y el control vuelve a ser el del tema. Un campo cambiado conserva su dorado.
   Especificidad (0,4,1) a propósito: el tema pinta con html[data-theme="light"] .k-input (0,2,1) y
   :root:not([data-theme="light"]) .k-input (0,3,0).
   ========================================================================== */
html .wl-campos-lectura .wl-campo:not(.wl-campo-cambiado):not(:hover):not(:focus-within) :is(.k-input, .k-picker):not(.k-invalid),
html .wl-campos-lectura :not(.wl-campo-cambiado) > :is(.form-label, .k-label):not(:hover) + :is(.k-input, .k-picker):not(:hover):not(.k-focus):not(:focus-within):not(.k-invalid) {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}
html .wl-campos-lectura .wl-campo:not(.wl-campo-cambiado):not(:hover):not(:focus-within) :is(.k-input-button, .k-input-separator),
html .wl-campos-lectura :not(.wl-campo-cambiado) > :is(.form-label, .k-label):not(:hover) + :is(.k-input, .k-picker):not(:hover):not(.k-focus):not(:focus-within):not(.k-invalid) :is(.k-input-button, .k-input-separator) {
    opacity: 0;
}
html .wl-campos-lectura :is(.k-input, .k-picker) { transition: border-color .12s, background-color .12s; }
html .wl-campos-lectura :is(.k-input, .k-picker) .k-input-inner { padding-inline-start: 6px; }
/* Sin permiso para editar (o un campo que nunca se edita, como el código), el control apagado se lee
   como texto normal, no como gris de «no disponible», y no muestra la caja ni al pasar el ratón: no
   hay nada que editar. Una marca de error (k-invalid) se respeta siempre. */
html .wl-campos-lectura :is(.k-input, .k-picker).k-disabled { opacity: 1; filter: none; }
html .wl-campos-lectura div > :is(.k-input, .k-picker).k-disabled:not(.k-invalid):not(.wl-x),
html .wl-campos-lectura div:hover > :is(.k-input, .k-picker).k-disabled:not(.k-invalid):not(.wl-x) {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}
html .wl-campos-lectura .wl-campo > .form-label,
html .wl-campos-lectura .wl-campo > label { font-size: 11.5px; font-weight: 600; color: var(--kendo-color-subtle); margin-bottom: 1px; padding-inline-start: 7px; }
/* Un dato clave vacío: la etiqueta en ámbar y el «Falta» del placeholder también. */
html .wl-campo.wl-campo-falta > .form-label { color: var(--kendo-color-warning-on-surface); }
html .wl-campo.wl-campo-falta .k-input-inner::placeholder { color: var(--kendo-color-warning-on-surface); font-style: italic; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html .wl-campos-lectura :is(.k-input, .k-picker) { transition: none; } }

/* ==========================================================================
   ESCALONES (nomina/ux2, ideas 2 y 7 de la ficha): WlEscalones. Un valor que cambia por saltos
   en fechas sueltas (un salario, una tarifa). Chico = solo la línea; grande = años, montos, cada
   punto con su valor y el % contra el anterior.
   ========================================================================== */
.wl-escalones { display: block; width: 100%; height: 44px; overflow: visible; }
.wl-escalones.wl-escalones-grande { height: auto; max-height: 230px; }
.wl-escalones-linea { fill: none; stroke: var(--kendo-color-primary); stroke-width: 2; stroke-linejoin: round; }
.wl-escalones-area { fill: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent); }
.wl-escalones-guia { stroke: var(--kendo-color-border); stroke-width: 1; }
.wl-escalones-punto { fill: var(--kendo-color-surface); stroke: var(--kendo-color-primary); stroke-width: 2; }
.wl-escalones-punto.is-ultimo { fill: var(--kendo-color-primary); }
.wl-escalones text { font-family: inherit; font-variant-numeric: tabular-nums; }
.wl-escalones-eje { font-size: 10.5px; fill: var(--kendo-color-subtle); }
.wl-escalones-valor { font-size: 11px; font-weight: 600; fill: var(--kendo-color-on-app-surface); }
.wl-escalones-cambio { font-size: 10.5px; font-weight: 700; fill: var(--kendo-color-success); }
.wl-escalones-cambio.is-baja { fill: var(--kendo-color-error); }
html[data-theme="light"] .wl-escalones-cambio { fill: var(--kendo-color-success-emphasis, #2E7D32); }
/* ==========================================================================
   FILTROS RÁPIDOS CON CANTIDAD (nomina/ux, idea 12): WlFiltros. Botones píldora que filtran y
   dicen cuántos hay. El tono (wl-estado-*) solo colorea el número: «Sin RIF 12» en ámbar.
   ========================================================================== */
.wl-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--kendo-color-subtle);
    background: var(--kendo-color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border-alt);
}
.wl-filtro:hover { color: var(--kendo-color-on-app-surface); }
.wl-filtro:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; }
.wl-filtro-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kendo-color-on-app-surface); }
.wl-filtro[class*="wl-estado-"] .wl-filtro-n { color: var(--wl-estado-color); }
html[data-theme="light"] .wl-filtro[class*="wl-estado-"] .wl-filtro-n { color: color-mix(in srgb, var(--wl-estado-color) 55%, black); }
.wl-filtro.is-on {
    color: var(--kendo-color-primary-on-surface);
    background: color-mix(in srgb, var(--kendo-color-primary) 12%, var(--kendo-color-surface-alt));
    box-shadow: inset 0 0 0 1.5px var(--kendo-color-primary);
}
.wl-filtro.is-on .wl-filtro-n { color: inherit; }

/* Los 9 pasos del ciclo en la cinta de Nómina (NominaContextoBar): el aspecto de los meses de
   WlCintaMeses (.wl-cinta-mes y sus is-*), nueve en vez de doce, y cada uno es un enlace. */
.nom-cinta-ciclo { display: flex; flex-direction: column; gap: 3px; }
.wl-cinta-meses.nom-pasos { grid-template-columns: repeat(9, 24px); }
.nom-pasos .wl-cinta-mes > a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.nom-pasos .wl-cinta-mes > a:hover { box-shadow: inset 0 0 0 1px currentColor; }
.nom-pasos .wl-cinta-mes > a:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 1px; }

/* Captura rápida de novedades (nomina/ux lote 5, idea 19): una línea con trabajador, concepto,
   valor, observación y Agregar. Borde del color primario: es donde se escribe. */
.nom-captura {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr) 130px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--kendo-color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--kendo-color-primary);
}
@media (max-width: 1100px) { .nom-captura { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .nom-captura { grid-template-columns: minmax(0, 1fr); } }
/* Opcional: rayado gris, se distingue de «pendiente» (liso) sin depender del color. */
.wl-cinta-mes.is-opcional {
    background: repeating-linear-gradient(135deg, var(--kendo-color-border) 0 1px, transparent 1px 5px);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border-alt);
}
.nom-cinta-sigue { font-size: 11.5px; color: var(--kendo-color-subtle); white-space: nowrap; }
.nom-cinta-sigue a { font-weight: 700; color: var(--kendo-color-on-app-surface); text-decoration: none; }
.nom-cinta-sigue a:hover { color: var(--kendo-color-primary); text-decoration: underline; }

/* «Con este trabajador:» y sus botones, bajo la cabecera de la ficha (nomina/menu, idea C). */
.nom-ficha-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nom-ficha-atajos > .k-text-subtle { margin-right: 2px; font-size: var(--kendo-font-size-sm); }
.nom-ficha-atajos-sep { width: 1px; height: 20px; margin-inline: 4px; background: var(--kendo-color-border); }

/* La tarjeta de la persona (nomina/ux2, ideas 1 y 2): foto o iniciales, la cabecera común con los
   datos de a cada rato debajo del nombre, y a la derecha el salario con su línea de escalones. */
.nom-ficha-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 14px 18px;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface);
}
.nom-ficha-hero > .nom-ficha-hero-cab { flex: 1 1 520px; min-width: 0; }
.nom-ficha-hero .wl-ficha-foto.nom-ficha-hero-foto { width: 72px; height: 72px; border-radius: 14px; }
.nom-ficha-iniciales {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: 14px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--kendo-color-primary);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--kendo-color-primary) 16%, transparent),
        color-mix(in srgb, var(--wl-accent-gold) 22%, transparent));
}
.nom-ficha-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; font-size: var(--kendo-font-size-sm); }
.nom-ficha-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nom-num { font-variant-numeric: tabular-nums; }
.nom-ficha-copiar {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: var(--kendo-color-subtle);
    background: transparent;
    cursor: pointer;
}
.nom-ficha-copiar:hover { color: var(--kendo-color-on-app-surface); background: var(--kendo-color-base-subtle); }
.nom-ficha-copiar:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 1px; }
.nom-ficha-copiar .k-svg-icon { width: 13px; height: 13px; }
.nom-ficha-salario {
    flex: 0 1 290px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 18px;
    border-left: 1px solid var(--kendo-color-border);
}
.nom-ficha-salario-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kendo-color-subtle); }
.nom-ficha-salario-v { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--kendo-color-on-app-surface); }
.nom-ficha-salario-x { font-size: 12px; }
.nom-ficha-salario-cambio { font-weight: 700; }
.nom-ficha-salario-linea { margin-top: 6px; }
@media (max-width: 900px) {
    .nom-ficha-salario { flex-basis: 100%; padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px solid var(--kendo-color-border); }
}

/* ===== Ficha v3 (29-oct-2026): la persona a la izquierda, las pestañas arriba, edición por sección ===== */
.nom-ficha-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.nom-ficha-v3 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.nom-ficha-lado { flex: 1 1 280px; max-width: 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nom-ficha-cuerpo { flex: 999 1 560px; min-width: 0; }
@media (max-width: 900px) { .nom-ficha-lado { max-width: none; } }
.nom-ficha-lado .nom-ficha-hero { flex-direction: column; align-items: stretch; }
.nom-ficha-lado .nom-ficha-hero > .nom-ficha-hero-cab { flex: none; }
.nom-ficha-lado .nom-ficha-hero .wl-migas { display: none; }   /* la miga ya está en la barra de arriba */
.nom-ficha-lado .nom-ficha-salario { flex: none; min-width: 0; padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px solid var(--kendo-color-border); }
.nom-ficha-lado .nom-ficha-meta { gap: 4px 12px; }
.nom-ficha-lado .nom-ficha-falta { flex-direction: column; align-items: flex-start; gap: 6px; }
.nom-ficha-lado .nom-ficha-falta-medidor { width: 100%; }
.nom-ficha-acciones {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px; border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px); background: var(--kendo-color-surface);
}
.nom-ficha-acciones-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kendo-color-subtle); }
.nom-ficha-acciones-principales { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.nom-ficha-acciones-principales .k-button { width: 100%; white-space: normal; min-height: 40px; }
.nom-ficha-acciones-mas { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.nom-ficha-acciones-egreso { border-top: 1px solid var(--kendo-color-border); padding-top: 8px; font-size: var(--kendo-font-size-sm); }
.nom-ficha-acciones-egreso > summary { cursor: pointer; color: var(--kendo-color-subtle); }
.nom-ficha-acciones-egreso[open] > summary { margin-bottom: 6px; }
.nom-ficha-tabs-arriba > .k-tabstrip-items-wrapper { overflow-x: auto; }
.nom-ficha-tabs-arriba > .k-tabstrip-items-wrapper .k-tabstrip-items { flex-wrap: nowrap; }
.nom-ficha-tabs-arriba > .k-tabstrip-items-wrapper .k-tabstrip-item { white-space: nowrap; }
/* Lo que había en la columna de pestañas: el contenido es el contenedor de sus @container (el porqué del neto). */
.nom-ficha-tabs-arriba > .k-tabstrip-content { container-type: inline-size; }
.nom-ficha-seccion {
    padding: 14px 18px; border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px); background: var(--kendo-color-surface);
}
.nom-ficha-seccion.is-editando { border-color: var(--kendo-color-primary); box-shadow: 0 0 0 1px var(--kendo-color-primary); }
.nom-ficha-seccion-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.nom-ficha-seccion-cab h3 { margin: 0; font-size: 15px; font-weight: 700; }
.nom-ficha-seccion-botones { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.nom-ficha-seccion-barra { display: flex; justify-content: flex-end; margin-top: 12px; }
.nom-ficha-datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; }
.nom-ficha-datos dt { font-size: 11.5px; font-weight: 600; color: var(--kendo-color-subtle); }
.nom-ficha-datos dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.nom-ficha-datos .is-ancho { grid-column: 1 / -1; }
.nom-ficha-datos .is-vacio dd { color: var(--kendo-color-subtle); }
.nom-ficha-datos .is-falta dd { color: var(--kendo-color-warning-on-surface); font-weight: 600; }
.nom-ficha-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--kendo-color-border); border-radius: 999px; font-size: 11px; color: var(--kendo-color-subtle); vertical-align: 1px; }
.nom-ficha-resumen { display: flex; flex-direction: column; gap: 14px; }
.nom-ficha-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.nom-ficha-tarjeta {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
    border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface); font-size: var(--kendo-font-size-sm); min-width: 0;
}
.nom-ficha-tarjeta-t { font-size: 12px; font-weight: 600; color: var(--kendo-color-subtle); }
.nom-ficha-tarjeta-v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.nom-ficha-tarjeta-v > span { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--kendo-color-subtle); }
.nom-ficha-tarjeta-aviso { color: var(--kendo-color-warning-on-surface); }
.nom-ficha-tarjeta-ir { align-self: flex-start; margin-top: 4px; }
.nom-ficha-largo { overflow-wrap: anywhere; }
.nom-ficha-historia { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 0; }
.nom-ficha-historia > li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 0 0; border-top: 3px solid color-mix(in srgb, var(--kendo-color-primary) 35%, transparent); }
.nom-ficha-historia > li:last-child { border-top-color: var(--kendo-color-primary); }
.nom-ficha-historia > li > span { color: var(--kendo-color-subtle); }

/* Qué le falta a la ficha (nomina/ux2, idea 3). Ámbar; con el salario faltante, rojo. */
.nom-ficha-falta {
    --nom-falta: var(--kendo-color-warning-on-surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--nom-falta) 40%, transparent);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: color-mix(in srgb, var(--nom-falta) 9%, var(--kendo-color-surface));
    font-size: var(--kendo-font-size-sm);
}
.nom-ficha-falta.is-grave { --nom-falta: var(--kendo-color-error); }
.nom-ficha-falta > .k-svg-icon { color: var(--nom-falta); }
.nom-ficha-falta-medidor { width: 90px; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--nom-falta) 22%, transparent); }
.nom-ficha-falta-medidor > span { display: block; height: 100%; background: var(--nom-falta); }
.nom-ficha-falta-dato {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, var(--nom-falta) 45%, transparent);
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface);
    cursor: pointer;
}
.nom-ficha-falta-dato:hover { border-color: var(--nom-falta); }
.nom-ficha-falta-dato:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 1px; }
.nom-ficha-falta-dato .k-text-subtle { font-size: 11px; font-weight: 500; }
.nom-ficha-falta-porque { flex-basis: 100%; color: var(--nom-falta); font-weight: 600; }

/* Las pestañas de la ficha a la izquierda (nomina/ux2, idea 4), con su conteo. En angosto
   vuelven arriba: una columna de 200 px le quita demasiado a los formularios. */
.nom-tab-cuenta {
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kendo-color-subtle);
    background: var(--kendo-color-base-subtle);
}
/* 12px a los lados = el margen negativo de una .row de Bootstrap con su gutter por defecto (1,5rem →
   -0,75rem; las g-3 piden 8px y las g-2 4px). Con 4px las filas sobresalían y el panel
   (overflow: auto) mostraba una barra horizontal en TODAS las pestañas (medido 8-oct-2026:
   scrollWidth 785 contra 777 a 1440px). Todo el contenido se corre igual, filas y textos siguen alineados. */
/* Las col-md-* de las pestañas miran la VENTANA, pero el panel puede quedar muy angosto (ventana de
   800px con menú lateral: 339px de contenido y columnas de ~85px, donde no caben «Agregar» ni «No
   reintegrables» y vuelve la barra horizontal). Con el panel así de angosto, dos por fila. 350 y no
   más: con ventana de 1059px el contenido mide 372 y las 4 columnas caben (medido 8-oct-2026).
   🔴 Nada con position: fixed DENTRO del panel: el contenedor le cambiaría la referencia (la barra
   de cambios WlCambios vive fuera, verificado). */
@container (max-width: 350px) {
    .nom-ficha-tabs .row > .col-md-2,
    .nom-ficha-tabs .row > .col-md-3,
    .nom-ficha-tabs .row > .col-md-4 { flex: 0 0 50%; max-width: 50%; }
    .nom-ficha-tabs .row > .col-md-6,
    .nom-ficha-tabs .row > .col-md-8 { flex: 0 0 100%; max-width: 100%; }
}
.nom-ficha-escalones { max-width: 900px; }
/* Pestaña RNET de la ficha: columnas según el ancho del PANEL, no de la ventana. Las clases col-lg-*
   de Bootstrap miran la ventana, y con el menú y la lista de pestañas al lado el panel mide ~400px
   aunque la ventana pase de 1000: los numéricos quedaban en 65px y se salían. --min = ancho mínimo
   de cada campo. */
.nom-rnet-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 180px), 100%), 1fr));
    gap: 12px 16px;
}
.nom-rnet-grilla > .nom-rnet-ancho { grid-column: 1 / -1; }
/* Una tabla con una columna por mes (Variaciones de Salario por mes): su propio scroll horizontal. */
.nom-tabla-ancha { overflow-x: auto; }
.nom-tabla-ancha > table { white-space: nowrap; }

/* ==========================================================================
   CARGA DE NOVEDADES, vuelta 2 (nomina/ux2, ideas 1 a 6)
   ========================================================================== */
/* Una tecla escrita en un texto de ayuda («Enter pasa al siguiente campo»). Genérica. */
.wl-tecla {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--kendo-color-border-alt);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: 600 10.5px/1.6 var(--kendo-font-family, Inter, sans-serif);
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface-alt);
    white-space: nowrap;
}
/* El pulso del período: cuatro celdas en una tira; las de filtro se pulsan. */
.nom-nov-pulso {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface);
    overflow: hidden;
}
.nom-nov-pulso-celda {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 10px 16px;
    border: 0;
    border-left: 1px solid var(--kendo-color-border);
    font: inherit;
    text-align: left;
    color: inherit;
    background: transparent;
}
.nom-nov-pulso-celda:first-child { border-left: 0; }
.nom-nov-pulso-celda.is-boton { cursor: pointer; }
.nom-nov-pulso-celda.is-boton:hover:not(:disabled) { background: var(--kendo-color-base-subtle); }
.nom-nov-pulso-celda.is-boton:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: -2px; }
.nom-nov-pulso-celda.is-boton:disabled { cursor: default; }
.nom-nov-pulso-celda.is-on { background: color-mix(in srgb, var(--kendo-color-primary) 12%, transparent); box-shadow: inset 0 -2px 0 var(--kendo-color-primary); }
.nom-nov-pulso-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kendo-color-subtle); }
.nom-nov-pulso-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--kendo-color-on-app-surface); }
.nom-nov-pulso-v small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--kendo-color-subtle); }
.nom-nov-pulso-v.is-aviso { color: var(--kendo-color-warning-on-surface); }
.nom-nov-pulso-x { font-size: 12px; color: var(--kendo-color-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nom-nov-pulso-celda.is-boton:not(:disabled) .nom-nov-pulso-x { color: var(--kendo-color-primary-on-surface); }
@media (max-width: 900px) {
    .nom-nov-pulso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nom-nov-pulso-celda:nth-child(3) { border-left: 0; }
    .nom-nov-pulso-celda:nth-child(n+3) { border-top: 1px solid var(--kendo-color-border); }
}
/* La captura con título y las teclas a la vista; campos más altos. */
.nom-captura-marco { display: flex; flex-direction: column; gap: 8px; }
.nom-captura-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--kendo-font-size-sm); }
.nom-captura-titulo > .k-svg-icon { color: var(--kendo-color-primary); }
.nom-captura-titulo > .k-text-subtle { margin-left: auto; }
.nom-captura :is(.k-input, .k-picker) { min-height: 36px; }
.nom-captura > .k-button { min-height: 36px; }
.nom-captura-teclas { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--kendo-color-subtle); }
/* Los filtros con su volumen: una barrita bajo el texto (WlFiltros ConBarra). Genérico. */
.wl-filtros-barra .wl-filtro { position: relative; height: 32px; padding-bottom: 4px; overflow: hidden; }
.wl-filtro-volumen { position: absolute; left: 11px; right: 11px; bottom: 5px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--kendo-color-on-app-surface) 10%, transparent); }
.wl-filtro-volumen > span { display: block; height: 100%; border-radius: 2px; background: var(--kendo-color-primary); }
/* Valor cargado → importe, en una celda. */
.nom-nov-vi { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.nom-nov-vi-flecha { color: var(--kendo-color-subtle); }
/* La recién agregada: dorada hasta la siguiente. */
.k-grid.wl-tabla .k-table-row.nom-fila-nueva > .k-table-td { background-color: color-mix(in srgb, var(--wl-accent-gold) 14%, transparent); }
.k-grid.wl-tabla .k-table-row.nom-fila-nueva:not(.k-selected) { --wl-franja: var(--wl-accent-gold); }
/* Agrupada por trabajador: la cabecera de cada persona. */
.nom-nov-grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.nom-nov-iniciales {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent);
}

/* ==========================================================================
   REVISIÓN DE CONCEPTOS, vuelta 2 (nomina/ux2, ideas 1 a 7)
   ========================================================================== */
/* El avance: revisados (verde), para mirar sin marcar (ámbar), el resto (fondo). */
.nom-rev-avance { display: flex; flex-direction: column; gap: 5px; }
.nom-rev-avance-barra { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--kendo-color-base-subtle); box-shadow: inset 0 0 0 1px var(--kendo-color-border); }
.nom-rev-avance-barra > span { display: block; height: 100%; }
.nom-rev-avance-barra > .is-ok, .nom-rev-avance-leyenda i.is-ok { background: var(--kendo-color-success); }
.nom-rev-avance-barra > .is-aviso, .nom-rev-avance-leyenda i.is-aviso { background: var(--kendo-color-warning); }
.nom-rev-avance-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11.5px; color: var(--kendo-color-subtle); }
.nom-rev-avance-leyenda strong { color: var(--kendo-color-on-app-surface); font-variant-numeric: tabular-nums; }
.nom-rev-avance-leyenda i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; background: var(--kendo-color-border-alt); }
/* La barra del cambio del neto en la lista: dos mitades con el cero en el medio. */
.nom-rev-dbar { display: flex; height: 4px; margin-top: 3px; }
.nom-rev-dbar > span { flex: 1; display: flex; height: 100%; background: var(--kendo-color-base-subtle); }
.nom-rev-dbar > span:first-child { justify-content: flex-end; border-radius: 2px 0 0 2px; }
.nom-rev-dbar > span:last-child { border-radius: 0 2px 2px 0; box-shadow: inset 1px 0 0 var(--kendo-color-subtle); }
.nom-rev-dbar i { display: block; height: 100%; background: var(--kendo-color-primary); }
.nom-rev-dbar i.is-baja { background: var(--wl-accent-gold); }
/* Por qué está marcado. */
.nom-rev-porque {
    --nom-pq: var(--kendo-color-subtle);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--nom-pq) 35%, transparent);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: color-mix(in srgb, var(--nom-pq) 8%, var(--kendo-color-surface));
}
.nom-rev-porque.is-sube { --nom-pq: var(--kendo-color-primary); }
.nom-rev-porque.is-baja { --nom-pq: var(--wl-accent-gold); }
.nom-rev-porque > .k-svg-icon { flex: none; margin-top: 2px; color: var(--nom-pq); }
.nom-rev-porque p { margin: 0; }
.nom-rev-porque p + p { margin-top: 2px; font-size: 12px; }
/* Lía revisa la corrida (fase 2, 28-oct-2026): usa la IA, así que lleva el dorado de Lía. */
.nom-rev-lia {
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--wl-lia) 45%, transparent);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: color-mix(in srgb, var(--wl-lia) 8%, var(--kendo-color-surface));
}
.nom-rev-lia-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.nom-rev-lia-ico { color: var(--wl-lia); flex: none; }
.nom-rev-lia-txt { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nom-rev-lia-resumen { margin: 10px 0 0; }
/* Lía en la ficha del trabajador: sugeridas, la caja de la pregunta y la respuesta con sus saltos de línea. */
.nom-ficha-lia-sugeridas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nom-ficha-lia-pregunta { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.nom-ficha-lia-respuesta { white-space: pre-line; }
.nom-rev-lia-hallazgos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--kendo-font-size-sm); }
.nom-rev-lia-hallazgos li { display: flex; gap: 10px; align-items: baseline; }
.nom-rev-lia-hallazgos code { margin-right: 6px; }
.nom-rev-lia-grav { flex: none; min-width: 4.5rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--kendo-color-subtle); }
.nom-rev-lia-hallazgos li.is-revisar .nom-rev-lia-grav { color: var(--wl-lia-ink, #7A5A16); }
.nom-rev-lia-pie { margin: 10px 0 0; font-size: 12px; color: var(--kendo-color-subtle); }
/* Carga de Novedades: las que casi siempre traen y esta vez no (28-oct-2026, sin IA). */
.nom-nov-faltan {
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--kendo-color-primary) 25%, transparent);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: color-mix(in srgb, var(--kendo-color-primary) 4%, var(--kendo-color-surface));
    font-size: var(--kendo-font-size-sm);
    container-type: inline-size;
}
.nom-nov-faltan-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.nom-nov-faltan-cab > .k-svg-icon { color: var(--kendo-color-primary); }
.nom-nov-sin-ia { margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--kendo-color-border); color: var(--kendo-color-subtle); }
.nom-nov-faltan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nom-nov-faltan li { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) max-content; gap: 2px 12px; }
.nom-nov-faltan p { margin: 6px 0 0; }
@container (max-width: 40rem) { .nom-nov-faltan li { grid-template-columns: minmax(0, 1fr); } }
/* Por qué cambió el neto (28-oct-2026). Una fila por concepto: nombre · motivos · efecto. Sin IA,
   así que sin el dorado de Lía: el color de la pantalla (primario), como el «por qué está marcado». */
.nom-rev-pq {
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--kendo-color-primary) 25%, transparent);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: color-mix(in srgb, var(--kendo-color-primary) 4%, var(--kendo-color-surface));
    font-size: var(--kendo-font-size-sm);
    container-type: inline-size;   /* el bloque mide SU ancho: el detalle es angosto con el menú abierto */
}
.nom-rev-pq-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.nom-rev-pq-ico { color: var(--kendo-color-primary); flex: none; }
.nom-rev-pq-nota { margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--kendo-color-border); color: var(--kendo-color-subtle); }
.nom-rev-pq ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nom-rev-pq li { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) max-content; gap: 4px 12px; align-items: baseline; }
.nom-rev-pq-con { font-weight: 600; overflow-wrap: anywhere; }
.nom-rev-pq-txt { color: var(--kendo-color-subtle); }
.nom-rev-pq-ef.is-sube { color: var(--kendo-color-primary); }
/* Lo que baja el neto: el mismo dorado de «bajó» de la lista. */
.nom-rev-pq-ef.is-baja { color: var(--wl-accent-gold); }
.nom-rev-pq p { margin: 6px 0 0; }
/* Último pago en la ficha del trabajador (Nómina 3, 28-oct-2026): una línea con el neto y, debajo,
   el mismo «por qué» de Revisión de Conceptos. */
.nom-ficha-pago { display: grid; gap: 8px; }
.nom-ficha-pago-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.nom-ficha-pago-cab .is-sube { color: var(--kendo-color-primary); font-weight: 600; }
.nom-ficha-pago-cab .is-baja { color: var(--wl-accent-gold); font-weight: 600; }
/* Liquidación (Nómina 4, 28-oct-2026): de dónde sale cada monto, bajo su línea, y lo que conviene
   mirar antes de entregarla. Sin IA: el color de la pantalla, no el dorado de Lía. */
.nom-liq-sale { font-size: var(--kendo-font-size-sm); color: var(--kendo-color-subtle); margin: 0 0 6px 12px; padding-left: 8px; border-left: 2px solid color-mix(in srgb, var(--kendo-color-primary) 35%, transparent); }
.nom-liq-revisar { padding: 10px 14px; border: 1px solid var(--kendo-color-warning); border-radius: var(--kendo-border-radius-lg, 8px); background: color-mix(in srgb, var(--kendo-color-warning) 8%, var(--kendo-color-surface)); }
.nom-liq-revisar ul { margin: 6px 0 0; padding-left: 18px; }
.nom-liq-revisar li.is-grave { color: var(--kendo-color-error); font-weight: 600; }
/* Aumento Colectivo (Nómina 6, 28-oct-2026): quiénes quedan bajo el mínimo y el costo por área. */
.nom-aum-minimo { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--kendo-color-error); border-radius: var(--kendo-border-radius-lg, 8px); background: color-mix(in srgb, var(--kendo-color-error) 6%, var(--kendo-color-surface)); font-size: var(--kendo-font-size-sm); }
.nom-aum-areas summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.nom-aum-areas table { width: 100%; max-width: 900px; font-size: var(--kendo-font-size-sm); }
/* Nómina 7 (Préstamos): lo de toda la nómina que hay que mirar antes de pagar. */
.nom-pre-mirar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--kendo-color-warning); border-radius: var(--kendo-border-radius-lg, 8px); background: color-mix(in srgb, var(--kendo-color-warning) 8%, var(--kendo-color-surface)); font-size: var(--kendo-font-size-sm); }
@container (max-width: 40rem) { .nom-rev-pq li { grid-template-columns: minmax(0, 1fr) max-content; } .nom-rev-pq-ef { grid-row: 1; grid-column: 2; } .nom-rev-pq-txt { grid-row: 2; grid-column: 1 / -1; } }
/* La cascada: tres filas etiqueta · pista · monto. */
.nom-rev-cascada { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 6px 12px; align-items: center; font-size: var(--kendo-font-size-sm); }
.nom-rev-cascada > span:nth-child(3n+1), .nom-rev-cascada > strong:nth-child(3n+1) { color: var(--kendo-color-subtle); }
.nom-rev-cascada > .nom-num, .nom-rev-cascada > strong.nom-num { text-align: right; font-weight: 600; }
.nom-rev-cascada-pista { position: relative; height: 14px; border-radius: 4px; background: var(--kendo-color-base-subtle); }
.nom-rev-cascada-pista > i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.nom-rev-cascada-pista > i.is-asig { background: color-mix(in srgb, var(--kendo-color-success) 70%, transparent); }
.nom-rev-cascada-pista > i.is-ded { background: color-mix(in srgb, var(--kendo-color-error) 65%, transparent); }
.nom-rev-cascada-pista > i.is-neto { background: var(--kendo-color-primary); }
.nom-rev-cascada-antes { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--wl-accent-gold); }
.nom-rev-cascada-antes > em { position: absolute; bottom: 100%; left: 4px; font-size: 10.5px; font-style: normal; font-weight: 600; white-space: nowrap; color: color-mix(in srgb, var(--wl-accent-gold) 75%, var(--kendo-color-on-app-surface)); }
.nom-rev-cascada-antes.is-derecha > em { left: auto; right: 4px; }
.nom-rev-cascada-neto { font-size: 15px; color: var(--kendo-color-primary-on-surface, var(--kendo-color-primary)); }
.nom-rev-cascada > .nom-rev-cascada-pista:nth-last-child(2) { margin-top: 10px; }
.nom-rev-cascada > strong:nth-last-child(3), .nom-rev-cascada > .nom-rev-cascada-neto { margin-top: 10px; }
/* El recibo en dos columnas. */
.nom-rev-recibo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg, 8px); }
.nom-rev-col { min-width: 0; padding: 8px 12px 10px; }
.nom-rev-col + .nom-rev-col { border-left: 1px dashed var(--kendo-color-border-alt); }
.nom-rev-col-t { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--kendo-color-border); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kendo-color-subtle); }
.nom-rev-col-t > strong { font-size: 13px; letter-spacing: 0; color: var(--kendo-color-on-app-surface); }
.nom-rev-linea { display: grid; grid-template-columns: max-content 40px minmax(0, 1fr) max-content; grid-template-areas: "acc cod desc imp" "acc . peso antes" "nota nota nota nota"; gap: 0 8px; align-items: center; padding: 4px 0; border-bottom: 1px dotted var(--kendo-color-border-alt); font-size: 12.5px; }
.nom-rev-linea:last-child { border-bottom: 0; }
.nom-rev-acciones { grid-area: acc; display: inline-flex; opacity: .55; }
.nom-rev-linea:hover .nom-rev-acciones, .nom-rev-acciones:focus-within { opacity: 1; }
.nom-rev-cod { grid-area: cod; font-size: 11px; color: var(--kendo-color-subtle); }
.nom-rev-desc { grid-area: desc; display: flex; align-items: center; gap: 6px; min-width: 0; }
.nom-rev-desc-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nom-rev-imp { grid-area: imp; text-align: right; font-weight: 600; }
.nom-rev-linea.is-cero .nom-rev-imp { color: var(--kendo-color-warning-on-surface); }
.nom-rev-peso { grid-area: peso; height: 3px; border-radius: 2px; overflow: hidden; background: var(--kendo-color-base-subtle); }
.nom-rev-peso > span { display: block; height: 100%; }
.nom-rev-col.is-asig .nom-rev-peso > span { background: color-mix(in srgb, var(--kendo-color-success) 70%, transparent); }
.nom-rev-col.is-ded .nom-rev-peso > span { background: color-mix(in srgb, var(--kendo-color-error) 65%, transparent); }
.nom-rev-antes { grid-area: antes; text-align: right; font-size: 10.5px; color: var(--kendo-color-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nom-rev-antes.is-nueva { font-weight: 700; color: color-mix(in srgb, var(--wl-accent-gold) 75%, var(--kendo-color-on-app-surface)); }
.nom-rev-linea-nota { grid-area: nota; }
.nom-rev-ya-no { font-size: 12px; color: var(--kendo-color-subtle); }
.nom-rev-ya-no > strong { color: var(--kendo-color-on-app-surface); margin-right: 4px; }
/* Dos columnas solo si cada una tiene lugar: el detalle va al lado de la lista y a 1366 px mide ~600.
   El contenedor es el envoltorio del recibo (nada con barra fija adentro: WlCambios/WlBarraMasiva). */
.nom-rev-recibo-marco { container-type: inline-size; }
@container (max-width: 760px) {
    .nom-rev-recibo { grid-template-columns: minmax(0, 1fr); }
    .nom-rev-col + .nom-rev-col { border-left: 0; border-top: 1px dashed var(--kendo-color-border-alt); }
}
/* La tecla dentro de un botón: más chica y del color del botón. */
.k-button .wl-tecla { margin-left: 4px; padding: 0 4px; font-size: 10px; line-height: 1.5; color: inherit; background: transparent; border-color: color-mix(in srgb, currentColor 40%, transparent); }

/* Los recibos de pago de una persona, en la ventana de su ficha. */
.nom-recibos { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow-y: auto; }
.nom-recibos > li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; background: var(--kendo-color-base-subtle); }
.nom-recibos > li > .k-button { margin-left: auto; }
.nom-recibos-fechas { font-variant-numeric: tabular-nums; font-weight: 600; }

/* «Solo de Fulano ×»: la pantalla se abrió desde la ficha y muestra solo lo de esa persona. */
.nom-filtro-trabajador {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 2px 2px 10px;
    border-radius: var(--kendo-border-radius-full);
    font-size: var(--kendo-font-size-sm);
    font-weight: 600;
    /* Los mismos tokens que wl-chip-info; aparte porque lleva su botón para quitarlo. */
    color: var(--kendo-color-info-emphasis);
    background: var(--kendo-color-info-subtle);
}
.nom-filtro-trabajador .k-button { color: inherit; }

/* La foto del trabajador junto a la cabecera de su ficha (Nómina). */
.wl-ficha-foto {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--kendo-color-border);
}

/* ==========================================================================
   CINTA DEL MÓDULO (shell/ux lote 3d, idea 15): WlCinta + WlCintaMeses + WlCintaDato. En qué
   período está parado el módulo, arriba del contenido. No es sticky (dentro de .k-drawer-content
   no se pegaría a nada, lote 3b).
   ========================================================================== */
.wl-cinta {
    display: flex;
    align-items: center;
    gap: 10px 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border);
}
.wl-cinta-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wl-cinta-etiqueta {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}
.wl-cinta-titulo { font-size: 14px; }
.wl-cinta-detalle { font-size: 11.5px; color: var(--kendo-color-subtle); }
/* Sin min-width:0: si no cabe, baja de renglón entero (a 390 px la tira de meses quedaba encima
   del botón). */
.wl-cinta-medio { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; flex: 1 1 auto; }
.wl-cinta-fin { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.wl-cinta-dato { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.wl-cinta-dato small { font-size: 10.5px; font-weight: 600; color: var(--kendo-color-subtle); }
.wl-cinta-dato b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Con tono (WlCintaDato Tono=...): solo el valor toma el color, sin la pastilla de WlEstado. */
.wl-cinta-dato[class*="wl-estado-"] b,
.wl-cinta-titulo[class*="wl-estado-"] { color: var(--wl-estado-color); }
html[data-theme="light"] .wl-cinta-dato[class*="wl-estado-"] b,
html[data-theme="light"] .wl-cinta-titulo[class*="wl-estado-"] { color: color-mix(in srgb, var(--wl-estado-color) 55%, black); }

.wl-cinta-meses { display: grid; grid-template-columns: repeat(12, 22px); gap: 2px; margin: 0; padding: 0; list-style: none; }
.wl-cinta-mes {
    display: grid;
    place-items: center;
    height: 24px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--kendo-color-subtle);
    background: color-mix(in srgb, var(--kendo-color-on-app-surface) 7%, transparent);
    cursor: default;
}
.wl-cinta-mes.is-cerrado {
    color: var(--kendo-color-success);
    background: color-mix(in srgb, var(--kendo-color-success) 16%, transparent);
}
.wl-cinta-mes.is-porcerrar {
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kendo-color-primary) 35%, transparent);
}
/* Ámbar y además rayado: se distingue del cerrado sin depender del color. */
.wl-cinta-mes.is-sincerrar {
    color: var(--kendo-color-warning);
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--kendo-color-warning) 18%, transparent) 0 3px,
        transparent 3px 6px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kendo-color-warning) 45%, transparent);
}
html[data-theme="light"] .wl-cinta-mes.is-cerrado { color: color-mix(in srgb, var(--kendo-color-success) 60%, black); }
html[data-theme="light"] .wl-cinta-mes.is-sincerrar { color: color-mix(in srgb, var(--kendo-color-warning) 55%, black); }
@media (max-width: 767.98px) {
    .wl-cinta { gap: 8px 14px; padding: 8px 10px; }
    .wl-cinta-fin { margin-left: 0; }
}

/* =====================================================================================
   WlPanelLateral — el detalle al costado (Talento Humano F1c; aprobado para Nómina, idea 14).
   NO es una ventana: no tapa la página ni la bloquea. Queda debajo de la barra superior
   (--wl-panel-top lo mide WlPanelLateral.razor.js) y por debajo de ventanas y diálogos
   (.k-window ≥ 10000). Solo tokens del tema: claro y oscuro iguales.
   ===================================================================================== */
.wl-panel-lateral {
    position: fixed;
    top: var(--wl-panel-top, 56px);
    right: 0;
    bottom: 0;
    width: min(var(--wl-panel-ancho, 420px), 100vw);
    z-index: 990;
    display: flex;
    flex-direction: column;
    background: var(--kendo-color-surface-alt, var(--kendo-color-app-surface));
    color: var(--kendo-color-on-app-surface);
    border-left: 1px solid var(--kendo-color-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    animation: wl-panel-entra 0.16s ease-out;
}
@keyframes wl-panel-entra {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .wl-panel-lateral { animation: none; }
}
.wl-panel-lateral-h {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 12px 12px 16px;
    border-bottom: 1px solid var(--kendo-color-border);
}
.wl-panel-lateral-titulo { flex: 1; min-width: 0; }
.wl-panel-lateral-b {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wl-panel-lateral-f {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--kendo-color-border);
}
/* Pares etiqueta / valor dentro del panel o de una ficha. */
.wl-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.85rem;
}
.wl-kv dt { color: var(--kendo-color-subtle); font-weight: 400; }
.wl-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .wl-panel-lateral { width: 100vw; border-left: 0; }
}

/* Tablero de Talento Humano: la tarjeta abierta en el panel se marca. */
.wl-tablero-talento .k-taskboard-card { padding: 10px 12px; }
.wl-tablero-talento .wl-tablero-card.is-foco {
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 6px;
    border-radius: 2px;
}
.wl-tablero-card-nombre { font-weight: 600; font-size: 0.85rem; line-height: 1.25; }
.wl-tablero-col-vacia { font-size: 0.75rem; color: var(--kendo-color-subtle); padding: 6px 4px; }
/* Con el panel abierto el tablero deja libre su ancho a la derecha (en escritorio). */
@media (min-width: 992px) {
    .wl-con-panel-lateral { padding-right: min(var(--wl-panel-ancho, 420px), 45vw); }
}

/* Historial (ficha del candidato): una línea de tiempo simple. */
.wl-linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wl-linea-tiempo li { position: relative; padding-left: 16px; font-size: 0.85rem; }
.wl-linea-tiempo li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kendo-color-primary);
}
.wl-linea-tiempo small { display: block; color: var(--kendo-color-subtle); font-size: 0.75rem; }

/* ==========================================================================
   Portal de PROVEEDORES (rediseño oct-2026, maqueta
   https://claude.ai/artifact/DEcsaF23XMZafpVBpkZYqd). Reusa las piezas del portal del
   empleado (.wl-portal-*): aquí solo lo propio —el color de cada impuesto, las pestañas de
   retenciones, las filas que se vuelven tarjetas en el teléfono y el expediente—.
   ========================================================================== */
.wl-prov {
    /* Un color por impuesto, siempre el mismo en pestañas, filas y gráfico. */
    --wl-ret-iva: var(--kendo-color-primary);
    --wl-ret-islr: var(--wl-accent-violet);
    --wl-ret-iae: #2BA8B4;
    --wl-ret-arcv: var(--wl-accent-gold);
}

/* En claro el primario es casi negro: el IVA sale de un azul que se distinga. */
html[data-theme="light"] .wl-prov {
    --wl-ret-iva: #2F6FDB;
    --wl-ret-iae: #13808B;
}

.wl-ret-iva { --wl-ret: var(--wl-ret-iva); }
.wl-ret-islr { --wl-ret: var(--wl-ret-islr); }
.wl-ret-iae { --wl-ret: var(--wl-ret-iae); }
.wl-ret-arcv { --wl-ret: var(--wl-ret-arcv); }

.wl-prov-titulo {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* La sigla del impuesto: se lee aunque no se distinga el color. */
.wl-prov-sigla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    background: color-mix(in srgb, var(--wl-ret) 16%, transparent);
    color: var(--wl-ret);
}

.wl-prov-rif {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.wl-prov-rif span {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: color-mix(in srgb, var(--kendo-color-on-primary) 12%, transparent);
    color: var(--kendo-color-on-primary);
}

/* Barra apilada de lo retenido en el mes, dentro de la caja del hero. */
.wl-prov-mes-barra {
    display: flex;
    gap: 2px;
    height: 10px;
    margin-top: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--kendo-color-on-primary) 14%, transparent);
}

.wl-prov-mes-barra span { height: 100%; background: var(--wl-ret); }

.wl-prov-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 12px;
}

.wl-prov-leyenda i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 2px;
    background: var(--wl-ret);
}

/* Avisos de la empresa (aviso_proveedor). */
.wl-prov-avisos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wl-prov-aviso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    box-shadow: var(--wl-shadow-sm);
}

.wl-prov-aviso-adv {
    border-color: color-mix(in srgb, var(--kendo-color-warning) 45%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--kendo-color-warning) 12%, transparent), transparent 60%), var(--kendo-color-surface);
}

.wl-prov-aviso b { display: block; font-size: 14px; }
.wl-prov-aviso p { margin: 2px 0 0; font-size: 13px; color: var(--kendo-color-subtle); white-space: pre-line; }

.wl-prov-aviso-pie {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: var(--kendo-color-subtle);
}

/* Lista de comprobantes (portada y pantalla de retenciones). */
.wl-prov-fila,
.wl-prov-cabecera {
    display: grid;
    grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) 96px minmax(0, 1fr) 130px 44px;
    gap: 12px;
    align-items: center;
}

/* La fila es un TelerikButton (el @onclick nativo no es confiable en páginas): se le quita el
   aspecto de botón y su texto se vuelve "contents" para que los hijos caigan en la grilla. */
.k-button.wl-prov-fila {
    display: grid;
    width: 100%;
    height: auto;
    padding: 11px 10px;
    justify-content: stretch;
    white-space: normal;
    text-align: left;
    font-weight: 400;
    color: var(--kendo-color-on-app-surface);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--kendo-color-border);
    border-radius: 10px;
    box-shadow: none;
    transition: background .15s;
}

.k-button.wl-prov-fila .k-button-text { display: contents; }

.k-button.wl-prov-fila:hover,
.k-button.wl-prov-fila:focus-visible { background: var(--kendo-color-base-subtle); }
.k-button.wl-prov-fila:focus-visible { outline: 2px solid var(--wl-accent-gold); outline-offset: 1px; }

.wl-prov-fila b { display: block; font-size: 13.5px; }
.wl-prov-fila small { display: block; font-size: 12px; color: var(--kendo-color-subtle); }

.wl-prov-monto {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wl-prov-cabecera {
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--wl-accent-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

/* Versión corta de la fila para la portada: sigla, qué, monto. */
.k-button.wl-prov-fila.wl-prov-fila-corta { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; }

/* Facturas pendientes de pago: filas de solo lectura (qué, antigüedad, monto). */
.wl-prov-pend-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px 12px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--kendo-color-border);
}

.wl-prov-pend-fila b { display: block; font-size: 13.5px; }
.wl-prov-pend-fila small { display: block; font-size: 12px; color: var(--kendo-color-subtle); }
.wl-prov-pend-ajuste .wl-prov-monto { color: var(--kendo-color-subtle); }
.wl-prov-pend-total { border-bottom: 0; border-top: 2px solid var(--wl-accent-gold); font-weight: 800; }

/* Totales por moneda en la tarjeta de la portada. */
.wl-prov-pend-totales { display: flex; flex-direction: column; gap: 2px; }
.wl-prov-pend-totales .wl-portal-pago-monto { font-size: 22px; }
.wl-prov-pend-totales small { display: block; }

@media (max-width: 600px) {
    .wl-prov-pend-fila { grid-template-columns: minmax(0, 1fr) auto; }
    .wl-prov-pend-fila > :nth-child(2) { grid-row: 2; grid-column: 1; justify-self: start; }
}

/* Pestañas de impuesto. */
.wl-prov-pestanas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.k-button.wl-prov-pestana {
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--kendo-color-surface);
    border-color: var(--kendo-color-border);
    color: var(--kendo-color-subtle);
}

.k-button.wl-prov-pestana .k-button-text { display: inline-flex; align-items: center; gap: 8px; }

.k-button.wl-prov-pestana.wl-prov-pestana-activa {
    background: color-mix(in srgb, var(--wl-ret) 16%, var(--kendo-color-surface));
    border-color: var(--wl-ret);
    color: var(--kendo-color-on-app-surface);
}

.wl-prov-cuenta {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--kendo-color-base-subtle);
}

/* «Nuevo» (idea 6): lo grabado desde la última visita a la pestaña. Mismo azul que la insignia
   del menú lateral, que cuenta lo mismo. */
.wl-prov-cuenta-nueva {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
}

.wl-prov-nuevo {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: 1px;
    font-family: var(--kendo-font-family, inherit);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--kendo-color-primary-on-surface, var(--kendo-color-primary));
    background: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent);
}

.k-button.wl-prov-fila.wl-prov-fila-nueva {
    background: color-mix(in srgb, var(--kendo-color-primary) 5%, transparent);
    box-shadow: inset 3px 0 0 var(--kendo-color-primary);
}

/* En el teléfono el botón baja a su propia línea en vez de apretar el texto a tres renglones. */
.wl-prov-nota-nuevos { align-items: center; flex-wrap: wrap; row-gap: 2px; }
.wl-prov-nota-nuevos > div { flex: 1 1 200px; min-width: 0; }
.wl-prov-nota-nuevos .k-button { flex: none; margin: -6px -6px -6px auto; }

/* «Mi cuenta bancaria» (idea 30): el formulario del pedido de cuenta nueva. Dos columnas que
   pasan a una en el teléfono; las etiquetas arriba, la ayuda abajo. */
.wl-prov-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.wl-prov-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wl-prov-campo-ancho { grid-column: 1 / -1; }
.wl-prov-campo > small { font-size: 12px; }
.wl-prov-etiqueta { font-size: 12.5px; font-weight: 600; color: var(--kendo-color-subtle); }
.wl-prov-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.wl-prov-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.wl-prov-solo-lectura {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    background: var(--kendo-color-base-subtle);
    color: var(--kendo-color-on-app-surface);
}
.wl-prov-error { color: var(--kendo-color-error); font-weight: 600; }
.k-input.wl-prov-input-mal,
.wl-prov-input-mal.k-textbox { border-color: var(--kendo-color-error); }
.wl-prov-acciones { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

@media (max-width: 767.98px) {
    .wl-prov-form { grid-template-columns: minmax(0, 1fr); }
}

.wl-prov-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.wl-prov-filtros .wl-prov-buscar { flex: 1 1 220px; min-width: 0; }

.wl-prov-resumen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.wl-prov-resumen .wl-portal-cifra { color: var(--wl-ret); }
.wl-prov-resumen p { margin: 0; max-width: 62ch; color: var(--kendo-color-subtle); }

.wl-prov-anual {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.k-button.wl-prov-ano {
    height: auto;
    padding: 18px;
    border-radius: 14px;
    text-align: left;
    white-space: normal;
    justify-content: flex-start;
    background: var(--kendo-color-base-subtle);
    border-color: transparent;
}

.k-button.wl-prov-ano .k-button-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.wl-prov-ano-cifra {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--wl-ret-arcv);
}

/* Cuentas bancarias. */
.wl-prov-banco {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--kendo-color-border);
}

.wl-prov-banco:first-child { border-top: 0; padding-top: 0; }
.wl-prov-banco > div { flex: 1; min-width: 0; }
.wl-prov-banco b { display: block; font-size: 13.5px; }
.wl-prov-banco small { display: block; font-size: 12px; color: var(--kendo-color-subtle); font-variant-numeric: tabular-nums; }

/* Expediente: un documento por tarjeta, con su estado arriba. */
.wl-prov-docs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wl-prov-doc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    background: var(--kendo-color-surface);
    border: 1px solid var(--kendo-color-border);
    border-top: 3px solid var(--wl-doc, var(--kendo-color-border));
    box-shadow: var(--wl-shadow-sm);
}

.wl-prov-doc-ok { --wl-doc: var(--kendo-color-success); }
.wl-prov-doc-falta { --wl-doc: var(--kendo-color-error); }
.wl-prov-doc-cabeza { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.wl-prov-doc b { font-size: 14.5px; }
.wl-prov-doc p { margin: 0; font-size: 13px; color: var(--kendo-color-subtle); }

/* Gráfico de barras apiladas por mes (lo retenido). */
.wl-grafico-barra { transform-origin: bottom; animation: wl-cascada-crecer .7s cubic-bezier(.2, .7, .2, 1) both; }
.wl-grafico-barra.wl-ret-iva,
.wl-grafico-barra.wl-ret-islr,
.wl-grafico-barra.wl-ret-iae { fill: var(--wl-ret); }
.wl-grafico-barra-vieja { opacity: .7; }

/* El número de comprobante para copiar, junto al visor. */
.wl-prov-copiar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px 2px 12px;
    border-radius: 10px;
    background: var(--kendo-color-base-subtle);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1060px) {
    .wl-prov-cabecera { display: none; }
    .wl-prov-fila {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "sigla que monto" "sigla extra accion";
        row-gap: 2px;
    }
    .wl-prov-fila .wl-prov-c-sigla { grid-area: sigla; align-self: start; }
    .wl-prov-fila .wl-prov-c-que { grid-area: que; }
    .wl-prov-fila .wl-prov-monto { grid-area: monto; }
    .wl-prov-fila .wl-prov-c-extra { grid-area: extra; }
    .wl-prov-fila .wl-prov-c-accion { grid-area: accion; justify-self: end; }
    .wl-prov-fila .wl-prov-c-fac,
    .wl-prov-fila .wl-prov-c-fecha,
    .wl-prov-fila .wl-prov-c-emp { display: none; }
    .wl-prov-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1061px) {
    .wl-prov-fila .wl-prov-c-extra { display: none; }
}

@media (max-width: 767.98px) {
    .wl-prov-avisos,
    .wl-prov-docs,
    .wl-prov-anual,
    .wl-prov-resumen { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .wl-grafico-barra { animation: none !important; }
}

/* ==========================================================================
   APROBACIONES DE COMPRAS EN EL TELÉFONO (oct-2026). Gestión de Compras > Aprobaciones se
   adapta: bajo el corte de siempre (767.98px) la tabla y el tablero se cambian por tarjetas
   (TarjetaAprobacion.razor); en el detalle de OC y RQ, el panel DecisionAprobacion.razor.
   Solo CSS: el teléfono que gira o la ventana que se achica cambian de vista sin recargar.
   ========================================================================== */
.wl-aprob-telefono { display: none; }

@media (max-width: 767.98px) {
    /* !important: la fila de Lista/Tablero lleva d-flex de Bootstrap, que también lo es. */
    .wl-aprob-escritorio { display: none !important; }
    .wl-aprob-telefono { display: flex; flex-direction: column; gap: 10px; }
}

.wl-aprob-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.wl-aprob-chips .k-button { white-space: nowrap; min-height: 36px; }
.wl-aprob-nota { font-size: 12.5px; line-height: 1.45; }

.wl-aprob-tarjeta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--kendo-color-border);
    border-radius: 14px;
    background: var(--kendo-color-surface-alt);
}
.wl-aprob-tarjeta-marcada { border-color: var(--kendo-color-primary); box-shadow: inset 0 0 0 1px var(--kendo-color-primary); }
.wl-aprob-tarjeta-casilla { margin-top: 3px; }
.wl-aprob-tarjeta-enlace,
.wl-aprob-tarjeta-enlace:hover {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}
.wl-aprob-tarjeta-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wl-aprob-tarjeta-numero { font-size: 13px; font-weight: 600; color: var(--kendo-color-primary); }
.wl-aprob-tarjeta-espera { font-size: 12px; color: var(--kendo-color-subtle); white-space: nowrap; }
.wl-aprob-tarjeta-espera-roja {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--kendo-color-error-emphasis);
    background: var(--kendo-color-error-subtle);
}
.wl-aprob-tarjeta-titulo { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.wl-aprob-tarjeta-que {
    font-size: 13px;
    color: var(--kendo-color-subtle);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wl-aprob-tarjeta-pie { align-items: flex-end; margin-top: 4px; }
.wl-aprob-tarjeta-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--kendo-color-subtle); }
.wl-aprob-tarjeta-monto { font-size: 17px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Panel «Tu turno» del detalle de OC y RQ: decidir sin volver a la lista. */
.wl-decision {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 760px;
    padding: 16px;
    border: 1px solid var(--kendo-color-border);
    border-left: 4px solid var(--kendo-color-primary);
    border-radius: 12px;
    background: var(--kendo-color-surface-alt);
}
.wl-decision-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-decision-doc { font-size: 17px; font-weight: 600; }
.wl-decision-total { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wl-decision-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; margin: 0; }

.wl-decision-datos dt { font-size: 12px; font-weight: 400; color: var(--kendo-color-subtle); }
.wl-decision-datos dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.wl-decision-nota { font-size: 13.5px; line-height: 1.45; }
.wl-decision-resultado { padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.wl-decision-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.wl-decision-botones .k-button { min-height: 44px; }
.wl-decision-devolver { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 767.98px) {
    .wl-decision { padding: 14px; }
    .wl-decision-botones { max-width: none; }
    .wl-decision-pdf .k-button { width: 100%; min-height: 44px; }
}

/* Panel lateral de la lista de OC por aprobar (escritorio, oct-2026): clic en una fila = su detalle
   y los botones a la derecha, sin salir de la lista. Solo existe dentro de .wl-aprob-escritorio. */
.wl-aprob-con-panel { display: flex; gap: 16px; align-items: flex-start; }
.wl-aprob-lista { flex: 1 1 auto; min-width: 0; }
.wl-aprob-panel { flex: 0 0 380px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.wl-aprob-panel .wl-decision { max-width: none; }
.wl-aprob-lista .k-grid tbody tr { cursor: pointer; }
.wl-aprob-lista .k-grid tbody tr.wl-aprob-fila-abierta > td { background: var(--kendo-color-primary-subtle); }
/* Pantalla mediana: al lado no caben la lista (21 columnas) y el panel; el panel flota encima,
   pegado a la derecha, y la lista conserva su ancho. */
@media (max-width: 1279.98px) {
    .wl-aprob-panel {
        position: fixed;
        top: 88px;
        right: 16px;
        width: min(400px, calc(100vw - 32px));
        max-height: calc(100vh - 104px);

        z-index: 950;
        padding: 12px;
        border: 1px solid var(--kendo-color-border);
        border-radius: 12px;
        background: var(--kendo-color-surface);
        box-shadow: var(--wl-shadow-lg);
    }
}


/* Franja de anular un registro de compras (Contabilidad, oct-2026): los datos del registro a la vista. */
.wl-anular-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 16px; margin: 0 0 8px; }
.wl-anular-datos dt { font-size: 12px; font-weight: 400; opacity: .75; }
.wl-anular-datos dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-anular-consecuencias { margin: 0; padding-left: 18px; list-style: disc; }

/* ==========================================================================
   INICIO: ELEGIR EMPRESA (oct-2026, Winledger.Shell Home.razor). Una sola: panel de la empresa; hasta 10,
   tarjetas; con más, lista con buscador y recientes. Los datos de cada tarjeta los ponen los módulos.
   ========================================================================== */
.wl-inicio { display: flex; flex-direction: column; gap: 20px; max-width: 1180px; }
.wl-inicio-arriba { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; }
.wl-inicio-cabeza { display: flex; flex-direction: column; gap: 4px; }
/* Lo que es de toda la base (la tasa BCV del día): una vez, arriba a la derecha. */
.wl-inicio-general {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 10px 14px;
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 10px;
}
.wl-inicio-general-titulo { font-size: 12px; color: var(--kendo-color-subtle); }
.wl-inicio-general-valor { font-size: 15px; font-weight: 600; }
.wl-inicio-general.is-aviso { border-color: var(--kendo-color-warning); }
.wl-inicio-general.is-aviso .wl-inicio-general-titulo { font-weight: 600; color: var(--kendo-color-warning-on-subtle, var(--kendo-color-on-app-surface)); }
.wl-inicio-titulo { margin: 0; font-size: 1.6rem; font-weight: 600; }

.wl-empresas-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wl-empresa-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    padding: 18px;
    text-align: left;
    font: inherit;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 14px;
    cursor: pointer;
}
.wl-empresa-tarjeta:hover { border-color: var(--kendo-color-primary); }
.wl-empresa-tarjeta:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; }
.wl-empresa-tarjeta.is-actual { border: 2px solid var(--kendo-color-primary); cursor: default; }
.wl-empresa-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wl-empresa-codigo {
    font-size: 13px;
    font-weight: 600;
    color: var(--kendo-color-primary);
    background: var(--kendo-color-primary-subtle);
    padding: 2px 10px;
    border-radius: 6px;
    justify-self: start;
    align-self: flex-start;
}
.wl-empresa-aqui {
    font-size: 12px;
    font-weight: 600;
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
    padding: 2px 10px;
    border-radius: 999px;
}
.wl-empresa-nombre { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.wl-empresa-rif { font-size: 13px; color: var(--kendo-color-subtle); }
.wl-empresa-linea { height: 1px; background: var(--kendo-color-border); margin: 2px 0; }
.wl-empresa-dato { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.wl-empresa-dato-titulo { font-size: 12px; color: var(--kendo-color-subtle); }
.wl-empresa-dato-fuerte { font-weight: 600; color: var(--kendo-color-primary); }
.wl-empresa-etiqueta {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kendo-color-warning-on-subtle, var(--kendo-color-on-app-surface));
    background: var(--kendo-color-warning-subtle);
    padding: 1px 8px;
    border-radius: 6px;
}
.wl-empresa-detalle { font-size: 12.5px; color: var(--kendo-color-subtle); }

/* Más de 10 empresas: lista con buscador. */
.wl-empresas-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wl-empresas-buscar {
    flex: 1 1 320px;
    min-height: 44px;
    padding: 0 14px;
    font: inherit;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 10px;
}
.wl-empresas-chip {
    min-height: 44px;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    color: var(--kendo-color-primary);
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 22px;
    cursor: pointer;
}
.wl-empresas-chip.is-activo { color: var(--kendo-color-on-primary); background: var(--kendo-color-primary); border-color: var(--kendo-color-primary); }
.wl-empresas-lista { border: 1px solid var(--kendo-color-border); border-radius: 12px; background: var(--kendo-color-surface-alt); overflow: hidden; }
.wl-empresas-fila {
    display: grid;
    grid-template-columns: 72px minmax(0, 2fr) minmax(0, 2fr) 120px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--kendo-color-border);
}
.wl-empresas-fila:first-child { border-top: 0; }
.wl-empresas-fila.is-actual { background: var(--kendo-color-primary-subtle); }
.wl-empresas-fila-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.wl-empresas-fila-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wl-empresas-entrar {
    min-height: 40px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--kendo-color-primary);
    background: transparent;
    border: 1px solid var(--kendo-color-border);
    border-radius: 8px;
    cursor: pointer;
}
.wl-empresas-entrar.is-actual { color: var(--kendo-color-on-primary); background: var(--kendo-color-primary); border-color: var(--kendo-color-primary); cursor: default; }
.wl-empresas-vacio { padding: 20px 16px; }

/* El enlace de un dato («Revisar firmas») y el «N tienen algo pendiente» de la lista. */
.wl-inicio-enlace {
    align-self: flex-start;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: var(--kendo-color-primary);
    background: none;
    border: 0;
    cursor: pointer;
}
.wl-inicio-enlace:hover { text-decoration: underline; }
.wl-inicio-enlace:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; border-radius: 4px; }
.wl-inicio-enlace .bi { font-size: 12px; }

/* Una sola empresa: el panel de la empresa, un bloque por módulo. */
.wl-empresa-unica {
    max-width: 880px;
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 14px;
    overflow: hidden;
}
.wl-empresa-unica-cabeza { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.wl-empresa-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    color: var(--kendo-color-on-primary);
    background: var(--kendo-color-primary);
    border-radius: 12px;
}
/* Los separadores son el gap de 1px sobre el color del borde: valen igual en fila o apilados. */
.wl-empresa-unica-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--kendo-color-border);
    border-top: 1px solid var(--kendo-color-border);
}
.wl-empresa-unica-modulo { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--kendo-color-surface-alt); }
.wl-empresa-unica-linea { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.wl-empresa-unica-modulo .wl-inicio-enlace { margin-top: 6px; }

/* Más de 10: el atajo de las últimas en las que entró. */
.wl-empresas-recientes { display: flex; flex-direction: column; gap: 8px; }
.wl-empresas-recientes-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wl-empresas-reciente {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 12px;
    cursor: pointer;
}
.wl-empresas-reciente:hover { border-color: var(--kendo-color-primary); }
.wl-empresas-reciente:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; }
.wl-empresas-reciente.is-actual { border: 2px solid var(--kendo-color-primary); cursor: default; }
.wl-empresas-reciente .wl-empresa-codigo { align-self: center; }
.wl-empresas-reciente-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-empresas-reciente-nombre { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Instalación nueva: el administrador sin ninguna empresa (Home.razor). */
.wl-inicio-primera {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 560px;
    padding: 24px;
    background: var(--kendo-color-surface-alt);
    border: 1px solid var(--kendo-color-border);
    border-radius: 14px;
}
.wl-inicio-primera-titulo { margin: 0; font-size: 1.2rem; font-weight: 600; }
.wl-inicio-primera-boton.is-actual { padding: 0 20px; cursor: pointer; }

@media (max-width: 767.98px) {
    .wl-empresas-fila { grid-template-columns: 56px minmax(0, 1fr); }
    .wl-empresas-fila-datos, .wl-empresas-entrar { grid-column: 1 / -1; }
}

/* ==================== COMPRAS — RESUMEN DEL INICIO Y DASHBOARD (7-oct-2026) ====================
   Los paneles con título (el mes en compras, el gráfico de gasto, lo que espera) y las barras del
   mes. Las tarjetas que vivían aquí (.wl-hoy-card, TarjetaHoyCompras) pasaron a WlIndicador el
   13-oct-2026 y se retiraron. Solo tokens del tema. */

/* Panel con título (el mes en compras, el gráfico de gasto). */
.wl-hoy-panel {
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 10px);
    box-shadow: var(--wl-shadow-sm);
    padding: 16px;
    min-width: 0;
}
.wl-hoy-panel-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 12px;
}
.wl-hoy-panel-titulo strong { color: var(--kendo-color-primary); font-size: .95rem; }
.wl-hoy-panel-titulo span { font-size: .78rem; color: var(--kendo-color-subtle); }

/* Barras del mes: etiqueta | barra | número (y el mes anterior, chico). */
.wl-mes-barras { display: grid; gap: 8px; }
.wl-mes-fila {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 44px 64px;
    gap: 10px;
    align-items: center;
    font-size: .85rem;
}
.wl-mes-fila > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-mes-pista { height: 22px; background: var(--kendo-color-surface-alt); border-radius: 5px; overflow: hidden; }
.wl-mes-pista i {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--kendo-color-primary), var(--kendo-color-primary-emphasis));
    transition: width .4s ease;
}
.wl-mes-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-mes-antes { text-align: right; font-size: .75rem; color: var(--kendo-color-subtle); font-variant-numeric: tabular-nums; }
.wl-mes-pie { margin-top: 12px; font-size: .82rem; color: var(--kendo-color-subtle); }
.wl-mes-pie b { color: var(--kendo-color-on-app-surface); }
@media (max-width: 479.98px) {
    .wl-mes-fila { grid-template-columns: 122px minmax(0, 1fr) 36px; }
    .wl-mes-antes { display: none; }
}

/* Las tablas Bootstrap dentro de un panel toman el fondo del panel: con su blanco fijo, la tabla
   «Últimas 10 OCs» del Dashboard salía como un parche blanco en el tema oscuro. */
.wl-hoy-panel .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--kendo-color-on-app-surface);
    --bs-table-hover-bg: var(--kendo-color-surface-alt);
    --bs-table-hover-color: var(--kendo-color-on-app-surface);
    --bs-table-border-color: var(--kendo-color-border);
    color: var(--kendo-color-on-app-surface);
}
.wl-hoy-panel .table > :not(caption) > * > * { background-color: transparent; color: inherit; }
.wl-hoy-panel .table-hover > tbody > tr:hover > * { background-color: var(--kendo-color-surface-alt); }
.wl-hoy-panel .table thead th { color: var(--kendo-color-subtle); font-weight: 600; }

/* «Lo que más espera»: una fila por documento, con su estado y a dónde lleva. */
.wl-hoy-espera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: var(--kendo-color-surface-alt);
    color: var(--kendo-color-on-app-surface);
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.wl-hoy-espera:hover { border-color: var(--kendo-color-primary); }
.wl-hoy-espera:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 1px; }
.wl-hoy-espera-txt { min-width: 0; flex: 1 1 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Columnas del gasto mensual (Dashboard de Compras): el mes del filtro en dorado. */
.wl-gasto-col { fill: var(--kendo-color-primary); fill-opacity: .85; }
.wl-gasto-col:hover { fill-opacity: 1; }
.wl-gasto-col-actual { fill: var(--wl-accent-gold); fill-opacity: 1; }

.wl-hoy-dos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 991.98px) { .wl-hoy-dos { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    .wl-mes-pista i { transition: none; }
}

/* ==================== COMPRAS — RESPUESTA DE PROVEEDORES (8-oct-2026) ==================== */
/* Las últimas solicitudes de un proveedor para un artículo: ● cotizó, ○ no cotizó. */
.wl-puntos { letter-spacing: 2px; white-space: nowrap; font-size: 1rem; }
.wl-puntos .si { color: var(--kendo-color-success); }
.wl-puntos .no { color: var(--kendo-color-error); }

/* Barra de porcentaje en una celda (% que responde). */
.wl-barra-pct { flex: 1; min-width: 70px; height: 8px; border-radius: 4px; overflow: hidden;
                background: var(--kendo-color-surface-alt); border: 1px solid var(--kendo-color-border); }
.wl-barra-pct i { display: block; height: 100%; background: var(--kendo-color-primary); }
.wl-barra-pct.ok i { background: var(--kendo-color-success); }
.wl-barra-pct.aviso i { background: var(--kendo-color-warning); }
.wl-barra-pct.error i { background: var(--kendo-color-error); }

/* ==================== COMPRAS — CALIFICACIÓN DE PROVEEDORES (8-oct-2026) ==================== */
/* La letra A/B/C: verde, azul, rojo; sin calificar, neutra. */
.wl-letra { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
            font-weight: 800; font-size: .85rem; }
.wl-letra-A { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success-on-subtle); }
.wl-letra-B { background: var(--kendo-color-info-subtle); color: var(--kendo-color-info-on-subtle); }
.wl-letra-C { background: var(--kendo-color-error-subtle); color: var(--kendo-color-error-on-subtle); }
.wl-letra-sin { background: transparent; border: 1px dashed var(--kendo-color-border); color: var(--kendo-color-subtle); }
.wl-letra.wl-letra-chica { width: 20px; height: 20px; font-size: .7rem; border-radius: 4px; vertical-align: middle; }

/* Lista + detalle; en pantallas angostas, uno debajo del otro. */
.wl-calif-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1199.98px) { .wl-calif-layout { grid-template-columns: minmax(0, 1fr); } }

/* Anillo de puntos: --v de 0 a 100; el color sigue a la letra. */
.wl-calif-anillo { --c: var(--kendo-color-subtle); --v: 0; flex: none; width: 76px; height: 76px; border-radius: 50%;
                   display: grid; place-items: center;
                   background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--kendo-color-surface-alt) 0); }
.wl-calif-anillo b { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
                     background: var(--kendo-color-surface); font-size: 1.25rem; font-weight: 800; }
.wl-letra-fondo-A { --c: var(--kendo-color-success); }
.wl-letra-fondo-B { --c: var(--kendo-color-info); }
.wl-letra-fondo-C { --c: var(--kendo-color-error); }

/* Un bloque por criterio: nombre y peso | valor; debajo la barra y cuántos casos se midieron. */
.wl-calif-crit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
                 font-size: .85rem; padding: 8px 0; border-bottom: 1px solid var(--kendo-color-border); }
.wl-calif-crit > .wl-barra-pct, .wl-calif-crit > :last-child { grid-column: 1 / -1; }

/* ==================== COMPRAS — TIEMPO DE COMPRA (8-oct-2026) ==================== */
/* Barra apilada: cuánto pesa cada etapa en el tiempo total (flex-grow = porcentaje). */
.wl-tc-barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--kendo-color-surface-alt); }
.wl-tc-barra > span { min-width: 4px; }
.wl-tc-RqACotizacion { background: var(--kendo-color-info); }
.wl-tc-CotizacionAOrden { background: var(--kendo-color-warning); }
.wl-tc-OrdenARecepcion { background: var(--kendo-color-success); }
.wl-tc-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }

/* Talento · revisar documentos del expediente (Gilany, lote 2): lista a la izquierda, visor a la
   derecha. La ventana mide 92vw × 86vh; el visor ocupa todo el alto que queda. En pantallas
   angostas la lista va arriba y el visor debajo. */
.k-window.wl-revision-docs { max-width: calc(100vw - 16px); }
.k-window.wl-revision-docs .k-window-content { display: flex; flex-direction: column; min-height: 0; }
.wl-revision-docs-cuerpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; }
.wl-revision-docs-lista { display: flex; flex-direction: column; gap: 4px; overflow: auto; min-height: 0; }
.wl-revision-docs-item.k-button { justify-content: flex-start; text-align: left; white-space: normal; height: auto; padding: 6px 8px; }
.wl-revision-docs-visor { min-height: 0; height: 100%; overflow: hidden; }
@media (max-width: 700px) {
    .wl-revision-docs-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(320px, 1fr); }
    .wl-revision-docs-lista { flex-direction: row; flex-wrap: wrap; }
}

/* ===== Flujo de Caja (Tesorería): la matriz de rubros por semana ===== */
/* La cifra de una celda es un botón (los eventos nativos no llegan al circuito): se ve como texto. */
.wl-caja-celda.k-button { background: transparent; border: 0; box-shadow: none; padding: 0 4px; min-width: 0; height: auto; font-variant-numeric: tabular-nums; color: inherit; }
.wl-caja-celda.k-button:hover { background: var(--kendo-color-base-hover); }
.wl-caja-celda-sel.k-button { outline: 2px solid var(--kendo-color-primary); outline-offset: -2px; }
.k-grid th.wl-caja-hoy { background: var(--kendo-color-warning-subtle); }
.k-grid tr.wl-caja-fila-saldo td { background: var(--kendo-color-base-subtle); font-weight: 600; border-top: 2px solid var(--kendo-color-border); }
/* Fila de un reporte que abre su detalle al hacer clic (Reportes de Tesorería, oct-2026). */
.k-grid tr.wl-cursor-pointer { cursor: pointer; }
.k-grid th.wl-caja-proy, .k-grid td.wl-caja-proy { background: var(--kendo-color-info-subtle); }
.k-grid th.wl-caja-cierre, .k-grid td.wl-caja-cierre { border-right: 2px solid var(--kendo-color-border-alt, var(--kendo-color-border)); }
.wl-caja-boton-aviso.k-button { border-color: var(--kendo-color-warning); background: var(--kendo-color-warning-subtle); }
/* Lo atrasado que NO suma al saldo (etapa 1, 26-oct-2026): gris y con borde punteado a la derecha,
   para que no se lea como una semana más. */
.k-grid th.wl-caja-atrasado, .k-grid td.wl-caja-atrasado { background: var(--kendo-color-base-subtle); border-right: 2px dashed var(--kendo-color-border); }
.wl-caja-atraso th { font-size: .8rem; font-weight: 600; color: var(--kendo-color-subtle); white-space: nowrap; }
.wl-caja-atraso td { font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: top; }

/* ==================== SEGURIDAD — Centro de Seguridad (oct-2026) ==================== */
/* Ficha del usuario, alta guiada y vista previa del menú. Tokens del tema; nada de hex. */
.wl-col-150 { width: 150px; }
.wl-col-160 { width: 160px; }
.wl-lista-empresas { max-height: 320px; overflow-y: auto; }

.wl-ficha-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--kendo-color-primary); color: var(--kendo-color-on-primary);
    font-weight: 700; font-size: 1.1rem;
    border: 2px solid var(--wl-accent-gold, var(--kendo-color-primary));
}
.wl-ficha-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.85rem; margin: 0; }
.wl-ficha-kv dt { color: var(--kendo-color-subtle); font-weight: 400; }
.wl-ficha-kv dd { margin: 0; }

.wl-menu-previsto { font-size: 0.85rem; }
.wl-menu-previsto-titulo { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 6px; }
.wl-menu-previsto li { padding: 2px 0; }
.wl-menu-previsto-nivel1 { padding-left: 14px; }
.wl-menu-previsto-nivel2 { padding-left: 14px; }
.wl-menu-previsto-nivel3 { padding-left: 14px; }
.wl-menu-previsto-oculto > span:first-child { color: var(--kendo-color-subtle); text-decoration: line-through; opacity: 0.7; }

/* Alta guiada: tarjetas de arquetipo y barra de pasos */
.wl-arquetipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.wl-arquetipo {
    border: 1.5px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg);
    padding: 12px; cursor: pointer; background: var(--kendo-color-surface);
    display: grid; gap: 4px; text-align: left; height: auto; white-space: normal; line-height: normal;
}
.wl-arquetipo:hover { border-color: var(--kendo-color-primary); }
.wl-arquetipo.wl-arquetipo-on { border-color: var(--kendo-color-primary); background: var(--kendo-color-primary-subtle); }
.wl-arquetipo b { font-size: 0.9rem; color: var(--kendo-color-on-app-surface); }
.wl-arquetipo span { font-size: 0.78rem; color: var(--kendo-color-subtle); }
/* El TelerikButton envuelve el contenido en .k-button-text (en linea): sin esto titulo y detalle salen pegados. */
.wl-arquetipo > .k-button-text { display: grid; gap: 4px; justify-items: start; text-align: left; color: var(--kendo-color-on-app-surface); font-size: 0.9rem; }
.wl-pasos { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.wl-paso { flex: 1; min-width: 110px; font-size: 0.8rem; color: var(--kendo-color-subtle); padding: 6px 8px; border-top: 3px solid var(--kendo-color-border); }
.wl-paso-hecho { border-color: var(--kendo-color-success); color: var(--kendo-color-on-app-surface); }
.wl-paso-actual { border-color: var(--kendo-color-primary); color: var(--kendo-color-primary); font-weight: 700; }
.wl-col-110 { width: 110px; }
.wl-col-130 { width: 130px; }

/* Roles y permisos (etapa 3): lista de roles, cabecera de módulo e impacto */
.wl-roles-lista { display: grid; gap: 4px; }
.k-button.wl-rol-item {
    justify-content: space-between; text-align: left; height: auto; white-space: normal; line-height: normal;
    padding: 7px 10px; background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border);
}
.k-button.wl-rol-item .k-button-text { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; }
.k-button.wl-rol-item.wl-rol-item-on { background: var(--kendo-color-primary-subtle); border-color: var(--kendo-color-primary); font-weight: 600; }
.wl-modulo-cabecera { display: flex; align-items: center; gap: 8px; padding: 6px 10px; flex-wrap: wrap; }
.wl-tabla-permisos th { font-size: 0.75rem; color: var(--kendo-color-subtle); text-transform: uppercase; letter-spacing: 0.03em; }
.wl-impacto {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 12px; font-size: 0.85rem;
    background: var(--kendo-color-surface-alt); border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg);
}
/* Política de claves (etapa 3): reglas como frases con interruptor; probador */
.wl-regla { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--kendo-color-border); }
.wl-regla:last-child { border-bottom: 0; }
.wl-regla small { display: block; color: var(--kendo-color-subtle); }
.wl-medidor { display: flex; gap: 3px; margin: 6px 0; }
.wl-medidor i { flex: 1; height: 7px; border-radius: 2px; background: var(--kendo-color-border); }
.wl-medidor i.wl-medidor-on { background: var(--kendo-color-success); }
.wl-medidor i.wl-medidor-mal { background: var(--kendo-color-error); }
/* Actividad (etapa 3): línea de tiempo */
.wl-linea-dia { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kendo-color-subtle); font-weight: 700; padding: 10px 0 2px; }
.wl-evento { display: grid; grid-template-columns: 56px 14px 1fr; gap: 10px; padding: 5px 0; font-size: 0.85rem; }
.wl-evento .wl-evento-hora { color: var(--kendo-color-subtle); font-variant-numeric: tabular-nums; font-size: 0.78rem; padding-top: 2px; }
.wl-evento .wl-evento-punto { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; border: 2px solid var(--kendo-color-border); background: var(--kendo-color-surface); }
.wl-evento-ok .wl-evento-punto { border-color: var(--kendo-color-success); }
.wl-evento-aviso .wl-evento-punto { border-color: var(--kendo-color-warning); background: var(--kendo-color-warning); }
.wl-evento-alerta .wl-evento-punto { border-color: var(--kendo-color-error); background: var(--kendo-color-error); }
.wl-evento small { display: block; color: var(--kendo-color-subtle); font-size: 0.78rem; }

/* ==================== WlIndicador (maqueta Indicadores, 11-oct-2026) ====================
   Reemplaza las tarjetas wl-kpi-*: fondo neutro siempre; el estado va en la franja, el anillo o
   el delta. --wl-ind-color es el tono (ok/aviso/error/info/oro/violeta/neutro). */
.wl-ind {
    --wl-ind-color: var(--kendo-color-subtle);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 2px 10px;
    min-width: 0;
    padding: 12px 12px 10px;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg);
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.wl-ind-link:hover, a.wl-ind-link:focus-visible { transform: translateY(-2px); box-shadow: var(--wl-shadow-lg); border-color: var(--kendo-color-primary); outline: none; color: inherit; }
.wl-ind-tono-ok { --wl-ind-color: var(--kendo-color-success); }
.wl-ind-tono-aviso { --wl-ind-color: var(--kendo-color-warning); }
.wl-ind-tono-error { --wl-ind-color: var(--kendo-color-error); }
.wl-ind-tono-info { --wl-ind-color: var(--kendo-color-primary); }
.wl-ind-tono-oro { --wl-ind-color: var(--wl-accent-gold); }
.wl-ind-tono-violeta { --wl-ind-color: var(--wl-accent-violet); }
.wl-ind-etiqueta { grid-column: 1; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--kendo-color-subtle); min-width: 0; line-height: 1.25; }
.wl-ind-chip { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; flex: none; background: var(--kendo-color-primary-subtle); color: var(--kendo-color-primary); }
.wl-ind-chip .k-svg-icon { width: 14px; height: 14px; }
/* Número grande en la sans de la app; proporcional, no tabular (a este tamaño el 1 se vería suelto). */
.wl-ind-valor { grid-column: 1; font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: break-word; }
/* Montos largos («38.135.849.008,45 VES»): con 1,75rem y overflow-wrap anywhere se partían en medio
   de la cifra (medido 13-oct-2026 en Flujo de Caja, tarjeta de 262 px). IndicadorUi.ClaseLargo baja
   la letra según el largo y break-word solo corta si ni así cabe. */
.wl-ind-valor.wl-ind-valor-largo { font-size: 1.35rem; }
.wl-ind-valor.wl-ind-valor-muy-largo { font-size: 1.12rem; }
.wl-ind-valor small { font-size: 0.8rem; font-weight: 600; color: var(--kendo-color-subtle); margin-left: 5px; white-space: nowrap; }
/* overflow-wrap: un nombre sin espacios («Último: 436_Contabilidad_...sql») desbordaba la tarjeta 46 px (13-oct-2026). */
.wl-ind-nota { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; color: var(--kendo-color-subtle); min-width: 0; overflow-wrap: anywhere; }
.wl-ind-lado { grid-column: 2; grid-row: 1 / 4; display: grid; place-items: center; }
.wl-ind-delta { font-weight: 700; font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; line-height: 1.3; --wl-ind-delta-color: var(--kendo-color-subtle); color: var(--wl-ind-delta-color); background: color-mix(in srgb, var(--wl-ind-delta-color) 15%, transparent); }
.wl-ind-antes { white-space: nowrap; }
.wl-ind-delta-ok { --wl-ind-delta-color: var(--kendo-color-success); }
.wl-ind-delta-error { --wl-ind-delta-color: var(--kendo-color-error); }
html[data-theme="light"] .wl-ind-delta { color: color-mix(in srgb, var(--wl-ind-delta-color) 55%, black); }
/* Mini serie: sin ejes, último punto marcado; el acento primario salvo que el tono diga otra cosa. */
.wl-ind-spark { width: 84px; height: 34px; display: block; --wl-spark: var(--kendo-color-primary); }
.wl-ind-tono-ok .wl-ind-spark, .wl-ind-tono-aviso .wl-ind-spark, .wl-ind-tono-error .wl-ind-spark { --wl-spark: var(--wl-ind-color); }
.wl-ind-spark-area { fill: var(--wl-spark); fill-opacity: 0.15; }
.wl-ind-spark-linea { fill: none; stroke: var(--wl-spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wl-ind-spark-punto { fill: var(--wl-spark); stroke: var(--kendo-color-surface); stroke-width: 2; }
/* Anillo: la pista es un paso más claro del mismo color (no gris), así el estado se lee en todo el aro. */
.wl-ind-anillo { width: 56px; height: 56px; display: block; --wl-aro: var(--kendo-color-primary); }
.wl-ind-tono-ok .wl-ind-anillo, .wl-ind-tono-aviso .wl-ind-anillo, .wl-ind-tono-error .wl-ind-anillo { --wl-aro: var(--wl-ind-color); }
.wl-ind-anillo-pista { fill: none; stroke: color-mix(in srgb, var(--wl-aro) 22%, var(--kendo-color-surface)); stroke-width: 7; }
.wl-ind-anillo-arco { fill: none; stroke: var(--wl-aro); stroke-width: 7; stroke-linecap: round; }
.wl-ind-anillo-texto { font-size: 11px; font-weight: 700; fill: var(--kendo-color-on-app-surface); }
/* Alerta: franja de gravedad a la izquierda, número del color de la gravedad, botón abajo a la derecha. */
.wl-ind-alerta { grid-template-columns: 4px minmax(0, 1fr) auto; padding-left: 10px; }
.wl-ind-alerta::before { content: ""; grid-column: 1; grid-row: 1 / 4; width: 4px; border-radius: 4px; background: var(--wl-ind-color); }
.wl-ind-alerta .wl-ind-etiqueta, .wl-ind-alerta .wl-ind-valor, .wl-ind-alerta .wl-ind-nota { grid-column: 2; }
.wl-ind-alerta .wl-ind-valor { color: var(--wl-ind-color); }
.wl-ind-alerta .wl-ind-lado { grid-column: 3; align-self: end; }
html[data-theme="light"] .wl-ind-alerta .wl-ind-valor { color: color-mix(in srgb, var(--wl-ind-color) 70%, black); }
/* Estado: icono grande en chip del tono; el «valor» es una frase, no un número. */
.wl-ind-estado { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.wl-ind-grande { grid-column: 1; grid-row: 1 / 4; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--wl-ind-color); background: color-mix(in srgb, var(--wl-ind-color) 15%, transparent); }
.wl-ind-grande .k-svg-icon { width: 20px; height: 20px; }
.wl-ind-estado .wl-ind-etiqueta, .wl-ind-estado .wl-ind-valor, .wl-ind-estado .wl-ind-nota { grid-column: 2; }
.wl-ind-estado .wl-ind-valor { font-size: 1.1rem; }
/* Verbo pintado dentro de la tarjeta-enlace: se ve como el botón, pero el clic es de toda la tarjeta. */
.wl-ind-accion { pointer-events: none; }
a.wl-ind-link:hover .wl-ind-accion { border-color: var(--kendo-color-primary); color: var(--kendo-color-primary); }
/* La fila: tantas como quepan, todas del mismo alto. */
/* 230 px: con menos, la mini serie (84 px) deja el número y el delta partidos en tres líneas (medido a 1.092 px). */
.wl-ind-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-items: stretch; }
/* Sin mini serie (solo alertas) caben más angostas. */
.wl-ind-fila-compacta { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Cantidad variable (una tarjeta por moneda): auto-fill deja las columnas vacías y una sola tarjeta no se estira a todo el ancho (14-oct-2026). */
.wl-ind-fila-libre { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Cinco tarjetas sin dejar una sola abajo, según el ancho del CONTENEDOR (el menú lateral cambia
   el ancho útil, por eso no es @media): angosto 2+2+1 (la última a lo ancho), mediano 3+2 (las dos
   de abajo más anchas, sobre 6 columnas), ancho las cinco en fila. Medido 11-oct-2026: con
   auto-fit a 190 px el panel de ~840 px dejaba 4+1 y notas partidas en cuatro líneas. */
.wl-ind-cq { container-type: inline-size; }
.wl-ind-fila-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-ind-fila-5 > :nth-child(5) { grid-column: 1 / -1; }
@container (min-width: 600px) {
    .wl-ind-fila-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .wl-ind-fila-5 > * { grid-column: span 2; }
    .wl-ind-fila-5 > :nth-child(n+4) { grid-column: span 3; }
}
@container (min-width: 1040px) {
    .wl-ind-fila-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .wl-ind-fila-5 > *, .wl-ind-fila-5 > :nth-child(n+4) { grid-column: auto; }
}
/* Filas de 3 en 3 (Inicio de Activos Fijos, 10-oct-2026): una columna en el teléfono, dos en
   mediano y tres en ancho; la tarjeta que quedaría sola en su fila toma la fila entera. */
.wl-ind-fila-3 { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 440px) {
    .wl-ind-fila-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wl-ind-fila-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (min-width: 720px) {
    .wl-ind-fila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wl-ind-fila-3 > :last-child:nth-child(odd) { grid-column: auto; }
    .wl-ind-fila-3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
/* Filas de 4 (Inicio de Contabilidad, 13-oct-2026): una columna en el teléfono, 2+2 en mediano y
   las cuatro en fila en ancho. Con auto-fit a 190 px, a ~560 px de panel quedaban cuatro columnas
   de 135 px y «-770,6 %» se partía en dos líneas. */
.wl-ind-fila-4 { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 440px) {
    .wl-ind-fila-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 900px) {
    .wl-ind-fila-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* La tarjeta-botón (OnClick) y la que es el filtro puesto (Activa), 13-oct-2026: lo que hacía
   TarjetaHoyCompras (ya retirada) en Control de Recepciones y de Facturación. */
button.wl-ind-boton { font: inherit; text-align: left; width: 100%; cursor: pointer; }
button.wl-ind-boton:hover, button.wl-ind-boton:focus-visible { transform: translateY(-2px); box-shadow: var(--wl-shadow-lg); border-color: var(--kendo-color-primary); }
/* Con teclado, un contorno aparte del anillo de la tarjeta activa: que el foco no se confunda con el filtro puesto. */
button.wl-ind-boton:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 3px; }
button.wl-ind-boton:hover .wl-ind-accion { border-color: var(--kendo-color-primary); color: var(--kendo-color-primary); }
.wl-ind.wl-ind-activa {
    box-shadow: 0 0 0 2px var(--kendo-color-primary), var(--wl-shadow-md);
    background: var(--kendo-color-surface);
    background: color-mix(in srgb, var(--kendo-color-primary) 7%, var(--kendo-color-surface));
}
@media (prefers-reduced-motion: reduce) { button.wl-ind-boton:hover { transform: none; } }
/* Filas de 6 (Control de Recepciones): 2 en el teléfono, 3+3 en mediano, las seis en fila en ancho. */
.wl-ind-fila-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 600px) { .wl-ind-fila-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1040px) { .wl-ind-fila-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* El pie de la fila: de qué período son los números y cuándo se leyeron. */
.wl-ind-pie { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 2px 0; font-size: 0.75rem; color: var(--kendo-color-subtle); }
.wl-ind-pie > span + span::before { content: "·"; margin-right: 8px; }
@media (prefers-reduced-motion: reduce) { .wl-ind { transition: none; } }

/* Puesta en marcha de la contabilidad: paso saltado al copiar, regla de cortes del código y sangría por nivel */
.wl-paso-saltado { border-top-style: dashed; opacity: 0.6; }
.wl-pm-regla { display: flex; flex-wrap: wrap; gap: 4px; }
.wl-pm-celda { display: grid; justify-items: center; gap: 2px; padding-right: 2px; border-right: 3px solid transparent; }
.wl-pm-celda .k-button { min-width: 34px; }
.wl-pm-corte { border-right-color: var(--kendo-color-primary); }
.wl-pm-tabla-corta { max-height: 240px; overflow-y: auto; }
.wl-pm-n2 { padding-left: 12px; } .wl-pm-n3 { padding-left: 24px; } .wl-pm-n4 { padding-left: 36px; }
.wl-pm-n5 { padding-left: 48px; } .wl-pm-n6 { padding-left: 60px; } .wl-pm-n7 { padding-left: 72px; }
.wl-pm-n8 { padding-left: 84px; } .wl-pm-n9 { padding-left: 96px; } .wl-pm-n10 { padding-left: 108px; }

/* ==========================================================================
   IMPORTADOR DE EXCEL COMÚN (WlImportadorExcel, maqueta «Importadores de Winledger», 19-oct-2026): migas con el camino
   de vuelta, línea dorada, los tres pasos, la zona para soltar el archivo, el aviso con su acción, la tabla con «Qué
   pasa» y el panel «Qué cambia». Solo tokens del tema: el oscuro es el de base, el claro va en [data-theme="light"].
   ========================================================================== */
.wl-imp { padding-top: 0.75rem; min-width: 0; container-type: inline-size; container-name: wl-imp; }
.wl-imp-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--kendo-color-subtle); }
.wl-imp-volver {
    padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--kendo-color-primary-on-surface);
}
.wl-imp-volver:hover { text-decoration: underline; }
.wl-imp-volver:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: 2px; }
.wl-imp-oro { height: 3px; margin: 8px 0 12px; border-radius: 2px; background: var(--wl-accent-gold); }
.wl-imp-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.wl-imp-cabecera-texto { min-width: 0; }
.wl-imp-titulo { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.2; color: var(--kendo-color-on-app-surface); }
.wl-imp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.85rem; color: var(--kendo-color-subtle); }
.wl-imp-chip {
    display: inline-flex; align-items: center; max-width: 320px; padding: 2px 10px; border-radius: 999px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.72rem; font-weight: 600;
    color: var(--kendo-color-on-app-surface); background: var(--kendo-color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border);
}
.wl-imp-chip-error { color: var(--kendo-color-error-on-subtle); background: var(--kendo-color-error-subtle); box-shadow: none; }
.wl-imp-chip-ok { color: var(--kendo-color-success-on-subtle); background: var(--kendo-color-success-subtle); box-shadow: none; }
.wl-imp-chip-aviso { color: var(--kendo-color-warning-on-subtle); background: var(--kendo-color-warning-subtle); box-shadow: none; }

/* Menú «⋯ Más»: el velo transparente cierra el menú al pulsar afuera */
.wl-imp-mas { position: relative; flex-shrink: 0; }
.wl-imp-velo { position: fixed; inset: 0; z-index: 1040; }
.wl-imp-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1050; min-width: 280px; padding: 0.25rem;
    background: var(--kendo-color-surface); border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md, 6px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.wl-imp-menu-item {
    display: flex; flex-direction: column; gap: 0.15rem; width: 100%; padding: 0.55rem 0.75rem; border: 0;
    border-radius: var(--kendo-border-radius-sm, 4px); background: transparent; color: var(--kendo-color-on-app-surface);
    text-align: left; font: inherit; cursor: pointer;
}
.wl-imp-menu-item small { color: var(--kendo-color-subtle); }
.wl-imp-menu-item:hover, .wl-imp-menu-item:focus-visible { background: var(--kendo-color-base-subtle-hover); outline: none; }

/* Los tres pasos */
.wl-imp-pasos { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 14px 0 18px; padding: 0; list-style: none; }
.wl-imp-pasos li { display: flex; align-items: center; gap: 8px; padding-right: 14px; font-size: 0.82rem; color: var(--kendo-color-subtle); }
.wl-imp-pasos li + li::before { content: ""; width: 34px; height: 1px; margin-right: 6px; background: var(--kendo-color-border); }
.wl-imp-paso-n {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: 0.75rem; font-weight: 700; background: var(--kendo-color-surface);
    box-shadow: inset 0 0 0 1px var(--kendo-color-border);
}
.wl-imp-pasos li.is-hecho .wl-imp-paso-n { color: var(--kendo-color-success-on-subtle); background: var(--kendo-color-success-subtle); box-shadow: none; }
.wl-imp-pasos li.is-ahora { color: var(--kendo-color-on-app-surface); font-weight: 600; }
.wl-imp-pasos li.is-ahora .wl-imp-paso-n { color: var(--kendo-color-on-primary); background: var(--kendo-color-primary); box-shadow: none; }

/* Paso 1: zona para soltar a la izquierda, la ayuda del módulo a la derecha */
.wl-imp-paso1 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.wl-imp-columna { display: grid; gap: 14px; align-content: start; min-width: 0; }
.wl-imp-soltar {
    position: relative; display: grid; justify-items: center; gap: 10px; padding: 34px 20px; text-align: center;
    border: 2px dashed var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface); transition: border-color .15s ease, background .15s ease;
}
.wl-imp-soltar strong { font-size: 1rem; color: var(--kendo-color-on-app-surface); }
.wl-imp-soltar small { color: var(--kendo-color-subtle); }
.wl-imp-soltar .wl-imp-soltar-icono { width: 40px; height: 40px; color: var(--kendo-color-success); }
.wl-imp-soltar:hover, .wl-imp-soltar.is-encima, .wl-imp-soltar:focus-within {
    border-color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 6%, var(--kendo-color-surface));
}
/* El input del navegador ocupa toda la zona, invisible: recibe el clic y el archivo soltado, y su texto en inglés
   («Choose File») no se ve */
.wl-imp-soltar-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wl-imp-nota { margin: 0; padding: 4px 0 4px 10px; border-left: 3px solid var(--wl-accent-gold); font-size: 0.85rem; color: var(--kendo-color-subtle); }
.wl-imp-tarjeta {
    padding: 16px; border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface);
}
.wl-imp-tarjeta h4 { margin: 0 0 10px; font-size: 0.95rem; font-weight: 600; color: var(--kendo-color-on-app-surface); }
.wl-imp-columnas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px 12px; margin: 14px 0 0; font-size: 0.82rem; align-items: start; }
.wl-imp-codigos { display: flex; flex-wrap: wrap; gap: 3px; }
.wl-imp-columnas code {
    padding: 1px 6px; border-radius: 4px; white-space: nowrap; font-size: 0.78rem;
    color: var(--kendo-color-on-app-surface); background: var(--kendo-color-surface-alt);
}
.wl-imp-columnas span { color: var(--kendo-color-subtle); }

/* Paso 2 */
.wl-imp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.wl-imp-aviso {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 9px 12px;
    border-radius: var(--kendo-border-radius-md, 6px); font-size: 0.88rem;
    color: var(--kendo-color-error-on-subtle); background: var(--kendo-color-error-subtle);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kendo-color-error) 35%, transparent);
}
.wl-imp-aviso-accion { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; }
/* La tabla y el panel «Qué cambia»: lado a lado solo si a la tabla le quedan ~1.000 px (sus columnas fijas suman ~860 y
   el nombre se estira); si no, el panel va debajo de la tabla, justo antes del botón de importar, y la tabla usa todo el
   ancho sin cortarse a la derecha (medido a 1366 px: 990 px de tabla, sin desplazamiento lateral) */
.wl-imp-revision { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.wl-imp-revision .wl-imp-quecambia { max-width: 640px; }
@container wl-imp (min-width: 1320px) {
    .wl-imp-revision { grid-template-columns: minmax(0, 1fr) 300px; }
    .wl-imp-revision .wl-imp-quecambia { max-width: none; }
}
.wl-imp-revision.wl-imp-revision-sola { grid-template-columns: minmax(0, 1fr); }
.wl-imp-tabla { min-width: 0; }
/* El mínimo de la tabla (AnchoMinimoColumnaLibre): encabezado, cuerpo y pie con el mismo mínimo para que se desplacen juntos */
.wl-imp-grid .k-grid-header table, .wl-imp-grid .k-grid-content table, .wl-imp-grid .k-grid-footer table { min-width: var(--wl-imp-ancho-min, 0); }
/* Los filtros y, a la derecha, lo que el módulo ponga junto a ellos (mostrar más columnas) */
.wl-imp-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.wl-imp-filtros-extra { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--kendo-color-subtle); }
/* El formulario corto que un módulo pone antes del archivo (los datos del comprobante del asiento) */
.wl-imp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.wl-imp-form .wl-imp-form-ancho { grid-column: 1 / -1; }
@media (max-width: 600px) { .wl-imp-form { grid-template-columns: minmax(0, 1fr); } }
.wl-imp-vacio {
    padding: 40px 12px; text-align: center; color: var(--kendo-color-subtle);
    border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg, 8px); background: var(--kendo-color-surface);
}
.wl-imp-grid .wl-imp-fila-error td { background: var(--kendo-color-error-subtle); }
.wl-imp-grid .wl-imp-fila-aviso td { background: var(--kendo-color-warning-subtle); }
.wl-imp-quepasa { display: inline-flex; align-items: baseline; gap: 6px; white-space: normal; font-weight: 500; color: var(--wl-estado-color); }
.wl-imp-quepasa::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
html[data-theme="light"] .wl-imp-quepasa { color: color-mix(in srgb, var(--wl-estado-color) 60%, black); }
/* Dentro de una fila pintada, el texto va en el color «sobre fondo suave» del tema (el punto conserva el del estado) */
.wl-imp-grid .wl-imp-fila-error .wl-imp-quepasa { color: var(--kendo-color-error-on-subtle); }
.wl-imp-grid .wl-imp-fila-aviso .wl-imp-quepasa { color: var(--kendo-color-warning-on-subtle); }
.wl-imp-grid .wl-imp-fila-error .wl-imp-quepasa::before { background: var(--kendo-color-error); }
.wl-imp-grid .wl-imp-fila-aviso .wl-imp-quepasa::before { background: var(--kendo-color-warning); }
.wl-imp-acciones { display: inline-flex; gap: 2px; }
.wl-imp-quecambia {
    padding: 14px; border: 1px solid var(--kendo-color-border); border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface); font-size: 0.85rem;
}
.wl-imp-quecambia h4 { margin: 0 0 10px; font-size: 0.92rem; font-weight: 600; color: var(--kendo-color-on-app-surface); }
.wl-imp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kendo-color-border); }
.wl-imp-motivo { font-size: 0.85rem; font-weight: 500; color: var(--kendo-color-error); }
html[data-theme="light"] .wl-imp-motivo { color: var(--kendo-color-error-on-subtle); }

/* La ventana de corrección: el estado de la fila arriba, al día con lo que se escribe */
.wl-imp-ventana-estado {
    margin-bottom: 14px; padding: 8px 12px; border-radius: var(--kendo-border-radius-md, 6px); font-size: 0.88rem; font-weight: 500;
    color: var(--wl-estado-color); background: color-mix(in srgb, var(--wl-estado-color) 13%, transparent);
}
html[data-theme="light"] .wl-imp-ventana-estado { color: color-mix(in srgb, var(--wl-estado-color) 60%, black); }

@media (max-width: 900px) {
    .wl-imp-paso1 { grid-template-columns: minmax(0, 1fr); }
    .wl-imp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Cuadro chico de las tarjetas del paso 1 y del panel «Qué cambia»: código, nombre y cantidades alineadas */
.wl-imp-cuadro { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.wl-imp-cuadro th { padding: 0 0 6px; text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kendo-color-subtle); }
.wl-imp-cuadro td { padding: 5px 0; border-top: 1px solid var(--kendo-color-border); vertical-align: middle; }
.wl-imp-cuadro td + td, .wl-imp-cuadro th + th { padding-left: 10px; }
.wl-imp-cuadro tfoot td { font-weight: 700; color: var(--kendo-color-on-app-surface); border-top-width: 2px; }
.wl-imp-cuadro-n { text-align: right !important; white-space: nowrap; }
.wl-imp-cuadro-codigo { font-family: ui-monospace, Consolas, monospace; color: var(--kendo-color-on-app-surface); white-space: nowrap; }
.wl-imp-cuadro-nombre { color: var(--kendo-color-subtle); }
.wl-imp-columna .wl-imp-tarjeta .wl-imp-cuadro { display: block; max-height: 320px; overflow-y: auto; }
.wl-imp-columna .wl-imp-tarjeta .wl-imp-cuadro tbody { display: table; width: 100%; }

/* ==========================================================================
   PARÁMETROS DE LA EMPRESA (contabilidad/parametros-ux, oct-2026): ParametrosComponente.
   Pestañas reales, un índice por pestaña que salta a cada tarjeta y marca la que tiene
   cambios (punto dorado) o monedas sin cuenta (punto ámbar), y las tablas de alícuotas y de
   monedas: nombre a la izquierda, cuenta en el medio, tasa a la derecha.
   ========================================================================== */
.ct-par-tabs > .k-tabstrip-items-wrapper { margin-bottom: 4px; }
.ct-par-pendientes { margin-left: 8px; font-size: 11px; }
.ct-par { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-top: 16px; }
/* El índice va al lado solo si cabe con el contenido (214 + 24 + ~560): si no, estorba arriba. Se
   mide el ancho del área de la pestaña, no el de la ventana (el menú lateral puede estar abierto). */
.ct-par-tabs .k-tabstrip-content { container-type: inline-size; }
@container (max-width: 820px) { .ct-par-indice { display: none; } }
.ct-par-indice {
    flex: 0 0 214px;
    position: sticky;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface-alt);
}
.ct-par-indice-titulo {
    padding: 4px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}
.ct-par-indice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: var(--kendo-font-size-sm);
    text-align: left;
    color: var(--kendo-color-subtle);
    cursor: pointer;
}
.ct-par-indice-item:hover { background: var(--kendo-color-base-subtle); color: var(--kendo-color-on-app-surface); }
.ct-par-indice-item:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: -2px; }
.ct-par-punto-falta {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kendo-color-warning);
}
.ct-par-secciones { flex: 999 1 560px; min-width: 0; max-width: 980px; display: flex; flex-direction: column; gap: 16px; }
.ct-par-seccion {
    padding: 18px 22px;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface);
    scroll-margin-top: 12px;
}
.ct-par-seccion-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ct-par-seccion-cab h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--kendo-color-on-app-surface); }
.ct-par-seccion-cab p { margin: 2px 0 0; font-size: var(--kendo-font-size-sm); color: var(--kendo-color-subtle); }
.ct-par-subtitulo {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}
.ct-par-subtitulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ct-par-subtitulo-fila .ct-par-subtitulo { margin: 0; }
.ct-par-interruptor { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: var(--kendo-font-size-sm); font-weight: 500; }
.ct-par-separador { border-top: 1px solid var(--kendo-color-border); margin: 18px 0 14px; }
.ct-par-ayuda { margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--kendo-color-subtle); }
.ct-par-num .k-input-inner { text-align: right; font-variant-numeric: tabular-nums; }

/* Tablas de alícuotas y de monedas */
.ct-par-tabla-cab,
.ct-par-fila { display: grid; grid-template-columns: 130px minmax(0, 1fr) 150px; column-gap: 16px; align-items: start; }
.ct-par-tabla-monedas .ct-par-tabla-cab,
.ct-par-tabla-monedas .ct-par-fila { grid-template-columns: 220px minmax(0, 1fr); }
.ct-par-tabla-cab { padding-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--kendo-color-subtle); }
.ct-par-der { text-align: right; }
.ct-par-fila { padding: 8px 0; border-top: 1px solid var(--kendo-color-border); }
.ct-par-fila-nombre { display: flex; align-items: center; min-height: 32px; font-weight: 500; color: var(--kendo-color-on-app-surface); }
.ct-par-celda { min-width: 0; }
/* En la tabla la columna ya dice qué es: la etiqueta de WlCampo queda solo para lectores de pantalla. */
.ct-par-fila .wl-campo > .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ct-par-moneda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 22px;
    margin-right: 10px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--kendo-color-on-app-surface);
    background: var(--kendo-color-base-subtle);
}

/* Sección plegable (Reconstrucción del libro) */
.ct-par-plegable { padding: 0; }
.ct-par-plegable-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 22px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.ct-par-plegable-cab:focus-visible { outline: 2px solid var(--kendo-color-primary); outline-offset: -2px; border-radius: var(--kendo-border-radius-lg, 8px); }
.ct-par-plegable-titulo { display: block; font-size: 1rem; font-weight: 600; color: var(--kendo-color-on-app-surface); }
.ct-par-plegable-titulo .wl-badge { margin-left: 6px; vertical-align: 2px; }
.ct-par-plegable-desc { display: block; margin-top: 2px; font-size: var(--kendo-font-size-sm); color: var(--kendo-color-subtle); }
.ct-par-plegable-cuerpo { padding: 0 22px 18px; }

/* Alcaldías (SeccionIaeMunicipal) */
.ct-par-iae-editor {
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface-alt);
}
.ct-par-iae-fijo { padding: 6px 0; font-weight: 600; }

@media (max-width: 767.98px) {
    .ct-par-tabla-cab { display: none; }
    .ct-par-fila,
    .ct-par-tabla-monedas .ct-par-fila { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
    .ct-par-seccion { padding: 16px; }
}

/* ============================================================
   SECCIÓN, TABLA HTML Y TOTALES (facturacion/ux etapa A, 26-oct-2026)
   Tres piezas que faltaban para que una pantalla de captura o consulta
   se vea como el resto del look v2 sin armar k-card a mano:
   - WlSeccion: tarjeta con título de sección (chip de icono + rótulo en
     mayúsculas) y un hueco a la derecha; con SinRelleno la tabla va al borde.
   - .wl-tabla-html: la tabla <table> plana (líneas, totales, asiento,
     historial) con la misma cabecera y el mismo aire que .custom-grid:
     sin rejilla vertical, filas de ~33 px, números tabulares.
   - .wl-totales: la caja de totales en vertical, con el total grande.
   Tokens del tema: se leen igual en claro y en oscuro.
   ============================================================ */
.wl-pila { display: grid; gap: 12px; min-width: 0; }
.wl-seccion {
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 10px);
    box-shadow: var(--wl-shadow-sm);
    min-width: 0;
    overflow: hidden;
}
.wl-seccion-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 10px 14px 0;
}
.wl-seccion-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
    min-width: 0;
}
.wl-seccion-icono {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--kendo-color-primary);
    background: color-mix(in srgb, var(--kendo-color-primary) 14%, transparent);
    flex: none;
}
.wl-seccion-icono .k-svg-icon { width: 14px; height: 14px; }
.wl-seccion-derecha {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
    margin-left: auto;
}
.wl-seccion-cuerpo { padding: 10px 14px 14px; min-width: 0; }
.wl-seccion-sinrelleno .wl-seccion-cab { padding-bottom: 8px; }
.wl-seccion-sinrelleno .wl-seccion-cuerpo { padding: 0; }
.wl-seccion-sinrelleno .wl-seccion-cuerpo > .table-responsive,
.wl-seccion-sinrelleno .wl-seccion-cuerpo > .wl-tabla-html { margin: 0; }
.wl-seccion-sinrelleno .wl-seccion-cuerpo .k-grid { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.wl-seccion-pie {
    padding: 8px 14px 10px;
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
    border-top: 1px solid var(--kendo-color-border);
}

/* ---- Tabla HTML con el aire del grid ---- */
.wl-tabla-html {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.wl-tabla-html th,
.wl-tabla-html td {
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--kendo-color-border);
    vertical-align: middle;
    background: transparent;
    color: inherit;
}
.wl-tabla-html thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--kendo-color-surface-alt);
    color: var(--kendo-color-subtle);
    border-bottom: 1px solid var(--kendo-color-border-alt);
}
html[data-theme="light"] .wl-tabla-html thead th {
    background-color: #E3EAF4;
    color: #1E3A5F;
    border-bottom: 2px solid var(--wl-accent-gold, #D4A853);
}
:root:not([data-theme="light"]) .wl-tabla-html thead th {
    background-color: #3D4470;
    color: #E2E5F2;
    border-bottom: 2px solid color-mix(in srgb, var(--wl-accent-gold, #CCB066) 55%, transparent);
}
.wl-tabla-html tbody tr:last-child td { border-bottom: 0; }
.wl-tabla-html tbody tr:hover td { background-color: color-mix(in srgb, var(--kendo-color-on-app-surface) 4%, transparent); }
.wl-tabla-html tr.wl-fila-total td,
.wl-tabla-html tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--kendo-color-border);
    border-bottom: 0;
    background-color: var(--kendo-color-surface-alt);
}
.wl-tabla-html .wl-mono,
.wl-tabla-html .mono { font-family: var(--wl-font-mono, Consolas, "Cascadia Mono", monospace); font-size: 12px; }
.wl-tabla-html td .k-button-flat { opacity: 0.55; }
.wl-tabla-html tr:hover td .k-button-flat,
.wl-tabla-html td .k-button-flat:focus-visible { opacity: 1; }
/* Con controles de captura adentro (TelerikNumericTextBox, ComboBox) la fila crece sola. */
.wl-tabla-html td .k-input,
.wl-tabla-html td .k-picker { min-height: 28px; }

/* ---- Caja de totales ---- */
.wl-totales {
    display: grid;
    gap: 4px;
    padding: 10px 14px 12px;
    border: 1px solid var(--kendo-color-border);
    border-left: 4px solid var(--kendo-color-primary);
    border-radius: var(--kendo-border-radius-lg, 10px);
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    align-content: start;
}
.wl-totales-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 2px;
}
.wl-totales-linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.wl-totales-linea > span:first-child { color: var(--kendo-color-subtle); min-width: 0; }
.wl-totales-linea > b { font-weight: 600; white-space: nowrap; }
.wl-totales-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--kendo-color-border);
}
.wl-totales-total > span:first-child { color: var(--kendo-color-subtle); }
.wl-totales-total > b { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.wl-totales-nota { font-size: 0.78rem; color: var(--kendo-color-subtle); }

/* ---- Datos de una ficha de solo lectura, en columnas ---- */
.wl-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 16px;
    font-size: 0.85rem;
}
.wl-dato { display: grid; gap: 1px; min-width: 0; }
.wl-dato > small {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}
.wl-dato > b, .wl-dato > span { font-weight: 600; overflow-wrap: anywhere; }
.wl-dato-ancho { grid-column: 1 / -1; }

/* ---- Pasos de un flujo (WlPasos, facturacion/ux etapa C) ---- */
.wl-pasos {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--kendo-color-subtle);
    flex-wrap: wrap;
}
.wl-paso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    border: 1px solid var(--kendo-color-border);
    border-radius: 999px;
    background: var(--kendo-color-surface);
    white-space: nowrap;
}
.wl-paso + .wl-paso::before {
    content: "";
    display: none;
}
.wl-paso-n {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--kendo-color-border);
    display: inline-grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex: none;
}
.wl-paso-n .k-svg-icon { width: 12px; height: 12px; }
.wl-paso.is-actual {
    color: var(--kendo-color-on-app-surface);
    border-color: var(--kendo-color-primary);
    font-weight: 700;
}
.wl-paso.is-actual .wl-paso-n {
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}
.wl-paso.is-hecho { color: var(--kendo-color-success); }
.wl-paso.is-hecho .wl-paso-n {
    background: var(--kendo-color-success);
    border-color: var(--kendo-color-success);
    color: var(--kendo-color-on-success, #fff);
}

/* ==========================================================================
   FACTURACIÓN, rediseño visual etapa D (26-oct-2026): barra de filtros y panel de factura
   ========================================================================== */
/* WlBarraFiltros: los criterios de un reporte en una sola barra, siempre a la vista. */
.wl-barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    padding: 10px 14px;
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 10px);
    box-shadow: var(--wl-shadow-sm);
}
.wl-bf-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; flex: 1 1 auto; min-width: 0; }
/* Cada campo crece desde su ancho base (--wl-bf-ancho) hasta su tope (--wl-bf-max). */
.wl-bf-campo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 var(--wl-bf-ancho, 150px); max-width: var(--wl-bf-max, 100%); min-width: 0; }
.wl-bf-campo > label { font-size: 11px; line-height: 1.2; color: var(--kendo-color-subtle); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-bf-check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; white-space: nowrap; }
.wl-bf-check > label { margin: 0; cursor: pointer; }
/* Una opción con texto largo: ocupa su propia fila y el texto envuelve. */
.wl-bf-check.wl-bf-fila { flex-basis: 100%; white-space: normal; min-height: 0; }
.wl-bf-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 575.98px) {
    .wl-bf-campo { flex-basis: 100%; max-width: 100%; }
    .wl-bf-acciones { margin-left: 0; width: 100%; }
    .wl-bf-acciones .k-button { flex: 1; }
}
/* El resumen de una factura en el panel lateral (decisión 4): datos a dos columnas y líneas apretadas. */
.wl-fac-panel .wl-datos { grid-template-columns: 1fr 1fr; }
.wl-fac-panel .wl-tabla-html :is(td, th) { padding: 4px 8px; font-size: var(--kendo-font-size-sm); }