/*
  Estilos de Kipia. Todo color, espacio, radio y duración sale de kipia-tokens.css:
  no hay un solo valor literal acá, porque en cuanto aparece uno el diseño empieza a
  desviarse del lineamiento sin que nadie lo note.

  Tipografías: Space Grotesk e IBM Plex Mono AUTOHOSPEDADAS en woff2 (§7.2 — no el CDN de
  Google, que manda la IP de cada usuario a un tercero). Viven en wwwroot/fonts con su
  licencia OFL; los @font-face estan en fuentes.css (generado por tools/fuentes/bajar-fuentes.py).
*/

/* Las fuentes reales van ANTES en la pila y sus respaldos con metricas ajustadas justo
   despues (definidos en fuentes.css). Se sobreescribe el token aca y no en
   kipia-tokens.css, que es el archivo del disenador y se reemplaza entero en cada version. */
:root {
  --k-font-ui:   'Space Grotesk', 'Space Grotesk Fallback', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Regla: la mono es SOLO para lo que se compara en columna o se copia (columnas .num de tablas,
     claves, ids, correos bajo un nombre, JSON, URLs, trazas). Cifras destacadas y valores de
     paneles van en la fuente de interfaz con tabular-nums (Space Grotesk las tiene: alinean igual). */
  --k-font-data: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--k-bg-canvas);
    color: var(--k-text-primary);
    font-family: var(--k-font-ui);
    font-size: var(--k-fs-body);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--k-accent); text-decoration: none; }
/* Todo lo que es dato o codigo va en la mono del lineamiento, tambien los <code> sueltos. */
code, kbd, pre { font-family: var(--k-font-data); }

/* El foco visible NUNCA se saca: es la única forma de navegar con teclado. */
:focus-visible {
    outline: 2px solid var(--k-focus-ring);
    outline-offset: 2px;
    border-radius: var(--k-radius-sm);
}

/* ─────────────────────────── Arranque ─────────────────────────── */

.arranque {
    height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--k-sp-5);
}
.arranque__marca {
    font-size: var(--k-fs-title);
    font-weight: 600;
    letter-spacing: var(--k-tracking-title);
    color: var(--k-text-primary);
}
.arranque__barra {
    width: 160px; height: 3px;
    background: var(--k-bg-sunken);
    border-radius: var(--k-radius-pill);
    overflow: hidden;
}
.arranque__barra span {
    display: block; height: 100%; width: 40%;
    background: var(--k-accent);
    border-radius: inherit;
    animation: correr 1.1s var(--k-ease) infinite;
}
@keyframes correr {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.fallo-global {
    display: none;
    position: fixed; inset: auto 0 0 0;
    z-index: var(--k-z-overlay);
    padding: var(--k-sp-3) var(--k-sp-5);
    background: var(--k-danger-bg);
    color: var(--k-text-primary);
    border-top: 1px solid var(--k-danger-border);
}
.fallo-global .reload { margin-left: var(--k-sp-3); color: var(--k-danger); }

/* ─────────────────────────── Estructura ─────────────────────────── */

.marco { display: flex; min-height: 100vh; }

.nav {
    width: 216px;
    flex: 0 0 216px;
    background: var(--k-bg-chrome);
    border-right: 1px solid var(--k-border-subtle);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
/* La marca de la barra lateral y la cabecera de cada pantalla miden EXACTAMENTE lo mismo: sus
   líneas inferiores quedan alineadas en todas las pantallas. Si una cambia, cambia el token. */
:root { --k-cabecera-h: 72px; }
.nav__marca {
    height: var(--k-cabecera-h); flex: none;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: var(--k-sp-3) var(--k-sp-4);
    font-weight: 600;
    letter-spacing: var(--k-tracking-title);
    border-bottom: 1px solid var(--k-border-subtle);
}
.nav__marca-linea { display: flex; align-items: center; gap: var(--k-sp-2); }
.nav__marca .punto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--k-accent);
    flex: 0 0 8px;
}
.nav__org {
    color: var(--k-text-secondary);
    font-weight: 400;
    letter-spacing: 0;
    font-size: var(--k-fs-small);
    padding-left: calc(8px + var(--k-sp-2));   /* alineado con el texto "kipia", no con el punto */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__items { padding: var(--k-sp-3) var(--k-sp-2); display: grid; gap: 2px; }
.nav__item {
    display: flex; align-items: center; gap: var(--k-sp-3);
    padding: var(--k-sp-2) var(--k-sp-3);
    border-radius: var(--k-radius-md);
    color: var(--k-text-secondary);
    font-size: var(--k-fs-body);
    transition: background var(--k-dur-fast) var(--k-ease), color var(--k-dur-fast) var(--k-ease);
}
.nav__item:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.nav__item.activo { background: var(--k-accent-bg); color: var(--k-accent-text); }
.nav__item .insignia {
    margin-left: auto;
    min-width: 20px; padding: 0 6px;
    border-radius: var(--k-radius-pill);
    background: var(--k-warning); color: var(--k-warning-on);
    font-size: var(--k-fs-micro); font-weight: 600;
    text-align: center; line-height: 18px;
}
.nav__pie {
    margin-top: auto;
    padding: var(--k-sp-3);
    border-top: 1px solid var(--k-border-subtle);
    display: grid; gap: var(--k-sp-2);
    position: relative;
}
.nav { overflow-y: auto; }
.nav__grupo {
    padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-1);
    font-size: var(--k-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--k-text-tertiary);
}
.nav__items > .nav__grupo:first-child { padding-top: var(--k-sp-1); }
/* Grupo plegable (Configurar): el mismo rótulo, con flecha, como botón. */
.nav__grupo--plegable {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; border-radius: var(--k-radius-md); cursor: pointer; text-align: left; font-family: inherit;
}
.nav__grupo--plegable:hover { color: var(--k-text-primary); background: var(--k-bg-hover); }
.nav__grupo--plegable:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 1px; }
.nav__grupo--plegable svg { width: 14px; height: 14px; }
/* Pantallas bajas (notebooks): el menú se compacta para entrar sin scroll. El scroll queda solo
   como último recurso en ventanas muy chicas. */
@media (min-width: 769px) and (max-height: 860px) {
    .nav__item { padding-top: 6px; padding-bottom: 6px; }
    .nav__grupo { padding-top: var(--k-sp-2); }
    .nav__buscar { margin-top: var(--k-sp-2); height: 30px; }
    .nav__items { padding-top: var(--k-sp-2); padding-bottom: var(--k-sp-2); }
}
@media (min-width: 769px) and (max-height: 720px) {
    .nav__item { padding-top: 4px; padding-bottom: 4px; font-size: var(--k-fs-small); }
    .nav__items { gap: 0; }
    .nav__grupo { padding-top: 6px; padding-bottom: 2px; }
}
.nav__buscar {
    margin: var(--k-sp-3) var(--k-sp-2) 0;
    display: flex; align-items: center; gap: var(--k-sp-2);
    height: 34px; padding: 0 var(--k-sp-3);
    background: var(--k-bg-sunken, transparent); color: var(--k-text-tertiary);
    border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-md);
    font: inherit; font-size: var(--k-fs-small); cursor: pointer; text-align: left;
}
.nav__buscar:hover { color: var(--k-text-primary); border-color: var(--k-border); }
.nav__buscar .rotulo:first-of-type { flex: 1; }
kbd {
    font-family: var(--k-font-data); font-size: var(--k-fs-micro);
    padding: 1px 6px; border: 1px solid var(--k-border); border-radius: 4px; color: var(--k-text-tertiary);
}
.nav__usuario {
    display: flex; align-items: center; gap: var(--k-sp-2); width: 100%;
    padding: var(--k-sp-2); border: 0; border-radius: var(--k-radius-md);
    background: none; color: var(--k-text-secondary); font: inherit; cursor: pointer; text-align: left;
}
.nav__usuario:hover { background: var(--k-bg-hover); }
.nav__usuario-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nav__usuario-nombre { color: var(--k-text-primary); font-size: var(--k-fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--k-accent-bg); color: var(--k-accent-text);
    font-size: var(--k-fs-micro); font-weight: 700;
}
.menu-usuario-velo { position: fixed; inset: 0; z-index: 40; }
.menu-usuario {
    position: absolute; left: var(--k-sp-3); right: var(--k-sp-3); bottom: calc(100% - var(--k-sp-2));
    z-index: 41; padding: var(--k-sp-1);
    background: var(--k-bg-surface-raised, var(--k-bg-chrome)); border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.35);
    display: grid;
}
.menu-usuario__item {
    display: flex; align-items: center; gap: var(--k-sp-2);
    padding: var(--k-sp-2) var(--k-sp-3); border: 0; border-radius: var(--k-radius-sm, 6px);
    background: none; color: var(--k-text-secondary); font: inherit; font-size: var(--k-fs-small);
    cursor: pointer; text-align: left;
}
.menu-usuario__item:hover, .menu-usuario__item:focus-visible { background: var(--k-bg-hover); color: var(--k-text-primary); }
.menu-usuario__sep { height: 1px; background: var(--k-border-subtle); margin: var(--k-sp-1) 0; }

/* Búsqueda rápida (Ctrl+K) */
.busqueda-velo { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); }
.busqueda {
    position: fixed; z-index: 61; left: 50%; top: 12vh; transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    background: var(--k-bg-surface-raised, var(--k-bg-chrome)); border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg, 12px); box-shadow: 0 24px 64px rgba(0,0,0,.45);
    overflow: hidden;
}
.busqueda__campo { display: flex; align-items: center; gap: var(--k-sp-3); padding: 0 var(--k-sp-4); border-bottom: 1px solid var(--k-border-subtle); color: var(--k-text-tertiary); }
.busqueda__campo input { flex: 1; height: 52px; border: 0; outline: none; background: none; color: var(--k-text-primary); font: inherit; font-size: var(--k-fs-body); }
.busqueda__lista { list-style: none; margin: 0; padding: var(--k-sp-2); max-height: 360px; overflow-y: auto; }
.busqueda__item {
    display: flex; align-items: center; gap: var(--k-sp-3);
    padding: var(--k-sp-2) var(--k-sp-3); border-radius: var(--k-radius-md); cursor: pointer;
    color: var(--k-text-secondary);
}
.busqueda__item.elegido { background: var(--k-accent-bg); color: var(--k-accent-text); }
.busqueda__titulo { flex: 1; color: var(--k-text-primary); }
.busqueda__tipo { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.busqueda__vacio { padding: var(--k-sp-4); color: var(--k-text-tertiary); font-size: var(--k-fs-small); }

/* Barra superior del celular: oculta en pantallas grandes */
.barra-movil { display: none; }
.nav-velo { display: none; }

.lienzo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
    min-height: var(--k-cabecera-h); flex: none;
    padding: var(--k-sp-3) var(--k-content-pad-x);
    display: flex; align-items: center; gap: var(--k-sp-4);
    border-bottom: 1px solid var(--k-border-subtle);
}
.cabecera h1 {
    margin: 0;
    font-size: var(--k-fs-title);
    font-weight: 600;
    letter-spacing: var(--k-tracking-title);
}
.cabecera .sub { margin: 4px 0 0; color: var(--k-text-tertiary); font-size: var(--k-fs-small); }
.cabecera .derecha { margin-left: auto; display: flex; align-items: center; gap: var(--k-sp-3); }

/* Ritmo vertical ÚNICO para todas las pantallas: los bloques de primer nivel se separan con el
   gap del contenedor, nunca con márgenes propios (se sumaban en unas pantallas y faltaban en
   otras). La regla que anula los márgenes está al final del archivo, para ganar la cascada. */
.contenido {
    padding: var(--k-sp-5) var(--k-content-pad-x) var(--k-sp-10);
    /* Sin tope de ancho (2026-10-10): el borde derecho del contenido coincide con el de la cabecera
       en todas las pantallas. Antes se cortaba en --k-content-max (1600 px) y en pantallas anchas
       quedaba un margen que la cabecera no tenía. Los textos largos limitan su propio ancho (ch). */
    width: 100%;
    display: flex; flex-direction: column; gap: var(--k-grid-gap);   /* el token del diseñador: el mismo que entre columnas */
}

/* ─────────────────────────── Controles ─────────────────────────── */

.campo, .selector {
    height: var(--k-control-md);
    padding: 0 var(--k-sp-3);
    background: var(--k-bg-sunken);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    color: var(--k-text-primary);
    font-family: inherit;
    font-size: var(--k-fs-body);
}
.campo::placeholder { color: var(--k-text-disabled); }
.campo:focus, .selector:focus { border-color: var(--k-accent); outline: none; }
.campo--busqueda { width: 260px; }

.boton {
    height: var(--k-control-md);
    padding: 0 var(--k-sp-4);
    border-radius: var(--k-radius-md);
    border: 1px solid transparent;
    background: var(--k-action-bg);
    color: var(--k-action-text);
    font-family: inherit; font-size: var(--k-fs-body); font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--k-sp-2);
    transition: background var(--k-dur-fast) var(--k-ease);
}
.boton:hover { background: var(--k-action-bg-hover); }
.boton--suave {
    background: var(--k-action2-bg);
    color: var(--k-action2-text);
    border-color: var(--k-action2-border);
}
.boton--suave:hover { background: var(--k-action2-bg-hover); }
.boton--fantasma { background: transparent; color: var(--k-text-secondary); border-color: var(--k-border); }
.boton--fantasma:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton--icono { padding: 0; width: var(--k-control-md); justify-content: center; }

.filtros {
    display: flex; align-items: center; gap: var(--k-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--k-sp-4);
}
.filtros .separador { flex: 1; }

/* ─────────────────────────── Franja de alertas ─────────────────────────── */

.alertas {
    display: flex; gap: var(--k-sp-2); flex-wrap: wrap;
    margin-bottom: var(--k-sp-4);
}
.alerta {
    display: inline-flex; align-items: center; gap: var(--k-sp-2);
    padding: var(--k-sp-2) var(--k-sp-3);
    border-radius: var(--k-radius-md);
    font-size: var(--k-fs-small);
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--k-bg-surface);
    color: var(--k-text-secondary);
    border-color: var(--k-border-subtle);
    font-family: inherit;
}
.alerta:hover { background: var(--k-bg-hover); }
.alerta strong { font-variant-numeric: tabular-nums; }
.alerta--peligro { background: var(--k-danger-bg); border-color: var(--k-danger-border); color: var(--k-danger); }
.alerta--aviso   { background: var(--k-warning-bg); border-color: var(--k-warning-border); color: var(--k-warning); }
.alerta.activa { outline: 2px solid var(--k-accent); outline-offset: -1px; }

/* ─────────────────────────── Tabla ─────────────────────────── */

.tarjeta {
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-lg);
    overflow: hidden;
}

.tabla-scroll { overflow-x: auto; }

table.tabla { width: 100%; border-collapse: collapse; font-size: var(--k-fs-body); }
.tabla th {
    text-align: left;
    padding: var(--k-sp-3) var(--k-sp-4);
    font-size: var(--k-fs-micro);
    letter-spacing: var(--k-tracking-micro);
    text-transform: uppercase;
    color: var(--k-text-tertiary);
    font-weight: 600;
    border-bottom: 1px solid var(--k-border-subtle);
    white-space: nowrap;
    background: var(--k-bg-surface);
    position: sticky; top: 0; z-index: var(--k-z-base);
}
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { color: var(--k-text-primary); }
.tabla th .flecha { margin-left: 4px; opacity: .8; }
.tabla td {
    padding: var(--k-sp-3) var(--k-sp-4);
    border-bottom: 1px solid var(--k-border-subtle);
    vertical-align: middle;
}
.tabla tbody tr { cursor: pointer; transition: background var(--k-dur-fast) var(--k-ease); }
.tabla tbody tr:hover { background: var(--k-bg-hover); }
.tabla tbody tr.seleccionada { background: var(--k-accent-bg); }
.tabla tbody tr:last-child td { border-bottom: none; }
.num { font-family: var(--k-font-data); font-size: var(--k-fs-data); text-align: right; white-space: nowrap; }
th.num { text-align: right; }

.nombre-agente { display: flex; align-items: center; gap: var(--k-sp-3); }
.nombre-agente .texto { display: grid; }
.nombre-agente .principal { color: var(--k-text-primary); font-weight: 500; }
.nombre-agente .clave {
    font-family: var(--k-font-data);
    font-size: var(--k-fs-micro);
    color: var(--k-text-tertiary);
}

/* Punto de estado: el color NO es la única señal — siempre lo acompaña texto. */
.punto-estado { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.punto-estado--active  { background: var(--k-success); }
.punto-estado--paused  { background: var(--k-warning); }
.punto-estado--stopped { background: var(--k-danger); }

.etiqueta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px var(--k-sp-2);
    border-radius: var(--k-radius-pill);
    font-size: var(--k-fs-micro);
    border: 1px solid var(--k-border-subtle);
    color: var(--k-text-secondary);
    white-space: nowrap;
}
.etiqueta--ok      { background: var(--k-success-bg); border-color: var(--k-success-border); color: var(--k-success); }
.etiqueta--aviso   { background: var(--k-warning-bg); border-color: var(--k-warning-border); color: var(--k-warning); }
.etiqueta--peligro { background: var(--k-danger-bg);  border-color: var(--k-danger-border);  color: var(--k-danger); }

/* Barra comparativa gasto / presupuesto */
.barra { display: grid; gap: 4px; min-width: 140px; }
.barra__cifras {
    display: flex; justify-content: space-between; gap: var(--k-sp-2);
    font-family: var(--k-font-data); font-size: var(--k-fs-micro);
}
.barra__cifras .usado { color: var(--k-text-primary); }
.barra__cifras .total { color: var(--k-text-tertiary); }
.barra__pista {
    height: 4px; border-radius: var(--k-radius-pill);
    background: var(--k-bg-sunken); overflow: hidden;
}
.barra__relleno { height: 100%; border-radius: inherit; background: var(--k-accent); }
.barra__relleno--aviso   { background: var(--k-warning); }
.barra__relleno--peligro { background: var(--k-danger); }

/* "est." — el monto todavía puede cambiar porque hay reservas abiertas */
.estimado {
    font-size: var(--k-fs-micro);
    color: var(--k-warning);
    margin-left: 4px;
    cursor: help;
}

/* ─────────────────────────── Paginación ─────────────────────────── */

.paginacion {
    display: flex; align-items: center; gap: var(--k-sp-3);
    padding: var(--k-sp-3) var(--k-sp-4);
    border-top: 1px solid var(--k-border-subtle);
    color: var(--k-text-tertiary);
    font-size: var(--k-fs-small);
}
.paginacion .separador { flex: 1; }

/* ─────────────────────────── Estados (§4.4) ─────────────────────────── */

.estado {
    padding: var(--k-sp-10) var(--k-sp-5);
    text-align: center;
    display: grid; gap: var(--k-sp-3); justify-items: center;
}
.estado__icono { color: var(--k-text-disabled); }
.estado__titulo { font-size: var(--k-fs-section); font-weight: 600; margin: 0; }
.estado__texto { color: var(--k-text-tertiary); margin: 0; max-width: 44ch; line-height: 1.55; }

/* Esqueleto de carga: la forma de lo que va a venir, no un spinner. */
.esqueleto {
    height: 12px; border-radius: var(--k-radius-sm);
    background: linear-gradient(90deg,
        var(--k-skeleton-base) 0%, var(--k-skeleton-shine) 50%, var(--k-skeleton-base) 100%);
    background-size: 200% 100%;
    animation: brillo var(--k-dur-shimmer) linear infinite;
}
@keyframes brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .esqueleto { animation: none; }
    .arranque__barra span { animation: none; width: 100%; }
}

.franja {
    display: flex; align-items: center; gap: var(--k-sp-3);
    padding: var(--k-sp-3) var(--k-sp-4);
    border-radius: var(--k-radius-md);
    margin-bottom: var(--k-sp-4);
    font-size: var(--k-fs-small);
}
.franja--error { background: var(--k-danger-bg); border: 1px solid var(--k-danger-border); color: var(--k-text-primary); }
.franja--aviso { background: var(--k-warning-bg); border: 1px solid var(--k-warning-border); color: var(--k-text-primary); }
.franja--ok { background: var(--k-success-bg); border: 1px solid var(--k-success-border); color: var(--k-text-primary); }
.franja .traza { font-family: var(--k-font-data); font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.franja .separador { flex: 1; }

.sello {
    font-family: var(--k-font-ui); font-weight: 400;
    font-size: var(--k-fs-micro);
    color: var(--k-text-tertiary);
    display: inline-flex; align-items: center; gap: 6px;
}

/* ─────────────────────────── Panel de detalle ─────────────────────────── */

.velo {
    position: fixed; inset: 0;
    background: var(--k-overlay);
    z-index: var(--k-z-overlay);
}
.panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    background: var(--k-bg-surface);
    border-left: 1px solid var(--k-border);
    box-shadow: var(--k-shadow-overlay);
    z-index: var(--k-z-overlay);
    display: flex; flex-direction: column;
    animation: entrar var(--k-dur) var(--k-ease);
}
@keyframes entrar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.panel__cabecera {
    padding: var(--k-sp-4) var(--k-sp-5);
    border-bottom: 1px solid var(--k-border-subtle);
    display: flex; align-items: flex-start; gap: var(--k-sp-3);
}
.panel__cabecera h2 { margin: 0; font-size: var(--k-fs-section); font-weight: 600; }
.panel__cuerpo { overflow-y: auto; padding: var(--k-sp-5); display: grid; gap: var(--k-sp-6); }
.panel__pie {
    margin-top: auto; padding: var(--k-sp-4) var(--k-sp-5);
    border-top: 1px solid var(--k-border-subtle);
    display: flex; gap: var(--k-sp-3);
}

.bloque { display: grid; gap: var(--k-sp-3); }
.bloque__titulo {
    font-size: var(--k-fs-micro);
    letter-spacing: var(--k-tracking-micro);
    text-transform: uppercase;
    color: var(--k-text-tertiary);
    font-weight: 600;
}
.datos { display: grid; grid-template-columns: auto 1fr; gap: var(--k-sp-2) var(--k-sp-4); font-size: var(--k-fs-small); }
.datos dt { color: var(--k-text-tertiary); }
.datos dd { margin: 0; color: var(--k-text-primary); font-variant-numeric: tabular-nums; }
.datos dd.texto { font-family: var(--k-font-ui); font-size: var(--k-fs-small); }

.politica {
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-md);
    padding: var(--k-sp-3);
    display: grid; gap: var(--k-sp-2);
}
.politica__origen { display: flex; align-items: center; gap: var(--k-sp-2); font-size: var(--k-fs-small); }
.politica__reglas {
    font-family: var(--k-font-data); font-size: var(--k-fs-micro);
    color: var(--k-text-secondary);
    background: var(--k-bg-sunken);
    border-radius: var(--k-radius-sm);
    padding: var(--k-sp-2);
    overflow-x: auto; margin: 0;
    white-space: pre-wrap; word-break: break-word;
}

.llamadas { display: grid; gap: 2px; }
.llamada {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--k-sp-3);
    align-items: center;
    padding: var(--k-sp-2) var(--k-sp-3);
    border-radius: var(--k-radius-sm);
    font-size: var(--k-fs-small);
}
.llamada:hover { background: var(--k-bg-hover); }
.llamada__objetivo { color: var(--k-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Una celda de grid no encoge por debajo de su contenido salvo que se le diga: sin esto,
   una clave larga en un <code> desborda el panel y aparece scroll horizontal. */
.llamada > * { min-width: 0; }
.llamada code, .llamada pre { overflow-wrap: anywhere; }
.llamada__cuando { color: var(--k-text-tertiary); font-size: var(--k-fs-micro); }

/* ─────────────────────────── Responsivo ─────────────────────────── */

@media (max-width: 900px) {
    .nav { width: 56px; flex-basis: 56px; }
    .nav__item span.rotulo, .nav__marca span.rotulo, .nav__pie .rotulo, .nav__buscar .rotulo, .nav__org { display: none; }
    .nav__item, .nav__buscar, .nav__usuario { justify-content: center; }
    .nav__buscar { margin: var(--k-sp-3) var(--k-sp-2) 0; padding: 0; }
    .nav__grupo { font-size: 0; padding: var(--k-sp-2) 0 0; border-top: 1px solid var(--k-border-subtle); margin-top: var(--k-sp-2); }
    .nav__items > .nav__grupo:first-child { border-top: 0; margin-top: 0; }
    .menu-usuario { left: var(--k-sp-2); right: auto; width: 200px; }

    .campo--busqueda { width: 100%; }
    .filtros { gap: var(--k-sp-2); }
    .contenido, .cabecera { padding-left: var(--k-sp-4); padding-right: var(--k-sp-4); }
}

/* Escalamiento de aprobaciones: una línea de configuración sobre la lista. */
.escalamiento { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--k-text-secondary); }
.escalamiento select { font: inherit; padding: 4px 8px; border-radius: var(--k-radius-md); border: 1px solid var(--k-border); background: var(--k-bg-surface); color: var(--k-text-primary); }
.escalamiento .sub { color: var(--k-text-tertiary); }

/* ── Asistente (prototipo): chat a la izquierda, lienzo a la derecha ── */
.asistente { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--k-sp-4); align-items: start; }
.asistente__chat {
    /* Todo el alto que queda bajo la cabecera: 100dvh menos la cabecera y el margen de arriba y abajo. */
    position: sticky; top: var(--k-sp-4); display: flex; flex-direction: column; min-height: 420px;
    height: calc(100dvh - var(--k-cabecera-h) - 2 * var(--k-sp-5) - 1px);
    background: var(--k-bg-surface); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-lg); overflow: hidden;
}
.asistente__mensajes { flex: 1; overflow-y: auto; padding: var(--k-sp-4); display: flex; flex-direction: column; gap: var(--k-sp-3); }
.asistente__vacio { display: grid; gap: var(--k-sp-2); }
.asistente__vacio p { margin: 0 0 var(--k-sp-1); font-size: 13px; color: var(--k-text-secondary); }
.asistente__sugerencia {
    text-align: left; font: inherit; font-size: 13px; padding: 10px 12px; cursor: pointer; color: var(--k-text-primary);
    background: var(--k-bg-raised); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-md);
}
.asistente__sugerencia:hover { border-color: var(--k-accent-border); background: var(--k-bg-hover); }
/* Temas de ayuda dentro del Asistente: chips chicos por grupo, para no tapar las sugerencias de datos. */
.asistente__temas-titulo { margin-top: var(--k-sp-3) !important; }
.asistente__temas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.asistente__temas-grupo { width: 100%; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.asistente__tema {
    display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; padding: 4px 9px; cursor: pointer;
    color: var(--k-text-secondary); background: transparent; border: 1px solid var(--k-border-subtle); border-radius: 999px;
}
.asistente__tema:hover { color: var(--k-text-primary); border-color: var(--k-accent-border); background: var(--k-bg-hover); }
.asistente__guia { font-size: 12px; margin-top: var(--k-sp-1); }
.burbuja { max-width: 92%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.burbuja p { margin: 0 0 6px; } .burbuja p:last-child { margin-bottom: 0; }
.burbuja ul { margin: 4px 0 6px; padding-left: 18px; } .burbuja li { margin: 2px 0; }
.burbuja code { font-family: var(--k-font-data); font-size: 12px; background: var(--k-bg-sunken); padding: 1px 5px; border-radius: 4px; }
.burbuja--persona { align-self: flex-end; background: var(--k-accent-bg); border: 1px solid var(--k-accent-border); color: var(--k-text-primary); border-bottom-right-radius: 4px; }
.burbuja--asistente { align-self: flex-start; background: var(--k-bg-raised); border: 1px solid var(--k-border-subtle); border-bottom-left-radius: 4px; }
.asistente__accion { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--k-accent-text); padding: 3px 9px; border: 1px dashed var(--k-accent-border); border-radius: var(--k-radius-pill); }
.asistente__error { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--k-danger); }
.asistente__pensando { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--k-text-tertiary); }
.asistente__pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--k-accent); animation: asistente-punto 1.2s ease-in-out infinite; }
.asistente__pensando i:nth-child(2) { animation-delay: .15s; } .asistente__pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes asistente-punto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .asistente__pensando i { animation: none; } }
.asistente__entrada { display: flex; gap: var(--k-sp-2); padding: var(--k-sp-3); border-top: 1px solid var(--k-border-subtle); }
.asistente__entrada .boton { height: auto; }   /* el mismo alto que la caja de la pregunta */
.asistente__entrada input {
    flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px; color: var(--k-text-primary);
    background: var(--k-bg-sunken); border: 1px solid var(--k-border); border-radius: var(--k-radius-md);
}
.asistente__entrada input:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 1px; }
.asistente__lienzo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--k-sp-4); align-content: start; }
.asistente__lienzo-vacio {
    grid-column: 1 / -1; display: grid; place-items: center; gap: var(--k-sp-2); text-align: center; padding: var(--k-sp-8) var(--k-sp-4);
    color: var(--k-text-tertiary); border: 1px dashed var(--k-border); border-radius: var(--k-radius-lg); min-height: 260px; align-content: center;
}
.asistente__lienzo-vacio p { margin: 0; max-width: 36ch; font-size: 13px; }
.lienzo-panel { padding: var(--k-sp-4); display: grid; gap: var(--k-sp-3); animation: lienzo-entra 280ms ease-out; }
@keyframes lienzo-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .lienzo-panel { animation: none; } }
.lienzo-panel__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--k-sp-2); }
.lienzo-panel__cabecera h2 { margin: 0; font-size: 15px; font-weight: 600; }
.lienzo-panel__cifra b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .asistente { grid-template-columns: minmax(0, 1fr); }
    .asistente__chat { position: static; height: 60vh; }
}

/* ── En vivo: la red de llamadas en tiempo real (Pages/EnVivo.razor + js/kipia-red.js) ──
   El escenario es oscuro en los DOS temas a propósito: la animación suma luz (composición
   "lighter") y sobre fondo claro se lava. La lista y las cifras siguen el tema. */
.envivo__marca {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--k-font-data); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-accent-text);
    border: 1px solid var(--k-accent-border); border-radius: var(--k-radius-pill); padding: 3px 10px;
}
.envivo__marca i { width: 6px; height: 6px; border-radius: 50%; background: var(--k-accent); animation: envivo-late 1.6s ease-in-out infinite; }
@keyframes envivo-late { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .envivo__marca i { animation: none; } }
.envivo__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-sp-3); }
.envivo__cifra {
    display: grid; gap: 2px; padding: var(--k-sp-3) var(--k-sp-4); color: inherit; text-decoration: none;
    background: var(--k-bg-surface); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-lg);
}
.envivo__cifra b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.envivo__cifra span { font-size: 12px; color: var(--k-text-tertiary); }
.envivo__cifra--teal b { color: var(--k-accent-text); }
.envivo__cifra--rojo b { color: var(--k-danger); }
.envivo__cifra--ambar b { color: var(--k-warning); }
a.envivo__cifra:hover { background: var(--k-bg-hover); }
.envivo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--k-sp-4); align-items: stretch; }
.envivo__escena {
    position: relative; min-height: 460px; height: clamp(460px, calc(100vh - 250px), 900px);
    border-radius: var(--k-radius-lg); overflow: hidden; border: 1px solid #1d2123;
    background: radial-gradient(ellipse at 50% 45%, #0f1716 0%, #08090a 72%);
}
.envivo__escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Debajo del gráfico (fuera de la escena), sobre el fondo de la página: colores de los tokens. */
.envivo__leyenda {
    display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 var(--k-sp-1);
    font-size: 11.5px; color: var(--k-text-tertiary);
}
.envivo__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.envivo__leyenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.envivo__leyenda i.hex { border-radius: 2px; transform: rotate(45deg); width: 7px; height: 7px; }
/* Cómo leer el sistema solar: segunda línea de la leyenda. */
.envivo__lectura { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--k-text-secondary); }
.envivo__leyenda i.orbita { width: 16px; height: 8px; border-radius: 50%; background: none; border: 1px solid #2fd4bc; position: relative; }
.envivo__leyenda i.orbita::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 4px; border-radius: 50%; background: #2fd4bc; }
.envivo__leyenda i.planetas { width: auto; height: auto; background: none; display: inline-flex; align-items: center; gap: 3px; }
.envivo__leyenda i.planetas b { display: inline-block; border-radius: 50%; background: #d97757; width: 5px; height: 5px; }
.envivo__leyenda i.planetas b + b { width: 10px; height: 10px; }
.envivo__vacio {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
    text-align: center; padding: var(--k-sp-6); color: #c9cdd1;
}
.envivo__vacio strong { font-size: 17px; color: #f3f5f6; }
.envivo__vacio span { max-width: 46ch; font-size: 14px; color: #9ca1a7; }
.envivo__lista {
    background: var(--k-bg-surface); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-lg);
    overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
/* Columna derecha (la lista, y en el tablero también las referencias). Mide el alto de la fila
   (gráfico + leyenda): contain:size hace que su contenido no la estire. */
.envivo__lateral { display: flex; flex-direction: column; gap: var(--k-sp-2); min-width: 0; min-height: 0; contain: size; }
.envivo__lista h2 {
    margin: 0; padding: var(--k-sp-3) var(--k-sp-4); font-size: 12px; font-weight: 600; color: var(--k-text-tertiary);
    border-bottom: 1px solid var(--k-border-subtle);
}
.envivo__lista ol { list-style: none; margin: 0; padding: 6px 0; overflow: auto; }
.envivo__lista li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 6px var(--k-sp-4); font-size: 13px; animation: envivo-entra 260ms ease-out;
}
@keyframes envivo-entra { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .envivo__lista li { animation: none; } }
.envivo__lista .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); }
.envivo__lista .punto--denied { background: var(--k-danger); }
.envivo__lista .punto--held { background: var(--k-warning); }
.envivo__lista .punto--failed { background: var(--k-text-tertiary); }
.envivo__lista .que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text-secondary); }
.envivo__lista .que b { color: var(--k-text-primary); font-weight: 500; }
.envivo__lista .cuanto { font-family: var(--k-font-data); font-size: 12px; color: var(--k-text-tertiary); font-variant-numeric: tabular-nums; }
.envivo__nada { margin: 0; padding: var(--k-sp-4); font-size: 13px; color: var(--k-text-tertiary); }
@media (max-width: 1100px) {
    .envivo { grid-template-columns: minmax(0, 1fr); }
    .envivo__lateral { contain: none; height: 360px; }
}
@media (max-width: 768px) {
    .envivo__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .envivo__escena { height: 600px; }
    .envivo__leyenda { display: none; }
}

/* ── Colapsar la barra lateral a un riel de íconos (botón en la marca, como Claude Console) ──
   Las mismas reglas que el riel automático de arriba, pero por elección y en cualquier ancho de
   escritorio. En celular (<=768 px) la barra es un panel deslizable: ahí no aplica.
   OJO al integrar ramas: esto ya se perdió dos veces en un merge (MainLayout + este bloque). */
.nav__marca-linea .nav__colapsar {
    margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center;
    background: none; border: 0; border-radius: var(--k-radius-md); color: var(--k-text-tertiary); cursor: pointer;
}
.nav__colapsar:hover { color: var(--k-text-primary); background: var(--k-bg-hover); }
.nav__colapsar:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 1px; }
.nav__colapsar svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .nav__colapsar { display: none !important; } }
@media (min-width: 901px) {
    .marco--nav-colapsado .nav { width: 56px; flex-basis: 56px; }
    .marco--nav-colapsado .nav__item span.rotulo, .marco--nav-colapsado .nav__marca span.rotulo,
    .marco--nav-colapsado .nav__pie .rotulo, .marco--nav-colapsado .nav__buscar .rotulo,
    .marco--nav-colapsado .nav__org, .marco--nav-colapsado .nav__org-selector,
    .marco--nav-colapsado .nav__marca .punto { display: none; }
    .marco--nav-colapsado .nav__marca { padding-inline: 0; align-items: center; }
    .marco--nav-colapsado .nav__marca-linea .nav__colapsar { margin-left: 0; }
    .marco--nav-colapsado .nav__item, .marco--nav-colapsado .nav__buscar, .marco--nav-colapsado .nav__usuario { justify-content: center; }
    .marco--nav-colapsado .nav__buscar { margin: var(--k-sp-3) var(--k-sp-2) 0; padding: 0; }
    .marco--nav-colapsado .nav__grupo { font-size: 0; padding: var(--k-sp-2) 0 0; border-top: 1px solid var(--k-border-subtle); margin-top: var(--k-sp-2); }
    .marco--nav-colapsado .nav__items > .nav__grupo:first-child { border-top: 0; margin-top: 0; }
    .marco--nav-colapsado .menu-usuario { left: var(--k-sp-2); right: auto; width: 200px; }
}

/* Lienzo del asistente: una política por bloque, con su ámbito arriba. */
.lienzo-politica { display: grid; gap: var(--k-sp-2); padding-block: var(--k-sp-3); border-top: 1px solid var(--k-border-subtle); }
.lienzo-politica:first-of-type { border-top: 0; padding-top: 0; }
.lienzo-politica__ambito { display: flex; align-items: baseline; gap: var(--k-sp-2); font-size: var(--k-fs-small); }

/* ─────────────────────────── Pestañas ─────────────────────────── */

.pestanas {
    display: flex; gap: var(--k-sp-1);
    border-bottom: 1px solid var(--k-border-subtle);
    margin-bottom: var(--k-sp-4);
}
.pestana {
    background: none; border: none; cursor: pointer;
    padding: var(--k-sp-3) var(--k-sp-4);
    color: var(--k-text-tertiary);
    font-family: inherit; font-size: var(--k-fs-body);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: var(--k-sp-2);
    transition: color var(--k-dur-fast) var(--k-ease);
}
.pestana:hover { color: var(--k-text-primary); }
.pestana.activa { color: var(--k-accent-text); border-bottom-color: var(--k-accent); }
.pestana__conteo {
    font-family: var(--k-font-ui); font-variant-numeric: tabular-nums; font-size: var(--k-fs-micro);
    background: var(--k-bg-sunken); color: var(--k-text-secondary);
    padding: 1px 6px; border-radius: var(--k-radius-pill);
}
.pestana.activa .pestana__conteo { background: var(--k-accent-bg); color: var(--k-accent-text); }

/* ── La consecuencia de aprobar: lo primero que se ve en el panel, porque es lo que decide ── */

.consecuencia {
    display: grid; gap: var(--k-sp-3);
    padding: var(--k-sp-4);
    background: var(--k-accent-bg);
    border: 1px solid var(--k-accent-border);
    border-radius: var(--k-radius-md);
}
.consecuencia__flecha {
    display: flex; align-items: center; gap: var(--k-sp-4);
    color: var(--k-text-tertiary);
}
.consecuencia__rotulo {
    font-size: var(--k-fs-micro);
    letter-spacing: var(--k-tracking-micro);
    text-transform: uppercase;
    color: var(--k-text-tertiary);
}
.consecuencia__cifra {
    font-family: var(--k-font-ui); font-weight: 600; font-variant-numeric: tabular-nums;
    font-size: var(--k-fs-section);
    color: var(--k-text-primary);
    margin-top: 2px;
}
.consecuencia__cifra.negativa { color: var(--k-danger); }
.consecuencia__nota {
    margin: 0;
    font-size: var(--k-fs-small);
    color: var(--k-text-secondary);
    line-height: 1.55;
}
.consecuencia__nota strong { color: var(--k-text-primary); font-weight: 600; }

/* ─────────────────────────── Indicadores del Resumen ─────────────────────────── */

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--k-grid-gap);
    margin-bottom: var(--k-sp-5);
}
.indicador {
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border-subtle);
    border-radius: var(--k-radius-lg);
    padding: var(--k-sp-4);
    display: grid; gap: 4px; align-content: start;
}
.indicador--atencion { border-color: var(--k-warning-border); background: var(--k-warning-bg); }
.indicador__cifra {
    font-family: var(--k-font-ui); font-weight: 600; font-variant-numeric: tabular-nums;
    font-size: var(--k-fs-display);
    letter-spacing: var(--k-tracking-display);
    color: var(--k-text-primary);
    line-height: 1.1;
}
.indicador__rotulo { color: var(--k-text-secondary); font-size: var(--k-fs-small); }
.indicador__pie { color: var(--k-text-tertiary); font-size: var(--k-fs-micro); margin-top: 2px; }
/* El "?" de cada indicador, arriba a la derecha (el globo abre hacia la izquierda). */
.indicador { position: relative; }
.indicador__ayuda { position: absolute; top: var(--k-sp-2); right: var(--k-sp-2); }
.indicador__ayuda .ayuda { margin-left: 0; }

.dos-columnas {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--k-grid-gap);
    align-items: start;
}
@media (max-width: 1100px) { .dos-columnas { grid-template-columns: 1fr; } }

.tarjeta__cabecera {
    display: flex; align-items: center; gap: var(--k-sp-3);
    padding: var(--k-sp-4);
    border-bottom: 1px solid var(--k-border-subtle);
}
.tarjeta__cabecera h2 {
    margin: 0;
    font-size: var(--k-fs-section);
    font-weight: 600;
}
.tarjeta__cabecera .sello { margin-left: auto; }

/* ─────────────────────────── Gráfico ─────────────────────────── */

.grafico { display: grid; gap: var(--k-sp-2); }
.grafico svg { width: 100%; height: 160px; display: block; }
.grafico__eje {
    display: flex; align-items: center;
    font-size: var(--k-fs-micro);
    color: var(--k-text-tertiary);
    font-family: var(--k-font-data);
}
.grafico__leyenda {
    flex: 1; text-align: center;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--k-font-ui);
}
.grafico__marca { width: 14px; height: 0; border-top: 1px dashed var(--k-text-tertiary); }

/* ─────────────────────────── Políticas ─────────────────────────── */

.rejilla-politicas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--k-grid-gap);
}
.reglas { display: grid; gap: var(--k-sp-2); }
/* Variante para listas de TEXTO (roles, rutas): rótulo en columna fija y texto alineado a la
   izquierda; la variante base alinea cifras a la derecha. */
.reglas--texto .regla { display: grid; grid-template-columns: 150px 1fr; align-items: baseline; }
.reglas--texto .regla__rotulo { flex: none; }
.reglas--texto .regla__valor { text-align: left; font-family: var(--k-font-ui); font-size: var(--k-fs-small); }
@media (max-width: 640px) { .reglas--texto .regla { grid-template-columns: 1fr; gap: 2px; } }
.tarjeta--nota { padding: var(--k-sp-4) var(--k-sp-5); display: grid; gap: var(--k-sp-3); }
.regla {
    display: flex; align-items: baseline; gap: var(--k-sp-3);
    font-size: var(--k-fs-small);
}
.regla__rotulo { color: var(--k-text-tertiary); flex: 1; }
.regla__valor {
    font-family: var(--k-font-ui); font-variant-numeric: tabular-nums;
    font-size: var(--k-fs-small);
    color: var(--k-text-primary);
    text-align: right;
}
details summary::-webkit-details-marker { color: var(--k-text-tertiary); }

/* ─────────────────────────── Editor de políticas ─────────────────────────── */

.regla-campo { display: grid; gap: 4px; }
.regla-campo label { font-size: var(--k-fs-small); color: var(--k-text-primary); }
.regla-campo .ayuda { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); line-height: 1.5; }
.regla-campo .campo { width: 100%; }

/* ─────────────────────────── Tour de producto ─────────────────────────── */

.tour { position: fixed; inset: 0; z-index: var(--k-z-overlay); outline: none; }
.tour__velo { position: absolute; inset: 0; background: var(--k-overlay); }
/* El foco: transparente por dentro, y la sombra enorme alrededor ES el velo. Así el
   elemento señalado queda visible y clicable-a-la-vista, y todo lo demás atenuado. */
.tour__foco {
    position: absolute;
    border-radius: var(--k-radius-md);
    box-shadow: 0 0 0 9999px var(--k-overlay), 0 0 0 2px var(--k-accent);
    transition: left var(--k-dur) var(--k-ease), top var(--k-dur) var(--k-ease),
                width var(--k-dur) var(--k-ease), height var(--k-dur) var(--k-ease);
    pointer-events: none;
}
.tour__tarjeta {
    position: absolute;
    width: min(360px, calc(100vw - 32px));
    background: var(--k-bg-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);
    padding: var(--k-sp-5);
    display: grid; gap: var(--k-sp-3);
    transition: left var(--k-dur) var(--k-ease), top var(--k-dur) var(--k-ease);
}
.tour__progreso { display: flex; align-items: center; gap: 6px; }
.tour__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--k-border-strong); }
.tour__punto.hecho { background: var(--k-accent-border); }
.tour__punto.activo { background: var(--k-accent); width: 18px; border-radius: var(--k-radius-pill); }
.tour__titulo { margin: 0; font-size: var(--k-fs-section); font-weight: 600; }
.tour__texto { margin: 0; color: var(--k-text-secondary); line-height: 1.55; font-size: var(--k-fs-small); }
.tour__acciones { display: flex; gap: var(--k-sp-2); margin-top: var(--k-sp-2); }
@media (prefers-reduced-motion: reduce) { .tour__foco, .tour__tarjeta { transition: none; } }

/* ─────────────────────────── Primeros pasos ─────────────────────────── */

.pasos {
    background: var(--k-bg-surface);
    border: 1px solid var(--k-accent-border);
    border-radius: var(--k-radius-lg);
    padding: var(--k-sp-4) var(--k-sp-5);
    margin-bottom: var(--k-sp-5);
    display: grid; gap: var(--k-sp-4);
}
.pasos__cabecera { display: flex; align-items: center; gap: var(--k-sp-4); }
.pasos__titulo { margin: 0; font-size: var(--k-fs-section); font-weight: 600; }
.pasos__sub { margin: 2px 0 0; color: var(--k-text-tertiary); font-size: var(--k-fs-small); }
.pasos__barra {
    flex: 1; height: 4px; max-width: 220px; margin-left: auto;
    background: var(--k-bg-sunken); border-radius: var(--k-radius-pill); overflow: hidden;
}
.pasos__relleno { height: 100%; background: var(--k-accent); transition: width var(--k-dur) var(--k-ease); }
.pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-sp-2); }
.paso {
    display: grid; grid-template-columns: 24px 1fr auto; gap: var(--k-sp-3); align-items: center;
    padding: var(--k-sp-3); border-radius: var(--k-radius-md);
}
.paso.hecho { opacity: .7; }
.paso.esperando { background: var(--k-accent-bg); }
.paso--detalle { padding-top: 0; }
.paso__tilde {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--k-text-tertiary);
}
.paso.hecho .paso__tilde { background: var(--k-success); color: var(--k-success-on); }
.paso__pulso {
    width: 10px; height: 10px; border-radius: 50%; background: var(--k-accent);
    animation: pulso 1.4s ease-in-out infinite;
}
@keyframes pulso { 0%,100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .paso__pulso { animation: none; } }
.paso__texto { display: grid; gap: 2px; font-size: var(--k-fs-small); color: var(--k-text-secondary); min-width: 0; }
.paso__texto strong { color: var(--k-text-primary); font-weight: 600; }
.paso__llego { color: var(--k-success); margin-right: 6px; }
.paso__fallo { color: var(--k-warning); }
.paso.fallido { background: var(--k-warning-bg); }
.paso a.boton { text-decoration: none; }
@media (max-width: 700px) {
    .paso { grid-template-columns: 24px 1fr; }
    .paso > .boton, .paso > a.boton { grid-column: 2; justify-self: start; }
}
.paso__form { display: flex; gap: var(--k-sp-2); flex-wrap: wrap; margin-top: var(--k-sp-2); }
.paso__form .campo { flex: 1; min-width: 220px; }

/* ── Pantallas públicas: entrada, invitación, registro ── */
.publico {
    min-height: 100vh;
    display: grid; grid-template-rows: auto 1fr; justify-items: center;
    padding: var(--k-sp-6) var(--k-sp-4);
    gap: var(--k-sp-6);
}
.publico__marca { display: flex; align-items: center; gap: var(--k-sp-2); font-weight: 600; font-size: var(--k-fs-section); }
.publico__cuerpo { width: min(440px, 100%); align-self: start; }
/* Documentos legales: más anchos que un formulario, texto a ~70 caracteres */
.publico__cuerpo:has(.legal) { width: min(760px, 100%); }
.legal { display: grid; gap: var(--k-sp-6); padding: var(--k-sp-8); line-height: 1.65; font-size: var(--k-fs-body); }
.legal h1 { margin: 0; font-size: var(--k-fs-title); text-wrap: balance; }
.legal h2 { margin: 0 0 var(--k-sp-2); font-size: var(--k-fs-section); text-wrap: balance; }
.legal h3 { margin: 0; font-size: var(--k-fs-title); }
.legal p, .legal ul { margin: 0 0 var(--k-sp-2); max-width: 70ch; color: var(--k-text-secondary); }
.legal ul { padding-left: 1.25em; display: grid; gap: var(--k-sp-1); }
.legal__fecha { margin: var(--k-sp-1) 0 0; font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.legal__pie { padding-top: var(--k-sp-4); border-top: 1px solid var(--k-border); font-size: var(--k-fs-small); }
.publico__pie { display: flex; gap: var(--k-sp-2); justify-content: center; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.publico__pie a, .legal__pie a { color: var(--k-text-secondary); }
@media (max-width: 600px) { .legal { padding: var(--k-sp-4); } }
.entrada, .invitacion { padding: var(--k-sp-5); }
.entrada__form, .invitacion__form { display: grid; gap: var(--k-sp-4); }

/* Entrar con Google / Microsoft: botones neutros (los logos llevan el color de cada marca) */
.sso { display: grid; gap: var(--k-sp-2); }
.boton-sso {
    justify-content: center; gap: var(--k-sp-2);
    background: var(--k-action2-bg); color: var(--k-text-primary); border-color: var(--k-border);
}
.boton-sso:hover:not(:disabled) { background: var(--k-bg-hover); }
.boton-sso svg { flex: none; }
.sso__aviso { margin: 0; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.separador-o { display: flex; align-items: center; gap: var(--k-sp-3); color: var(--k-text-tertiary); font-size: var(--k-fs-micro); }
.separador-o::before, .separador-o::after { content: ""; flex: 1; border-top: 1px solid var(--k-border); }

/* Contraseña con ojito */
.campo-clave { position: relative; }
.campo-clave .campo { width: 100%; padding-right: 40px; }
/* Secretos de terceros (CampoSecreto): texto oculto SIN ser type="password", para que el
   navegador no lo tome por un inicio de sesión y lo autocomplete con la cuenta de Kipia. */
.campo--oculto { -webkit-text-security: disc; text-security: disc; font-family: var(--k-font-data); }
.campo-clave__ojo {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center;
    background: transparent; border: 0; border-radius: var(--k-radius-sm, 6px);
    color: var(--k-text-tertiary); cursor: pointer;
}
.campo-clave__ojo:hover { color: var(--k-text-primary); }
.campo-clave__ojo:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 1px; }
.campo--invalido, .campo--invalido:focus { border-color: var(--k-danger); }
.campo__error { color: var(--k-danger); font-size: var(--k-fs-micro); margin: 0; }

/* Términos y Condiciones: texto con su propio scroll + casilla */
.terminos { display: grid; gap: var(--k-sp-3); }
.terminos__texto {
    max-height: 180px; overflow-y: auto; padding: var(--k-sp-3) var(--k-sp-4);
    background: var(--k-bg-sunken); border: 1px solid var(--k-border-subtle, rgba(127,127,127,.2)); border-radius: var(--k-radius-md, 8px);
    font-size: var(--k-fs-micro); line-height: 1.6; color: var(--k-text-secondary);
}
.terminos__texto h3 { margin: 0 0 4px; font-size: var(--k-fs-small); color: var(--k-text-primary); }
.terminos__texto p { margin: 0 0 var(--k-sp-2); }
.terminos__texto h4 { margin: var(--k-sp-3) 0 2px; font-size: var(--k-fs-micro); color: var(--k-text-primary); }
.terminos__texto .terminos__item { padding-left: 1em; }
.terminos__texto:focus-visible { outline: 2px solid var(--k-accent); }
.terminos__acepto { display: flex; gap: var(--k-sp-2); align-items: center; font-size: var(--k-fs-small); cursor: pointer; }
.terminos__acepto input { width: 16px; height: 16px; accent-color: var(--k-accent); }
.terminos__acepto--compacto { align-items: flex-start; color: var(--k-text-secondary); line-height: 1.45; }
.terminos__acepto--compacto input { flex: none; margin-top: 2px; }
.terminos__acepto--compacto a { color: var(--k-text-primary); }

/* Alta autoservicio: lo que trae el Free a la izquierda, el formulario a la derecha.
   En celular se apilan y el formulario va PRIMERO (es lo que se vino a hacer). */
.publico__cuerpo:has(.registro) { width: min(900px, 100%); }
.registro { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: var(--k-sp-8); align-items: start; }
.registro__valor { display: grid; gap: var(--k-sp-4); padding-top: var(--k-sp-5); }
.registro__plan {
    margin: 0; justify-self: start; padding: 2px var(--k-sp-2); border-radius: 999px;
    font-size: var(--k-fs-micro); letter-spacing: .04em; text-transform: uppercase;
    color: var(--k-accent); border: 1px solid var(--k-accent);
}
.registro__titulo { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
.registro__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--k-sp-2); }
.registro__lista li { display: flex; gap: var(--k-sp-2); align-items: flex-start; color: var(--k-text-secondary); }
.registro__lista li svg { flex: none; margin-top: 3px; color: var(--k-accent); }
.registro__nota { margin: 0; max-width: 46ch; font-size: var(--k-fs-small); color: var(--k-text-tertiary); line-height: 1.5; }
.registro__tarjeta { padding: var(--k-sp-5); }
/* Alta cerrada: una sola tarjeta centrada, sin la oferta del plan Free */
.publico__cuerpo:has(.registro--cerrado) { width: min(560px, 100%); }
.registro--cerrado { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k-sp-4); justify-items: start; padding: var(--k-sp-8) var(--k-sp-6); }
.registro--cerrado .registro__titulo { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); }
.registro__texto { max-width: none; font-size: var(--k-fs-body); color: var(--k-text-secondary); }
.registro__programa { text-decoration: none; margin-top: var(--k-sp-2); }
.registro__pie { display: grid; gap: var(--k-sp-1); width: 100%; padding-top: var(--k-sp-4); margin-top: var(--k-sp-2); border-top: 1px solid var(--k-border-subtle); }
.registro__pie .estado__texto { max-width: none; font-size: var(--k-fs-small); }
.registro__sobre {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--k-bg-hover); color: var(--k-accent);
}
.registro__clave { display: grid; gap: var(--k-sp-2); font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.registro__clave summary { cursor: pointer; }
.entrada__alta { margin: 0; max-width: none; text-align: center; }
.entrada__alta a { font-weight: 600; }
.registro__acciones { display: flex; flex-wrap: wrap; gap: var(--k-sp-3); align-items: center; }
/* Campo trampa: fuera de la vista y del lector de pantalla, sin display:none (algunos robots lo saltean). */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
    .registro { grid-template-columns: 1fr; gap: var(--k-sp-5); }
    .registro__tarjeta { order: -1; }
    .registro__valor { padding-top: 0; }
}
.nav__quien { display: grid; gap: 2px; padding: var(--k-sp-2) var(--k-sp-3); color: var(--k-text-secondary); font-size: var(--k-fs-micro); }
.nav__quien .rotulo { color: var(--k-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enlace-invitacion { display: flex; gap: var(--k-sp-2); align-items: center; }
.enlace-invitacion code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select.campo { appearance: auto; }

/* ── Informe mensual ── */
.informe__portada { display: none; }
.informe__pie { font-size: var(--k-fs-micro); }
/* Notas al pie: cuerpo chico => línea corta, o no se lee. */
/* Decidir un pedido: datos arriba, los dos botones juntos abajo a la derecha. */
.enlace-boton { background: none; border: 0; padding: 0; justify-self: start; color: var(--k-accent-text, var(--k-accent)); font: inherit; font-size: var(--k-fs-small); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.enlace-boton:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.decision { display: grid; gap: var(--k-sp-3); }
.decision__campos { display: flex; flex-wrap: wrap; gap: var(--k-sp-3); align-items: end; }
.decision__botones { display: flex; flex-wrap: wrap; gap: var(--k-sp-2); align-items: center; justify-content: flex-end; }
.ajuste { display: flex; gap: var(--k-sp-2); flex-wrap: wrap; align-items: center; }
.ajuste .campo { width: 120px; }
.llamada__causa { display: grid; gap: 2px; margin-top: 4px; font-size: var(--k-fs-micro); color: var(--k-warning); }
.llamada__detalle { color: var(--k-text-tertiary); overflow-wrap: anywhere; }
.nota-pie { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); max-width: 80ch; line-height: 1.6; margin: 0; }
@media print {
    @page { margin: 14mm; }
    html, body { background: #fff !important; color: #111 !important; }
    .nav, .no-imprimir, .tour, .velo, .panel, #blazor-error-ui { display: none !important; }
    .marco { display: block !important; }
    .lienzo { padding: 0 !important; overflow: visible !important; height: auto !important; }
    .contenido { gap: 8mm; }
    .informe__portada { display: block; margin-bottom: 6mm; }
    .informe__marca { font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
    .informe__titulo { font-size: 20pt; margin: 4mm 0 2mm; }
    .informe__meta { color: #555; font-size: 9pt; }
    .tarjeta, .indicador { break-inside: avoid; border: 1px solid #ccc !important; background: #fff !important; box-shadow: none !important; }
    .indicador__cifra, .indicador__rotulo, .indicador__pie, .regla__rotulo, .regla__valor, td, th, h2, .estado__texto { color: #111 !important; }
    .tabla th { color: #444 !important; }
    .dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
    .tabla-scroll { overflow: visible !important; }
    a { text-decoration: none; color: inherit; }
}

.nav__org-selector { height: 28px; padding: 0 var(--k-sp-2); font-size: var(--k-fs-micro); width: 100%; margin-top: 4px; }

.cita-agente { margin: 0; padding: var(--k-sp-3) var(--k-sp-4); background: var(--k-bg-subtle, var(--k-bg-surface)); border-radius: var(--k-radius-md, 8px); font-style: italic; color: var(--k-text-primary); line-height: 1.5; }

/* ── Plan y facturación ── */
.uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--k-sp-5); margin-top: var(--k-sp-4); }
.uso__item { display: grid; gap: var(--k-sp-2); }
.uso__rotulo { color: var(--k-text-tertiary); font-size: var(--k-fs-micro); text-transform: uppercase; letter-spacing: .06em; }
.uso__cifra { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--k-fs-section); display: flex; gap: var(--k-sp-2); align-items: baseline; flex-wrap: wrap; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--k-sp-4); }
.plan { padding: var(--k-sp-5); display: grid; gap: var(--k-sp-3); align-content: start; }
.plan--actual { outline: 2px solid var(--k-accent, #2a9d8f); }
.plan__nombre { font-weight: 600; font-size: var(--k-fs-section); }
.plan__precio { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; color: var(--k-text-secondary); font-size: var(--k-fs-small); }
.plan__monto { font-size: var(--k-fs-section); font-weight: 600; color: var(--k-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.plan__lista { margin: 0; padding-left: 1.1em; color: var(--k-text-secondary); display: grid; gap: 4px; font-size: var(--k-fs-small); }
.franja-global { margin: var(--k-sp-3) var(--k-sp-5) 0; text-decoration: none; color: inherit; }
.simulacion__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-sp-3); }
.simulacion__cifras > div { display: grid; gap: 2px; }
.simulacion__cifras .num { font-size: var(--k-fs-section); font-family: var(--k-font-ui); font-weight: 600; font-variant-numeric: tabular-nums; text-align: left; }

/* ── Producto híbrido: agente o persona ── */
.titular { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
           background: var(--k-bg-subtle, rgba(127,127,127,.12)); color: var(--k-text-secondary); }
.titular--person { background: color-mix(in srgb, var(--k-accent, #2a9d8f) 18%, transparent); color: var(--k-accent-text, #8fd3c9); }
.titular__por { position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
                background: var(--k-warning, #c98a1b); color: #fff; }
/* Cómo conectar una herramienta a Kipia (alta de agente, Primeros pasos, Mi cupo) */
.conectar { display: grid; gap: var(--k-sp-2); }
.conectar__elegir { display: flex; align-items: center; gap: var(--k-sp-2); flex-wrap: wrap; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.conectar__texto { margin: 0; font-size: var(--k-fs-small); max-width: none; }
.conectar__codigo { cursor: default; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.conectar__codigo pre { margin: 0; user-select: all; white-space: pre-wrap; overflow-wrap: anywhere; }
.segmentado { display: inline-flex; border: 1px solid var(--k-border); border-radius: var(--k-radius-md, 8px); overflow: hidden; }
.segmentado button { background: transparent; border: 0; color: var(--k-text-secondary); padding: 0 var(--k-sp-3); height: 32px;
                     display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: var(--k-fs-small); }
.segmentado button + button { border-left: 1px solid var(--k-border); }
.segmentado button.activo { background: var(--k-bg-surface-raised, rgba(127,127,127,.14)); color: var(--k-text-primary); }
.solo-mias { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--k-sp-3); font-size: var(--k-fs-small); color: var(--k-text-secondary); cursor: pointer; }

/* Ver .contenido: el espacio entre bloques lo pone el gap, no los márgenes. */
.contenido > * { margin-top: 0; margin-bottom: 0; }

/* ─────────────────────────── Celular ───────────────────────────
   Debajo de 768 px la barra lateral deja de ocupar ancho: pasa a ser un panel que se abre
   desde la barra superior, con los rótulos completos. Las tablas principales se leen como
   tarjetas (cada celda con su rótulo), en vez de recortarse con desplazamiento lateral. */
@media (max-width: 768px) {
    .marco { flex-direction: column; }
    .barra-movil {
        display: flex; align-items: center; gap: var(--k-sp-1);
        position: sticky; top: 0; z-index: 30;
        height: 52px; padding: 0 var(--k-sp-2);
        background: var(--k-bg-chrome); border-bottom: 1px solid var(--k-border-subtle);
    }
    .barra-movil__marca { display: flex; align-items: center; gap: var(--k-sp-2); font-weight: 600; margin-left: var(--k-sp-1); }
    .barra-movil__marca .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); }
    .barra-movil__aprob { position: relative; }
    .barra-movil__aprob .insignia {
        position: absolute; top: 2px; right: 0; min-width: 16px; padding: 0 4px; border-radius: 8px;
        background: var(--k-warning); color: var(--k-warning-on); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    }
    .nav {
        position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
        width: 272px; flex-basis: auto; height: 100vh;
        transform: translateX(-100%); transition: transform var(--k-dur-base, .2s) var(--k-ease, ease);
        box-shadow: 0 0 48px rgba(0,0,0,.4);
    }
    .marco--menu-abierto .nav { transform: none; }
    .marco--menu-abierto .nav-velo { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.45); }
    .nav__item span.rotulo, .nav__marca span.rotulo, .nav__pie .rotulo, .nav__buscar .rotulo, .nav__org { display: revert; }
    .nav__item, .nav__usuario { justify-content: flex-start; }
    .nav__buscar { justify-content: flex-start; padding: 0 var(--k-sp-3); }
    .nav__grupo { font-size: var(--k-fs-micro); border-top: 0; margin-top: 0; padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-1); }
    .menu-usuario { left: var(--k-sp-3); right: var(--k-sp-3); width: auto; }

    .cabecera { flex-wrap: wrap; padding-top: var(--k-sp-4); }
    .cabecera .derecha { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .contenido, .cabecera { padding-left: var(--k-sp-4); padding-right: var(--k-sp-4); }

    .tabla--tarjetas thead { display: none; }
    .tabla--tarjetas, .tabla--tarjetas tbody { display: block; }
    .tabla--tarjetas tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-sp-2) var(--k-sp-4);
        padding: var(--k-sp-3) var(--k-sp-4); border-bottom: 1px solid var(--k-border-subtle);
    }
    .tabla--tarjetas td { display: block; padding: 0; border: 0; text-align: left; }
    .tabla--tarjetas td:first-child { grid-column: 1 / -1; }
    .tabla--tarjetas td[data-label]::before {
        content: attr(data-label); display: block;
        font-size: var(--k-fs-micro); color: var(--k-text-tertiary); text-transform: uppercase; letter-spacing: .04em;
        margin-bottom: 2px;
    }
    .tabla-scroll:has(.tabla--tarjetas) { overflow-x: visible; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* ─────────────────────────── Visualizaciones (fase 2) ───────────────────────────
   Paleta: --k-data-1..4 y --k-data-other del diseñador (validadas para daltonismo y contraste
   en los dos temas). Marcas finas, grilla de 1 px sólida y recesiva, texto en tokens de texto
   (nunca del color de la serie), etiquetas en HTML sobre el SVG para que no se deformen. */

.acumulado { display: grid; gap: var(--k-sp-2); }
.acumulado__titular { margin: 0; display: flex; align-items: center; gap: var(--k-sp-2); font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.acumulado__lienzo { position: relative; height: 180px; }
.acumulado__lienzo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.acumulado__punto {
    position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--k-data-1); box-shadow: 0 0 0 2px var(--k-bg-surface); pointer-events: none;
}
.acumulado__presupuesto {
    position: absolute; right: 0; transform: translateY(-120%);
    font-size: var(--k-fs-micro); color: var(--k-text-tertiary); background: var(--k-bg-surface); padding: 0 4px; pointer-events: none;
}
.acumulado__tooltip {
    position: absolute; top: 0; transform: translateX(-50%); z-index: 2; pointer-events: none;
    display: grid; gap: 2px; padding: var(--k-sp-2) var(--k-sp-3); white-space: nowrap;
    background: var(--k-bg-surface-raised, var(--k-bg-chrome)); border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.3);
    font-size: var(--k-fs-micro); color: var(--k-text-secondary);
}
.acumulado__tooltip strong { color: var(--k-text-primary); }
.acumulado__eje { display: flex; justify-content: space-between; align-items: center; gap: var(--k-sp-3); font-size: var(--k-fs-micro); color: var(--k-text-tertiary); font-family: var(--k-font-data); }
.acumulado__leyenda { display: flex; flex-wrap: wrap; gap: var(--k-sp-3); justify-content: center; font-family: var(--k-font-ui); }
.acumulado__leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
/* Marquita de color de las leyendas de los gráficos: SOLO <i class="clave">. Antes era ".clave" a
   secas y pisaba el TEXTO con clase clave (correos, modelos, claves): lo dejaba de 14×3 px con una
   raya de color encima y el texto se encimaba con la línea de abajo. */
i.clave { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--k-data-1); }
i.clave--punteada { background: repeating-linear-gradient(90deg, var(--k-data-1) 0 4px, transparent 4px 7px); }
i.clave--presupuesto { background: var(--k-warning); height: 2px; }
i.clave--area { height: 10px; width: 12px; background: var(--k-warning); opacity: .3; }
/* Texto que se copia o se compara (correo, modelo, clave): fuente de datos, sin cortar a mitad de palabra. */
span.clave, a.clave { font-family: var(--k-font-data); font-size: var(--k-fs-micro); color: var(--k-text-tertiary); overflow-wrap: anywhere; }
td > span.clave:only-child { font-size: inherit; color: inherit; overflow-wrap: normal; }

.hbarras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-sp-3); }
.hbarras__fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto 56px; align-items: center; gap: var(--k-sp-3); font-size: var(--k-fs-small); }
.hbarras__nombre { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--k-sp-2); min-width: 0; color: var(--k-text-primary); }
.hbarras__nombre > a, .hbarras__nombre > span:not(.hbarras__detalle) { grid-column: 2; }
.hbarras__nombre .titular { grid-row: 1 / span 2; }
.hbarras__detalle { grid-column: 2; }
.hbarras__nombre a, .hbarras__nombre > span:not(.hbarras__detalle) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.hbarras__detalle { color: var(--k-text-tertiary); font-size: var(--k-fs-micro); white-space: nowrap; }
.hbarras__pista { height: 8px; border-radius: 4px; background: var(--k-data-grid); overflow: hidden; }
.hbarras__relleno { display: block; height: 100%; border-radius: 4px; background: var(--k-data-1); }
.hbarras__valor { font-variant-numeric: tabular-nums; text-align: right; color: var(--k-text-primary); }
.hbarras__pct { font-variant-numeric: tabular-nums; text-align: right; color: var(--k-text-tertiary); font-size: var(--k-fs-micro); }
@media (max-width: 640px) {
    .hbarras__fila { grid-template-columns: minmax(0, 1fr) auto; }
    .hbarras__pista { grid-column: 1 / -1; order: 3; }
    .hbarras__pct { display: none; }
}

.tarjeta--relleno { padding: var(--k-sp-5); display: grid; gap: var(--k-sp-4); }
.dinero__cabecera { display: flex; align-items: baseline; gap: var(--k-sp-3); flex-wrap: wrap; }
.dinero__total { font-size: var(--k-fs-display, 30px); font-weight: 700; letter-spacing: var(--k-tracking-title); }
.apilada { display: grid; gap: var(--k-sp-4); }
.apilada__barra { display: flex; gap: 2px; height: 28px; border-radius: 6px; overflow: hidden; background: var(--k-data-grid); }
.apilada__seg { min-width: 4px; height: 100%; }
.apilada__leyenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--k-sp-4); }
.apilada__leyenda li { display: grid; grid-template-columns: 12px 1fr auto; gap: 2px var(--k-sp-2); align-items: baseline; }
.apilada__clave { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.apilada__etiqueta { color: var(--k-text-secondary); font-size: var(--k-fs-small); }
.apilada__monto { font-size: var(--k-fs-section); font-variant-numeric: tabular-nums; grid-column: 2; }
.apilada__pct { grid-column: 3; grid-row: 1; color: var(--k-text-tertiary); font-size: var(--k-fs-micro); }
.apilada__ayuda { grid-column: 2 / -1; color: var(--k-text-tertiary); font-size: var(--k-fs-micro); }

.mini { display: inline-block; vertical-align: middle; overflow: visible; }

.pct-barra { display: inline-block; width: 48px; height: 6px; margin-right: var(--k-sp-2); vertical-align: middle; border-radius: 3px; background: var(--k-data-grid); overflow: hidden; }
.pct-barra > span { display: block; height: 100%; background: var(--k-data-1); border-radius: 3px; }

/* Plantillas de políticas (fase 3) */
.plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--k-sp-2); }
.plantilla {
    display: grid; grid-template-columns: auto 1fr; gap: 2px var(--k-sp-2); align-items: start; text-align: left;
    padding: var(--k-sp-3); border: 1px solid var(--k-border); border-radius: var(--k-radius-md);
    background: var(--k-bg-surface); color: var(--k-text-secondary); font: inherit; cursor: pointer;
}
.plantilla:hover { border-color: var(--k-accent); color: var(--k-text-primary); }
.plantilla.elegida { border-color: var(--k-accent); background: var(--k-accent-bg); }
.plantilla__titulo { color: var(--k-text-primary); font-size: var(--k-fs-small); font-weight: 600; }
.plantilla__texto { grid-column: 2; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }

/* Aprobar desde la lista */
.acciones-fila { white-space: nowrap; text-align: right; }
.acciones-fila .boton + .boton { margin-left: var(--k-sp-1); }
.boton--chico { height: 28px; padding: 0 var(--k-sp-3); font-size: var(--k-fs-small); }
.boton--chico { white-space: nowrap; }
.boton--peligro { background: var(--k-danger); color: var(--k-danger-on); border-color: var(--k-danger); }
.boton--peligro:hover:not(:disabled) { filter: brightness(1.08); }
/* Tarjeta de política: confirmar la eliminación (frase arriba, botones abajo a la derecha). */
.politica__acciones { display: flex; gap: var(--k-sp-2); justify-content: flex-end; flex-wrap: wrap; }
.politica__borrar { display: grid; gap: var(--k-sp-2); padding: var(--k-sp-3); border: 1px solid var(--k-danger-border); background: var(--k-danger-bg); border-radius: var(--k-radius-md); }
.politica__borrar p { margin: 0; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 768px) { .tabla--tarjetas td.acciones-fila { grid-column: 1 / -1; text-align: left; } }

/* Acciones en masa (fase 3) */
.col-marca { width: 36px; padding-right: 0 !important; }
.col-marca input { width: 16px; height: 16px; accent-color: var(--k-accent); cursor: pointer; }
.masivo {
    position: sticky; top: var(--k-sp-2); z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-2) var(--k-sp-3);
    padding: var(--k-sp-2) var(--k-sp-3); border: 1px solid var(--k-accent); border-radius: var(--k-radius-md);
    background: var(--k-bg-raised); box-shadow: var(--k-shadow-float);
}
.masivo__cuenta { display: inline-flex; align-items: center; gap: var(--k-sp-1); font-weight: 600; color: var(--k-text-primary); }
.masivo__grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-1); }
.masivo__monto { width: 96px; height: 28px; }
.masivo .separador { flex: 1; }
.masivo__confirmar {
    flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-2);
    padding: var(--k-sp-2) var(--k-sp-3); border-radius: var(--k-radius-sm, 6px);
    background: var(--k-warning-bg); border: 1px solid var(--k-warning-border); color: var(--k-text-primary); font-size: var(--k-fs-small);
}
.masivo__confirmar > span { flex: 1 1 260px; }
.masivo__falla { font-size: var(--k-fs-small); color: var(--k-text-secondary); }
@media (max-width: 768px) {
    .tabla--tarjetas td.col-marca { position: absolute; right: var(--k-sp-3); top: var(--k-sp-3); width: auto; }
    .tabla--tarjetas tr { position: relative; }
    .masivo { top: 56px; }
}

/* Alta: comprobación en vivo de la primera llamada (fase 3) */
.primera {
    display: grid; grid-template-columns: auto 1fr; gap: var(--k-sp-3); align-items: start;
    padding: var(--k-sp-3) var(--k-sp-4); border: 1px dashed var(--k-border); border-radius: var(--k-radius-md);
    font-size: var(--k-fs-small); color: var(--k-text-secondary);
}
.primera > div { display: grid; gap: 2px; }
.primera strong { color: var(--k-text-primary); }
.primera .paso__pulso { margin-top: 4px; }
.primera--ok { border-style: solid; border-color: var(--k-success-border); background: var(--k-success-bg); color: var(--k-text-primary); }
.primera--ok > svg { color: var(--k-success); }
.primera--fallo { border-style: solid; border-color: var(--k-warning-border); background: var(--k-warning-bg); color: var(--k-text-primary); }
.primera--fallo > svg { color: var(--k-warning); }

/* Cascada de políticas (fase 3) */
.cascada td, .cascada th { font-size: var(--k-fs-small); white-space: normal; vertical-align: top; padding: var(--k-sp-2) !important; }
.cascada th { font-size: var(--k-fs-micro); }
.cascada td { font-variant-numeric: tabular-nums; }
.cascada__regla { color: var(--k-text-secondary); }
.cascada__version { margin-left: 4px; font-family: var(--k-font-data); font-size: var(--k-fs-micro); color: var(--k-text-tertiary); font-weight: 400; }
.cascada__vacia { color: var(--k-text-tertiary); }
.cascada__gana { color: var(--k-text-primary); font-weight: 600; box-shadow: inset 2px 0 0 var(--k-accent); background: var(--k-accent-bg); }
.cascada__manda { color: var(--k-text-primary); font-weight: 600; }

/* Informe ejecutivo (fase 4): conclusiones, variación por fila y suscripción por correo */
.conclusiones__lista { list-style: none; margin: 0; padding: var(--k-sp-2) var(--k-sp-4) var(--k-sp-3); display: grid; gap: var(--k-sp-1); }
.conclusion {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--k-sp-3); align-items: start;
    padding: var(--k-sp-2) 0; border-bottom: 1px solid var(--k-border); font-size: var(--k-fs-body); color: var(--k-text-primary);
    font-variant-numeric: tabular-nums;
}
.conclusion:last-child { border-bottom: 0; }
.conclusion__icono { display: flex; padding-top: 2px; color: var(--k-text-tertiary); }
.conclusion--good .conclusion__icono { color: var(--k-success); }
.conclusion--warn .conclusion__icono { color: var(--k-warning); }
.conclusion__texto { max-width: 80ch; }
.conclusion__ir { display: inline-flex; align-items: center; gap: 2px; font-size: var(--k-fs-small); white-space: nowrap; }
.delta { color: var(--k-text-secondary); }
.delta--sube { color: var(--k-text-primary); }
.delta--nuevo { color: var(--k-text-tertiary); font-family: var(--k-font-ui); font-size: var(--k-fs-micro); }
.informe__correo {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-2) var(--k-sp-3);
    padding: var(--k-sp-2) var(--k-sp-4); border: 1px solid var(--k-border); border-radius: var(--k-radius-md);
    background: var(--k-bg-surface); color: var(--k-text-secondary); font-size: var(--k-fs-small);
}
.informe__correo .separador { flex: 1; }
.interruptor { display: inline-flex; align-items: center; gap: var(--k-sp-2); cursor: pointer; color: var(--k-text-primary); }
.interruptor input { width: 16px; height: 16px; accent-color: var(--k-accent); }
@media print {
    .conclusion { break-inside: avoid; }
}

/* "Primeros pasos" oculto con pasos pendientes: una línea para volver a abrirlo */
.pasos-mini {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-2) var(--k-sp-3);
    padding: var(--k-sp-2) var(--k-sp-4); border: 1px solid var(--k-border); border-radius: var(--k-radius-md);
    background: var(--k-bg-surface); color: var(--k-text-secondary); font-size: var(--k-fs-small);
}
.pasos-mini > svg { color: var(--k-accent); }
.pasos-mini .pasos__barra { flex: 1 1 120px; max-width: 220px; }

/* Plan: selector mensual / anual */
.intervalo { align-self: flex-start; }
.intervalo__descuento {
    margin-left: 6px; padding: 1px 6px; border-radius: var(--k-radius-pill);
    background: var(--k-success-bg); color: var(--k-success); font-size: var(--k-fs-micro); font-weight: 600;
}
.plan__ahorro { margin-top: -4px; }

/* Gasto total: título de la sección de licencias */
.seccion-titulo { font-size: var(--k-fs-h3, 1.05rem); font-weight: 600; color: var(--k-text-primary); margin: var(--k-sp-2) 0 0; }

/* Aceptar los Términos cuando cambiaron: no se puede cerrar */
.velo--fijo { z-index: 90; cursor: default; }
.panel-terminos {
    position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
    display: grid; gap: var(--k-sp-3); padding: var(--k-sp-5);
    background: var(--k-bg-raised); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg, 12px); box-shadow: var(--k-shadow-overlay);
}
.panel-terminos h2 { margin: 0; }

/* ─────────────────── Versión simple: ayuda contextual, límites y frenos (2026-10-09) ───────────────────
   Pensado para quien no sabe qué es un token: cada concepto tiene su "?" al lado, cada límite se
   lee como una frase ("USD 12 de USD 20 · quedan USD 8") y cada freno dice qué pasó y qué hacer. */

/* Ayuda contextual: un signo de pregunta discreto y un globo con la explicación */
.ayuda { position: relative; display: inline-flex; vertical-align: middle; margin-left: 2px; }
.ayuda__boton {
    display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--k-text-tertiary); cursor: help;
    transition: color var(--k-dur-fast) var(--k-ease), background var(--k-dur-fast) var(--k-ease);
}
.ayuda__boton:hover, .ayuda__boton[aria-expanded="true"] { color: var(--k-accent); background: var(--k-accent-bg); }
.ayuda__velo { position: fixed; inset: 0; z-index: var(--k-z-float); }
.ayuda__globo {
    position: absolute; top: calc(100% + 6px); left: -8px; z-index: calc(var(--k-z-float) + 1);
    width: min(320px, calc(100vw - 32px)); padding: var(--k-sp-3) var(--k-sp-4);
    display: grid; gap: var(--k-sp-2);
    background: var(--k-bg-raised); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);
    font-family: var(--k-font-ui); font-size: var(--k-fs-small); font-weight: 400; line-height: 1.55;
    letter-spacing: normal; text-transform: none; color: var(--k-text-secondary); text-align: left; white-space: normal;
}
.ayuda__globo--derecha { left: auto; right: -8px; }
.ayuda__titulo { color: var(--k-text-primary); font-size: var(--k-fs-body); font-weight: 600; }
.ayuda__mas { font-size: var(--k-fs-small); font-weight: 500; }

/* Un límite dicho como frase, con su barra */
.limite { display: grid; gap: 6px; min-width: 0; }
.limite__cifras {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-sp-3); flex-wrap: wrap;
    font-size: var(--k-fs-small); color: var(--k-text-secondary); font-variant-numeric: tabular-nums;
}
.limite__cifras strong { color: var(--k-text-primary); font-weight: 600; }
.limite__queda { color: var(--k-text-tertiary); }
.limite__queda--aviso { color: var(--k-warning); }
.limite__nota { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.limite .barra__pista { height: 6px; }

/* Inicio personal */
.indicadores--tres { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.indicador--enlace { color: inherit; text-decoration: none; transition: border-color var(--k-dur-fast) var(--k-ease); }
.indicador--enlace:hover { border-color: var(--k-border); }
.indicador__rotulo .ayuda__boton { width: 18px; height: 18px; }
.cargar { display: flex; gap: var(--k-sp-2); margin-top: var(--k-sp-2); }
.cargar .campo { width: 110px; height: 28px; }
.seccion-proyecto { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-sp-3); flex-wrap: wrap; }
.seccion-proyecto__titulo {
    display: flex; align-items: center; gap: var(--k-sp-2); margin: 0;
    font-size: var(--k-fs-section); font-weight: 600; color: var(--k-text-primary);
}
.subtitulo {
    display: flex; align-items: center; gap: 4px; margin: var(--k-sp-2) 0 0;
    font-size: var(--k-fs-small); font-weight: 600; color: var(--k-text-secondary);
}
.filas-limite { display: grid; gap: var(--k-sp-3); }
.fila-limite { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--k-sp-4); align-items: center; }
.fila-limite__nombre { display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-body); color: var(--k-text-primary); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .fila-limite { grid-template-columns: 1fr; gap: var(--k-sp-1); } }

/* Pasos simples (configuración inicial de una cuenta personal) */
.pasos-simples__lista { list-style: none; margin: 0; padding: var(--k-sp-2) var(--k-sp-4) var(--k-sp-4); display: grid; gap: var(--k-sp-1); }
.paso-simple {
    display: grid; grid-template-columns: 28px 1fr auto; gap: var(--k-sp-3); align-items: center;
    padding: var(--k-sp-3) 0; border-bottom: 1px solid var(--k-border-subtle);
}
.paso-simple:last-child { border-bottom: 0; }
.paso-simple__marca {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--k-border); color: var(--k-text-secondary); font-size: var(--k-fs-small); font-weight: 600;
}
.paso-simple--hecho .paso-simple__marca { background: var(--k-accent-bg); border-color: var(--k-accent); color: var(--k-accent); }
.paso-simple__texto { display: grid; gap: 2px; min-width: 0; }
.paso-simple__texto strong { font-weight: 600; color: var(--k-text-primary); }
.paso-simple__texto span { font-size: var(--k-fs-small); color: var(--k-text-tertiary); line-height: 1.5; }
.paso-simple--hecho .paso-simple__texto strong { color: var(--k-text-secondary); text-decoration: line-through; text-decoration-color: var(--k-text-disabled); }
@media (max-width: 640px) { .paso-simple { grid-template-columns: 28px 1fr; } .paso-simple .boton { grid-column: 2; justify-self: start; } }

/* Frenos: qué se frenó, por qué y qué hacer */
.frenos { list-style: none; margin: 0; padding: var(--k-sp-1) var(--k-sp-4); }
.freno { display: grid; grid-template-columns: 24px 1fr; gap: var(--k-sp-3); padding: var(--k-sp-4) 0; border-bottom: 1px solid var(--k-border-subtle); }
.freno:last-child { border-bottom: 0; }
.freno__icono { padding-top: 1px; }
.freno--activo .freno__icono { color: var(--k-danger); }
.freno--resuelto .freno__icono { color: var(--k-success); }
.freno--resuelto .freno__frase { color: var(--k-text-secondary); }
.freno__cuerpo { display: grid; gap: 6px; min-width: 0; }
.freno__frase { color: var(--k-text-primary); line-height: 1.5; }
.freno__meta { font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.freno__acciones { display: flex; flex-wrap: wrap; gap: var(--k-sp-2); align-items: flex-start; margin-top: 2px; }
.nav__item .insignia--peligro, .insignia--peligro { background: var(--k-danger); color: var(--k-action-text); }

/* Autorizar un extra por única vez */
.extra {
    display: grid; gap: var(--k-sp-2); width: min(520px, 100%); padding: var(--k-sp-3);
    background: var(--k-bg-sunken); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-md);
}
.extra__fila { display: flex; gap: var(--k-sp-2); flex-wrap: wrap; }
.extra__monto { display: inline-flex; align-items: center; gap: 6px; font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.extra__monto .campo { width: 100px; height: 30px; background: var(--k-bg-surface); }
.extra__motivo { flex: 1; min-width: 160px; height: 30px; background: var(--k-bg-surface); }
.extra__ayuda { margin: 0; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); line-height: 1.5; }
.extra__acciones { display: flex; justify-content: flex-end; gap: var(--k-sp-2); flex-wrap: wrap; }

/* Mi proyecto: listas de tareas y agentes con su límite */
.fila-form, .nueva-fila { display: flex; gap: var(--k-sp-2); align-items: center; flex-wrap: wrap; }
.nueva-fila { padding: var(--k-sp-3) var(--k-sp-4); border-top: 1px solid var(--k-border-subtle); background: var(--k-bg-sunken); }
.nueva-fila .extra__monto .campo { background: var(--k-bg-surface); height: var(--k-control-md); }
.lista-limites { list-style: none; margin: 0; padding: 0 var(--k-sp-4); }
.item-limite { display: grid; gap: var(--k-sp-2); padding: var(--k-sp-4) 0; border-bottom: 1px solid var(--k-border-subtle); }
.item-limite:last-child { border-bottom: 0; }
.item-limite__cabeza { display: flex; justify-content: space-between; gap: var(--k-sp-3); flex-wrap: wrap; align-items: flex-start; }
.item-limite__nombre { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--k-text-primary); }
.item-limite__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--k-fs-small); color: var(--k-text-tertiary); margin-top: 2px; }
.item-limite__acciones { display: flex; gap: var(--k-sp-2); align-items: center; flex-wrap: wrap; }
.item-limite--sin-declarar .item-limite__nombre { color: var(--k-text-secondary); }
.codigo {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px;
    border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-sm); background: var(--k-bg-sunken);
    font-family: var(--k-font-data); font-size: var(--k-fs-micro); color: var(--k-text-secondary); cursor: pointer;
}
.codigo:hover { color: var(--k-text-primary); border-color: var(--k-border); }
.tabla--quieta tbody tr { cursor: default; }

/* Centro de ayuda */
/* Ayuda: mismo ancho que las demás pantallas; cada texto limita su propio ancho de lectura. */
.ayuda-intro p { margin: 0; max-width: 75ch; line-height: 1.6; color: var(--k-text-secondary); }
.ayuda-flujo { display: flex; align-items: center; gap: var(--k-sp-2); flex-wrap: wrap; color: var(--k-text-tertiary); }
.ayuda-flujo__paso {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
    border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-pill);
    font-size: var(--k-fs-small); color: var(--k-text-secondary); background: var(--k-bg-sunken);
}
.ayuda-flujo__paso--kipia { border-color: var(--k-accent); color: var(--k-accent); background: var(--k-accent-bg); }
.ayuda-grupo { margin: var(--k-sp-2) 0 0; font-size: var(--k-fs-section); font-weight: 600; color: var(--k-text-primary); }
.ayuda-conceptos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--k-grid-gap); }
.ayuda-concepto { padding: var(--k-sp-4) var(--k-sp-5); display: grid; gap: var(--k-sp-2); align-content: start; scroll-margin-top: var(--k-sp-6); }
.ayuda-concepto h3 { display: flex; align-items: center; gap: var(--k-sp-2); margin: 0; font-size: var(--k-fs-section); font-weight: 600; }
.ayuda-concepto h3 .icono { color: var(--k-accent); }
.ayuda-concepto p { margin: 0; line-height: 1.6; color: var(--k-text-secondary); font-size: var(--k-fs-body); }
.ayuda-concepto p.ayuda-concepto__ejemplo { font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.ayuda-concepto__ejemplo strong { color: var(--k-text-secondary); font-weight: 600; }
.ayuda-concepto p.ayuda-concepto__donde { display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-small); color: var(--k-accent); }
.ayuda-concepto--destacado { border-color: var(--k-accent); box-shadow: 0 0 0 1px var(--k-accent); }
.faq { border-bottom: 1px solid var(--k-border-subtle); padding: var(--k-sp-3) 0; }
.faq:last-of-type { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 500; color: var(--k-text-primary); }
.faq p { margin: var(--k-sp-2) 0 0; line-height: 1.6; color: var(--k-text-secondary); max-width: 75ch; }

/* Títulos con su "?" pegado */
.cabecera h1 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tarjeta__cabecera h2 { display: flex; align-items: center; gap: 4px; }

/* ── Entrada en dos columnas (2026-10-10): el panel con el formulario a la izquierda y la escena
   a la derecha (el núcleo de Kipia con agentes y personas y señales que van y vuelven: js/kipia-nucleo.js, canvas).
   La escena es oscura en los dos temas a propósito: la luz se suma y sobre fondo claro se lava.
   En celular solo queda el panel. ── */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); background: #050607; }
.acceso__panel {
    position: relative; z-index: 1; min-height: 100vh;
    display: grid; grid-template-rows: auto 1fr auto;
    background: var(--k-bg-surface); border-right: 1px solid var(--k-border-subtle);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.35);
}
.acceso__marca { height: var(--k-cabecera-h, 72px); padding: 0 var(--k-sp-6); border-bottom: 1px solid var(--k-border-subtle); }
.acceso__cuerpo { display: grid; align-content: center; padding: var(--k-sp-8) var(--k-sp-6); }
.acceso__cuerpo .entrada { padding: 0; }
.acceso__cuerpo .entrada .estado__titulo { font-size: var(--k-fs-display); letter-spacing: var(--k-tracking-display); }
.acceso__pie {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-sp-2);
    padding: var(--k-sp-4) var(--k-sp-6); border-top: 1px solid var(--k-border-subtle);
}
.acceso__pie .publico__pie { justify-content: flex-start; }
.acceso__derechos { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.acceso__escena { position: relative; min-height: 100vh; overflow: hidden; }
.acceso__escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
    .acceso { grid-template-columns: 1fr; background: var(--k-bg-canvas); }
    .acceso__panel { border-right: 0; box-shadow: none; }
    .acceso__escena { display: none; }
    .acceso__marca, .acceso__cuerpo, .acceso__pie { padding-left: var(--k-sp-4); padding-right: var(--k-sp-4); }
}
.acceso__marca .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); flex: 0 0 8px; }
/* Entrada: el formulario arriba (no centrado) y el idioma como un botón discreto con su ícono. */
.acceso__cuerpo { align-content: start; padding-top: var(--k-sp-10); }
.acceso__idioma {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin-right: -8px;
    background: none; border: 0; border-radius: var(--k-radius-md); cursor: pointer;
    font: inherit; font-size: var(--k-fs-small); font-weight: 400; text-decoration: none; color: var(--k-text-secondary);
}
.acceso__idioma:hover { color: var(--k-text-primary); background: var(--k-bg-hover); }
.acceso__idioma .icono { color: var(--k-text-tertiary); }
.boton-sso__pronto {
    margin-left: auto; padding: 1px 6px; border-radius: var(--k-radius-pill); border: 1px solid var(--k-border-subtle);
    font-size: var(--k-fs-micro); color: var(--k-text-tertiary); font-weight: 400;
}
/* Entrada: el cuerpo sin aire propio arriba/abajo; el aire lo da el formulario. */
.acceso__cuerpo { padding-top: 0; padding-bottom: 0; }
.acceso__cuerpo .entrada__form { padding-top: var(--k-sp-6); padding-bottom: var(--k-sp-6); }
/* Entrada: más aire entre los bloques del formulario (botones de proveedores / separador / campos). */
.acceso__cuerpo .entrada__form > .sso { margin-top: var(--k-sp-2); }
.acceso__cuerpo .entrada__form > .separador-o { margin-block: var(--k-sp-3); }
.acceso__cuerpo .entrada__form > .estado__texto:last-child { margin-top: var(--k-sp-2); }

/* En vivo (2026-10-10): la escena y "Últimas llamadas" usan la MISMA grilla de cuatro columnas que
   las cifras de arriba, así el panel de la derecha queda siempre del ancho de "esperando
   aprobación" y alineado con él. */
.envivo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-sp-3); }
.envivo__principal { grid-column: span 3; display: flex; flex-direction: column; gap: var(--k-sp-2); min-width: 0; }
@media (max-width: 1100px) {
    .envivo { grid-template-columns: minmax(0, 1fr); }
    .envivo__principal { grid-column: auto; }
}
/* Insignia EN VIVO: punto y contorno en rojo (como una transmisión en vivo) y el texto en blanco. */
.envivo__marca { color: var(--k-text-primary); border-color: var(--k-danger); }
.envivo__marca i { background: var(--k-danger); }
/* Entrada: las dos pestañas (Con mi cuenta / Con clave de empresa) del mismo ancho y ocupando todo el panel. */
.acceso__pestanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.acceso__pestanas .pestana { justify-content: center; text-align: center; padding-left: var(--k-sp-2); padding-right: var(--k-sp-2); }   /* la pestaña es inline-flex: centra justify-content */

/* Período de prueba: la marca del límite de prueba (avisa) sobre la barra que termina en el techo (frena). */
.prueba__marca {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--k-text-primary); border-radius: 1px; transform: translateX(-1px);
}

/* Entrada: "Mantener la sesión iniciada", debajo del botón. */
.entrada__recordar {
  display: flex; align-items: center; gap: var(--k-sp-2);
  font-size: var(--k-fs-small, 11.5px); color: var(--k-text-secondary); cursor: pointer; width: fit-content;
}
.entrada__recordar input { margin: 0; accent-color: var(--k-accent); }

/* Alertas como registros: popup centrado con el detalle de un freno (mismas partes que .panel). */
.dialogo {
    position: fixed; z-index: var(--k-z-overlay); left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--k-bg-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);
}
.dialogo__cuerpo { overflow-y: auto; padding: var(--k-sp-5); display: grid; gap: var(--k-sp-4); }
.dialogo .panel__pie { flex-wrap: wrap; align-items: center; }
.dato-fecha { font-variant-numeric: tabular-nums; white-space: nowrap; }
.freno-fila--resuelta td { color: var(--k-text-tertiary); }
.freno-fila--resuelta strong { color: var(--k-text-secondary); font-weight: 500; }

/* ── Resumen como tablero (2026-10-12) ──
   Gráfico del mes y "Dónde se va la plata" de la misma altura; abajo, todo el alto que queda de la
   pantalla: la red En vivo (escena + últimas llamadas + referencias) y los frenos como registros. */
.contenido--llena { flex: 1 0 auto; padding-bottom: var(--k-sp-5); }
.tarjeta--columna { display: flex; flex-direction: column; min-width: 0; }
.dos-columnas--parejas { align-items: stretch; }
.tarjeta__cabecera--sin-linea { border-bottom: 0; padding-bottom: var(--k-sp-2); }
/* El mismo alto en "Acumulado" y en "Por día": el cuadro no salta al cambiar de vista. */
/* Alto FIJO: "Ritmo del mes" y "Qué lo mueve" ocupan exactamente lo mismo, el cuadro no salta al cambiar. */
.resumen-grafico { flex: none; height: auto; min-height: 280px; padding: 0 var(--k-sp-4) var(--k-sp-4); display: flex; flex-direction: column; }
.resumen-abajo {
    flex: 1 0 auto; min-height: 340px;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--k-grid-gap);
}
.resumen-abajo__cuerpo { flex: 1; min-height: 0; contain: size; container-type: inline-size; }
.resumen-abajo__cuerpo--scroll { overflow: auto; }
.envivo__marca--chica { font-size: 10px; padding: 2px 8px; }
.tarjeta__cabecera .envivo__marca--chica + .sello { margin-left: auto; }

/* La red En vivo en el tablero: escena a la izquierda; a la derecha, últimas llamadas y referencias. */
.envivo--tablero { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 34%, 330px); gap: 0; }
.envivo--tablero .envivo__principal { grid-column: auto; min-height: 0; }
.envivo--tablero .envivo__escena { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.envivo--tablero .envivo__lateral { padding: var(--k-sp-2); border-left: 1px solid var(--k-border-subtle); }
.envivo--tablero .envivo__lista { border-radius: var(--k-radius-md); background: var(--k-bg-sunken); }
.envivo--tablero .envivo__lista li { padding-left: var(--k-sp-3); padding-right: var(--k-sp-3); }
/* En las tablas de registros, el dato chico debajo del principal va en su propia línea. */
.tabla td > div.sello { display: block; width: fit-content; margin-top: 2px; }

/* Cuadro angosto (pantallas chicas): las últimas llamadas pasan debajo de la escena. */
@container (max-width: 480px) {
    .envivo--tablero { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(240px, 1fr) auto; }
    .envivo--tablero .envivo__lateral { contain: none; border-left: 0; border-top: 1px solid var(--k-border-subtle); }
    .envivo--tablero .envivo__lista { max-height: 180px; }
}
@media (max-width: 1100px) {
    .resumen-abajo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .resumen-abajo > :first-child .resumen-abajo__cuerpo { height: 520px; flex: none; }
    .resumen-abajo__cuerpo--scroll { contain: none; overflow: visible; }
    .resumen-grafico { height: auto; min-height: 280px; }
}
@media (max-width: 768px) {
    .resumen-abajo > :first-child .resumen-abajo__cuerpo { height: 620px; }
}
/* La tabla de frenos del Resumen, en un cuadro angosto: menos relleno, y la fecha y el estado no se parten. */
.tabla--compacta th, .tabla--compacta td { padding-left: var(--k-sp-2); padding-right: var(--k-sp-2); }
.tabla--compacta th:first-child, .tabla--compacta td:first-child { padding-left: var(--k-sp-4); }
.tabla--compacta th:last-child, .tabla--compacta td:last-child { padding-right: var(--k-sp-4); }
.tabla--compacta .etiqueta { white-space: nowrap; }

/* ── Gasto del mes: "Ritmo del mes" y "Qué lo mueve" (2026-10-12) ── */
.ritmo, .motivos { display: flex; flex-direction: column; gap: var(--k-sp-2); flex: 1; min-height: 0; }
.ritmo__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-sp-3); }
.ritmo__cifras > div { display: grid; gap: 2px; }
.ritmo__cifras span { font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.ritmo__cifras strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ritmo__sube { color: var(--k-warning); }
.ritmo__sin-dato { color: var(--k-text-tertiary); font-size: 14px !important; }
.ritmo__cuerpo, .motivos__cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--k-sp-4); }
/* El cuerpo del ritmo no se achica por debajo de lo que ocupa la columna de al lado: si no, la leyenda le queda encima. */
.ritmo__cuerpo { min-height: auto; }
.ritmo__lienzo { position: relative; border-bottom: 1px solid var(--k-data-axis); min-height: 120px; }
.ritmo__lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ritmo__punto { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--k-accent); transform: translate(-50%, -50%); }
.ritmo__marca { position: absolute; font-size: 11px; color: var(--k-text-secondary); white-space: nowrap; transform: translateY(-50%); }
.ritmo__marca--hoy { margin-left: 10px; margin-top: -14px; color: var(--k-text-primary); }
.ritmo__marca--fin { right: 2px; margin-top: -10px; color: var(--k-accent-text); }
.ritmo__marca--anterior { right: 2px; margin-top: 10px; color: var(--k-text-tertiary); }
.ritmo__lado, .motivos__lado { display: flex; flex-direction: column; gap: var(--k-sp-2); font-size: var(--k-fs-small); }
.ritmo__caja { display: grid; gap: 6px; padding: var(--k-sp-2) var(--k-sp-3); background: var(--k-bg-sunken); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-md); }
.ritmo__rotulo { color: var(--k-text-tertiary); }
.ritmo__rotulo--accion { display: inline-flex; align-items: center; gap: 6px; color: var(--k-text-primary); font-weight: 600; }
.ritmo__rotulo--accion i { width: 8px; height: 8px; border-radius: 50%; background: var(--k-info); }
.ritmo__consejo { color: var(--k-text-secondary); line-height: 1.45; }
.ritmo__dato { font-variant-numeric: tabular-nums; color: var(--k-text-secondary); }
.ritmo__pista { position: relative; height: 8px; border-radius: var(--k-radius-pill); background: var(--k-bg-hover); }
.ritmo__relleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--k-radius-pill); background: var(--k-accent); }
.ritmo__proyectado { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--k-accent-text); }
.ritmo__leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; color: var(--k-text-tertiary); }
.ritmo__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ritmo__eje { margin-left: auto; }
/* La leyenda y el eje (1 · 31) van bajo el gráfico, no bajo la columna de al lado. */
.ritmo__leyenda { margin-right: calc(220px + var(--k-sp-4)); }
.ritmo__clave { width: 14px; height: 0; border-top: 2px solid var(--k-accent); }
.ritmo__clave--proyeccion { border-top-style: dashed; opacity: .6; }
.ritmo__clave--anterior { border-top: 2px dotted var(--k-text-tertiary); }
.motivos__titular { margin: 0; font-size: 13px; color: var(--k-text-secondary); }
.motivos__alerta { color: var(--k-warning); }
.motivos__barras { position: relative; display: grid; grid-template-columns: repeat(var(--columnas, 14), minmax(0, 1fr)); align-items: end; gap: 6px; border-bottom: 1px solid var(--k-data-axis); min-height: 120px; padding-top: 18px; }
.motivos__dia { display: flex; flex-direction: column-reverse; border-radius: 2px 2px 0 0; overflow: hidden; }
.motivos__dia span { min-height: 1px; }
.motivos__dia--hoy { opacity: .55; }
.motivos__dia--raro { box-shadow: 0 0 0 2px var(--k-warning); }
.motivos__habitual { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--k-text-tertiary); opacity: .7; pointer-events: none; }
.motivos__habitual-texto { position: absolute; right: 0; margin-bottom: 3px; font-size: 10.5px; color: var(--k-text-tertiary); pointer-events: none; }
.motivos__raro { display: grid; gap: 2px; padding-left: var(--k-sp-2); border-left: 2px solid var(--k-warning); }
.motivos__nota { margin: 0; font-size: 11px; color: var(--k-text-tertiary); line-height: 1.45; }
@media (max-width: 1100px) {
    .ritmo__cuerpo, .motivos__cuerpo { grid-template-columns: minmax(0, 1fr); }
    .ritmo__leyenda { margin-right: 0; }
}
/* Ritmo del mes: valor de hoy a la izquierda del punto y detalle por día al pasar el mouse. */
.ritmo__marca--hoy { margin: -14px 0 0 0; transform: translate(calc(-100% - 10px), -50%); }
.ritmo__franjas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--dias, 31), minmax(0, 1fr)); }
.ritmo__guia { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--k-border); pointer-events: none; }
.ritmo__punto--hover { width: 7px; height: 7px; background: var(--k-text-primary); pointer-events: none; }
.ritmo__tip {
    position: absolute; top: 4px; margin-left: 10px; pointer-events: none; z-index: 2;
    display: grid; gap: 2px; padding: 6px 10px; font-size: 11.5px; white-space: nowrap;
    background: var(--k-bg-raised, var(--k-bg-surface)); border: 1px solid var(--k-border); border-radius: var(--k-radius-md); box-shadow: var(--k-shadow-float);
}
.ritmo__tip--izq { margin-left: 0; transform: translateX(calc(-100% - 10px)); }
.ritmo__tip span { color: var(--k-text-secondary); font-variant-numeric: tabular-nums; }
.ritmo__tip .ritmo__tip-nota { color: var(--k-text-tertiary); }
/* Qué lo mueve: barras y sus fechas en la misma grilla de columnas. */
.motivos__grafico { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.motivos__grafico .motivos__barras { flex: 1; }
.motivos__fechas { display: grid; grid-template-columns: repeat(var(--columnas, 14), minmax(0, 1fr)); gap: 6px; padding-top: 4px;
    font-family: var(--k-font-data); font-size: 10px; color: var(--k-text-tertiary); text-align: center; white-space: nowrap; }
.motivos__fecha--hoy { color: var(--k-text-secondary); font-weight: 500; }
/* Buscar, abajo en la barra, FUERA del pie: encima de la línea que separa quién soy. */
.nav__busqueda { margin-top: auto; padding: var(--k-sp-3); }
.nav__busqueda .nav__buscar { margin: 0; width: 100%; }
/* "Esc ×" en la búsqueda rápida: también se cierra con un clic. */
.busqueda__cerrar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; background: none; border: 1px solid transparent; border-radius: var(--k-radius-md); color: var(--k-text-tertiary); cursor: pointer; font: inherit; }
.busqueda__cerrar:hover { color: var(--k-text-primary); border-color: var(--k-border); background: var(--k-bg-hover); }
.busqueda__cerrar:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 1px; }
.nav__busqueda + .nav__pie { margin-top: 0; }
@media (max-width: 900px) and (min-width: 769px) { .nav__busqueda { padding: var(--k-sp-2); } }
/* Encabezados con botón: el mismo alto que uno con solo título (53 px): el botón de 28 px se come el relleno. */
.tarjeta__cabecera:has(> .tarjeta__accion) { padding-top: 12px; padding-bottom: 12px; }
/* Presupuesto de la empresa: total, barra y leyenda repartidos en el alto del cuadro; leyenda de a dos. */
.presupuesto-empresa .presupuestos-fila__cuerpo { flex: 1; display: flex; flex-direction: column; gap: var(--k-sp-6); padding: var(--k-sp-5) var(--k-sp-5) var(--k-sp-6); }
.presupuesto-empresa .apilada { gap: var(--k-sp-6); }
.presupuesto-empresa .apilada__barra { height: 36px; }
.presupuesto-empresa .apilada__leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-sp-6) var(--k-sp-6); }
.presupuesto-empresa .apilada__leyenda li { grid-template-columns: 14px 1fr auto; gap: 4px var(--k-sp-3); }
.presupuesto-empresa .apilada__clave { width: 14px; height: 14px; }
.presupuesto-empresa .apilada__etiqueta { font-size: var(--k-fs-body, 14px); }
.presupuesto-empresa .apilada__monto { font-size: 22px; font-weight: 600; }
.presupuesto-empresa .apilada__pct { font-size: var(--k-fs-small); }
.presupuesto-empresa .apilada__ayuda { font-size: var(--k-fs-small); }
/* Presupuesto por proyecto: llega hasta abajo de la pantalla. */
.presupuestos-proyectos { flex: 1 0 auto; }
/* Presupuestos: primera fila con el dinero de la empresa y el presupuesto personal. */
.presupuestos-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k-grid-gap); align-items: stretch; }
.presupuestos-fila__cuerpo { padding: var(--k-sp-4); display: grid; gap: var(--k-sp-4); align-content: start; }
.tarjeta__cabecera .sello + .tarjeta__accion { margin-left: var(--k-sp-2); }
.tarjeta__accion { margin-left: auto; }
.mi-presupuesto { display: grid; gap: var(--k-sp-4); }
.mi-presupuesto .estado { padding: var(--k-sp-4) 0; }
@media (max-width: 1100px) { .presupuestos-fila { grid-template-columns: minmax(0, 1fr); } }

/* ─────────── Proyectos y tareas (0048): tabla de plan + línea de tiempo, al estilo de un Gantt ───────────
   Izquierda la grilla (como la hoja de tareas de un plan), derecha la línea de tiempo en la MISMA fila:
   así cada barra queda alineada con su tarea sin sincronizar dos tablas. El relleno de cada barra es el
   consumo del presupuesto, no el % completado: lo que Kipia gobierna es la plata. */
button.indicador { font: inherit; text-align: left; cursor: pointer; color: inherit; width: 100%; }
.volver { display: inline-flex; align-items: center; gap: 4px; font-size: var(--k-fs-small); color: var(--k-text-tertiary); text-decoration: none; margin-bottom: 4px; }
.volver:hover { color: var(--k-text-primary); }
.etiqueta--info { background: var(--k-info-bg); border-color: var(--k-info-border); color: var(--k-info); }

.crono { width: 100%; }
.crono td { vertical-align: middle; }
.crono .barra { min-width: 150px; }
.crono .barra__cifras { white-space: nowrap; }
.crono__resumen td { background: var(--k-bg-sunken); font-weight: 500; }
.crono__resumen:hover td { background: var(--k-bg-hover); }
.crono__nombre { display: flex; align-items: center; gap: var(--k-sp-2); min-width: 220px; }
.crono__plegar {
    display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: var(--k-radius-sm); background: transparent; color: var(--k-text-secondary); cursor: pointer;
}
.crono__plegar:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.crono__resumen .sello { margin-left: 30px; font-weight: 400; }
.crono__sangria { padding-left: calc(var(--k-sp-4) + 30px) !important; }
.crono__tarea { display: flex; align-items: center; gap: var(--k-sp-2); flex-wrap: wrap; min-width: 200px; }
.crono__codigo { font-family: var(--k-font-data); font-size: var(--k-fs-micro); color: var(--k-text-tertiary); margin-top: 2px; }
.crono__regla { font-size: var(--k-fs-small); white-space: nowrap; }
.crono__regla span { color: var(--k-text-tertiary); }
.crono__regla span::after { content: ":"; }
.crono__vacia { cursor: default !important; }
.crono__vacia:hover { background: transparent !important; }
.crono__vacia td { display: table-cell; }
.crono__vacia .boton { margin-left: var(--k-sp-2); }
.crono__alta { cursor: default !important; }
.crono__alta:hover { background: transparent !important; }
.crono__alta .fila-form { margin: 0; gap: var(--k-sp-2); color: var(--k-text-tertiary); flex-wrap: nowrap; }
.campo--plano { border-color: transparent; background: transparent; flex: 1; }
.campo--plano:hover, .campo--plano:focus { border-color: var(--k-border); background: var(--k-bg-surface); }
.ejecutor { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.gantt { min-width: 380px; width: 38%; padding-top: 0 !important; padding-bottom: 0 !important; }
.gantt--ancho { width: 50%; min-width: 520px; }
.gantt__pista { position: relative; height: 24px; }
.gantt--cabecera .gantt__pista { height: 34px; }
.gantt--cabecera .gantt__marca { bottom: auto; height: 16px; }
.gantt__marca {
    position: absolute; top: 0; bottom: 0; padding-left: 4px; border-left: 1px solid var(--k-data-grid);
    font-family: var(--k-font-data); font-size: var(--k-fs-micro); text-transform: none; letter-spacing: 0;
    color: var(--k-text-tertiary); white-space: nowrap;
}
.gantt__hoy { position: absolute; top: -12px; bottom: -12px; width: 0; border-left: 1px dashed var(--k-accent); pointer-events: none; }
.gantt__hoy--rotulo {
    top: 18px; bottom: auto; padding-left: 4px; border-left-style: solid;
    font-size: var(--k-fs-micro); color: var(--k-accent-text); text-transform: none; letter-spacing: 0;
}
.gantt__barra {
    position: absolute; top: 6px; height: 12px; border-radius: 3px; overflow: hidden;
    background: color-mix(in srgb, var(--k-accent) 28%, transparent); border: 1px solid var(--k-accent);
}
.gantt__relleno { display: block; height: 100%; background: var(--k-accent); }
.gantt__barra--ok { background: color-mix(in srgb, var(--k-success) 28%, transparent); border-color: var(--k-success); }
.gantt__barra--ok .gantt__relleno { background: var(--k-success); }
.gantt__barra--aviso { background: color-mix(in srgb, var(--k-warning) 28%, transparent); border-color: var(--k-warning); }
.gantt__barra--aviso .gantt__relleno { background: var(--k-warning); }
.gantt__barra--peligro { background: color-mix(in srgb, var(--k-danger) 28%, transparent); border-color: var(--k-danger); }
.gantt__barra--peligro .gantt__relleno { background: var(--k-danger); }
.gantt__barra--abierta { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* La fila resumen de un proyecto: un corchete de punta a punta, como en un plan clásico. */
.gantt__resumen { position: absolute; top: 9px; height: 5px; background: var(--k-text-secondary); border-radius: 1px; }
.gantt__resumen::before, .gantt__resumen::after {
    content: ""; position: absolute; top: 0; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--k-text-secondary);
}
.gantt__resumen::before { left: -1px; }
.gantt__resumen::after { right: -1px; }
.gantt__hito {
    position: absolute; top: 6px; width: 11px; height: 11px; margin-left: -6px; transform: rotate(45deg);
    background: var(--k-text-secondary); border-radius: 1px;
}
.gantt__hito.gantt__barra--peligro { background: var(--k-danger); }
.gantt__hito.gantt__barra--aviso { background: var(--k-warning); }
.gantt__hito.gantt__barra--ok { background: var(--k-success); }
.gantt__sin { position: absolute; top: 4px; left: 4px; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }

.lista-llamadas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-llamadas li { display: grid; grid-template-columns: 90px 1fr auto auto; gap: var(--k-sp-2); align-items: center; font-size: var(--k-fs-small); }

@media (max-width: 900px) {
    .gantt { display: none; }
}

/* Planificado vs real (0049) y bitácora de tareas y proyectos */
.plan-real { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--k-sp-3); margin: 4px 0 0; font-size: var(--k-fs-small); }
.plan-real dt { color: var(--k-text-tertiary); }
.plan-real dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.plan-real dd .sello { display: none; }
.diferencia { color: var(--k-success); white-space: nowrap; font-variant-numeric: tabular-nums; }
.diferencia--justa { color: var(--k-warning); }
.diferencia--pasada { color: var(--k-danger); }
.barra__diferencia { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); white-space: nowrap; }
.barra__diferencia.diferencia--pasada { color: var(--k-danger); }
.crono__ampliado { font-size: var(--k-fs-micro); color: var(--k-accent-text); }

.bitacora__filtros { margin-bottom: var(--k-sp-3); overflow-x: auto; }
.bitacora__filtros .sello { margin-left: 2px; }
.bitacora { list-style: none; margin: 0; padding: 0; display: grid; }
.bitacora__item {
    display: grid; grid-template-columns: 28px 1fr auto; gap: var(--k-sp-3); align-items: start;
    padding: var(--k-sp-2) 0; border-bottom: 1px solid var(--k-border-subtle);
}
.bitacora__item:last-child { border-bottom: 0; }
.bitacora__icono {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--k-bg-sunken); color: var(--k-text-secondary);
}
.bitacora__cuerpo { min-width: 0; }
.bitacora__frase { display: flex; align-items: center; gap: var(--k-sp-2); flex-wrap: wrap; font-size: var(--k-fs-small); color: var(--k-text-primary); }
.bitacora__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.bitacora__nota { color: var(--k-text-secondary); }
.bitacora__monto { font-size: var(--k-fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 3px; }
.bitacora--suma { color: var(--k-accent-text); }
.bitacora--ok { color: var(--k-success); }
.bitacora--aviso { color: var(--k-warning); }
.bitacora--peligro { color: var(--k-danger); }
.bitacora__icono.bitacora--suma { background: var(--k-accent-bg); }
.bitacora__icono.bitacora--ok { background: var(--k-success-bg); }
.bitacora__icono.bitacora--aviso { background: var(--k-warning-bg); }
.bitacora__icono.bitacora--peligro { background: var(--k-danger-bg); }

/* Fila de tabla que abre un detalle al tocarla. */
.fila-clic { cursor: pointer; }
.fila-clic:hover { background: var(--k-bg-hover); }

/* ── Organigrama (2026-10-14) ──
   Tabla con filas que se pliegan (como Microsoft Project), barra de presupuesto en el orden fijo
   verde → naranja → rojo → violeta → gris, vista Esquema y el popup grande de cada nivel. */
.presu--gastado  { background: var(--k-success); }
.presu--asignado { background: #f2a33a; }
.presu--extra    { background: var(--k-danger); }
.presu--sobrante { background: #9b7bea; }
.presu--libre    { background: #4a4f55; }
:root[data-theme="light"] .presu--libre { background: #c5cad0; }
.presu-barra { display: flex; gap: 1px; height: 10px; border-radius: var(--k-radius-pill); overflow: hidden; background: var(--k-bg-sunken); }
.presu-barra--chica { height: 8px; }
.presu-barra--sin-tope { background: none; height: auto; }
.presu-barra__seg { height: 100%; min-width: 2px; }
.presu-leyenda { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--k-sp-2); font-variant-numeric: tabular-nums; }
.presu-leyenda dt { display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.presu-leyenda dt i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.presu-leyenda dd { margin: 2px 0 0; font-weight: 600; }
.presu-clave { display: inline-flex; align-items: center; gap: 6px; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.presu-clave i { width: 10px; height: 10px; border-radius: 2px; }
.organigrama__barra-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-3); }
.organigrama td { vertical-align: middle; }
.organigrama__raiz { background: var(--k-bg-surface-raised, rgba(127,127,127,.06)); }
.organigrama__nombre { display: flex; align-items: center; gap: 6px; min-width: 0; }
.organigrama__hueco { width: 22px; flex: none; }
.organigrama__area { font-weight: 600; color: var(--k-text-primary); }
.organigrama__proyecto { color: var(--k-text-secondary); }
.organigrama__nivel { font-family: var(--k-font-data); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.esquema { overflow-x: auto; padding: var(--k-sp-4) 0; }
.esquema__nodo { display: flex; flex-direction: column; align-items: center; }
.esquema__hijos { display: flex; gap: var(--k-sp-4); padding-top: var(--k-sp-5); position: relative; }
.esquema__hijos::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--k-sp-3); background: var(--k-border); }
.esquema__hijos > .esquema__nodo { position: relative; padding-top: var(--k-sp-3); }
.esquema__hijos > .esquema__nodo::before { content: ""; position: absolute; top: 0; left: -8px; right: -8px; height: 1px; background: var(--k-border); }
.esquema__hijos > .esquema__nodo:first-child::before { left: 50%; }
.esquema__hijos > .esquema__nodo:last-child::before { right: 50%; }
.esquema__hijos > .esquema__nodo::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--k-sp-3); background: var(--k-border); }
.esquema__caja { width: 200px; height: 128px; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; background: var(--k-bg-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); color: var(--k-text-primary); font: inherit; cursor: pointer; }
.esquema__caja:hover { border-color: var(--k-accent); }
.esquema__caja--raiz { background: var(--k-bg-surface-raised, var(--k-bg-surface)); }
.esquema__caja--pedido { border-color: var(--k-warning-border); }
.esquema__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esquema__quien { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.esquema__presu { font-family: var(--k-font-data); font-size: var(--k-fs-micro); color: var(--k-text-primary); font-variant-numeric: tabular-nums; }
.esquema__uso { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: var(--k-fs-micro); color: var(--k-text-secondary); font-variant-numeric: tabular-nums; }
.esquema__libre { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); font-variant-numeric: tabular-nums; }
.esquema__pista { flex: 1; display: flex; height: 6px; border-radius: var(--k-radius-pill); background: var(--k-bg-sunken); overflow: hidden; }
.esquema__pista > span { display: block; height: 100%; }
.dialogo--nodo { width: min(1080px, calc(100vw - 32px)); }
.nodo__cuerpo { overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.nodo__col { padding: var(--k-sp-5); display: grid; gap: var(--k-sp-5); align-content: start; }
.nodo__col + .nodo__col { border-left: 1px solid var(--k-border-subtle); }
.nodo__seccion { display: grid; gap: var(--k-sp-3); }
.nodo__titulo { margin: 0; font-family: var(--k-font-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--k-text-tertiary); font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.nodo__nota { text-transform: none; letter-spacing: 0; font-family: var(--k-font-ui); }
.nodo__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-sp-3); }
.nodo__presupuesto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--k-sp-3); }
.nodo__obligatorio { color: var(--k-warning); }
.nodo__adentro { display: grid; grid-template-columns: 1fr auto auto; gap: 6px var(--k-sp-3); font-variant-numeric: tabular-nums; }
.nodo__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nodo__simulador { padding: var(--k-sp-4); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); background: var(--k-bg-sunken); }
.nodo__motivos { margin: 0; padding-left: 18px; line-height: 1.6; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.nodo__pedido { padding: var(--k-sp-4); border: 1px solid var(--k-warning-border); border-radius: var(--k-radius-lg); }
.nodo__acciones { display: flex; justify-content: flex-end; gap: var(--k-sp-2); }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--k-radius-pill); border: 1px solid var(--k-border); background: transparent; color: var(--k-text-secondary); font: inherit; font-size: var(--k-fs-small); cursor: pointer; }
.chip--activo { border-color: var(--k-accent); background: var(--k-accent-bg); color: var(--k-accent-text, var(--k-text-primary)); }
.consecuencia-chica { font-size: var(--k-fs-small); color: var(--k-text-secondary); display: flex; gap: var(--k-sp-2); align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .nodo__cuerpo { grid-template-columns: minmax(0, 1fr); } .nodo__col + .nodo__col { border-left: 0; border-top: 1px solid var(--k-border-subtle); } }
.nodo__sim-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-sp-2); }
.nodo__sim-cifras > div { display: grid; gap: 2px; }
.nodo__sim-cifras strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.nodo__sim-aviso { color: var(--k-warning); }
.nodo__sim-freno { color: var(--k-danger); }
/* El esquema se centra si entra; si no, arranca desde la izquierda y se desplaza (centrar con
   overflow cortaría el borde izquierdo). */
.esquema > .esquema__nodo { width: max-content; margin: 0 auto; }

/* ── Reglas heredadas (2026-10-14) ──
   Cada campo de política dice qué nivel de arriba pone el tope y que acá solo se puede bajar. */
.regla-heredada { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); line-height: 1.4; }
.regla-heredada--error { color: var(--k-danger); }
.bloque--error .campo { border-color: var(--k-danger); }
.chip--bloqueado:not(.chip--activo) { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.chip--bloqueado.chip--activo { border-color: var(--k-danger); }

/* Subproyectos dentro del detalle de un proyecto. */
.subproyectos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--k-sp-3); }
.subproyecto { display: grid; gap: var(--k-sp-2); padding: var(--k-sp-3); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-md); color: inherit; text-decoration: none; }
.subproyecto:hover { border-color: var(--k-accent); }
button.subproyecto { font: inherit; text-align: left; background: var(--k-bg-surface); cursor: pointer; }
.subproyecto__nombre { display: flex; align-items: center; gap: var(--k-sp-2); font-weight: 600; }

/* Políticas: el mapa de todas las reglas, en el orden del organigrama. */
.mapa-reglas { list-style: none; margin: 0; padding: 0; }
.mapa-reglas__fila { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr) 170px auto; gap: var(--k-sp-3); align-items: center; padding: var(--k-sp-3) var(--k-sp-4); border-top: 1px solid var(--k-border-subtle); }
.mapa-reglas__fila:first-child { border-top: 0; }
.mapa-reglas__fila--hereda .mapa-reglas__nombre { color: var(--k-text-secondary); font-weight: 400; }
.mapa-reglas__quien { display: flex; align-items: center; gap: var(--k-sp-2); min-width: 0; }
.mapa-reglas__nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-reglas__reglas { display: flex; flex-wrap: wrap; gap: var(--k-sp-1, 4px) var(--k-sp-2); }
.mapa-reglas__regla { font-size: var(--k-fs-small); padding: 2px 8px; border-radius: var(--k-radius-pill); background: var(--k-bg-subtle, var(--k-bg-surface)); border: 1px solid var(--k-border-subtle); }
.mapa-reglas__regla > span { color: var(--k-text-tertiary); }
.mapa-reglas__cuando { text-align: right; }
@media (max-width: 900px) {
  .mapa-reglas__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .mapa-reglas__reglas, .mapa-reglas__cuando { grid-column: 1 / -1; text-align: left; }
}

/* Grilla de campos del popup del organigrama y del panel de tarea: cada celda arranca arriba (no se
   estira) y los campos de política comparten las filas del padre (subgrid) para que el campo de
   una columna quede a la altura del de la otra, tenga o no aclaración debajo. */
.nodo__grilla { align-items: start; }
.nodo__grilla > .bloque { align-content: start; gap: 6px; min-width: 0; }
/* Los campos no pueden ser más anchos que su columna (un select con un nombre largo se metía en la
   columna de la política). */
.nodo__grilla > .bloque > .campo, .nodo__grilla > .bloque > .selector { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.nodo__grilla > .campo-regla { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; margin-bottom: var(--k-sp-2); }
.campo-regla > .bloque__titulo { align-self: end; }
.campo-regla > .regla-heredada:empty { display: none; }
.reglas-heredadas { display: contents; }
/* En el panel de tarea los campos llevan el rótulo de los demás campos del panel, no el de sección. */
.panel .reglas-heredadas .bloque__titulo { font-size: var(--k-fs-small); text-transform: none; letter-spacing: normal; color: var(--k-text-primary); font-weight: 400; }

/* Organigrama con "Solo lo que tengo a cargo": los niveles de arriba se ven, pero apagados. */
.organigrama__contexto td { opacity: .55; }
.organigrama__contexto:hover td { opacity: .85; }

/* Dinero de la empresa (arriba del Organigrama). */
.dinero-empresa { padding: var(--k-sp-4); display: grid; gap: var(--k-sp-3); }
.dinero-empresa__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-sp-3); }
.dinero-empresa__rotulo { font-weight: 600; margin-bottom: var(--k-sp-1, 4px); }

/* Mi presupuesto: tarjetas de lo que tengo a cargo. */
.mis-cargos { display: grid; gap: var(--k-sp-3); }
.mis-cargos__titulo { margin: 0; font-size: var(--k-fs-section); display: flex; align-items: center; gap: var(--k-sp-2); }
.mis-cargos__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--k-grid-gap); }
.cargo { display: grid; gap: var(--k-sp-2); align-content: start; padding: var(--k-sp-4); text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.cargo:hover { border-color: var(--k-accent); }
.cargo:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.cargo__cabecera { display: flex; align-items: center; gap: var(--k-sp-2); min-width: 0; }
.cargo__nombre { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo__cifra { display: flex; align-items: baseline; gap: var(--k-sp-2); }
.cargo__cifra strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.cargo__pie { display: flex; justify-content: space-between; gap: var(--k-sp-2); font-size: var(--k-fs-small); color: var(--k-text-secondary); }

/* Presupuesto personal (Mi presupuesto): compacto, con lo que se pide y la clave detrás de un botón. */
.cupo { padding: var(--k-sp-4); display: grid; gap: var(--k-sp-3); }
.cupo--vacio { display: flex; align-items: center; gap: var(--k-sp-2); flex-wrap: wrap; padding: var(--k-sp-3) var(--k-sp-4); }
.cupo__cabecera { display: flex; align-items: center; gap: var(--k-sp-2); flex-wrap: wrap; }
.cupo__origen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cupo__cifras { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-sp-3); flex-wrap: wrap; }
.cupo__grande { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cupo__pedido { display: grid; gap: var(--k-sp-2); padding: var(--k-sp-3); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-md); }
.cupo__campos { display: flex; gap: var(--k-sp-3); flex-wrap: wrap; align-items: end; }
.cupo__acciones { display: flex; justify-content: flex-end; gap: var(--k-sp-2); }
.cupo__historial { display: grid; gap: var(--k-sp-2); }
.pedido-fila { display: grid; gap: 2px; padding: var(--k-sp-2) 0; border-top: 1px solid var(--k-border-subtle); }
.pedido-fila__linea { display: flex; align-items: center; gap: var(--k-sp-2); flex-wrap: wrap; }
.pedido-fila__respuesta { font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.pedido-motivo { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Popup de un pedido de plata (Aprobaciones): detalle, decisión e historial. */
.dialogo--pedido { width: min(640px, calc(100vw - 32px)); }
.dialogo--pedido .dialogo__cuerpo { display: grid; gap: var(--k-sp-4); }
.pedido-decision { display: grid; gap: var(--k-sp-3); padding: var(--k-sp-3); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-md); }
.pedido-decision__campos { display: flex; gap: var(--k-sp-3); flex-wrap: wrap; align-items: end; }
.pedido-bitacora { list-style: none; margin: var(--k-sp-2) 0 0; padding: 0; display: grid; gap: var(--k-sp-3); }
.pedido-bitacora > li { display: grid; grid-template-columns: 12px 1fr; gap: var(--k-sp-2); align-items: start; font-size: var(--k-fs-small); }
.pedido-bitacora__punto { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: var(--k-text-tertiary); }
.pedido-bitacora__punto--info { background: var(--k-info); }
.pedido-bitacora__punto--ok { background: var(--k-success); }
.pedido-bitacora__punto--peligro { background: var(--k-danger); }
.pedido-bitacora__nota { font-style: italic; color: var(--k-text-secondary); margin-top: 2px; }

/* El detalle de una consulta sobre el umbral es un popup centrado, como el de los pedidos. */
.dialogo--aprobacion { width: min(640px, calc(100vw - 32px)); }
.dialogo .panel__cuerpo { min-height: 0; }
.aprobaciones__filtros { flex-wrap: wrap; gap: var(--k-sp-3); }
.aprobaciones__filtros .segmentado button { display: inline-flex; align-items: center; gap: 6px; }

/* Popup "¿Qué pasa si nadie decide a tiempo?" (Aprobaciones): los pasos del escalamiento. */
.dialogo--escalamiento { width: min(560px, calc(100vw - 32px)); }
.escalera { margin: 0; padding-left: var(--k-sp-5); display: grid; gap: var(--k-sp-2); }
.escalera li { padding-left: var(--k-sp-1, 4px); }
.escalera li::marker { color: var(--k-accent); font-weight: 600; }
.escalera--apagado { color: var(--k-text-tertiary); text-decoration: line-through; }

/* ── Detalle de agente o persona, proyecto o tarea: popup central con pestañas (PanelAgente, PanelProyecto, PanelTarea) ──
   Sin transform para centrar: así las confirmaciones (position:fixed) cubren toda la pantalla. */
.ficha-titular {
    position: fixed; z-index: var(--k-z-overlay); inset: 0; margin: auto;
    width: min(1040px, calc(100vw - 32px)); height: min(800px, calc(100vh - 48px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--k-bg-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);
    animation: ficha-abrir var(--k-dur) var(--k-ease);
}
@keyframes ficha-abrir { from { transform: scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ficha-titular { animation: none; } }

.ficha-titular__cabecera {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px) auto;
    align-items: center; gap: var(--k-sp-4);
    padding: var(--k-sp-5) var(--k-sp-5) var(--k-sp-4);
}
.ficha-titular__avatar {
    width: 48px; height: 48px; border-radius: var(--k-radius-lg);
    display: grid; place-items: center;
    background: var(--k-bg-sunken); color: var(--k-text-secondary); border: 1px solid var(--k-border-subtle);
}
.ficha-titular__avatar--person { background: var(--k-accent-bg); color: var(--k-accent-text); border-color: transparent; }
.ficha-titular__quien { min-width: 0; display: grid; gap: 6px; }
.ficha-titular__quien h2 { margin: 0; font-size: var(--k-fs-title, 20px); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-titular__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.ficha-titular__cerrar { align-self: start; }

/* El medidor del mes: lo primero que se viene a mirar, visible en todas las pestañas. */
.medidor {
    display: grid; gap: 6px; padding: var(--k-sp-3) var(--k-sp-4);
    background: var(--k-bg-sunken); border-radius: var(--k-radius-lg);
}
.medidor__cifra { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.medidor__cifra strong { font-size: 22px; letter-spacing: -.01em; font-weight: 600; color: var(--k-text-primary); }
.medidor__cifra span { font-size: var(--k-fs-small); color: var(--k-text-tertiary); }
.medidor__pie { display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-micro); color: var(--k-text-secondary); font-variant-numeric: tabular-nums; }

.ficha-titular__pestanas { margin: 0; padding: 0 var(--k-sp-4); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.ficha-titular__pestanas .pestana { white-space: nowrap; }
.ficha-titular__cuerpo {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: var(--k-sp-5); display: grid; gap: var(--k-sp-4); align-content: start;
    background: var(--k-bg-canvas);
}
.ficha-titular__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--k-sp-4); align-items: start; }
/* Una columna de la grilla con varias secciones apiladas: así una sección corta no deja un hueco al lado de una larga. */
.ficha-titular__columna { display: grid; gap: var(--k-sp-4); align-content: start; min-width: 0; }
.ficha-titular__clave { font-family: var(--k-font-data); }
.ficha-titular__acciones-clave { display: flex; flex-wrap: wrap; gap: var(--k-sp-2); }
.ficha-titular__pie {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-3);
    padding: var(--k-sp-3) var(--k-sp-5); border-top: 1px solid var(--k-border-subtle); background: var(--k-bg-surface);
}

/* Sección de lectura con edición aparte (SeccionEditable). */
.seccion {
    display: grid; gap: var(--k-sp-3); align-content: start;
    padding: var(--k-sp-4) var(--k-sp-5) var(--k-sp-5);
    background: var(--k-bg-surface); border: 1px solid var(--k-border-subtle); border-radius: var(--k-radius-lg);
    transition: border-color var(--k-dur-fast) var(--k-ease);
}
.seccion--editando { border-color: var(--k-accent); box-shadow: inset 3px 0 0 var(--k-accent); }
.seccion__cabecera { display: flex; align-items: center; gap: var(--k-sp-2); min-height: 28px; }
.seccion__titulo { margin: 0; flex: 1; display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-body); font-weight: 600; color: var(--k-text-primary); }
.seccion__editar { color: var(--k-text-secondary); }
.seccion__editar:hover:not(:disabled) { color: var(--k-accent-text); }
.seccion__modo { font-size: var(--k-fs-micro); color: var(--k-accent-text); background: var(--k-accent-bg); padding: 2px 8px; border-radius: var(--k-radius-pill); }
.seccion__vista, .seccion__edicion { display: grid; gap: var(--k-sp-3); }
.seccion__texto { margin: 0; font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.55; }
.seccion__acciones { display: flex; justify-content: flex-end; gap: var(--k-sp-2); padding-top: var(--k-sp-2); border-top: 1px solid var(--k-border-subtle); }
.seccion__hecho { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-small); color: var(--k-success); }
.seccion .segmentado { justify-self: start; }

/* Confirmación sobre un popup. */
.velo--confirmacion { z-index: calc(var(--k-z-overlay) + 10); }
.velo--sobre-ficha { z-index: calc(var(--k-z-overlay) + 1); }
.dialogo--politica { z-index: calc(var(--k-z-overlay) + 2); width: min(760px, calc(100vw - 32px)); }
.confirmacion {
    position: fixed; z-index: calc(var(--k-z-overlay) + 11); inset: 0; margin: auto; height: fit-content;
    width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
    display: grid; gap: var(--k-sp-4); padding: var(--k-sp-5);
    background: var(--k-bg-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);
    animation: ficha-abrir var(--k-dur-fast, 120ms) var(--k-ease);
}
.confirmacion__titulo { margin: 0; display: flex; align-items: center; gap: var(--k-sp-2); font-size: var(--k-fs-section); font-weight: 600; }
.confirmacion__titulo svg { color: var(--k-danger); flex-shrink: 0; }
.confirmacion__pie { display: flex; justify-content: flex-end; gap: var(--k-sp-2); }
.cambios { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--k-sp-2) var(--k-sp-4); font-size: var(--k-fs-small); }
.cambios dt { color: var(--k-text-tertiary); }
.cambios dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cambios__antes { color: var(--k-text-tertiary); text-decoration: line-through; text-decoration-color: var(--k-border); }
.cambios dd svg { color: var(--k-text-tertiary); }

@media (max-width: 720px) {
    .ficha-titular { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
    .ficha-titular__cabecera { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--k-sp-4); }
    .ficha-titular__cabecera .medidor { grid-column: 1 / -1; grid-row: 2; }
    .ficha-titular__cuerpo { padding: var(--k-sp-3); }
    .ficha-titular__grilla { grid-template-columns: minmax(0, 1fr); }
    .seccion { padding: var(--k-sp-4); }
}
@media print { .ficha-titular, .confirmacion { display: none !important; } }
.seccion p.sello { display: block; line-height: 1.5; }
.seccion p.sello svg { vertical-align: -2px; }
.confirmacion { background: var(--k-bg-raised); border-color: var(--k-border-strong, var(--k-border)); }
.actividad { display: grid; }
.actividad__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--k-sp-3); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--k-border-subtle); font-size: var(--k-fs-small); }
.actividad__fila:last-child { border-bottom: 0; }
.actividad__que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text-primary); }
.actividad__cuando { color: var(--k-text-tertiary); font-size: var(--k-fs-micro); }
.actividad__fila .num { font-variant-numeric: tabular-nums; }
.datos__quien { color: var(--k-text-tertiary); margin-left: 4px; }
.datos__vacio { color: var(--k-text-tertiary); }

/* Alta de una tarea: el mismo popup, angosto y del alto de su formulario (no hay nada que mostrar todavía). */
.ficha-titular--alta { width: min(640px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 48px); }
.ficha-titular--alta .ficha-titular__cabecera { grid-template-columns: auto minmax(0, 1fr) auto; }

/* Mini simulador de saldo (SimuladorSaldo): ritmo editable → falta o sobra, con la sugerencia a un clic. */
.simulador { display: grid; gap: var(--k-sp-3); padding: var(--k-sp-3) var(--k-sp-4); background: var(--k-bg-sunken); border-radius: var(--k-radius-lg); }
.simulador__ritmo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-2) var(--k-sp-3); font-size: var(--k-fs-small); }
.simulador__ritmo label { color: var(--k-text-tertiary); }
.simulador__campo { display: inline-flex; align-items: center; gap: 6px; color: var(--k-text-tertiary); }
.simulador__campo .campo { width: 96px; padding-block: 4px; }
.simulador__resultado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-sp-2); }
.simulador__cifra { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k-text-primary); }
.simulador__cifra--falta { color: var(--k-danger); }
.simulador__cifra--sobra { color: var(--k-success); }
.simulador__resultado .boton { margin-left: auto; }
.simulador__aviso { flex-basis: 100%; margin: 0; font-size: var(--k-fs-micro); color: var(--k-danger); }

/* Estado de la reserva del mes: verde si está disponible, rojo si ya se usó. */
.reserva-estado { font-size: var(--k-fs-micro); font-weight: 600; margin-left: 4px; }
.reserva-estado--libre { color: var(--k-success); }
.reserva-estado--usada { color: var(--k-danger); }

/* Pestaña Seguridad: las acciones que no tienen vuelta atrás, lejos de cerrar/aceptar. */
.zona-acciones { display: grid; gap: 0; }
.zona-acciones__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--k-sp-3); align-items: center; padding: var(--k-sp-3) 0; border-bottom: 1px solid var(--k-border-subtle); }
.zona-acciones__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.zona-acciones__fila:first-child { padding-top: 0; }
.zona-acciones__que { display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-small); font-weight: 600; color: var(--k-text-primary); }
.zona-acciones__detalle { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.seccion--peligro { border-color: color-mix(in srgb, var(--k-danger) 35%, var(--k-border-subtle)); }
.boton--borde-peligro { color: var(--k-danger); }

/* Lo que sale de la caja de un nivel y queda en manos de sus agentes y personas. */
.presu--titulares { background: #f7c97e; }

/* Historial de cambios (pestaña Seguridad): una línea de tiempo simple, lo último arriba. */
.historial { list-style: none; margin: 0; padding: 0; display: grid; }
.historial__fila { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--k-sp-3); padding: 8px 0; border-bottom: 1px solid var(--k-border-subtle); font-size: var(--k-fs-small); }
.historial__fila:last-child { border-bottom: 0; }
.historial__punto { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--k-accent); }
.historial__punto--auto { background: var(--k-border); }
.historial__que { display: grid; gap: 2px; min-width: 0; color: var(--k-text-primary); font-variant-numeric: tabular-nums; }
.historial__motivo { color: var(--k-text-secondary); font-style: italic; }
.historial__quien { font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.historial__filtro { display: inline-flex; align-items: center; gap: 6px; font-size: var(--k-fs-micro); color: var(--k-text-secondary); cursor: pointer; }
.ficha-titular__ancho { grid-column: 1 / -1; }

/* Pestaña General del titular: filas de dos tarjetas con la MISMA altura (Estilo apple: simétrico). */
.ficha-titular__filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-sp-4); align-items: stretch; }
.ficha-celda { display: grid; min-width: 0; }
.ficha-celda > .seccion { height: 100%; align-content: start; }
.ficha-celda:empty { display: none; }
.ficha-celda--ancha { grid-column: 1 / -1; }
@media (max-width: 720px) { .ficha-titular__filas { grid-template-columns: minmax(0, 1fr); } }

/* Pestaña Políticas del titular (TablaPoliticas): simulador arriba y la tabla editable en el lugar. */
.politicas-sim__barra { height: 12px; }
.politicas-sim__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-sp-3); font-size: var(--k-fs-small); }
.politicas-sim__cifras > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.politicas-sim__cifras i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; align-self: center; }
.politicas-sim__cifras strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k-text-primary); }
.politicas-sim__cifras .sello { flex-basis: 100%; }
.politicas-tabla td, .politicas-tabla th { vertical-align: middle; }
.politicas-tabla__consumo { color: var(--k-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.politicas-tabla th.politicas-tabla__consumo { white-space: nowrap; }
.politicas-tabla__editar { background: var(--k-accent-bg); padding-block: 4px !important; }
.politicas-tabla__editar .campo { width: 100%; min-width: 110px; padding-block: 4px; }
.politicas-tabla__check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--k-fs-small); cursor: pointer; }
@media (max-width: 720px) { .politicas-sim__cifras { grid-template-columns: minmax(0, 1fr); } }
.politicas-tabla__reserva { display: flex; gap: 6px; align-items: center; }
.politicas-tabla__reserva .selector { width: auto; padding-block: 4px; }
.politicas-tabla__reserva .campo { min-width: 80px; }