/*
  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: el lineamiento pide 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). Los archivos
  todavía no están en el repo, así que los tokens caen a la pila de respaldo del sistema.
  Cuando lleguen, se agregan @font-face acá y no cambia nada más.
*/

*, *::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; }

/* 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 {
    height: var(--k-navbar-h);
    display: flex; align-items: center; gap: var(--k-sp-2);
    padding: 0 var(--k-sp-4);
    font-weight: 600;
    letter-spacing: var(--k-tracking-title);
    border-bottom: 1px solid var(--k-border-subtle);
}
.nav__marca .punto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--k-accent);
}
.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);
}

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

.contenido {
    padding: var(--k-sp-5) var(--k-content-pad-x) var(--k-sp-10);
    max-width: var(--k-content-max);
    width: 100%;
}

/* ─────────────────────────── 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-family: var(--k-font-data); font-size: var(--k-fs-data); }
.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 .traza { font-family: var(--k-font-data); font-size: var(--k-fs-micro); color: var(--k-text-tertiary); }
.franja .separador { flex: 1; }

.sello {
    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-family: var(--k-font-data); font-size: var(--k-fs-data); }
.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; }
.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 { display: none; }
    .nav__item { justify-content: center; }
    .campo--busqueda { width: 100%; }
    .filtros { gap: var(--k-sp-2); }
    .contenido, .cabecera { padding-left: var(--k-sp-4); padding-right: var(--k-sp-4); }
}

/* ─────────────────────────── 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-data); 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-data);
    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-data);
    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); }
.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-data);
    font-size: var(--k-fs-data);
    color: var(--k-text-primary);
    text-align: right;
}
details summary::-webkit-details-marker { color: var(--k-text-tertiary); }