/* ===========================================================================
   KLOG — sistema de diseño
   ---------------------------------------------------------------------------
   Base: el sistema de diseño de KAPA (tokens, BEM, componentes), con prefijo
   propio (--kl- y .kl-) para no quedar acoplados a cambios de KAPA.

   Brandbook KAESER MX (nov 2025):
     Amarillo #FFCE00 · Petróleo #328095 · Anthracite #363C42 · familia Roboto.
   Contraste: el texto va sobre blanco. Sobre amarillo, texto anthracite
   (≈7.5:1); nunca blanco sobre amarillo (≈1.5:1). Blanco sobre petróleo apenas
   cumple AA (≈4.5:1): solo para navegación y títulos, no para texto largo.
   =========================================================================== */

:root {
    --kl-yellow: #FFCE00;
    --kl-yellow-hover: #E6B900;
    --kl-yellow-subtle: #FFFBE6;
    --kl-petrol: #328095;
    --kl-petrol-hover: #2A6D7F;
    --kl-anthracite: #363C42;
    --kl-anthracite-light: #535A62;

    --kl-bg: #F5F6F7;
    --kl-surface: #FFFFFF;
    --kl-border: #E5E7EB;
    --kl-text: #363C42;
    --kl-text-muted: #6B7280;

    --kl-success: #22C55E;
    --kl-success-bg: #F0FDF4;
    --kl-danger: #EF4444;
    --kl-danger-bg: #FEF2F2;
    --kl-warning: #F59E0B;
    --kl-warning-bg: #FFFBEB;

    --kl-font: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --kl-font-condensed: 'Roboto Condensed', 'Roboto', 'Arial Narrow', sans-serif;
    --kl-font-mono: 'Roboto Mono', 'Cascadia Code', ui-monospace, monospace;

    --kl-radius: 0.75rem;
    --kl-radius-sm: 0.5rem;
    --kl-sidebar-w: 240px;
    --kl-header-h: 56px;

    --kl-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --kl-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --kl-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

    /* La tabla es la pantalla donde se pasa el día: se separa su paleta de la
       general para poder bajarle el contraste sin tocar el resto. Un encabezado
       de color sólido y bordes duros en cada celda es lo que hace que un grid
       parezca de hace veinte años. */
    --kl-grid-head: #FAFAFB;
    --kl-grid-line: #EDEEF0;
    --kl-grid-hover: #FAFCFD;
    --kl-field: #F4F5F6;
    --kl-ease: 160ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--kl-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--kl-text);
    background: var(--kl-bg);
}

a { color: var(--kl-petrol); text-decoration: none; }
a:hover { color: var(--kl-petrol-hover); text-decoration: underline; }

/* ---------------------------------------------------------------- layout --- */
.kl-shell { display: grid; grid-template-columns: var(--kl-sidebar-w) 1fr; min-height: 100vh; }

.kl-sidebar {
    /* Profundidad real, no un degradado plano: una luz radial arriba a la
       izquierda —de donde vendría la luz en la pantalla— y un borde interior
       claro que separa la barra del contenido sin recurrir a una línea dura. */
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.10) 0%, transparent 55%),
        linear-gradient(170deg, #1b6274 0%, #175666 45%, #123f4c 100%);
    color: #b9d4db;
    padding: 0 0 1rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.07), 4px 0 24px rgba(18,63,76,.18);
    /* Barra de desplazamiento delgada y del color del panel: la del navegador es
       una franja gris clara entre la barra y el contenido. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

.kl-sidebar__brand {
    position: relative;
    padding: 1.05rem 1rem .95rem;
    color: #fff;
    font-weight: 700; font-size: 1.2rem; letter-spacing: .6px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), transparent);
}
/* La barra amarilla del brandbook, aquí como firma de marca en vez de fondo:
   al ocupar todo el bloque competía con el contenido. */
.kl-sidebar__brand::before {
    content: ''; position: absolute; left: 1rem; top: 1.15rem;
    width: 3px; height: 1.5rem; border-radius: 2px;
    background: var(--kl-yellow);
    box-shadow: 0 0 12px rgba(255,206,0,.55);
}
.kl-sidebar__brand span { display: block; padding-left: .85rem; }
.kl-sidebar__brand small {
    display: block; font-size: .6rem; font-weight: 600;
    letter-spacing: 2.4px; color: rgba(255,255,255,.55); margin-top: .1rem;
}

.kl-sidebar nav { padding: 1rem .6rem; display: flex; flex-direction: column; gap: 2px; }

.kl-sidebar nav a {
    position: relative;
    display: flex; align-items: center; gap: .65rem;
    padding: .58rem .7rem;
    color: #b9d4db; border-radius: .45rem;
    font-size: .855rem; text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.kl-sidebar nav a svg { width: 17px; height: 17px; flex: none; opacity: .75; }

.kl-sidebar nav a:hover {
    background: rgba(255,255,255,.09);
    color: #fff; transform: translateX(2px);
}
.kl-sidebar nav a:hover svg { opacity: 1; }

/* El estado activo no invierte el bloque entero: una barra amarilla a la
   izquierda basta para ubicarse, y deja el texto legible. */
.kl-sidebar nav a.active {
    background: linear-gradient(90deg, rgba(255,206,0,.16), rgba(255,206,0,.04));
    color: #fff; font-weight: 600;
}
.kl-sidebar nav a.active::before {
    content: ''; position: absolute; left: -.6rem; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 62%; border-radius: 0 3px 3px 0;
    background: var(--kl-yellow);
    box-shadow: 0 0 10px rgba(255,206,0,.6);
}
.kl-sidebar nav a.active svg { opacity: 1; color: var(--kl-yellow); }

.kl-sidebar nav .kl-nav-sep {
    height: 1px; margin: .55rem .7rem;
    background: linear-gradient(90deg, rgba(255,255,255,.14), transparent);
}
.kl-sidebar nav a.kl-nav--danger.active::before { background: #FF6B6B; box-shadow: 0 0 10px rgba(255,107,107,.6); }
.kl-sidebar nav a.kl-nav--danger svg { color: #FF8F8F; }

.kl-main { display: flex; flex-direction: column; min-width: 0; }

.kl-header {
    height: var(--kl-header-h);
    /* Translúcido y con desenfoque: al desplazar la tabla el contenido se
       insinúa debajo en vez de cortarse contra una banda opaca. */
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--kl-grid-line);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem;
    position: sticky; top: 0; z-index: 10;
}
.kl-header__title { font-weight: 600; font-size: 1rem; margin: 0; }
.kl-header__spacer { flex: 1; }


.kl-content { padding: 1.5rem; flex: 1; }

/* ----------------------------------------------------------------- cards --- */
.kl-card {
    background: var(--kl-surface);
    border: 1px solid var(--kl-grid-line);
    border-radius: var(--kl-radius);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px -8px rgba(16,24,40,.12);
    margin-bottom: 1.25rem;
    overflow: hidden;   /* que el encabezado de la tabla respete la esquina */
}
.kl-card__head {
    padding: .85rem 1.15rem; border-bottom: 1px solid var(--kl-grid-line);
    display: flex; align-items: center; gap: .75rem;
}
.kl-card__head h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.kl-card__body { padding: 1.15rem; }
.kl-card__body--flush { padding: 0; }

.kl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kl-stat { background: var(--kl-surface); border: 1px solid var(--kl-border); border-left: 3px solid var(--kl-petrol); border-radius: var(--kl-radius); padding: .9rem 1.1rem; }
.kl-stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.kl-stat__label { font-size: .75rem; color: var(--kl-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.kl-stat--warn { border-left-color: var(--kl-warning); }
.kl-stat--yellow { border-left-color: var(--kl-yellow); }
.kl-stat__nota { margin-top: .3rem; font-size: .72rem; color: var(--kl-text-muted); }
.kl-stat__value--fecha { font-size: 1.05rem; padding: .25rem 0 .1rem; }

/* ------------------------------------------------------------ indicadores --- */
/* Las barras son <progress>: la CSP no deja anchos con style="". La pista es un
   paso claro de la misma familia que el relleno, y el color cambia con el nivel
   —normal, aviso, alerta—, siempre junto al porcentaje escrito. Cada pseudo va
   en su propia regla: un navegador descarta la regla entera si no conoce uno. */
.kl-indicadores__titulo { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 600; }
.kl-medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kl-medidor { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); padding: .9rem 1.1rem; }
.kl-medidor__titulo { font-size: .75rem; color: var(--kl-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.kl-medidor__cifra { font-size: 1.6rem; font-weight: 700; line-height: 1.1; margin: .15rem 0 .5rem; }
.kl-barra {
    appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px;
    border: 0; border-radius: 4px; background: #DCEBEF; color: var(--kl-petrol); overflow: hidden;
}
.kl-barra::-webkit-progress-bar { background: #DCEBEF; border-radius: 4px; }
.kl-barra::-webkit-progress-value { background: var(--kl-petrol); border-radius: 4px; }
.kl-barra::-moz-progress-bar { background: var(--kl-petrol); border-radius: 4px; }
.kl-barra--aviso { background: var(--kl-warning-bg); }
.kl-barra--aviso::-webkit-progress-bar { background: var(--kl-warning-bg); }
.kl-barra--aviso::-webkit-progress-value { background: var(--kl-warning); }
.kl-barra--aviso::-moz-progress-bar { background: var(--kl-warning); }
.kl-barra--alerta { background: var(--kl-danger-bg); }
.kl-barra--alerta::-webkit-progress-bar { background: var(--kl-danger-bg); }
.kl-barra--alerta::-webkit-progress-value { background: var(--kl-danger); }
.kl-barra--alerta::-moz-progress-bar { background: var(--kl-danger); }
.kl-barra--chica { height: 6px; min-width: 64px; }
.kl-celda-medidor { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.kl-celda-medidor .kl-barra { flex: 1; }
.kl-fila--elegida td { background: var(--kl-yellow-subtle); }
.kl-table tfoot td { font-weight: 600; border-top: 2px solid var(--kl-border); }
/* Un tablero se lee completo: sus tablas son cortas y no llevan scroll propio. */
.kl-table__wrap.kl-table__wrap--completo { max-height: none; }

/* ---------------------------------------------------------------- tablas --- */
.kl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.kl-table th {
    background: var(--kl-grid-head); color: var(--kl-text-muted); text-align: left;
    padding: .55rem .75rem; font-weight: 600; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
    border-bottom: 1px solid var(--kl-grid-line);
    backdrop-filter: saturate(180%) blur(6px);
}
.kl-table td {
    padding: .5rem .75rem; border-bottom: 1px solid var(--kl-grid-line);
    vertical-align: middle;
}
.kl-table tbody tr { transition: background var(--kl-ease); }
.kl-table tbody tr:hover { background: var(--kl-grid-hover); }
.kl-table tbody tr:last-child td { border-bottom: 0; }
.kl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.kl-table__wrap { max-height: 65vh; overflow: auto; border-radius: 0 0 var(--kl-radius) var(--kl-radius); }

.kl-sku { font-family: var(--kl-font-mono); font-size: .72rem; color: var(--kl-text-muted); }

/* --------------------------------------------------------------- badges ---- */
.kl-badge { display:inline-block; padding:.12rem .45rem; border-radius:999px; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.kl-badge--sap { background:#E0F2F7; color:#1a5c6b; }
.kl-badge--weak { background: var(--kl-warning-bg); color:#92400E; }
.kl-badge--inherit { background:#F3F4F6; color:var(--kl-text-muted); }
.kl-badge--custom { background: var(--kl-yellow-subtle); color:#854D0E; }
.kl-badge--option { background:#EEF2FF; color:#3730A3; }
.kl-badge--conflict { background: var(--kl-danger-bg); color:#991B1B; }

/* -------------------------------------------------------------- controles -- */
.kl-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .9rem; border-radius: var(--kl-radius-sm);
    border:1px solid transparent; font-size:.82rem; font-weight:600;
    cursor:pointer; font-family:inherit; text-decoration:none;
    transition: background var(--kl-ease), border-color var(--kl-ease),
                box-shadow var(--kl-ease), transform var(--kl-ease);
}
.kl-btn:active { transform: translateY(1px); }
.kl-btn--primary {
    background: var(--kl-yellow); color: var(--kl-anthracite);
    box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4);
}
.kl-btn--primary:hover {
    background: var(--kl-yellow-hover); text-decoration:none;
    box-shadow: 0 3px 10px rgba(255,206,0,.4);
}
.kl-btn--secondary { background:#fff; border-color: var(--kl-border); color: var(--kl-text); }
.kl-btn--secondary:hover {
    background:#fff; border-color: var(--kl-petrol); color: var(--kl-petrol);
    text-decoration:none; box-shadow: var(--kl-shadow-sm);
}
.kl-btn--danger { background: var(--kl-danger); color:#fff; }
.kl-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ------------------------------------------------ acciones por renglón ----
   Iconos del mismo tamaño, en una sola línea y cada uno siempre en el mismo
   lugar: «editar» cae en la misma columna en todos los renglones. Con botones
   de texto de largos distintos, cada renglón se apilaba a su manera. */
.kl-acciones { display: inline-flex; align-items: center; gap: .3rem; }
.kl-acciones form { display: contents; }
.kl-iconbtn {
    width: 30px; height: 30px; padding: 0;
    display: inline-grid; place-items: center;
    border: 1px solid var(--kl-border); border-radius: var(--kl-radius-sm);
    background: #fff; color: var(--kl-anthracite-light);
    cursor: pointer; font: inherit;
    transition: background var(--kl-ease), border-color var(--kl-ease), color var(--kl-ease);
}
.kl-iconbtn svg { width: 16px; height: 16px; }
.kl-btn svg { width: 16px; height: 16px; flex: none; }
.kl-iconbtn:hover { border-color: var(--kl-petrol); color: var(--kl-petrol); text-decoration: none; }
.kl-iconbtn:focus-visible { outline: 2px solid var(--kl-petrol); outline-offset: 1px; }
/* Lo que está pendiente de alguien: la invitación que todavía no usa. */
.kl-iconbtn--acento {
    background: var(--kl-yellow-subtle); border-color: var(--kl-yellow); color: var(--kl-anthracite);
}
.kl-iconbtn--acento:hover {
    background: var(--kl-yellow); border-color: var(--kl-yellow-hover); color: var(--kl-anthracite);
}
.kl-iconbtn--peligro:hover {
    border-color: var(--kl-danger); color: var(--kl-danger); background: var(--kl-danger-bg);
}
/* Guarda el lugar de una acción que no aplica, para que las otras no se corran. */
.kl-iconbtn--hueco { visibility: hidden; }
/* Junto a una insignia, dentro de la celda: más chico que los de la columna de acciones. */
.kl-iconbtn--chico { width: 24px; height: 24px; margin-left: .25rem; vertical-align: middle; }
.kl-iconbtn--chico svg { width: 13px; height: 13px; }
.kl-inline { display: inline; }

/* ------------------------------------------------ opciones con descripción ----
   La casilla alineada con el título, la explicación debajo del título y no al
   lado, y todo el recuadro clicable. Marcado, el recuadro se nota. */
.kl-opciones { display: grid; gap: .4rem; }
.kl-opcion {
    display: grid; grid-template-columns: auto 1fr; column-gap: .65rem;
    align-items: start;
    padding: .55rem .75rem;
    border: 1px solid var(--kl-border); border-radius: var(--kl-radius-sm);
    background: #fff; cursor: pointer;
    transition: border-color var(--kl-ease), background var(--kl-ease);
}
.kl-opcion:hover { border-color: var(--kl-petrol); }
.kl-opcion:has(input:checked) { border-color: var(--kl-petrol); background: #F0F7F9; }
.kl-opcion input { margin: .2rem 0 0; accent-color: var(--kl-petrol); }
.kl-opcion__texto b { display: block; font-size: .84rem; color: var(--kl-text); }
.kl-opcion__texto small {
    display: block; margin-top: .1rem;
    font-size: .74rem; line-height: 1.4; color: var(--kl-text-muted);
}

/* Utilidades para no escribir style="" en las vistas: la política de contenido
   (style-src) no permite estilos en línea, y el navegador los ignora sin avisar. */
.kl-mb-0 { margin-bottom: 0; }
.kl-col-min { width: 1%; white-space: nowrap; }
.kl-vacio { padding: 1.5rem; text-align: center; }
.kl-clave-temporal { font-size: 1.05rem; letter-spacing: 1px; }
.kl-en-linea { display: inline-flex; align-items: center; gap: .3rem; }
.kl-mt-1 { margin-top: 1rem; }
/* Los anchos de los combos: con style="" en línea el navegador los ignoraba y
   salían del ancho de su texto más corto. */
.kl-select--ancho { min-width: 280px; }
.kl-select--medio { min-width: 240px; }

/* ------------------------------------------------ una sección sin datos ----
   En lugar de un combo vacío, que parece un error: qué falta y dónde se consigue. */
.kl-sin-datos {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .8rem 1rem;
    border: 1px dashed var(--kl-border); border-radius: var(--kl-radius-sm);
    background: var(--kl-grid-head);
    font-size: .84rem; line-height: 1.5; color: var(--kl-text-muted);
}
.kl-sin-datos > svg { flex: none; width: 18px; height: 18px; margin-top: .12rem; color: var(--kl-petrol); }
.kl-sin-datos b { display: block; color: var(--kl-text); }
.kl-sin-datos a { display: inline-block; margin-top: .25rem; font-weight: 600; }

/* --------------------------------------------------- espera (cargando.js) ----
   Tapa la pantalla mientras el servidor trabaja: se ve que algo pasa, y el
   segundo clic no llega a ningún botón. */
.kl-cargando {
    position: fixed; inset: 0; z-index: 1000;
    display: none; place-items: center;
    background: rgba(245,246,247,.75); backdrop-filter: blur(2px);
}
.kl-cargando--visible { display: grid; }
.kl-cargando__caja {
    display: grid; justify-items: center; gap: .55rem;
    max-width: 380px; padding: 1.4rem 1.8rem;
    background: #fff; border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-lg);
    text-align: center;
}
.kl-cargando__rueda {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--kl-border); border-top-color: var(--kl-petrol);
    animation: kl-girar .8s linear infinite;
}
.kl-cargando__texto { font-size: .95rem; color: var(--kl-text); }
.kl-cargando__nota { font-size: .78rem; line-height: 1.4; color: var(--kl-text-muted); }
@keyframes kl-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kl-cargando__rueda { animation-duration: 2.4s; } }

/* ---------------------------------------------------------------- login ----
   El fondo son tres luces radiales sobre antracita, no un degradado de dos
   tonos: da profundidad sin recurrir a una imagen que habría que servir. */
.kl-login {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background:
        radial-gradient(70% 55% at 15% 12%, rgba(50,128,149,.55) 0%, transparent 60%),
        radial-gradient(55% 45% at 88% 82%, rgba(255,206,0,.16) 0%, transparent 62%),
        radial-gradient(90% 90% at 50% 50%, #1d5f70 0%, #163f4d 55%, #12303a 100%);
}

.kl-login__card {
    width: min(420px, 100%);
    background: var(--kl-surface);
    border-radius: .9rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.55);
    /* Dos sombras: una cercana que define el borde y otra amplia y difusa que
       lo despega del fondo. Una sola de las dos se ve plana. */
    box-shadow:
        0 1px 2px rgba(18,48,58,.28),
        0 24px 60px -12px rgba(18,48,58,.55);
}

.kl-login__brand {
    position: relative;
    padding: 1.35rem 1.6rem 1.15rem;
    background: linear-gradient(135deg, #22707f 0%, #1a5c6b 100%);
}
.kl-login__brand::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--kl-yellow) 0%, var(--kl-yellow) 38%, rgba(255,206,0,.25) 100%);
}
.kl-login__brand b {
    display: block; font-size: 1.55rem; color: #fff;
    letter-spacing: .6px; line-height: 1.05;
}
.kl-login__brand small {
    display: block; font-size: .6rem; letter-spacing: 2.6px;
    color: rgba(255,255,255,.62); font-weight: 600; margin-top: .22rem;
}

.kl-login__body { padding: 1.5rem 1.6rem 1.7rem; }
.kl-login__intro { margin: 0 0 1.15rem; }
.kl-login__ayuda { margin: -.4rem 0 1rem; }
.kl-btn--bloque { width: 100%; justify-content: center; }
.kl-login__body h1 { font-size: 1.02rem; margin: 0 0 .2rem; font-weight: 600; }

.kl-login__body label {
    display: block; font-size: .73rem; font-weight: 600;
    margin-bottom: .3rem; color: var(--kl-text-muted);
    text-transform: uppercase; letter-spacing: .5px;
}
.kl-login__body .kl-input {
    width: 100%; margin-bottom: 1rem;
    padding: .62rem .75rem; font-size: .9rem;
    border-radius: .45rem;
    background: #FAFBFB;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.kl-login__body .kl-input:focus {
    outline: none; background: #fff;
    border-color: var(--kl-petrol);
    box-shadow: 0 0 0 3px rgba(50,128,149,.16);
}

.kl-login__body .kl-btn--primary {
    width: 100%; justify-content: center;
    padding: .62rem; font-size: .9rem; border-radius: .45rem;
    box-shadow: 0 1px 2px rgba(54,60,66,.2), 0 6px 16px -6px rgba(255,206,0,.7);
    transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}
.kl-login__body .kl-btn--primary:hover { transform: translateY(-1px); }
.kl-login__body .kl-btn--primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(54,60,66,.25); }

.kl-login__foot {
    margin: 1.1rem 0 0; padding-top: .9rem;
    border-top: 1px solid var(--kl-border);
    font-size: .72rem; color: var(--kl-text-muted);
    display: flex; align-items: center; gap: .45rem;
}
.kl-login__foot svg { width: 13px; height: 13px; flex: none; }

/* Los enlaces de al lado —¿olvidaste tu contraseña?, volver—: a la vista sin
   competir con el botón. */
.kl-login__otro { margin: .9rem 0 0; text-align: center; font-size: .8rem; }
.kl-login__otro a { color: var(--kl-petrol); font-weight: 500; text-decoration: none; }
.kl-login__otro a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- mi cuenta - */
/* El nombre de arriba lleva a «Mi cuenta»: se ve como el texto que era, y el
   subrayado aparece solo al pasar el cursor. */
.kl-yo { color: inherit; text-decoration: none; }
.kl-yo:hover { color: var(--kl-petrol); text-decoration: underline; }

.kl-cuenta {
    display: grid; gap: 1.25rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: 980px;
}
.kl-cuenta .kl-card { margin-bottom: 0; }
.kl-datos {
    display: grid; grid-template-columns: max-content 1fr;
    gap: .55rem 1.25rem; margin: 0 0 1rem;
}
.kl-datos dt { font-size: .78rem; font-weight: 600; color: var(--kl-text-muted); }
.kl-datos dd { margin: 0; }

.kl-card--angosta { max-width: 520px; }
.kl-qr { display: block; margin: .75rem 0; }
.kl-clave-totp { font-size: .85rem; letter-spacing: 1px; }

/* --------------------------------------------------------------- pestañas --
   Cada pestaña es una categoría, y una categoría es un libro de precios: la
   misma unidad que el negocio publica, con su edición y su vigencia. */
.kl-tabs {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin-bottom: 1.1rem; padding: .3rem;
    background: rgba(255,255,255,.55);
    border: 1px solid var(--kl-grid-line);
    border-radius: 999px;
}
.kl-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .85rem;
    background: transparent; border: 0;
    border-radius: 999px;
    font-size: .8rem; color: var(--kl-text-muted); text-decoration: none;
    white-space: nowrap;
    transition: background var(--kl-ease), color var(--kl-ease), box-shadow var(--kl-ease);
}
.kl-tab:hover { background: #fff; color: var(--kl-text); text-decoration: none; box-shadow: var(--kl-shadow-sm); }
.kl-tab.active {
    background: linear-gradient(135deg, #3A8FA6, var(--kl-petrol));
    color: #fff; font-weight: 600;
    box-shadow: 0 2px 8px rgba(50,128,149,.32);
}
.kl-tab__n {
    font-size: .68rem; padding: .05rem .4rem; border-radius: 999px;
    background: var(--kl-field); color: var(--kl-text-muted);
    font-variant-numeric: tabular-nums;
}
.kl-tab.active .kl-tab__n { background: rgba(255,255,255,.22); color: #fff; }

/* ---------------------------------------------------------------- modales --
   Se usa <dialog> nativo: trae el foco atrapado, Esc para cerrar y el fondo
   inerte sin una sola línea de JS. Reimplementar eso a mano es la causa más
   común de modales que dejan el teclado atrapado detrás del fondo. */
.kl-modal {
    border: none; padding: 0;
    border-radius: var(--kl-radius);
    box-shadow: var(--kl-shadow-lg);
    max-width: min(920px, 94vw);
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    color: var(--kl-text);
    font-family: var(--kl-font);
}
.kl-modal::backdrop { background: rgba(54,60,66,.55); }

/* ------------------------------------------ confirmaciones y avisos (avisos.js)
   En lugar de confirm() y alert(): un icono que dice de qué se trata, un título
   que es la pregunta y botones que nombran la acción. */
.kl-aviso {
    border: none; padding: 0; background: transparent;
    width: min(440px, calc(100vw - 2rem)); max-width: none;
    color: var(--kl-text); font-family: var(--kl-font);
    overflow: visible;
}
.kl-aviso::backdrop { background: rgba(28,38,46,.5); backdrop-filter: blur(2px); animation: kl-aviso-fondo 160ms ease-out; }
.kl-aviso__caja {
    background: var(--kl-surface); border-radius: var(--kl-radius);
    box-shadow: 0 24px 60px -16px rgba(18,48,58,.45), 0 2px 6px rgba(18,48,58,.12);
    padding: 1.6rem 1.6rem 1.25rem; text-align: center;
    animation: kl-aviso-entra 180ms cubic-bezier(.2,.9,.3,1.2);
}
.kl-aviso--saliendo .kl-aviso__caja { animation: kl-aviso-sale 120ms ease-in forwards; }
.kl-aviso__icono {
    width: 54px; height: 54px; margin: 0 auto .9rem; border-radius: 50%;
    display: grid; place-items: center;
    background: #E6F1F4; color: var(--kl-petrol);
}
.kl-aviso__icono svg { width: 28px; height: 28px; }
.kl-aviso--peligro .kl-aviso__icono, .kl-aviso--error .kl-aviso__icono { background: var(--kl-danger-bg); color: var(--kl-danger); }
.kl-aviso--aviso .kl-aviso__icono { background: var(--kl-warning-bg); color: #B7791F; }
.kl-aviso--exito .kl-aviso__icono { background: var(--kl-success-bg); color: #1F8A57; }
.kl-aviso__titulo { margin: 0 0 .45rem; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.kl-aviso__texto {
    margin: 0 auto; max-width: 36ch; font-size: .88rem; line-height: 1.5;
    color: var(--kl-anthracite-light); white-space: pre-line;
}
.kl-aviso__botones { display: flex; gap: .6rem; justify-content: center; margin-top: 1.35rem; }
.kl-aviso__botones .kl-btn { min-width: 7.5rem; justify-content: center; }
@keyframes kl-aviso-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kl-aviso-sale { to { opacity: 0; transform: scale(.97); } }
@keyframes kl-aviso-fondo { from { opacity: 0; } }

/* Avisos flotantes: arriba a la derecha, se van solos. */
.kl-notas {
    position: fixed; top: 4.2rem; right: 1rem; z-index: 1000;
    display: grid; gap: .5rem; width: min(380px, calc(100vw - 2rem));
}
.kl-nota {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .75rem .8rem; border-radius: var(--kl-radius-sm);
    background: var(--kl-surface); border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-petrol);
    box-shadow: 0 12px 30px -12px rgba(18,48,58,.4);
    font-size: .84rem; line-height: 1.4;
    animation: kl-nota-entra 200ms ease-out;
}
.kl-nota > svg { flex: none; width: 18px; height: 18px; margin-top: .05rem; color: var(--kl-petrol); }
.kl-nota > span { flex: 1; }
.kl-nota--error { border-left-color: var(--kl-danger); }
.kl-nota--error > svg { color: var(--kl-danger); }
.kl-nota--exito { border-left-color: #1F8A57; }
.kl-nota--exito > svg { color: #1F8A57; }
.kl-nota--aviso { border-left-color: var(--kl-warning); }
.kl-nota--aviso > svg { color: #B7791F; }
.kl-nota__cerrar {
    flex: none; border: 0; background: none; padding: 0 .15rem; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: var(--kl-text-muted);
}
.kl-nota__cerrar:hover { color: var(--kl-text); }
.kl-nota--saliendo { opacity: 0; transform: translateX(12px); transition: opacity 200ms, transform 200ms; }
@keyframes kl-nota-entra { from { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) {
    .kl-aviso__caja, .kl-aviso::backdrop, .kl-nota { animation: none; }
}

.kl-modal__head {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.15rem;
    background: linear-gradient(90deg, #1a5c6b 0%, #1e6575 50%, #22707f 100%);
    color: #fff;
}
.kl-modal__head h2 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--kl-yellow); }
.kl-modal__close {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: #fff; font-size: 1.3rem; line-height: 1; padding: 0 .25rem;
}
.kl-modal__close:hover { color: var(--kl-yellow); }

.kl-modal__body { padding: 1.15rem; overflow: auto; max-height: calc(88vh - 108px); }
.kl-modal__body--flush { padding: 0; }
.kl-modal__foot {
    padding: .7rem 1.15rem; border-top: 1px solid var(--kl-border);
    display: flex; gap: .5rem; justify-content: flex-end; background: var(--kl-bg);
}
.kl-modal__foot[hidden] { display: none; }

.kl-modal__loading { padding: 2.5rem; text-align: center; color: var(--kl-text-muted); }

.kl-linklike {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--kl-petrol); font: inherit; font-size: .82rem;
}
.kl-linklike:hover { text-decoration: underline; }

/* -------------------------------------------------- orden y filtros ------ */
.kl-th {
    color: inherit; text-decoration: none;
    display: inline-flex; align-items: center; gap: .2rem;
    transition: color var(--kl-ease);
}
.kl-th:hover { color: var(--kl-petrol); text-decoration: none; }
.kl-th--on { color: var(--kl-petrol); }
.kl-th__ord { font-size: .7rem; }

.kl-filters th {
    background: var(--kl-surface); padding: .3rem .45rem;
    position: sticky; top: 29px;   /* bajo el encabezado, que también es sticky */
    border-bottom: 1px solid var(--kl-grid-line);
}
.kl-filter {
    width: 100%; padding: .26rem .5rem; font-size: .74rem;
    border-radius: 999px; border: 1px solid transparent;
    background: var(--kl-field); color: var(--kl-text);
    transition: background var(--kl-ease), border-color var(--kl-ease), box-shadow var(--kl-ease);
}
.kl-filter:hover { background: #EDEFF1; }
.kl-filter:focus {
    outline: none; background: #fff; border-color: var(--kl-petrol);
    box-shadow: 0 0 0 3px rgba(50,128,149,.15);
}
.kl-filter::placeholder { color: #9AA3A8; }
select.kl-filter { appearance: none; padding-right: .5rem; cursor: pointer; }

/* Las mismas dos piezas en todas las tablas (tablas.js): el encabezado que
   ordena es un botón —se alcanza con el teclado— vestido como el enlace del
   tablero, y un filtro con algo escrito se distingue de los vacíos. */
button.kl-th {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
    text-align: inherit; cursor: pointer;
}
button.kl-th:focus-visible { outline: 2px solid var(--kl-petrol); outline-offset: 2px; border-radius: 2px; }
.kl-grid .kl-filter { min-width: 4.5rem; }
.kl-filter--on { background: #fff; border-color: rgba(50,128,149,.45); }
.kl-grid__estado {
    display: flex; align-items: center; gap: .75rem;
    padding: .45rem .9rem; font-size: .74rem; color: var(--kl-text-muted);
    border-top: 1px solid var(--kl-grid-line); background: var(--kl-grid-head);
}
.kl-grid__estado[hidden] { display: none; }
.kl-grid__quitar {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
    color: var(--kl-petrol); cursor: pointer;
}
.kl-grid__quitar:hover { text-decoration: underline; }

/* ------------------------------------------------------------- paginador
   El de todos los grids que traen una página del total: cuántos renglones y
   números para ir directo a cualquier página. */
.kl-paginador {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: .6rem; padding: .7rem .9rem; border-top: 1px solid var(--kl-border);
    font-size: .8rem; color: var(--kl-text-muted);
}
.kl-paginador__paginas { display: inline-flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.kl-paginador__num, .kl-paginador__ir {
    min-width: 2rem; height: 2rem; padding: 0 .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--kl-radius-sm); border: 1px solid var(--kl-border);
    background: var(--kl-surface, #fff); color: var(--kl-anthracite);
    text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background var(--kl-ease), border-color var(--kl-ease);
}
a.kl-paginador__num:hover, a.kl-paginador__ir:hover {
    background: var(--kl-yellow-subtle); border-color: var(--kl-yellow); text-decoration: none;
}
.kl-paginador__num--on { background: var(--kl-petrol); border-color: var(--kl-petrol); color: #fff; }
.kl-paginador__ir--off { opacity: .35; }
.kl-paginador__hueco { min-width: 1.4rem; text-align: center; }

/* Mientras llega la página nueva, la tabla se atenúa: se ve que el filtro entró. */
.kl-grid--cargando tbody { opacity: .45; transition: opacity 120ms ease; }

/* Lo que esas pantallas llevaban en style="" y la CSP nunca aplicó. */
.kl-w-busqueda { min-width: 280px; }
.kl-w-operando { width: 110px; }
.kl-col-casilla { width: 32px; }
.kl-col-nombre { min-width: 260px; }
.kl-centro { text-align: center; }
.kl-ancho-completo { width: 100%; }
.kl-mt-sm { margin-top: .85rem; }
/* Un instante en verde al guardar una celda: se sabe que entró sin un aviso. */
.kl-guardado { background: var(--kl-success-bg) !important; }

/* El catálogo global dentro del modal de Productos. */
.kl-catalogo-modal__tabla { max-height: 52vh; margin-top: .6rem; }
.kl-catalogo-modal__estado { width: 112px; }
.kl-catalogo-modal__nombre { display: flex; gap: .3rem; }
.kl-catalogo-modal__nombre .kl-input { flex: 1; font-size: .78rem; }
.kl-catalogo-modal__nombre .kl-btn { padding: .15rem .5rem; font-size: .72rem; }

/* El material del tablero abre las opciones del equipo: se ve como
   código, pero subrayado, para que se note que se le puede dar clic. */
.kl-sku-enlace {
    background: none; border: none; padding: 0; cursor: pointer; text-align: left;
    font-family: var(--kl-font-mono); font-size: .72rem; color: var(--kl-petrol);
    text-decoration: underline dotted; text-underline-offset: 2px;
}
.kl-sku-enlace:hover, .kl-sku-enlace:focus-visible { text-decoration-style: solid; }

/* Las opciones de un equipo, en su modal. */
.kl-opciones__tabla { max-height: 56vh; margin-top: .4rem; }
/* A quién aplica un precio nuevo: «toda la serie» o «solo este equipo». */
.kl-opciones__alcance { padding: .2rem .35rem; font-size: .78rem; }

/* Los candidatos del alta de precio, en el modal de Productos. */
.kl-alta__tabla { max-height: 48vh; margin-top: .7rem; }
.kl-alta__precio { width: 230px; }

/* La llave de la API recién emitida: la única vez que se ve. */
.kl-llave-nueva { border: 2px solid var(--kl-yellow, #FFD200); }
.kl-llave-nueva__valor {
    flex: 1 1 360px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9rem;
    letter-spacing: .02em;
}

/* Variación de precio en el historial */
.kl-delta--sube { color: #166534; }
.kl-delta--baja { color: #991B1B; }

/* Los materiales del Master en Cargas: la vista previa del cruce. */
.kl-materiales__tabla { max-height: 50vh; margin-top: .6rem; }

/* =========================================================== propio de KLOG */

/* Tablas densas (pedimentos, partidas, contribuciones): Roboto Condensed, como
   pide el plan de diseño, para que quepan más columnas sin bajar el tamaño. */
.kl-table--densa { font-family: var(--kl-font-condensed); }

/* Títulos de grupo en la barra lateral. */
.kl-nav-titulo {
    margin: .9rem .7rem .3rem; font-size: .62rem; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.kl-sidebar nav a.kl-nav--pronto { opacity: .45; cursor: default; }
.kl-sidebar nav a.kl-nav--pronto:hover { background: none; transform: none; color: #b9d4db; }
.kl-sidebar nav a .kl-pronto {
    margin-left: auto; font-size: .58rem; letter-spacing: .6px; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 0 .4rem;
}

/* Aviso del modo de acceso abierto (plan de implementación §2.2): visible en
   toda pantalla mientras esté activo. Texto anthracite sobre amarillo. */
.kl-banner-pruebas {
    background: var(--kl-yellow); color: var(--kl-anthracite);
    font-weight: 600; font-size: .8rem; text-align: center;
    padding: .4rem 1rem; letter-spacing: .2px;
}
.kl-login .kl-banner-pruebas { position: fixed; top: 0; left: 0; right: 0; }

/* Tarjetas de módulos en el inicio. */
.kl-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.kl-modulo {
    display: flex; gap: .8rem; align-items: flex-start;
    background: var(--kl-surface); border: 1px solid var(--kl-grid-line);
    border-radius: var(--kl-radius); padding: 1rem 1.1rem; color: var(--kl-text);
    transition: border-color var(--kl-ease), box-shadow var(--kl-ease);
}
a.kl-modulo:hover { border-color: var(--kl-petrol); box-shadow: var(--kl-shadow); text-decoration: none; color: var(--kl-text); }
.kl-modulo svg { width: 22px; height: 22px; flex: none; color: var(--kl-petrol); margin-top: .1rem; }
.kl-modulo__nombre { font-weight: 600; display: block; }
.kl-modulo__texto { font-size: .8rem; color: var(--kl-text-muted); }
.kl-modulo__codigo { font-size: .65rem; color: var(--kl-text-muted); letter-spacing: .5px; }
.kl-modulo--pronto { opacity: .6; }

/* Etiqueta de sección en píldora, como en el brandbook. */
.kl-pildora {
    display: inline-block; background: var(--kl-petrol); color: #fff;
    border-radius: 999px; padding: .15rem .8rem; font-size: .75rem; font-weight: 600;
}

/* Bloque de datos clave–valor (Mi cuenta, Empresa). */
.kl-dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
.kl-dl dt { color: var(--kl-text-muted); font-size: .8rem; }
.kl-dl dd { margin: 0; font-weight: 500; }

/* JSON de antes/después en la bitácora. */
.kl-json { font-family: var(--kl-font-mono); font-size: .72rem; white-space: pre-wrap; word-break: break-word; max-width: 28rem; }

/* ------------------------------------------------- utilidades (de KAPA) --- */
/* En KAPA vivían junto al segundo factor; aquí van aparte. Sin ellas, los
   controles de búsqueda y los mensajes quedan con el estilo del navegador. */
.kl-input, .kl-select {
    padding: .45rem .65rem; border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius-sm); font-size: .85rem; font-family: inherit;
    background: #fff; color: var(--kl-text);
}
.kl-input:focus, .kl-select:focus { outline: 2px solid var(--kl-petrol); outline-offset: -1px; border-color: var(--kl-petrol); }
/* Versión compacta para barras de filtros y celdas de tabla. */
.kl-input--sm { padding: .3rem .5rem; font-size: .8rem; }
input.kl-input--sm:not([type="date"]) { min-width: 14rem; }

/* Selector de archivo: el botón nativo («Elegir archivo») con el aspecto de un kl-btn secundario. */
input[type="file"].kl-input { padding: .3rem .5rem .3rem .3rem; cursor: pointer; }
input[type="file"].kl-input--sm { min-width: 19rem; }
input[type="file"]::file-selector-button {
    margin-right: .6rem; padding: .3rem .75rem; border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius-sm); background: var(--kl-surface-2, #F3F5F7); color: var(--kl-text);
    font: inherit; font-weight: 600; cursor: pointer; transition: background 120ms, border-color 120ms;
}
input[type="file"]::file-selector-button:hover { background: #E8EDF1; border-color: var(--kl-petrol); }

.kl-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.kl-inline { display: inline-flex; gap: .5rem; align-items: center; }

.kl-alert { padding: .7rem 1rem; border-radius: var(--kl-radius-sm); font-size: .85rem; margin-bottom: 1rem; border-left: 3px solid; }
.kl-alert--error { background: var(--kl-danger-bg); border-color: var(--kl-danger); color: #991B1B; }
.kl-alert--ok { background: var(--kl-success-bg); border-color: var(--kl-success); color: #166534; }
.kl-alert--warn { background: var(--kl-warning-bg); border-color: var(--kl-warning); color: #92400E; }

.kl-muted { color: var(--kl-text-muted); }
.kl-small { font-size: .75rem; }
.kl-mt-0 { margin-top: 0; }

.kl-chip {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .1rem .5rem; border: 1px solid var(--kl-border); border-radius: 999px;
    background: var(--kl-surface); font-size: .75rem; line-height: 1.5; white-space: nowrap;
    margin: 0 .25rem .25rem 0;
}
.kl-chip--suspendido { opacity: .65; }

/* Códigos y claves en línea (acciones de la bitácora, folios). */
.kl-codigo {
    font-family: var(--kl-font-mono); font-size: .78rem;
    background: var(--kl-field); border-radius: 4px; padding: .05rem .35rem;
}


/* ------------------------------------------- consulta fiscal y expediente --- */
/* Pedimentos, COVE y expediente (I4): cabecera del documento, columnas,
   renglones desplegables y números alineados a la derecha. */
.kl-der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kl-table .kl-codigo { white-space: nowrap; }
/* En una celda completa solo cambia la letra: el fondo de «chip» es para códigos en línea. */
.kl-table td.kl-codigo { background: none; border-radius: 0; }
.kl-w-clave { width: 6.5rem; min-width: 0 !important; }
.kl-badge--ok { background: var(--kl-success-bg); color: #166534; }

.kl-ped-cabeza { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.kl-ped-cabeza__numero {
    font-family: var(--kl-font-mono); font-size: 1.55rem; font-weight: 700;
    letter-spacing: .5px; margin: .2rem 0 .35rem;
}
.kl-ped-cabeza__datos { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; font-size: .85rem; color: var(--kl-text-muted); }
.kl-ped-cabeza__datos b { color: var(--kl-text); }

.kl-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.25rem; align-items: start; }
.kl-columnas > .kl-card { margin-bottom: 1.25rem; }

.kl-subtitulo { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--kl-text-muted); margin: 1.1rem 0 .55rem; }
.kl-subencabezado { padding: .55rem 1rem; font-size: .8rem; font-weight: 600; background: var(--kl-field); border-top: 1px solid var(--kl-border); }
.kl-texto-largo { white-space: pre-wrap; word-break: break-word; }
.kl-relleno { padding: .6rem 1rem; margin: 0; }
.kl-lista-simple { list-style: none; margin: .3rem 0 0; padding: 0; }
.kl-lista-simple li { padding: .2rem 0; }

/* Partida o mercancía desplegable dentro de una tabla. */
.kl-partida summary { cursor: pointer; }
.kl-partida summary:hover { color: var(--kl-petrol); }
.kl-partida[open] summary { font-weight: 600; margin-bottom: .5rem; }
.kl-partida__detalle { padding: .6rem .75rem; background: var(--kl-field); border-radius: var(--kl-radius-sm); }
.kl-partida__detalle .kl-table { background: #fff; }

@media (max-width: 720px) {
    .kl-columnas { grid-template-columns: 1fr; }
    .kl-ped-cabeza__numero { font-size: 1.2rem; }
}

/* ------------------------------------------------- cargas, validaciones y reportes -- */
.kl-casilla { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--kl-text); cursor: pointer; user-select: none; }
.kl-casilla input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--kl-petrol); cursor: pointer; }
.kl-nota-regla { margin: .75rem 0 0; max-width: 72rem; line-height: 1.5; }
.kl-hojas { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 2.5rem; font-size: .85rem; line-height: 1.5; }
.kl-hojas li { margin-bottom: .45rem; break-inside: avoid; }

@media (max-width: 720px) {
    .kl-hojas { columns: 1; }
}

/* ---------------------------------------------------------- guía de uso --- */
/* Patrón de la guía de KAPA, con los tokens de KLOG. */
.kl-btn--ghost { background: transparent; border-color: transparent; color: var(--kl-text-muted); font-weight: 600; }
.kl-btn--ghost:hover { background: var(--kl-field); color: var(--kl-text); }
.kl-pronto {
    display: inline-block; margin-left: .35rem; padding: 0 .45rem; vertical-align: middle;
    font-size: .58rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    border: 1px solid var(--kl-border); border-radius: 999px; color: var(--kl-text-muted); background: var(--kl-surface);
}
.kl-guia-portada {
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 1.35rem 1.5rem; margin-bottom: 1.4rem; border-radius: var(--kl-radius);
    background:
        radial-gradient(80% 140% at 100% 0%, rgba(255,206,0,.18) 0%, transparent 55%),
        linear-gradient(135deg, #22707f 0%, #1a5c6b 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(18,48,58,.2), 0 12px 32px -14px rgba(18,48,58,.55);
}
.kl-guia-portada h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.kl-guia-portada p { margin: 0; max-width: 78ch; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.kl-guia-portada__icono {
    flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255,255,255,.14); color: var(--kl-yellow);
}
.kl-guia-portada__icono svg { width: 26px; height: 26px; }
.kl-guia-portada__sesion { margin-top: .75rem !important; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.kl-guia-portada__fase { margin-top: .6rem !important; font-size: .8rem !important; color: rgba(255,255,255,.75) !important; }
.kl-guia-portada .kl-badge--sap { background: var(--kl-yellow); color: var(--kl-anthracite); }
.kl-guia__titulo { margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--kl-text-muted); }
.kl-guia__titulo--chico { margin-top: 1.1rem; }
.kl-guia__titulo--separa { margin: 2rem 0 .9rem; padding-top: 1.1rem; border-top: 1px dashed var(--kl-border); }
.kl-guia-mapa { display: grid; gap: .65rem; margin-bottom: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kl-guia-mapa__item {
    display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .85rem; border-radius: var(--kl-radius-sm);
    background: var(--kl-surface); border: 1px solid var(--kl-grid-line); color: var(--kl-text); text-decoration: none;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: border-color var(--kl-ease), box-shadow var(--kl-ease), transform var(--kl-ease);
}
.kl-guia-mapa__item:hover { text-decoration: none; border-color: rgba(50,128,149,.45); box-shadow: 0 6px 18px -10px rgba(16,24,40,.35); transform: translateY(-1px); }
.kl-guia-mapa__icono { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #E8F2F5; color: var(--kl-petrol); }
.kl-guia-mapa__icono svg { width: 18px; height: 18px; }
.kl-guia-mapa__texto b { display: block; font-size: .86rem; }
.kl-guia-mapa__texto small { display: block; margin-top: .12rem; font-size: .74rem; line-height: 1.35; color: var(--kl-text-muted); }
.kl-guia-mapa__item--extra .kl-guia-mapa__icono { background: var(--kl-yellow-subtle); color: #8a6d00; }
.kl-guia-mapa--ajeno .kl-guia-mapa__item { background: #FAFAFB; box-shadow: none; }
.kl-guia-mapa--ajeno .kl-guia-mapa__icono { background: #EEF0F2; color: #8A939B; }
.kl-guia-mapa--ajeno .kl-guia-mapa__texto b { color: var(--kl-anthracite-light); }
.kl-guia__modulo { scroll-margin-top: 5rem; }
.kl-guia__cabeza { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.kl-guia__icono { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--kl-petrol); color: #fff; }
.kl-guia__icono svg { width: 20px; height: 20px; }
.kl-guia__titulos { flex: 1; min-width: 220px; }
.kl-guia__titulos h2 { margin: 0; }
.kl-guia__titulos p { margin: .15rem 0 0; font-size: .8rem; color: var(--kl-text-muted); }
.kl-guia__abrir { display: inline-flex; align-items: center; gap: .35rem; }
.kl-guia__abrir svg { width: 15px; height: 15px; }
.kl-guia__modulo--ajeno { background: #FCFCFD; }
.kl-guia__modulo--ajeno .kl-card__body { opacity: .78; }
.kl-guia__modulo--ajeno .kl-guia__icono { background: #C9CED3; }
.kl-guia__sub { margin: 0 0 .55rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .55px; color: var(--kl-text-muted); }
.kl-flujo {
    list-style: none; margin: 0 0 1.25rem; padding: .85rem;
    display: flex; flex-wrap: wrap; align-items: stretch; gap: .55rem 1.6rem;
    background: linear-gradient(135deg, #F4F9FA 0%, #EEF5F7 100%); border: 1px solid #DDEBEF; border-radius: var(--kl-radius-sm);
}
.kl-flujo__paso {
    position: relative; display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem .45rem .45rem; border-radius: 999px;
    background: #fff; border: 1px solid #D5E6EB; font-size: .8rem; font-weight: 600; color: var(--kl-anthracite);
}
.kl-flujo__paso + .kl-flujo__paso::before {
    content: "\2192"; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%); color: var(--kl-petrol); font-weight: 700;
}
.kl-flujo__n {
    flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--kl-petrol); color: #fff; font-size: .7rem; font-weight: 700;
}
.kl-flujo__paso:last-child .kl-flujo__n { background: var(--kl-yellow); color: var(--kl-anthracite); }
.kl-guia__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.kl-guia__pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .85rem; }
.kl-guia__pasos li { counter-increment: paso; position: relative; padding-left: 2rem; line-height: 1.45; }
.kl-guia__pasos li::before {
    content: counter(paso); position: absolute; left: 0; top: -.05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: grid; place-items: center; border: 1.5px solid var(--kl-petrol); color: var(--kl-petrol); font-size: .7rem; font-weight: 700;
}
.kl-guia__saber { align-self: start; padding: .85rem .95rem; border-radius: var(--kl-radius-sm); background: var(--kl-yellow-subtle); border: 1px solid #F5E7A6; }
.kl-guia__reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .83rem; }
.kl-guia__reglas li { display: flex; gap: .5rem; align-items: flex-start; line-height: 1.45; color: var(--kl-anthracite-light); }
.kl-guia__reglas svg { flex: none; width: 15px; height: 15px; margin-top: .12rem; color: #B38F00; }
.kl-guia__quien { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 1.1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--kl-grid-line); }
.kl-guia-basico { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.kl-guia-num {
    display: inline-grid; place-items: center; flex: none; width: 17px; height: 17px; margin-right: .35rem; border-radius: 50%;
    background: var(--kl-yellow); color: var(--kl-anthracite); font-size: .62rem; font-weight: 700; font-style: normal; vertical-align: middle;
}
.kl-guia-leyenda { margin: .8rem 0 .6rem; padding: 0; list-style: none; counter-reset: ley; display: grid; gap: .4rem; font-size: .82rem; }
.kl-guia-leyenda li { counter-increment: ley; position: relative; padding-left: 1.6rem; line-height: 1.45; }
.kl-guia-leyenda li::before {
    content: counter(ley); position: absolute; left: 0; top: .05rem; width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center; background: var(--kl-yellow); color: var(--kl-anthracite); font-size: .62rem; font-weight: 700;
}
.kl-guia-barra {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .65rem .75rem; border-radius: var(--kl-radius-sm);
    background: var(--kl-surface); border: 1px solid var(--kl-border); box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.kl-guia-barra__pieza {
    display: inline-flex; align-items: center; padding: .32rem .6rem; border-radius: var(--kl-radius-sm);
    border: 1px solid var(--kl-border); font-size: .76rem; font-weight: 600; color: var(--kl-anthracite); background: #fff;
}
.kl-guia-barra__pieza--tenue { color: var(--kl-text-muted); background: var(--kl-field); }
.kl-guia-barra__pieza--texto { border-color: transparent; color: var(--kl-text-muted); font-weight: 500; }
.kl-guia-avisos { display: grid; gap: .45rem; }
.kl-guia-aviso {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .45rem .65rem; border-radius: var(--kl-radius-sm);
    border: 1px solid var(--kl-border); background: #fff; font-size: .76rem; color: var(--kl-anthracite);
}
.kl-guia-aviso b, .kl-guia-aviso em { font-style: normal; padding: .1rem .5rem; border-radius: 6px; font-weight: 700; font-size: .7rem; }
.kl-guia-aviso b { background: var(--kl-yellow); }
.kl-guia-aviso--pregunta b { background: var(--kl-field); }
.kl-guia-aviso__rojo { background: var(--kl-danger); color: #fff; }
.kl-guia-aviso--error { border-left: 3px solid var(--kl-danger); }
.kl-guia-aviso--nota { border-left: 3px solid var(--kl-success); justify-self: end; }
.kl-guia-matriz__marco { overflow-x: auto; }
.kl-guia-matriz th, .kl-guia-matriz td { text-align: center; white-space: nowrap; }
.kl-guia-matriz thead th:first-child, .kl-guia-matriz tbody th { text-align: left; }
.kl-guia-matriz tbody th { font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--kl-text); background: #fff; }
.kl-guia-matriz tbody th a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.kl-guia-matriz tbody th a:hover { color: var(--kl-petrol); }
.kl-guia-matriz tbody th svg { width: 15px; height: 15px; color: var(--kl-petrol); }
.kl-guia-matriz .kl-guia-matriz__mia { background: #F1F8FA; }
.kl-guia-matriz thead .kl-guia-matriz__mia { color: var(--kl-petrol); background: #E3F0F4; }
.kl-guia-no { color: #C4C9CE; font-weight: 700; }
.kl-guia-despues { display: block; margin-top: .15rem; font-size: .66rem; color: var(--kl-text-muted); }
.kl-guia__rol { display: inline-flex; align-items: center; gap: .35rem; margin-right: .7rem; }
.kl-guia-matriz__pronto td, .kl-guia-matriz__pronto th { opacity: .62; }
.kl-guia-perfiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kl-guia-perfil { padding: .7rem .8rem; border-radius: var(--kl-radius-sm); border: 1px solid var(--kl-grid-line); background: #FCFCFD; }
.kl-guia-perfil p { margin: .45rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--kl-anthracite-light); }
.kl-guia-perfil--mio { border-color: rgba(50,128,149,.45); background: #F4F9FA; }
.kl-guia-glosario { display: grid; gap: .6rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 0; }
.kl-guia-glosario dt { font-weight: 700; font-size: .84rem; color: var(--kl-anthracite); }
.kl-guia-glosario dd { margin: .1rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--kl-anthracite-light); }

/* Ayuda de cada pantalla: el «?» junto al título abre un globo (popover nativo). */
.kl-help {
    display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: none; padding: 0;
    border: 1px solid var(--kl-border); border-radius: 50%; background: var(--kl-field); color: var(--kl-text-muted);
    font-family: inherit; font-size: .64rem; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle;
    transition: background var(--kl-ease), color var(--kl-ease), border-color var(--kl-ease);
}
.kl-help:hover, .kl-help:focus-visible { background: var(--kl-petrol); border-color: var(--kl-petrol); color: #fff; }
.kl-help--muestra { cursor: default; }
.kl-help__pop {
    width: min(460px, calc(100vw - 2rem)); padding: 1.15rem 1.3rem 1rem; border: 0; border-radius: var(--kl-radius);
    box-shadow: var(--kl-shadow-lg); color: var(--kl-text); font-family: var(--kl-font); font-size: .85rem;
}
.kl-help__pop::backdrop { background: rgba(23,35,40,.32); }
.kl-help__titulo { margin: 0 0 .7rem; font-size: .95rem; font-weight: 700; padding-bottom: .55rem; border-bottom: 2px solid var(--kl-yellow); }
.kl-help__lista { margin: 0; padding-left: 1.05rem; display: grid; gap: .4rem; }
.kl-help__lista li { line-height: 1.45; }
.kl-help__nota { margin: .85rem 0 0; padding: .55rem .7rem; background: var(--kl-yellow-subtle); border-radius: var(--kl-radius-sm); font-size: .78rem; color: #7A5C00; }
.kl-help__pie { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }
@supports not selector(:popover-open) { .kl-help__pop { display: none; } }

@media (max-width: 900px) {
    .kl-guia__cols, .kl-guia-basico { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .kl-flujo { flex-direction: column; gap: 1.1rem; }
    .kl-flujo__paso + .kl-flujo__paso::before { content: "\2193"; left: 1rem; top: -1.05rem; transform: none; }
    .kl-guia-portada { flex-direction: column; }
}

/* ---------- Expediente físico (M13) ---------- */
/* Las tarjetas de estado filtran la lista. */
a.kl-stat { display: block; color: inherit; text-decoration: none; }
a.kl-stat:hover { border-color: var(--kl-petrol); }
.kl-stat--elegido { box-shadow: 0 0 0 2px var(--kl-petrol); }
.kl-stat .kl-barra { margin-top: .5rem; }
.kl-alert--info { background: #F0F7F9; border-color: var(--kl-petrol); color: var(--kl-text); }
.kl-mb-1 { margin-bottom: 1rem; }
.kl-chip[hidden] { display: none; }
/* Sí / No: dos botones pegados. El radio sigue ahí para el teclado y el lector de pantalla. */
.kl-sino { display: inline-flex; border: 1px solid var(--kl-border); border-radius: 999px; overflow: hidden; background: var(--kl-surface); }
.kl-sino label { position: relative; padding: .22rem .85rem; font-size: .78rem; color: var(--kl-text-muted); cursor: pointer; user-select: none; }
.kl-sino label + label { border-left: 1px solid var(--kl-border); }
.kl-sino input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kl-sino label:hover { color: var(--kl-text); }
.kl-sino label:has(input:focus-visible) { outline: 2px solid var(--kl-petrol); outline-offset: -2px; }
.kl-sino label:has(input[value="true"]:checked) { background: var(--kl-success-bg); color: #166534; font-weight: 600; }
.kl-sino label:has(input[value="false"]:checked) { background: var(--kl-danger-bg); color: #991B1B; font-weight: 600; }
.kl-input--comentario { width: 100%; min-width: 220px; }
.kl-fila--cambiada td { background: var(--kl-yellow-subtle); }
.kl-fila--inactiva td { color: var(--kl-text-muted); }
.kl-pie-form { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--kl-border); }

/* ---------- Formularios de captura, en una columna (digitalización) ---------- */
.kl-card--media { max-width: 720px; }
.kl-formulario { display: grid; gap: 1rem; }
.kl-campo { display: grid; gap: .3rem; font-size: .82rem; }
.kl-campo > span { font-weight: 600; color: var(--kl-text); }
.kl-campo small { font-size: .74rem; }
.kl-campo .kl-input, .kl-campo .kl-select { width: 100%; }
.kl-requerido { color: var(--kl-danger); font-weight: 700; }
.kl-campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.kl-pie-form--plano { border-top: 0; padding: 0; }
.kl-cadena { font-family: var(--kl-font-mono); font-size: .74rem; word-break: break-all; background: var(--kl-field); padding: .55rem .7rem; border-radius: var(--kl-radius-sm); margin: 0; }
.kl-acciones-detalle { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.kl-acciones-detalle form { display: contents; }
@media (max-width: 700px) {
    .kl-campos-2 { grid-template-columns: 1fr; }
}
.kl-select--tipos { max-width: 340px; }

/* ---------- Manifestación de Valor (M11) ---------- */
.kl-dl--2 { grid-template-columns: max-content 1fr max-content 1fr; }
.kl-mv-cove { padding: 0; }
.kl-mv-cove__resumen { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .85rem 1.25rem; cursor: pointer; list-style-position: inside; }
.kl-mv-cove__proveedor { font-weight: 600; }
.kl-mv-cove__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1rem; margin-bottom: .75rem; }
.kl-mv-lista { margin-top: 1rem; }
.kl-mv-lista__titulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--kl-text-muted); margin-bottom: .35rem; }
.kl-mv-tabla .kl-input, .kl-mv-tabla .kl-select { width: 100%; min-width: 0; }
.kl-mv-tabla td { vertical-align: middle; }
.kl-mv-num { min-width: 7.5rem !important; text-align: right; }
.kl-mv-tc { min-width: 6.5rem !important; text-align: right; }
.kl-mv-moneda { width: 4.5rem !important; text-transform: uppercase; }
.kl-mv-clave { min-width: 14rem !important; }
.kl-mv-nuevo td { background: var(--kl-field); }
.kl-mv-error { color: #991B1B; }
.kl-mv-error::before { content: "• "; }
.kl-mv-aviso { color: #92400E; }
.kl-mv-aviso::before { content: "• "; }
.kl-mv-pendiente { color: #991B1B; background: var(--kl-danger-bg); }
.kl-mv-nota { padding: .5rem .9rem; margin: 0; }
.kl-mv-pie { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
@media (max-width: 900px) {
    .kl-dl--2 { grid-template-columns: max-content 1fr; }
}

.kl-mv-tabla td:has(.kl-mv-moneda) { width: 5.5rem; }

/* ---------- Usuarios y acceso ---------- */
/* Lo que se entrega una sola vez (enlace de activación, contraseña temporal): el texto y su botón de copiar. */
.kl-entrega { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .55rem; }
.kl-entrega .kl-input { flex: 1 1 22rem; font-family: var(--kl-font-mono); }
.kl-invitar .kl-input { min-width: 14rem; }
.kl-estados { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.kl-modal--chico { max-width: min(440px, 94vw); }

/* ---------- Tablero del inicio (ApexCharts) ---------- */
/* hidden tiene que ganarle al display de las clases (grid, flex) de lo que se oculta. */
.kl-tablero [hidden] { display: none !important; }
.kl-tablero__cabeza { flex-wrap: wrap; gap: .5rem; }
.kl-tablero__nav { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.kl-tablero__periodo { min-width: 15rem; text-align: center; font-weight: 600; font-size: .9rem; }
.kl-tablero__filtros { border-bottom: 1px solid var(--kl-border); display: grid; gap: .5rem; }
.kl-tablero__cuerpo { position: relative; padding: 1.1rem 1.25rem 1.25rem; min-height: 14rem; }
.kl-tablero__kpis { margin-bottom: 1rem; }
.kl-tablero__vacio { padding: 1.25rem; margin-bottom: 1rem; border: 1px dashed var(--kl-border); border-radius: var(--kl-radius); background: var(--kl-bg); text-align: center; }
.kl-tablero__error { margin-bottom: 1rem; }
/* Mientras carga: lo anterior se atenúa y encima aparece la rueda. */
.kl-tablero__cargando {
    display: none; position: absolute; inset: 0; z-index: 2;
    place-content: center; justify-items: center; gap: .6rem;
    font-size: .85rem; color: var(--kl-text-muted);
}
.kl-tablero[aria-busy="true"] .kl-tablero__cargando { display: grid; }
.kl-tablero[aria-busy="true"] .kl-tablero__kpis,
.kl-tablero[aria-busy="true"] .kl-graficas,
.kl-tablero[aria-busy="true"] .kl-tablero__vacio { opacity: .35; pointer-events: none; transition: opacity .15s; }
.kl-esqueleto {
    display: inline-block; width: 6rem; height: 1.3rem; border-radius: 4px; vertical-align: middle;
    background: linear-gradient(90deg, #EEF0F2 25%, #F7F8F9 50%, #EEF0F2 75%); background-size: 200% 100%;
    animation: kl-brillo 1.2s ease-in-out infinite;
}
@keyframes kl-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .kl-esqueleto { animation: none; } }

.kl-graficas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kl-grafica { margin: 0; padding: .85rem 1rem .5rem; border: 1px solid var(--kl-border); border-radius: var(--kl-radius); background: var(--kl-surface); min-width: 0; }
.kl-grafica--ancha { grid-column: 1 / -1; }
.kl-grafica figcaption { font-size: .82rem; font-weight: 600; color: var(--kl-text); margin-bottom: .35rem; }
.kl-grafica figcaption small { font-weight: 400; color: var(--kl-text-muted); margin-left: .25rem; }
.kl-grafica__lienzo { min-height: 220px; }
@media (max-width: 1100px) { .kl-graficas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .kl-graficas { grid-template-columns: 1fr; }
    .kl-tablero__periodo { min-width: 0; }
}