/*
  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;
}
.nav__marca {
    min-height: var(--k-navbar-h);
    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); }
.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-pageheader-h);
    padding: var(--k-sp-5) var(--k-content-pad-x) var(--k-sp-4);
    display: flex; align-items: flex-start; 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);
    max-width: var(--k-content-max);
    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); }
}

/* ── 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. */
.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; }
}

/* 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); }

/* ── 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: 440px; height: clamp(440px, calc(100vh - 290px), 760px);
    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; }
.envivo__leyenda {
    position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 11.5px; color: #9ca1a7; pointer-events: none;
}
.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; }
.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; max-height: clamp(440px, calc(100vh - 290px), 760px); display: flex; flex-direction: column;
}
.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__lista { max-height: 360px; }
}
@media (max-width: 768px) {
    .envivo__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .envivo__escena { height: 600px; }
    .envivo__leyenda { display: none; }
}

/* ─────────────────────────── 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; }

.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); }
.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; }