/* ===========================================================================
   KIOT — sistema de diseño
   ---------------------------------------------------------------------------
   Base: el sistema de diseño de KLOG, que viene del de KAPA (tokens, BEM,
   componentes), con prefijo propio (--ki- y .ki-) para no quedar acoplados a
   los cambios de las otras plataformas.

   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 {
    --ki-yellow: #FFCE00;
    --ki-yellow-hover: #E6B900;
    --ki-yellow-subtle: #FFFBE6;
    --ki-petrol: #328095;
    --ki-petrol-hover: #2A6D7F;
    --ki-anthracite: #363C42;
    --ki-anthracite-light: #535A62;

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

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

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

    --ki-radius: 0.75rem;
    --ki-radius-sm: 0.5rem;
    --ki-sidebar-w: 256px;
    --ki-header-h: 56px;

    --ki-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --ki-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --ki-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. */
    --ki-grid-head: #FAFAFB;
    --ki-grid-line: #EDEEF0;
    --ki-grid-hover: #FAFCFD;
    --ki-field: #F4F5F6;
    --ki-ease: 160ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

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

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

/* ---------------------------------------------------------------- layout --- */
.ki-shell {
    display: grid; grid-template-columns: var(--ki-sidebar-w) minmax(0, 1fr); min-height: 100vh;
    transition: grid-template-columns 200ms cubic-bezier(.4, 0, .2, 1);
}

.ki-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;
    /* Marca arriba, «Salir» al pie y en medio las opciones, que se desplazan solas: así «Salir»
       queda a la vista aunque el menú crezca. */
    /* Por encima del contenido: colapsado, el nombre de cada opción se asoma sobre la página. */
    position: sticky; top: 0; height: 100vh; z-index: 20;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.07), 4px 0 24px rgba(18,63,76,.18);
}

.ki-sidebar__brand {
    position: relative; flex: none;
    display: flex; align-items: center; gap: .4rem;
    padding: 1.05rem .6rem .95rem 1rem;
    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. */
.ki-sidebar__brand::before {
    content: ''; position: absolute; left: 1rem; top: 1.15rem;
    width: 3px; height: 1.5rem; border-radius: 2px;
    background: var(--ki-yellow);
    box-shadow: 0 0 12px rgba(255,206,0,.55);
}
.ki-sidebar__brand span { display: block; flex: 1; min-width: 0; padding-left: .85rem; white-space: nowrap; overflow: hidden; }
.ki-sidebar__brand small {
    display: block; font-size: .6rem; font-weight: 600;
    letter-spacing: 1.8px; color: rgba(255,255,255,.55); margin-top: .1rem;
}

.ki-sidebar nav {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 1rem .6rem; display: flex; flex-direction: column; gap: 2px;
    /* 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;
}

.ki-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;
}
.ki-sidebar nav a svg { width: 17px; height: 17px; flex: none; opacity: .75; }

.ki-sidebar nav a:hover {
    background: rgba(255,255,255,.09);
    color: #fff; transform: translateX(2px);
}
.ki-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. */
.ki-sidebar nav a.active {
    background: linear-gradient(90deg, rgba(255,206,0,.16), rgba(255,206,0,.04));
    color: #fff; font-weight: 600;
}
.ki-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(--ki-yellow);
    box-shadow: 0 0 10px rgba(255,206,0,.6);
}
.ki-sidebar nav a.active svg { opacity: 1; color: var(--ki-yellow); }

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

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

.ki-header {
    height: var(--ki-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(--ki-grid-line);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem;
    position: sticky; top: 0; z-index: 10;
}
.ki-header__title { font-weight: 600; font-size: 1rem; margin: 0; }
.ki-header__spacer { flex: 1; }


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

/* ------------------------------------------------- menú colapsable (menu.js) --
   Como el de Toolbox. En escritorio, el botón junto a la marca deja el menú en
   solo iconos y el navegador lo recuerda. En pantallas angostas el menú es un
   cajón que abre el botón de la barra de arriba. */
.ki-sidebar__colapsar {
    flex: none; width: 26px; height: 26px; padding: 0;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--ki-radius-sm);
    background: rgba(255,255,255,.06); color: #b9d4db; cursor: pointer;
    transition: background var(--ki-ease), color var(--ki-ease);
}
.ki-sidebar__colapsar:hover { background: rgba(255,255,255,.14); color: #fff; }
.ki-sidebar__colapsar svg { width: 15px; height: 15px; transition: transform 200ms ease; }

/* «Salir», al pie: se ve como una opción más del menú y se pinta de rojo al pasar el cursor. */
.ki-sidebar__pie { flex: none; margin: 0; padding: .55rem .6rem .7rem; border-top: 1px solid rgba(255,255,255,.1); }
.ki-nav-salir {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .58rem .7rem; border: 0; border-radius: .45rem;
    background: none; color: #b9d4db; font: inherit; font-size: .855rem; text-align: left; cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.ki-nav-salir svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.ki-nav-salir:hover { background: rgba(255,107,107,.14); color: #fff; }
.ki-nav-salir:hover svg { opacity: 1; color: #FF8F8F; }

.ki-sidebar nav a:focus-visible, .ki-nav-salir:focus-visible, .ki-sidebar__colapsar:focus-visible {
    outline: 2px solid var(--ki-yellow); outline-offset: -2px;
}

/* El botón que abre el cajón y el velo de detrás solo existen en pantallas angostas. */
.ki-header .ki-header__menu, .ki-menu-velo { display: none; }

@media (min-width: 901px) {
    .ki-menu-colapsado { --ki-sidebar-w: 68px; }
    .ki-menu-colapsado .ki-sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .ki-menu-colapsado .ki-sidebar__brand::before,
    .ki-menu-colapsado .ki-sidebar__brand span { display: none; }
    .ki-menu-colapsado .ki-sidebar__colapsar svg { transform: rotate(180deg); }
    /* Los títulos de grupo se vuelven una raya: siguen separando sin ocupar ancho. */
    .ki-menu-colapsado .ki-nav-titulo { height: 1px; margin: .55rem .45rem; font-size: 0; background: rgba(255,255,255,.14); }
    .ki-menu-colapsado .ki-sidebar nav a,
    .ki-menu-colapsado .ki-nav-salir { justify-content: center; padding-left: 0; padding-right: 0; }
    .ki-menu-colapsado .ki-sidebar nav a:hover { transform: none; }
    /* El nombre de la opción: invisible pero presente para el lector de pantalla (opacidad, no
       display), y al pasar el cursor o con el teclado, una etiqueta al lado. Va en position: fixed
       porque el menú se desplaza y la recortaría; menu.js le da la altura (--ki-nombre-y). */
    .ki-menu-colapsado .ki-sidebar nav a span,
    .ki-menu-colapsado .ki-nav-salir span {
        position: fixed; left: calc(var(--ki-sidebar-w) + 6px); top: var(--ki-nombre-y, -100px); z-index: 60;
        transform: translateY(-50%);
        padding: .3rem .6rem; border-radius: .4rem;
        background: var(--ki-anthracite); color: #fff; box-shadow: var(--ki-shadow-lg);
        font-size: .78rem; font-weight: 500; white-space: nowrap;
        opacity: 0; pointer-events: none; transition: opacity 120ms ease;
    }
    .ki-menu-colapsado .ki-sidebar nav a:hover span,
    .ki-menu-colapsado .ki-sidebar nav a:focus-visible span,
    .ki-menu-colapsado .ki-nav-salir:hover span,
    .ki-menu-colapsado .ki-nav-salir:focus-visible span { opacity: 1; }
}

@media (max-width: 900px) {
    .ki-shell { grid-template-columns: minmax(0, 1fr); }
    .ki-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
        width: min(280px, 86vw); height: auto;
        /* Cerrado no solo se corre: se oculta, para que el tabulador no entre a un menú que no se ve.
           Al cerrar se oculta cuando termina de deslizarse; al abrir se muestra de inmediato, para
           que menu.js le pueda dar el foco a la primera opción. */
        transform: translateX(-105%); visibility: hidden;
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 220ms;
    }
    .ki-menu-abierto .ki-sidebar { transform: none; visibility: visible; transition-delay: 0s; }
    .ki-sidebar__colapsar { display: none; }
    .ki-menu-velo {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(15,23,26,.5); opacity: 0; pointer-events: none; transition: opacity 220ms ease;
    }
    .ki-menu-abierto .ki-menu-velo { opacity: 1; pointer-events: auto; }

    .ki-header { padding: 0 1rem; gap: .6rem; }
    .ki-header .ki-header__menu { display: inline-grid; flex: none; }
    .ki-header__title, .ki-yo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ki-yo { max-width: 45vw; }
    .ki-content { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ki-shell, .ki-sidebar, .ki-menu-velo, .ki-sidebar__colapsar svg { transition: none; }
}

/* ----------------------------------------------------------------- cards --- */
.ki-card {
    background: var(--ki-surface);
    border: 1px solid var(--ki-grid-line);
    border-radius: var(--ki-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 */
}
.ki-card__head {
    padding: .85rem 1.15rem; border-bottom: 1px solid var(--ki-grid-line);
    display: flex; align-items: center; gap: .75rem;
}
.ki-card__head h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.ki-card__body { padding: 1.15rem; }
.ki-card__body--flush { padding: 0; }

.ki-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ki-stat { background: var(--ki-surface); border: 1px solid var(--ki-border); border-left: 3px solid var(--ki-petrol); border-radius: var(--ki-radius); padding: .9rem 1.1rem; }
.ki-stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.ki-stat__label { font-size: .75rem; color: var(--ki-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.ki-stat--warn { border-left-color: var(--ki-warning); }
.ki-stat--yellow { border-left-color: var(--ki-yellow); }
.ki-stat__nota { margin-top: .3rem; font-size: .72rem; color: var(--ki-text-muted); }
.ki-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. */
.ki-indicadores__titulo { margin: 1.5rem 0 .75rem; font-size: 1rem; font-weight: 600; }
.ki-medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ki-medidor { background: var(--ki-surface); border: 1px solid var(--ki-border); border-radius: var(--ki-radius); padding: .9rem 1.1rem; }
.ki-medidor__titulo { font-size: .75rem; color: var(--ki-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.ki-medidor__cifra { font-size: 1.6rem; font-weight: 700; line-height: 1.1; margin: .15rem 0 .5rem; }
.ki-barra {
    appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px;
    border: 0; border-radius: 4px; background: #DCEBEF; color: var(--ki-petrol); overflow: hidden;
}
.ki-barra::-webkit-progress-bar { background: #DCEBEF; border-radius: 4px; }
.ki-barra::-webkit-progress-value { background: var(--ki-petrol); border-radius: 4px; }
.ki-barra::-moz-progress-bar { background: var(--ki-petrol); border-radius: 4px; }
.ki-barra--aviso { background: var(--ki-warning-bg); }
.ki-barra--aviso::-webkit-progress-bar { background: var(--ki-warning-bg); }
.ki-barra--aviso::-webkit-progress-value { background: var(--ki-warning); }
.ki-barra--aviso::-moz-progress-bar { background: var(--ki-warning); }
.ki-barra--alerta { background: var(--ki-danger-bg); }
.ki-barra--alerta::-webkit-progress-bar { background: var(--ki-danger-bg); }
.ki-barra--alerta::-webkit-progress-value { background: var(--ki-danger); }
.ki-barra--alerta::-moz-progress-bar { background: var(--ki-danger); }
.ki-barra--chica { height: 6px; min-width: 64px; }
.ki-celda-medidor { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.ki-celda-medidor .ki-barra { flex: 1; }
.ki-fila--elegida td { background: var(--ki-yellow-subtle); }
.ki-table tfoot td { font-weight: 600; border-top: 2px solid var(--ki-border); }
/* Un tablero se lee completo: sus tablas son cortas y no llevan scroll propio. */
.ki-table__wrap.ki-table__wrap--completo { max-height: none; }

/* ---------------------------------------------------------------- tablas --- */
.ki-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.ki-table th {
    background: var(--ki-grid-head); color: var(--ki-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(--ki-grid-line);
    backdrop-filter: saturate(180%) blur(6px);
}
.ki-table td {
    padding: .5rem .75rem; border-bottom: 1px solid var(--ki-grid-line);
    vertical-align: middle;
}
.ki-table tbody tr { transition: background var(--ki-ease); }
.ki-table tbody tr:hover { background: var(--ki-grid-hover); }
.ki-table tbody tr:last-child td { border-bottom: 0; }
.ki-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ki-table__wrap { max-height: 65vh; overflow: auto; border-radius: 0 0 var(--ki-radius) var(--ki-radius); }

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

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

/* -------------------------------------------------------------- controles -- */
.ki-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .9rem; border-radius: var(--ki-radius-sm);
    border:1px solid transparent; font-size:.82rem; font-weight:600;
    cursor:pointer; font-family:inherit; text-decoration:none;
    transition: background var(--ki-ease), border-color var(--ki-ease),
                box-shadow var(--ki-ease), transform var(--ki-ease);
}
.ki-btn:active { transform: translateY(1px); }
.ki-btn--primary {
    background: var(--ki-yellow); color: var(--ki-anthracite);
    box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4);
}
.ki-btn--primary:hover {
    background: var(--ki-yellow-hover); text-decoration:none;
    box-shadow: 0 3px 10px rgba(255,206,0,.4);
}
.ki-btn--secondary { background:#fff; border-color: var(--ki-border); color: var(--ki-text); }
.ki-btn--secondary:hover {
    background:#fff; border-color: var(--ki-petrol); color: var(--ki-petrol);
    text-decoration:none; box-shadow: var(--ki-shadow-sm);
}
.ki-btn--danger { background: var(--ki-danger); color:#fff; }
.ki-btn--danger:hover { background: var(--ki-danger); color:#fff; text-decoration:none; filter: brightness(.92); box-shadow: var(--ki-shadow-sm); }
.ki-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. */
.ki-acciones { display: inline-flex; align-items: center; gap: .3rem; }
.ki-acciones form { display: contents; }
.ki-iconbtn {
    width: 30px; height: 30px; padding: 0;
    display: inline-grid; place-items: center;
    border: 1px solid var(--ki-border); border-radius: var(--ki-radius-sm);
    background: #fff; color: var(--ki-anthracite-light);
    cursor: pointer; font: inherit;
    transition: background var(--ki-ease), border-color var(--ki-ease), color var(--ki-ease);
}
.ki-iconbtn svg { width: 16px; height: 16px; }
.ki-btn svg { width: 16px; height: 16px; flex: none; }
.ki-iconbtn:hover { border-color: var(--ki-petrol); color: var(--ki-petrol); text-decoration: none; }
.ki-iconbtn:focus-visible { outline: 2px solid var(--ki-petrol); outline-offset: 1px; }
/* Lo que está pendiente de alguien: la invitación que todavía no usa. */
.ki-iconbtn--acento {
    background: var(--ki-yellow-subtle); border-color: var(--ki-yellow); color: var(--ki-anthracite);
}
.ki-iconbtn--acento:hover {
    background: var(--ki-yellow); border-color: var(--ki-yellow-hover); color: var(--ki-anthracite);
}
.ki-iconbtn--peligro:hover {
    border-color: var(--ki-danger); color: var(--ki-danger); background: var(--ki-danger-bg);
}
/* Guarda el lugar de una acción que no aplica, para que las otras no se corran. */
.ki-iconbtn--hueco { visibility: hidden; }
/* Junto a una insignia, dentro de la celda: más chico que los de la columna de acciones. */
.ki-iconbtn--chico { width: 24px; height: 24px; margin-left: .25rem; vertical-align: middle; }
.ki-iconbtn--chico svg { width: 13px; height: 13px; }
.ki-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. */
.ki-opciones { display: grid; gap: .4rem; }
.ki-opcion {
    display: grid; grid-template-columns: auto 1fr; column-gap: .65rem;
    align-items: start;
    padding: .55rem .75rem;
    border: 1px solid var(--ki-border); border-radius: var(--ki-radius-sm);
    background: #fff; cursor: pointer;
    transition: border-color var(--ki-ease), background var(--ki-ease);
}
.ki-opcion:hover { border-color: var(--ki-petrol); }
.ki-opcion:has(input:checked) { border-color: var(--ki-petrol); background: #F0F7F9; }
.ki-opcion input { margin: .2rem 0 0; accent-color: var(--ki-petrol); }
.ki-opcion__texto b { display: block; font-size: .84rem; color: var(--ki-text); }
.ki-opcion__texto small {
    display: block; margin-top: .1rem;
    font-size: .74rem; line-height: 1.4; color: var(--ki-text-muted);
}
/* Muchas opciones cortas (las aduanas de la sincronización): en columnas. */
.ki-opciones--columnas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* 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. */
.ki-mb-0 { margin-bottom: 0; }
.ki-col-min { width: 1%; white-space: nowrap; }
.ki-vacio { padding: 1.5rem; text-align: center; }
.ki-clave-temporal { font-size: 1.05rem; letter-spacing: 1px; }
.ki-en-linea { display: inline-flex; align-items: center; gap: .3rem; }
.ki-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. */
.ki-select--ancho { min-width: 280px; }
.ki-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. */
.ki-sin-datos {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .8rem 1rem;
    border: 1px dashed var(--ki-border); border-radius: var(--ki-radius-sm);
    background: var(--ki-grid-head);
    font-size: .84rem; line-height: 1.5; color: var(--ki-text-muted);
}
.ki-sin-datos > svg { flex: none; width: 18px; height: 18px; margin-top: .12rem; color: var(--ki-petrol); }
.ki-sin-datos b { display: block; color: var(--ki-text); }
.ki-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. */
.ki-cargando {
    position: fixed; inset: 0; z-index: 1000;
    display: none; place-items: center;
    background: rgba(245,246,247,.75); backdrop-filter: blur(2px);
}
.ki-cargando--visible { display: grid; }
.ki-cargando__caja {
    display: grid; justify-items: center; gap: .55rem;
    max-width: 380px; padding: 1.4rem 1.8rem;
    background: #fff; border-radius: var(--ki-radius); box-shadow: var(--ki-shadow-lg);
    text-align: center;
}
.ki-cargando__rueda {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--ki-border); border-top-color: var(--ki-petrol);
    animation: ki-girar .8s linear infinite;
}
.ki-cargando__texto { font-size: .95rem; color: var(--ki-text); }
.ki-cargando__nota { font-size: .78rem; line-height: 1.4; color: var(--ki-text-muted); }
@keyframes ki-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ki-cargando__rueda { animation-duration: 2.4s; } }

/* ----------------------------------------------- pantalla de entrada -----
   Con el estilo del login de Toolbox y KLOG: a la izquierda, panel oscuro con la
   marca y la ilustración del monitoreo de compresores (img/login, vectorial); a la
   derecha, el formulario en blanco con la barra amarillo–petróleo–antracita.
   En el teléfono, la ilustración queda en una franja arriba y el formulario debajo. */
.ki-login { margin: 0; min-height: 100vh; background: var(--ki-surface); }
.ki-acceso { display: flex; min-height: 100vh; }

.ki-acceso__hero {
    flex: 1; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: 3rem 3.5rem;
    background-color: #262B30;
    /* El degradado oscurece la izquierda (donde va el texto) y deja ver el compresor y sus
       lecturas hacia el formulario. La ilustración se pega a la derecha: ahí está lo importante. */
    background-image:
        linear-gradient(90deg, rgba(30,36,41,.96) 0%, rgba(30,36,41,.88) 38%, rgba(30,36,41,.4) 60%, rgba(30,36,41,0) 80%),
        linear-gradient(0deg, rgba(30,36,41,.75) 0%, rgba(30,36,41,0) 28%),
        url('/img/login/monitoreo-compresores.svg');
    background-size: cover; background-position: right center; background-repeat: no-repeat;
}
/* 430 y no 470 como en KLOG: así el texto termina antes del compresor de la ilustración en 1366–1440 px. */
.ki-acceso__contenido { position: relative; max-width: 430px; width: 100%; margin: 0 auto 0 8%; }
.ki-acceso__titulo {
    margin: 0; font-size: 5rem; font-weight: 900; line-height: .95; letter-spacing: 8px; color: #fff;
}
.ki-acceso__lema {
    margin: .7rem 0 0; font-size: .9rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
    color: var(--ki-yellow);
}
.ki-acceso__divisor { width: 48px; height: 3px; border-radius: 2px; background: var(--ki-yellow); margin: 1.75rem 0; }
.ki-acceso__desc { margin: 0 0 2rem; font-size: .95rem; line-height: 1.7; color: rgba(255,255,255,.72); }
.ki-acceso__funciones {
    display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.5rem; margin: 0; padding: 0; list-style: none;
}
.ki-acceso__funciones li { display: flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.72); }
.ki-acceso__funciones svg { width: 18px; height: 18px; flex: none; color: var(--ki-yellow); }
.ki-acceso__pie { position: absolute; left: 3.5rem; bottom: 1.75rem; margin: 0; font-size: .72rem; color: rgba(255,255,255,.45); }
.ki-acceso__pie b { font-weight: 600; color: rgba(255,255,255,.7); }

.ki-acceso__panel {
    position: relative; flex: none; width: 480px;
    display: flex; align-items: center; justify-content: center;
    padding: 3rem; background: var(--ki-surface);
}
.ki-acceso__panel::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--ki-yellow) 0%, var(--ki-petrol) 55%, var(--ki-anthracite) 100%);
}
.ki-login__body { width: 100%; max-width: 360px; }
.ki-acceso__derechos { margin: 2.25rem 0 0; text-align: center; font-size: .72rem; color: var(--ki-text-muted); }

.ki-login__body h1 { margin: 0 0 .4rem; font-size: 1.65rem; font-weight: 700; color: var(--ki-anthracite); }
.ki-login__intro { margin: 0 0 1.75rem; font-size: .88rem; }
.ki-login__ayuda { margin: -.4rem 0 1rem; }
.ki-btn--bloque { width: 100%; justify-content: center; }

.ki-login__body label {
    display: block; margin-bottom: .4rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .2px; color: var(--ki-text);
}
.ki-login__body .ki-input {
    width: 100%; margin-bottom: 1.15rem;
    padding: .72rem .85rem; font-size: .92rem;
    border-radius: .55rem; background: #FAFBFB;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.ki-login__body .ki-input:focus {
    outline: none; background: #fff;
    border-color: var(--ki-petrol);
    box-shadow: 0 0 0 3px rgba(50,128,149,.16);
}
.ki-login__body .ki-input:-webkit-autofill { box-shadow: 0 0 0 40px #FFFBE6 inset; }

/* Campo con icono a la izquierda (y el ojo de la contraseña a la derecha). */
.ki-campo-icono { position: relative; margin-bottom: 1.15rem; }
.ki-campo-icono > svg {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--ki-text-muted); pointer-events: none;
}
.ki-login__body .ki-campo-icono .ki-input { margin-bottom: 0; padding-left: 2.6rem; }
.ki-campo-icono:has(.ki-campo-icono__ver) .ki-input { padding-right: 2.75rem; }
.ki-campo-icono__ver {
    position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: .4rem; background: transparent; color: var(--ki-text-muted); cursor: pointer;
}
.ki-campo-icono__ver:hover, .ki-campo-icono__ver:focus-visible { color: var(--ki-petrol); background: var(--ki-bg); outline: none; }
.ki-campo-icono__ver svg { width: 18px; height: 18px; }
.ki-campo-icono__ocultar, .ki-campo-icono__ver--activo .ki-campo-icono__mostrar { display: none; }
.ki-campo-icono__ver--activo .ki-campo-icono__ocultar { display: inline; }

.ki-login__body .ki-btn--primary {
    width: 100%; justify-content: center; gap: .5rem;
    padding: .78rem; font-size: .95rem; font-weight: 600; border-radius: .55rem;
    box-shadow: 0 1px 2px rgba(54,60,66,.2), 0 8px 18px -8px rgba(255,206,0,.8);
    transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}
.ki-login__body .ki-btn--primary:hover { transform: translateY(-1px); }
.ki-login__body .ki-btn--primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(54,60,66,.25); }
.ki-acceso__entrar svg { width: 17px; height: 17px; }

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

/* Los enlaces de al lado —olvidé mi contraseña, volver—: a la vista sin competir con el botón. */
.ki-login__otro { margin: 1.1rem 0 0; text-align: center; font-size: .82rem; }
.ki-login__otro a { display: inline-flex; align-items: center; gap: .35rem; color: var(--ki-petrol); font-weight: 500; text-decoration: none; }
.ki-login__otro a:hover { text-decoration: underline; }
.ki-login__otro svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
    .ki-acceso { flex-direction: column; }
    .ki-acceso__hero {
        flex: none; min-height: 190px; padding: 1.5rem 1.25rem; justify-content: flex-end;
        background-image:
            linear-gradient(0deg, rgba(30,36,41,.92) 0%, rgba(30,36,41,.3) 100%),
            url('/img/login/monitoreo-compresores.svg');
        background-position: right 38%;
    }
    .ki-acceso__contenido { margin: 0; }
    .ki-acceso__titulo { font-size: 2.6rem; letter-spacing: 5px; }
    .ki-acceso__lema { font-size: .72rem; letter-spacing: 2px; }
    .ki-acceso__divisor, .ki-acceso__desc, .ki-acceso__funciones, .ki-acceso__pie { display: none; }
    .ki-acceso__panel { width: 100%; padding: 2rem 1.25rem 2.5rem; align-items: flex-start; }
    .ki-acceso__panel::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 4px;
        background: linear-gradient(90deg, var(--ki-yellow) 0%, var(--ki-petrol) 55%, var(--ki-anthracite) 100%); }
    .ki-login__body { max-width: none; }
}

/* -------------------------------------------------------------- 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. */
.ki-yo { color: inherit; text-decoration: none; }
.ki-yo:hover { color: var(--ki-petrol); text-decoration: underline; }

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

.ki-card--angosta { max-width: 520px; }
.ki-qr { display: block; margin: .75rem 0; }
.ki-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. */
.ki-tabs {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin-bottom: 1.1rem; padding: .3rem;
    background: rgba(255,255,255,.55);
    border: 1px solid var(--ki-grid-line);
    border-radius: 999px;
}
.ki-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .85rem;
    background: transparent; border: 0;
    border-radius: 999px;
    font-size: .8rem; color: var(--ki-text-muted); text-decoration: none;
    white-space: nowrap;
    transition: background var(--ki-ease), color var(--ki-ease), box-shadow var(--ki-ease);
}
.ki-tab:hover { background: #fff; color: var(--ki-text); text-decoration: none; box-shadow: var(--ki-shadow-sm); }
.ki-tab.active {
    background: linear-gradient(135deg, #3A8FA6, var(--ki-petrol));
    color: #fff; font-weight: 600;
    box-shadow: 0 2px 8px rgba(50,128,149,.32);
}
.ki-tab__n {
    font-size: .68rem; padding: .05rem .4rem; border-radius: 999px;
    background: var(--ki-field); color: var(--ki-text-muted);
    font-variant-numeric: tabular-nums;
}
.ki-tab.active .ki-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. */
.ki-modal {
    border: none; padding: 0;
    border-radius: var(--ki-radius);
    box-shadow: var(--ki-shadow-lg);
    max-width: min(920px, 94vw);
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    color: var(--ki-text);
    font-family: var(--ki-font);
}
.ki-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. */
.ki-aviso {
    border: none; padding: 0; background: transparent;
    width: min(440px, calc(100vw - 2rem)); max-width: none;
    color: var(--ki-text); font-family: var(--ki-font);
    overflow: visible;
}
.ki-aviso::backdrop { background: rgba(28,38,46,.5); backdrop-filter: blur(2px); animation: ki-aviso-fondo 160ms ease-out; }
.ki-aviso__caja {
    background: var(--ki-surface); border-radius: var(--ki-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: ki-aviso-entra 180ms cubic-bezier(.2,.9,.3,1.2);
}
.ki-aviso--saliendo .ki-aviso__caja { animation: ki-aviso-sale 120ms ease-in forwards; }
.ki-aviso__icono {
    width: 54px; height: 54px; margin: 0 auto .9rem; border-radius: 50%;
    display: grid; place-items: center;
    background: #E6F1F4; color: var(--ki-petrol);
}
.ki-aviso__icono svg { width: 28px; height: 28px; }
.ki-aviso--peligro .ki-aviso__icono, .ki-aviso--error .ki-aviso__icono { background: var(--ki-danger-bg); color: var(--ki-danger); }
.ki-aviso--aviso .ki-aviso__icono { background: var(--ki-warning-bg); color: #B7791F; }
.ki-aviso--exito .ki-aviso__icono { background: var(--ki-success-bg); color: #1F8A57; }
.ki-aviso__titulo { margin: 0 0 .45rem; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.ki-aviso__texto {
    margin: 0 auto; max-width: 36ch; font-size: .88rem; line-height: 1.5;
    color: var(--ki-anthracite-light); white-space: pre-line;
}
.ki-aviso__botones { display: flex; gap: .6rem; justify-content: center; margin-top: 1.35rem; }
.ki-aviso__botones .ki-btn { min-width: 7.5rem; justify-content: center; }
@keyframes ki-aviso-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ki-aviso-sale { to { opacity: 0; transform: scale(.97); } }
@keyframes ki-aviso-fondo { from { opacity: 0; } }

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

.ki-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;
}
.ki-modal__head h2 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ki-yellow); }
.ki-modal__close {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: #fff; font-size: 1.3rem; line-height: 1; padding: 0 .25rem;
}
.ki-modal__close:hover { color: var(--ki-yellow); }

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

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

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

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

.ki-filters th {
    background: var(--ki-surface); padding: .3rem .45rem;
    position: sticky; top: 29px;   /* bajo el encabezado, que también es sticky */
    border-bottom: 1px solid var(--ki-grid-line);
}
.ki-filter {
    width: 100%; padding: .26rem .5rem; font-size: .74rem;
    border-radius: 999px; border: 1px solid transparent;
    background: var(--ki-field); color: var(--ki-text);
    transition: background var(--ki-ease), border-color var(--ki-ease), box-shadow var(--ki-ease);
}
.ki-filter:hover { background: #EDEFF1; }
.ki-filter:focus {
    outline: none; background: #fff; border-color: var(--ki-petrol);
    box-shadow: 0 0 0 3px rgba(50,128,149,.15);
}
.ki-filter::placeholder { color: #9AA3A8; }
select.ki-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.ki-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.ki-th:focus-visible { outline: 2px solid var(--ki-petrol); outline-offset: 2px; border-radius: 2px; }
.ki-grid .ki-filter { min-width: 4.5rem; }
.ki-filter--on { background: #fff; border-color: rgba(50,128,149,.45); }
.ki-grid__estado {
    display: flex; align-items: center; gap: .75rem;
    padding: .45rem .9rem; font-size: .74rem; color: var(--ki-text-muted);
    border-top: 1px solid var(--ki-grid-line); background: var(--ki-grid-head);
}
.ki-grid__estado[hidden] { display: none; }
.ki-grid__quitar {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
    color: var(--ki-petrol); cursor: pointer;
}
.ki-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. */
.ki-paginador {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: .6rem; padding: .7rem .9rem; border-top: 1px solid var(--ki-border);
    font-size: .8rem; color: var(--ki-text-muted);
}
.ki-paginador__paginas { display: inline-flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.ki-paginador__num, .ki-paginador__ir {
    min-width: 2rem; height: 2rem; padding: 0 .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ki-radius-sm); border: 1px solid var(--ki-border);
    background: var(--ki-surface, #fff); color: var(--ki-anthracite);
    text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background var(--ki-ease), border-color var(--ki-ease);
}
a.ki-paginador__num:hover, a.ki-paginador__ir:hover {
    background: var(--ki-yellow-subtle); border-color: var(--ki-yellow); text-decoration: none;
}
.ki-paginador__num--on { background: var(--ki-petrol); border-color: var(--ki-petrol); color: #fff; }
.ki-paginador__ir--off { opacity: .35; }
.ki-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ó. */
.ki-grid--cargando tbody { opacity: .45; transition: opacity 120ms ease; }

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

/* El catálogo global dentro del modal de Productos. */
.ki-catalogo-modal__tabla { max-height: 52vh; margin-top: .6rem; }
.ki-catalogo-modal__estado { width: 112px; }
.ki-catalogo-modal__nombre { display: flex; gap: .3rem; }
.ki-catalogo-modal__nombre .ki-input { flex: 1; font-size: .78rem; }
.ki-catalogo-modal__nombre .ki-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. */
.ki-sku-enlace {
    background: none; border: none; padding: 0; cursor: pointer; text-align: left;
    font-family: var(--ki-font-mono); font-size: .72rem; color: var(--ki-petrol);
    text-decoration: underline dotted; text-underline-offset: 2px;
}
.ki-sku-enlace:hover, .ki-sku-enlace:focus-visible { text-decoration-style: solid; }

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

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

/* La llave de la API recién emitida: la única vez que se ve. */
.ki-llave-nueva { border: 2px solid var(--ki-yellow, #FFD200); }
.ki-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 */
.ki-delta--sube { color: #166534; }
.ki-delta--baja { color: #991B1B; }

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

/* =========================================================== propio de KIOT */

/* Tablas densas (bitácora, lecturas): Roboto Condensed, como pide el brandbook,
   para que quepan más columnas sin bajar el tamaño. */
.ki-table--densa { font-family: var(--ki-font-condensed); }

/* Títulos de grupo en la barra lateral. */
.ki-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);
}
.ki-sidebar nav a.ki-nav--pronto { opacity: .45; cursor: default; }
.ki-sidebar nav a.ki-nav--pronto:hover { background: none; transform: none; color: #b9d4db; }
.ki-sidebar nav a .ki-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 (solo pruebas): visible en
   toda pantalla mientras esté activo. Texto anthracite sobre amarillo. */
.ki-banner-pruebas {
    background: var(--ki-yellow); color: var(--ki-anthracite);
    font-weight: 600; font-size: .8rem; text-align: center;
    padding: .4rem 1rem; letter-spacing: .2px;
}
.ki-login .ki-banner-pruebas { position: fixed; top: 0; left: 0; right: 0; }

/* Tarjetas de módulos en el inicio. */
.ki-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.ki-modulo {
    display: flex; gap: .8rem; align-items: flex-start;
    background: var(--ki-surface); border: 1px solid var(--ki-grid-line);
    border-radius: var(--ki-radius); padding: 1rem 1.1rem; color: var(--ki-text);
    transition: border-color var(--ki-ease), box-shadow var(--ki-ease);
}
a.ki-modulo:hover { border-color: var(--ki-petrol); box-shadow: var(--ki-shadow); text-decoration: none; color: var(--ki-text); }
.ki-modulo svg { width: 22px; height: 22px; flex: none; color: var(--ki-petrol); margin-top: .1rem; }
.ki-modulo__nombre { font-weight: 600; display: block; }
.ki-modulo__texto { font-size: .8rem; color: var(--ki-text-muted); }
.ki-modulo__codigo { font-size: .65rem; color: var(--ki-text-muted); letter-spacing: .5px; }
.ki-modulo--pronto { opacity: .6; }
/* «Reportar un problema» es un botón (abre el diálogo), con la misma tarjeta que los enlaces. */
button.ki-modulo { width: 100%; font: inherit; text-align: left; cursor: pointer; }
button.ki-modulo:hover { border-color: var(--ki-petrol); box-shadow: var(--ki-shadow); }
button.ki-modulo:focus-visible { outline: 2px solid var(--ki-petrol); outline-offset: 2px; }
.ki-modulo__texto, .ki-modulo__codigo { display: block; }
/* Lo que viene: con su etapa, sin competir con lo que ya se puede usar. */
.ki-modulo--proximo { background: var(--ki-bg); border-style: dashed; }
.ki-modulo--proximo svg { color: var(--ki-text-muted); }
.ki-modulo--proximo .ki-modulo__codigo { margin-top: .35rem; font-weight: 700; text-transform: uppercase; color: #854D0E; }

/* Bienvenida del inicio: la banda petróleo de la barra lateral, con el filo amarillo de la marca
   y un trazo de pulso (el monitoreo) que se desvanece hacia la derecha. */
.ki-bienvenida {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1.5rem;
    margin-bottom: 1.25rem; padding: 1.35rem 1.6rem 1.35rem 1.9rem;
    border-radius: var(--ki-radius); color: #fff;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(255,255,255,.10) 0%, transparent 60%),
        linear-gradient(120deg, #1b6274 0%, #175666 50%, #123f4c 100%);
    box-shadow: 0 8px 24px -14px rgba(18,63,76,.55);
}
.ki-bienvenida::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--ki-yellow); box-shadow: 0 0 14px rgba(255,206,0,.55);
}
.ki-bienvenida__texto { position: relative; max-width: 46rem; }
.ki-bienvenida__fecha { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ki-yellow); }
.ki-bienvenida h2 { margin: .2rem 0 .45rem; font-size: 1.45rem; font-weight: 700; }
.ki-bienvenida p:last-child { margin: 0; font-size: .86rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.ki-bienvenida__pulso { flex: none; width: 220px; margin-left: auto; color: var(--ki-yellow); opacity: .55; }
@media (max-width: 900px) { .ki-bienvenida__pulso { display: none; } }

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

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

/* JSON de antes/después en la bitácora. */
.ki-json { font-family: var(--ki-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. */
.ki-input, .ki-select {
    padding: .45rem .65rem; border: 1px solid var(--ki-border);
    border-radius: var(--ki-radius-sm); font-size: .85rem; font-family: inherit;
    background: #fff; color: var(--ki-text);
}
.ki-input:focus, .ki-select:focus { outline: 2px solid var(--ki-petrol); outline-offset: -1px; border-color: var(--ki-petrol); }
/* Versión compacta para barras de filtros y celdas de tabla. */
.ki-input--sm { padding: .3rem .5rem; font-size: .8rem; }
input.ki-input--sm:not([type="date"]) { min-width: 14rem; }

/* Selector de archivo: el botón nativo («Elegir archivo») con el aspecto de un ki-btn secundario. */
input[type="file"].ki-input { padding: .3rem .5rem .3rem .3rem; cursor: pointer; }
input[type="file"].ki-input--sm { min-width: 19rem; }
input[type="file"]::file-selector-button {
    margin-right: .6rem; padding: .3rem .75rem; border: 1px solid var(--ki-border);
    border-radius: var(--ki-radius-sm); background: var(--ki-surface-2, #F3F5F7); color: var(--ki-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(--ki-petrol); }

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

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

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

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

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


/* ------------------------------------------------- tablas y detalle --- */
/* Números alineados a la derecha y códigos dentro de las tablas. */
.ki-der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ki-table .ki-codigo { white-space: nowrap; }
/* En una celda completa solo cambia la letra: el fondo de «chip» es para códigos en línea. */
.ki-table td.ki-codigo { background: none; border-radius: 0; }
.ki-w-clave { width: 6.5rem; min-width: 0 !important; }
.ki-badge--ok { background: var(--ki-success-bg); color: #166534; }

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

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

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

/* Lo que viene, en la guía: una línea que explica antes de las tarjetas. */
.ki-guia__intro { margin: -.35rem 0 1rem; }

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

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

/* ---------- 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. */
.ki-entrega { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .55rem; }
.ki-entrega .ki-input { flex: 1 1 22rem; font-family: var(--ki-font-mono); }
.ki-invitar .ki-input { min-width: 14rem; }
.ki-estados { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.ki-modal--chico { max-width: min(440px, 94vw); }

/* ---------- Reportar mejora o error (tickets a Toolbox) ---------- */
.ki-header__accion { width: 36px; height: 36px; }
.ki-header__accion svg { width: 19px; height: 19px; }
/* El salvavidas lleva el contorno amarillo de la marca: es lo que se busca cuando algo sale mal. */
.ki-iconbtn--salvavidas { border: 2px solid var(--ki-yellow); color: var(--ki-anthracite); }
.ki-iconbtn--salvavidas:hover { border-color: var(--ki-yellow-hover); background: var(--ki-yellow-subtle); color: var(--ki-anthracite); }
.ki-guia-barra__pieza--salvavidas { border: 2px solid var(--ki-yellow); }
/* Mientras se toma la captura: el botón gira en lugar de su icono. */
.ki-ocupado { position: relative; pointer-events: none; }
.ki-ocupado svg { visibility: hidden; }
.ki-ocupado::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--ki-border); border-top-color: var(--ki-petrol); animation: ki-girar .8s linear infinite;
}
.ki-modal--reporte { max-width: min(640px, 94vw); }
.ki-modal--reporte .ki-modal__head h2 { display: inline-flex; align-items: center; gap: .45rem; }
.ki-modal--reporte .ki-modal__head h2 svg { width: 18px; height: 18px; }
.ki-reporte__tipo { border: 0; padding: 0; margin: 0; min-width: 0; }
.ki-reporte__tipo legend { font-weight: 600; font-size: .82rem; margin-bottom: .35rem; padding: 0; }
.ki-segmento { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ki-segmento__opcion {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .55rem .75rem; border: 1px solid var(--ki-border); border-radius: var(--ki-radius-sm);
    background: #fff; cursor: pointer; font-weight: 500; font-size: .85rem;
}
.ki-segmento__opcion input { position: absolute; opacity: 0; pointer-events: none; }
.ki-segmento__opcion svg { width: 17px; height: 17px; }
.ki-segmento__opcion:has(input:checked) { border-color: var(--ki-petrol); background: #F0F7F9; color: var(--ki-petrol); box-shadow: inset 0 0 0 1px var(--ki-petrol); }
.ki-segmento__opcion--error:has(input:checked) { border-color: var(--ki-danger); background: var(--ki-danger-bg); color: #991B1B; box-shadow: inset 0 0 0 1px var(--ki-danger); }
.ki-segmento__opcion:has(input:focus-visible) { outline: 2px solid var(--ki-petrol); outline-offset: 2px; }
.ki-reporte__donde code { word-break: break-all; }
.ki-reporte__captura {
    display: block; width: 100%; max-height: 180px; margin-top: .5rem;
    object-fit: cover; object-position: top; border: 1px solid var(--ki-border); border-radius: var(--ki-radius-sm);
}
.ki-input--invalido { border-color: var(--ki-danger) !important; box-shadow: 0 0 0 2px var(--ki-danger-bg); }

/* Aviso de la primera vez: ilumina el botón y explica en un globo (como el tutorial de Toolbox). */
.ki-coach { position: fixed; inset: 0; z-index: 1200; }
.ki-coach[hidden] { display: none; }
.ki-coach__hueco {
    position: fixed; border-radius: 10px; pointer-events: none;
    box-shadow: 0 0 0 3px rgba(255, 206, 0, .95), 0 0 0 9999px rgba(15, 23, 26, .72);
}
.ki-coach__globo {
    position: fixed; width: 340px; max-width: calc(100vw - 24px);
    padding: 1rem 1.1rem; background: #fff; border-radius: var(--ki-radius); box-shadow: var(--ki-shadow-lg);
    border-top: 3px solid var(--ki-yellow);
}
.ki-coach__globo h3 { margin: 0 0 .4rem; font-size: .95rem; }
.ki-coach__globo p { margin: 0 0 .5rem; font-size: .85rem; }
.ki-coach__globo ul { margin: 0 0 .8rem; padding-left: 1.1rem; }
.ki-guia-barra__pieza svg { width: 16px; height: 16px; color: var(--ki-petrol); }

/* ---------- Entrar con Google ---------- */
.ki-btn--google {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    background: #fff; color: var(--ki-text); border: 1px solid var(--ki-border); font-weight: 500;
}
.ki-btn--google:hover { background: #F8F9FA; border-color: #C9CDD2; }
.ki-btn--google svg { width: 18px; height: 18px; flex: none; }
.ki-login__separador {
    display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .4rem;
    font-size: .75rem; color: var(--ki-text-muted);
}
.ki-login__separador::before, .ki-login__separador::after { content: ""; flex: 1; border-top: 1px solid var(--ki-border); }