/* --------------------------------------------------------------------------
   Identidad visual institucional.

   Los tokens de este bloque son la única fuente de color del producto: azul
   policial, gris plata, dorado institucional y negro táctico. Los nombres
   heredados (--cian, --abismo, --ambar...) siguen existiendo y se resuelven
   sobre esos tokens, de modo que las hojas y plantillas que ya los usan
   cambian de piel sin tocar marcado ni selectores.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Azul policial / naval */
  --navy-950: #05101f;
  --navy-900: #0a192f;
  --navy-800: #12243d;
  --navy-700: #1b365d;
  --navy-600: #24466f;

  /* Negro táctico */
  --tactical-black: #111827;
  --tactical-black-pure: #000000;

  /* Superficies */
  --surface-primary: #0a192f;
  --surface-secondary: #0c1c31;
  --surface-sunken: #071324;
  --surface-raised: #12243d;

  /* Dorado institucional: reservado a acción principal, foco y jerarquía */
  --institutional-gold: #c5a059;
  --institutional-gold-light: #d4af37;
  --institutional-gold-soft: rgba(197, 160, 89, 0.12);
  --institutional-gold-line: rgba(197, 160, 89, 0.38);

  /* Gris plata / técnico */
  --silver: #8a95a5;
  --silver-light: #d1d5db;
  --silver-dim: #6a7788;

  /* Texto */
  --text-primary: #e6ecf3;
  --text-secondary: #8a95a5;
  --text-strong: #ffffff;

  /* Bordes: siempre 1px, siempre discretos */
  --border-primary: #1d3151;
  --border-subtle: #15263e;
  --border-strong: #2b4571;

  /* Estados */
  --state-info: #86a5cd;
  --state-ok: #4f9e85;
  --state-warn: #d3a03c;
  --state-danger: #a8402d;

  /* Sombras suaves, sin resplandor */
  --sombra-1: 0 1px 2px rgba(2, 7, 15, 0.4);
  --sombra-2: 0 6px 18px rgba(2, 7, 15, 0.42);
  --sombra-3: 0 18px 44px rgba(2, 7, 15, 0.55);

  /* Escala de espaciado */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e6: 24px;
  --e8: 32px;
  --e12: 48px;

  /* Nombres heredados, resueltos sobre los tokens institucionales */
  --abismo: var(--navy-950);
  --carbon: var(--surface-primary);
  --acero: var(--navy-700);
  --cian: var(--state-info);
  --cian-dim: var(--border-strong);
  --ambar: var(--state-warn);
  --humo: var(--text-secondary);
  --niebla: var(--silver-light);
  --tinta: var(--text-primary);
  --linea: var(--border-primary);
  --ok: var(--state-ok);
  --alerta: var(--state-danger);
  --superficie: var(--surface-secondary);
  --caja: var(--surface-raised);
  --lateral-fondo: #071120;
  --barra-fondo: rgba(7, 17, 32, 0.9);
  --texto-fuerte: var(--text-strong);
  --banner-1: #0d1f38;
  --banner-2: #050e1b;

  /* Gráficas: misma semántica que chart_tema.js (variante oscura). */
  --chart-azul-osc: #2F6F9F;
  --chart-azul: #5793BC;
  --chart-destaque: #7FC4EC;
  --chart-hallazgo: #3FA3B5;

  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", monospace;
  --max: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  /* Trama técnica muy tenue: da profundidad sin decorar de más. */
  background-color: var(--abismo);
  background-image:
    radial-gradient(120% 90% at 100% -10%, rgba(27, 54, 93, 0.34), transparent 58%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.55) 0%, transparent 34%);
  background-attachment: fixed;
  color: var(--tinta);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--cian); text-underline-offset: 2px; }
a:hover { color: var(--institutional-gold-light); }
.mono { font-family: var(--mono); }

:focus-visible {
  outline: 1px solid var(--institutional-gold);
  outline-offset: 2px;
}

::selection {
  background: rgba(27, 54, 93, 0.85);
  color: var(--text-strong);
}

.banda {
  background: var(--tactical-black-pure);
  color: var(--silver);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-align: center;
  padding: 6px 12px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--institutional-gold-line);
}

.meta-obj {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo);
  flex: 0 0 auto;
  padding-right: var(--e3);
  border-right: 1px solid var(--border-subtle);
}
.meta-obj b {
  color: var(--tinta);
  font-family: var(--mono);
  display: block;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
}
#operadorTop { display: block; color: var(--silver); margin-top: 2px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }

.ficha-cia {
  margin-top: var(--e3);
  border: 1px solid var(--border-primary);
  border-left: 2px solid var(--institutional-gold-line);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: var(--e3) var(--e4);
  font-size: 12px;
  color: var(--niebla);
}
.ficha-cia b { color: var(--institutional-gold); }

.btn-acento {
  display: inline-block;
  text-decoration: none;
  background: var(--institutional-gold-soft);
  color: var(--institutional-gold-light);
  border: 1px solid var(--institutional-gold-line);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-acento:hover {
  background: rgba(197, 160, 89, 0.2);
  border-color: var(--institutional-gold);
  color: var(--institutional-gold-light);
}

.drop {
  display: block;
  margin-top: var(--e4);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18, 36, 61, 0.55), rgba(12, 28, 49, 0.35));
  padding: var(--e8) var(--e4);
  text-align: center;
  color: var(--humo);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.drop:hover {
  border-color: var(--institutional-gold-line);
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.5), rgba(12, 28, 49, 0.4));
  color: var(--niebla);
}
.drop.sobre {
  border-color: var(--institutional-gold);
  border-style: solid;
  color: var(--institutional-gold-light);
  box-shadow: inset 0 0 0 1px var(--institutional-gold-soft);
}
.drop b {
  color: var(--tinta);
  display: block;
  margin-bottom: var(--e2);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.drop.sobre b { color: var(--institutional-gold-light); }
.drop-foto { margin-top: var(--e3); padding: var(--e4); }
.drop-foto b { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver-light); }

.ficha-titular { display: flex; gap: var(--e4); align-items: flex-start; }
#fotoTitular {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: 1px solid var(--institutional-gold-line);
  border-radius: 4px;
  background: var(--superficie);
  flex: 0 0 76px;
}

.minifoto {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  background: var(--superficie);
}
.seleccion .foto-ok { color: var(--institutional-gold); flex: 0 0 auto; }
.seleccion .adjuntar {
  background: none;
  border: 1px solid var(--linea);
  border-radius: 6px;
  color: var(--niebla);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.seleccion .adjuntar:hover {
  border-color: var(--institutional-gold-line);
  color: var(--institutional-gold-light);
  background: var(--institutional-gold-soft);
}

/* Sistema de botones: principal dorado, secundario azul, ghost y peligro. */
.btn {
  margin-top: var(--e3);
  background: linear-gradient(180deg, var(--institutional-gold-light), var(--institutional-gold));
  color: var(--navy-950);
  border: 1px solid var(--institutional-gold-light);
  border-radius: 8px;
  padding: 10px 18px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}
.btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #e0bd52, var(--institutional-gold-light));
  box-shadow: var(--sombra-2);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--sombra-1); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Secundario: azul institucional. */
.btn-azul,
.btn.secundario {
  background: var(--navy-700);
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn-azul:hover:not(:disabled),
.btn.secundario:hover:not(:disabled) {
  background: var(--navy-600);
  border-color: var(--institutional-gold-line);
}

/* Peligro: rojo oscuro, solo donde la acción ya lo era. */
.btn-peligro,
.btn.peligro {
  background: transparent;
  color: #d98a78;
  border-color: rgba(168, 64, 45, 0.7);
}
.btn-peligro:hover:not(:disabled),
.btn.peligro:hover:not(:disabled) {
  background: rgba(168, 64, 45, 0.16);
  border-color: var(--state-danger);
  color: #e7a493;
}

.progreso { margin-top: var(--e4); }
.barra {
  height: 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--linea);
  overflow: hidden;
  border-radius: 4px;
}
.barra > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--navy-600), var(--institutional-gold));
  transition: width 0.35s linear;
}
.progreso .meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--niebla);
}
.progreso .eta { color: var(--ambar); }
.log {
  margin: var(--e3) 0 0;
  max-height: 140px;
  overflow: auto;
  background: var(--surface-sunken);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: var(--e3);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--humo);
  white-space: pre-wrap;
}
.pasos { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12px; color: var(--humo); }
.pasos li { padding: 3px 0; }
.pasos li.hecho { color: var(--ok); }
.pasos li.ahora { color: var(--cian); }
.pasos li.error { color: var(--alerta); }

.entregables { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.entregables a {
  text-decoration: none;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--niebla);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 11px;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.entregables a:hover {
  border-color: var(--institutional-gold-line);
  background: var(--navy-700);
  color: var(--institutional-gold-light);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--e2);
}
.kpi {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-top: 2px solid var(--chart-azul-osc);
  border-radius: 6px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--e1);
  padding: var(--e3) var(--e3) var(--e3);
  box-shadow: var(--sombra-1);
}
.kpi .n {
  font-size: 26px;
  font-weight: 700;
  color: var(--texto-fuerte);
  font-family: var(--mono);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.kpi .l {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.07em;
  color: var(--humo);
  text-transform: uppercase;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--e3);
  margin-top: var(--e3);
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--e3);
  margin-top: var(--e3);
}

.card {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  padding: var(--e4);
  border-radius: 10px;
  box-shadow: var(--sombra-1);
}
.card h2 {
  margin: 0 0 var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--institutional-gold);
  font-weight: 700;
  text-transform: uppercase;
}
.card h3 {
  margin: 0 0 var(--e2);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--niebla);
  font-weight: 600;
  text-transform: uppercase;
}
.card p, .brief li { font-size: 13px; line-height: 1.6; color: var(--niebla); }
.brief { margin: 0; padding-left: 18px; }
.muted { color: var(--humo); font-size: 11px; }

table.ordenable th { cursor: pointer; user-select: none; }
table.ordenable th:hover { color: var(--institutional-gold-light); }
table.ordenable th .ord { color: var(--institutional-gold); }

.chart { height: 248px; position: relative; }
.chart-lg { height: 300px; position: relative; }
.chart-pico {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  max-width: 58%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--chart-destaque);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 5px 9px;
  pointer-events: none;
}

.heat {
  display: grid;
  grid-template-columns: 46px repeat(var(--heat-cols, 24), 1fr);
  gap: 3px;
  overflow-x: auto;
  font-size: 11px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.heat .h, .heat .d { color: var(--humo); text-align: center; padding: 3px 0; }
.heat .d { text-align: right; padding-right: 8px; }
.cell {
  height: 24px;
  border-radius: 2px;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  transition: outline-color 0.12s ease;
  outline: 1px solid transparent;
}
.cell:hover { outline-color: var(--chart-azul); }

/* Leyenda de intensidad del heatmap: sin ella el gradiente no se interpreta. */
.heat-escala {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--e3);
  flex-wrap: wrap;
}
.heat-escala i {
  width: 30px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid var(--border-subtle);
}
.heat-escala-txt {
  font-size: 11px;
  color: var(--humo);
}
.heat-escala-txt:first-child { margin-right: 2px; }
.heat-escala-txt:last-child { margin-left: 2px; }
#mapa { height: 520px; background: var(--surface-sunken); border: 1px solid var(--linea); border-radius: 8px; }
.visor-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.visor-cartografico {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
  align-items: start;
}
.visor-cap {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--institutional-gold-light);
}
.visor-mymaps {
  width: 100%;
  height: 520px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--surface-sunken);
}
.visor-vacio {
  min-height: 220px;
  padding: var(--e4);
  border: 1px dashed var(--linea);
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--niebla);
}
.visor-vacio p + p { margin-top: 8px; }
.visor-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.visor-qr-bloque {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
}
.visor-qr-bloque.oculto,
.visor-mymaps.oculto,
.visor-vacio.oculto { display: none; }
.visor-vincular {
  margin: 0 0 14px;
}
.visor-vincular label {
  display: block;
  font-size: 11px;
  color: var(--humo);
  margin-bottom: 6px;
}
.visor-vincular input {
  width: 100%;
  margin: 4px 0 8px;
}
.visor-leyenda-mapa {
  background: #05101F;
  color: #8A95A5;
  border: 1px solid #2B4571;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  max-width: 180px;
}
.visor-etiq {
  background: #05101F;
  color: #E6ECF3;
  border: 1px solid #86A5CD;
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 10px;
  box-shadow: none;
}
.visor-etiq::before { display: none; }
/* Respaldo OSM si no hay clave de Google Maps Platform. */
.tesela-oscura {
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.65);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th {
  text-align: left;
  background: var(--navy-700);
  color: var(--text-strong);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--e2) var(--e3);
  font-weight: 700;
  border-bottom: 1px solid var(--institutional-gold-line);
}
td {
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--niebla);
}
tr:nth-child(even) td { background: rgba(18, 36, 61, 0.42); }
tbody tr:hover td { background: rgba(27, 54, 93, 0.42); color: var(--tinta); }
.nivel { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.nivel.alta { color: var(--ambar); }
.nivel.media { color: var(--ok); }
.nivel.baja { color: var(--humo); }

.oculto { display: none; }
.carga {
  padding: 80px 20px;
  text-align: center;
  color: var(--humo);
}

.portada .card { margin-bottom: var(--e3); }
.casos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--e2);
  margin-top: var(--e3);
}
.casos .caso {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-left: 2px solid var(--border-strong);
  border-radius: 8px;
  color: var(--niebla);
  font-size: 12px;
  padding: var(--e3) var(--e4);
}
.casos .caso:hover { border-color: var(--border-strong); border-left-color: var(--institutional-gold); }
.casos .caso b {
  color: var(--texto-fuerte);
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* --- Mesa de carga: selección, cola y entregables -------------------- */

/* Cuando el título comparte fila con controles, el filete pasa a la fila:
   así la regla bajo el título mide lo mismo que en las tarjetas simples. */
.titulo-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  padding-bottom: var(--e2);
  margin-bottom: var(--e3);
  border-bottom: 1px solid var(--border-subtle);
}
.titulo-fila h2 {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.buscador {
  background: var(--surface-sunken);
  border: 1px solid var(--linea);
  border-radius: 8px;
  color: var(--tinta);
  font: inherit;
  font-size: 12px;
  padding: var(--e2) var(--e3);
  min-width: 220px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.buscador::placeholder { color: var(--silver-dim); }
.buscador:focus {
  outline: none;
  border-color: var(--institutional-gold);
  box-shadow: 0 0 0 2px var(--institutional-gold-soft);
}

.seleccion { list-style: none; margin: var(--e3) 0 0; padding: 0; }
.seleccion li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  border: 1px solid var(--border-subtle);
  border-bottom: 0;
  background: var(--surface-raised);
  padding: var(--e2) var(--e3);
  font-size: 12px;
  color: var(--niebla);
}
.seleccion li:first-child { border-radius: 8px 8px 0 0; }
.seleccion li:last-child { border-bottom: 1px solid var(--border-subtle); border-radius: 0 0 8px 8px; }
.seleccion li b { color: var(--tinta); font-size: 13px; }
.seleccion li span { flex: 1; color: var(--humo); }
.seleccion li .detalle { flex: 1; }
.seleccion li .barra-mini { flex: 0 0 90px; }
.seleccion li .pct { flex: 0 0 auto; color: var(--niebla); }
.seleccion li.error { border-color: rgba(221, 106, 75, 0.5); }
.seleccion li.error b,
.seleccion li.error span { color: var(--alerta); }
.seleccion li.ok .detalle { color: var(--ok); }
.seleccion .quitar {
  background: none;
  border: 0;
  color: var(--humo);
  font: inherit;
  cursor: pointer;
  padding: 0 4px;
}
.seleccion .quitar:hover { color: var(--alerta); }

.fila-botones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

/* Ghost: transparente, plata, sin peso visual frente a la acción principal. */
.btn-plano {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--niebla);
  box-shadow: none;
}
.btn-plano:hover:not(:disabled) {
  background: rgba(27, 54, 93, 0.42);
  border-color: var(--institutional-gold-line);
  color: var(--institutional-gold-light);
  box-shadow: none;
}

.aviso-carga {
  margin: var(--e3) 0 0;
  padding: var(--e2) var(--e3);
  border-left: 2px solid var(--institutional-gold-line);
  background: var(--institutional-gold-soft);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--ambar);
}

.lote { margin-top: var(--e3); }
.lote .meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--niebla);
}

.barra-mini {
  flex: 0 0 90px;
  height: 5px;
  background: var(--surface-sunken);
  border: 1px solid var(--linea);
  border-radius: 3px;
  overflow: hidden;
}
.barra-mini > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--institutional-gold);
  transition: width 0.3s linear;
}
.barra-mini > i.hecho { background: var(--ok); }
.barra-mini > i.malo { background: var(--alerta); }
.barra-mini.viva > i { animation: pulso-barra 1.6s ease-in-out infinite; }
.barra.barra-viva > i { animation: pulso-barra 1.6s ease-in-out infinite; }

@keyframes pulso-barra {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .barra-mini.viva > i,
  .barra.barra-viva > i { animation: none; }
}

.barra > i.malo { background: var(--alerta); }

/* Espera sin porcentaje conocido: el barrido indica que sigue trabajando. */
.barra-indet { margin-top: 12px; }
.barra-indet > i {
  width: 32%;
  animation: barrido 1.2s ease-in-out infinite;
}

@keyframes barrido {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .barra-indet > i { animation: none; width: 100%; opacity: 0.5; }
}

.lista-cola { margin-top: var(--e3); }
.fila-trabajo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  border: 1px solid var(--border-subtle);
  border-bottom: 0;
  background: var(--surface-raised);
  padding: var(--e3);
  font-size: 12px;
  color: var(--niebla);
}
.fila-trabajo:first-child { border-radius: 8px 8px 0 0; }
.fila-trabajo:last-child { border-bottom: 1px solid var(--border-subtle); border-radius: 0 0 8px 8px; }
.fila-trabajo b { color: var(--texto-fuerte); font-size: 14px; }
.fila-trabajo .detalle { flex: 1; min-width: 140px; color: var(--humo); }
.fila-trabajo .pct { flex: 0 0 auto; color: var(--niebla); }
.fila-trabajo.listo .barra-mini { border-color: var(--ok); }
.fila-trabajo.error .barra-mini { border-color: var(--alerta); }

.badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border-primary);
  border-radius: 3px;
  padding: 3px 8px;
  color: var(--humo);
  background: rgba(7, 19, 36, 0.6);
}
.badge.corriendo { color: var(--cian); border-color: var(--cian-dim); }
.badge.espera_analisis { color: var(--ambar); border-color: var(--ambar); }
.badge.listo { color: var(--ok); border-color: var(--ok); }
.badge.error { color: var(--alerta); border-color: var(--alerta); }
.badge.cancelado { color: var(--ambar); border-color: var(--ambar); }

td .btn-mini { margin-left: 8px; vertical-align: middle; }

.enlaces { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e1); }
.btn-mini {
  text-decoration: none;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: transparent;
  color: var(--niebla);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.btn-mini:hover {
  border-color: var(--institutional-gold-line);
  background: var(--institutional-gold-soft);
  color: var(--institutional-gold-light);
}
.btn-mini.acento { border-color: var(--institutional-gold-line); color: var(--institutional-gold-light); }
.btn-mini.peligro {
  border-color: rgba(168, 64, 45, 0.7);
  color: #d98a78;
}
.btn-mini.peligro:hover:not(:disabled) {
  background: rgba(168, 64, 45, 0.16);
  border-color: var(--state-danger);
  color: #e7a493;
}
.btn-mini:disabled { opacity: 0.5; cursor: progress; }

.caja-error {
  margin-top: var(--e3);
  border: 1px solid rgba(168, 64, 45, 0.55);
  border-left-width: 2px;
  border-left-color: var(--alerta);
  border-radius: 0 8px 8px 0;
  background: rgba(168, 64, 45, 0.1);
  padding: var(--e3) var(--e4);
  font-size: 12px;
  color: var(--niebla);
}
.caja-error b { color: var(--alerta); }
.caja-error p { margin: 6px 0 0; }
.caja-error summary { cursor: pointer; margin-top: 8px; color: var(--humo); font-size: 11px; }
.caja-error pre {
  margin: 6px 0 0;
  max-height: 180px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--humo);
  white-space: pre-wrap;
}

/* --- Sesión, formularios y contabilidad ------------------------------- */

/* El fondo del acceso es una lámina técnica: la imagen va al fondo, encima
   un velo naval que sostiene el contraste y arriba el lienzo animado. */
body.login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--abismo);
  background-image:
    linear-gradient(180deg, rgba(5, 14, 27, 0.52) 0%, rgba(5, 16, 31, 0.3) 45%, rgba(5, 14, 27, 0.62) 100%),
    url("/static/img/bg.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}
.login-fondo {
  position: fixed;
  inset: 22px 0 0;
  width: 100%;
  height: calc(100% - 22px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
}
.login-marco {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 400px);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: var(--e8) 0 var(--e12);
}
/* Viñeta bajo la tarjeta: apaga el mapa justo donde se lee el formulario. */
.login-marco::before {
  content: "";
  position: absolute;
  inset: -8% -18%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 70% at 50% 50%, rgba(3, 10, 20, 0.88), rgba(3, 10, 20, 0.38) 58%, transparent 80%);
}
.login-marco > * { position: relative; z-index: 1; }

.login-manifiesto {
  max-width: 560px;
  padding: 4px 8px 4px 0;
}
.login-logo {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 0 18px;
  display: grid;
  place-items: center;
}
.login-logo-placa {
  position: relative;
  z-index: 2;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: #050d18;
  border: 1px solid rgba(47, 111, 159, 0.5);
  box-shadow:
    0 0 0 1px rgba(5, 16, 31, 0.8),
    0 12px 32px rgba(2, 7, 15, 0.45),
    0 0 28px rgba(47, 111, 159, 0.28);
  animation: login-logo-entra 1.05s cubic-bezier(0.22, 1, 0.36, 1) both,
             login-logo-halo 3.8s ease-in-out 1.1s infinite;
}
.login-logo-placa img {
  width: 92px;
  height: 82px;
  object-fit: contain;
  animation: login-iso-pulso 3.2s ease-in-out 1s infinite;
  filter: drop-shadow(0 0 12px rgba(47, 111, 159, 0.45));
}
.login-logo-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(87, 147, 188, 0.28) 48%, transparent 100%);
  background-size: 100% 42%;
  background-repeat: no-repeat;
  animation: login-scan 3.6s ease-in-out 0.8s infinite;
  mix-blend-mode: screen;
}
.login-logo-anillo {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(47, 111, 159, 0.42);
  border-radius: 50%;
  animation: login-anillo 4.4s ease-out infinite;
}
.login-logo-anillo.medio {
  animation-delay: 1.45s;
}
.login-logo-anillo.atras {
  animation-delay: 2.9s;
}
.login-lockup-caja {
  position: relative;
  width: min(420px, 100%);
  margin: 0 0 16px;
  overflow: hidden;
  animation: login-lockup-entra 0.9s ease 0.2s both;
}
.login-lockup-caja::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, rgba(87, 147, 188, 0.22) 50%, transparent 72%);
  transform: translateX(-130%);
  animation: login-lockup-brillo 5.2s ease-in-out 1.6s infinite;
}
.login-lockup {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(2.55) saturate(1.08) drop-shadow(0 0 16px rgba(47, 111, 159, 0.32));
}
.login-marca {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--institutional-gold);
  animation: login-marca-entra 0.9s ease 0.15s both;
}
.login-manifiesto-titulo {
  margin: 0;
  min-height: 4.4em;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.28;
  color: var(--text-strong);
}
.login-caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: var(--institutional-gold-light);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
  animation: login-caret 0.9s steps(1) infinite;
}
.login-caret.apagado { opacity: 0; animation: none; }
.login-manifiesto-cuerpo {
  margin: 16px 0 0;
  max-width: 34em;
  color: var(--silver-light);
  font-size: 15px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.login-manifiesto-cuerpo.visible {
  opacity: 1;
  transform: none;
}
.login-manifiesto-cuerpo em {
  font-style: normal;
  color: var(--institutional-gold-light);
  font-weight: 600;
}

@keyframes login-logo-entra {
  from { opacity: 0; transform: scale(0.86) translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes login-logo-halo {
  0%, 100% { box-shadow: 0 0 0 1px rgba(5, 16, 31, 0.8), 0 12px 32px rgba(2, 7, 15, 0.45), 0 0 22px rgba(47, 111, 159, 0.22); }
  50% { box-shadow: 0 0 0 1px rgba(47, 111, 159, 0.42), 0 12px 32px rgba(2, 7, 15, 0.45), 0 0 38px rgba(87, 147, 188, 0.42); }
}
@keyframes login-iso-pulso {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(47, 111, 159, 0.35)); }
  50% { transform: scale(1.045); filter: drop-shadow(0 0 18px rgba(87, 147, 188, 0.58)); }
}
@keyframes login-anillo {
  0% { transform: scale(0.7); opacity: 0.5; }
  100% { transform: scale(1.22); opacity: 0; }
}
@keyframes login-scan {
  0% { background-position: 0 -40%; }
  100% { background-position: 0 140%; }
}
@keyframes login-lockup-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes login-lockup-brillo {
  0%, 62% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}
@keyframes login-marca-entra {
  from { opacity: 0; letter-spacing: 0.18em; }
  to { opacity: 1; letter-spacing: 0.42em; }
}
@keyframes login-caret {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .login-logo-placa,
  .login-logo-placa img,
  .login-logo-anillo,
  .login-logo-scan,
  .login-lockup-caja,
  .login-lockup-caja::after,
  .login-marca,
  .login-caret { animation: none; }
  .login-manifiesto-cuerpo { opacity: 1; transform: none; transition: none; }
}

.login-caja {
  position: relative;
  width: min(420px, 100%);
  justify-self: end;
  background: linear-gradient(180deg, rgba(10, 25, 47, 0.92), rgba(5, 16, 31, 0.94));
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: var(--e8) var(--e8) var(--e6);
  box-shadow: var(--sombra-3), 0 0 0 1px rgba(2, 7, 15, 0.6);
}
/* Filete dorado superior: sello institucional, sin texto añadido. */
.login-caja::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--institutional-gold), transparent);
}
.login-iso {
  display: block;
  width: 52px;
  height: 56px;
  margin: 0 auto var(--e3);
  object-fit: contain;
}
.login-caja h1 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.login-caja .kicker {
  margin: 0 0 var(--e2);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--institutional-gold);
}
.login-caja .lema {
  margin: var(--e3) 0 var(--e6);
  padding-top: var(--e3);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  color: var(--silver);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.login-caja label { color: var(--silver); }
.login-caja .muted { margin-top: var(--e4); text-align: center; color: var(--silver-dim); }
.login-caja .btn { width: 100%; margin-top: var(--e6); padding: 12px 18px; }
.login-error {
  margin: var(--e3) 0 0;
  padding: var(--e2) var(--e3);
  border: 1px solid rgba(168, 64, 45, 0.6);
  border-left: 2px solid var(--alerta);
  border-radius: 0 6px 6px 0;
  background: rgba(168, 64, 45, 0.12);
  color: #e0a091;
  font-size: 12px;
}

.formulario { display: flex; flex-direction: column; gap: var(--e4); margin-top: var(--e2); }
.formulario label, .filtros label, .login-caja label {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
}
.formulario input, .formulario select,
.filtros input, .filtros select,
.login-caja input {
  background: var(--surface-sunken);
  border: 1px solid var(--border-primary);
  color: var(--tinta);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 12px;
  border-radius: 8px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.formulario input:hover, .formulario select:hover,
.filtros input:hover, .filtros select:hover,
.login-caja input:hover { border-color: var(--border-strong); }
.formulario input:focus, .formulario select:focus,
.filtros input:focus, .filtros select:focus,
.login-caja input:focus {
  outline: none;
  border-color: var(--institutional-gold);
  box-shadow: 0 0 0 2px var(--institutional-gold-soft);
  background: var(--surface-secondary);
}
.formulario input::placeholder, .login-caja input::placeholder { color: var(--silver-dim); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: end;
  margin: 0 0 var(--e4);
}
.filtros .btn { margin-top: 0; }

.chip-usuario {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  max-width: 180px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: var(--surface-raised);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.chip-usuario b {
  display: block;
  font-size: 12px;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-usuario small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--institutional-gold);
}
.chip-usuario:hover { border-color: var(--institutional-gold-line); background: var(--navy-700); }

.tabla-wrap { overflow: auto; margin-top: 8px; }
.tabla-wrap table { min-width: 520px; }
.aviso-carga.ok {
  color: var(--ok);
  border-left-color: var(--ok);
  background: rgba(61, 140, 90, 0.12);
}

.lista-sab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding: 2px;
}
.sab {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  margin: 0;
  padding: var(--e3);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--surface-raised);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.sab:hover { border-color: var(--border-strong); }
.sab.on { border-color: var(--institutional-gold-line); background: var(--navy-700); }
.sab b { display: block; color: var(--tinta); }
.sab small { display: block; margin-top: 3px; color: var(--humo); font-size: 11px; }
.sab input { margin-top: 3px; accent-color: var(--institutional-gold); }
.chk-linea {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--niebla) !important;
  font-size: 13px !important;
}
.chip-lin {
  display: inline-block;
  margin: 2px 2px 0 0;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(27, 54, 93, 0.4);
  color: var(--niebla);
  font-size: 11px;
}
.nivel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
}
.nivel-barra {
  display: block;
  width: 64px;
  height: 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--linea);
  border-radius: 99px;
  overflow: hidden;
}
.nivel-barra i {
  display: block;
  height: 100%;
  background: var(--institutional-gold);
}
.nivel em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ambar); }
.lienzo-grafo {
  position: relative;
  margin-top: var(--e2);
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.aviso-tecnico {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--border-primary);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  background: var(--surface-raised);
  color: var(--niebla);
  font-size: 12px;
}

.badge.admin { color: var(--ambar); border-color: var(--ambar); }
.badge.usuario { color: var(--cian); border-color: var(--cian-dim); }
.badge.inactivo { color: var(--alerta); border-color: var(--alerta); }

/* --- Tablero: bloques de lectura ------------------------------------- */
/* El tablero es largo. Sin un nivel por encima de la tarjeta todo pesa
   igual y no se distingue la pregunta que responde cada zona. */

.bloque { margin-top: var(--e8); }
.bloque.primero { margin-top: 0; }
.bloque-cabeza {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e4);
  padding-bottom: var(--e3);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--border-primary);
}
.bloque-cabeza::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 1px;
  background: var(--institutional-gold);
}
.bloque-cabeza h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
}
.bloque-cabeza p {
  margin: 0;
  font-size: 12px;
  color: var(--humo);
}
.bloque .grid-2, .bloque .grid-3 { margin-top: 0; }

/* Dentro de un bloque los subtítulos son preguntas en español corriente
   ("Los que más le hablan"). En versalitas espaciadas no se leen, se
   descifran, así que aquí van como texto normal. */
.bloque .card h3 {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}

.pie-h3 {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--humo);
}

.cabeza-tabla {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cabeza-tabla > div { min-width: 0; }

/* Ficha de la línea: pares dato/valor, no un párrafo con saltos de línea. */
.datos-linea {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin: 0;
  font-size: 12px;
  min-width: 0;
}
.datos-linea dt {
  color: var(--humo);
  white-space: nowrap;
}
.datos-linea dd {
  margin: 0;
  color: var(--niebla);
  overflow-wrap: anywhere;
}

/* Cierre de actividad: si la línea se apagó antes de tiempo, es lo primero
   que el analista necesita ver en la zona de contactos. */
.alerta-cierre {
  margin: 0 0 var(--e3);
  padding: var(--e3);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 6px 6px 0;
  background: var(--surface-raised);
  font-size: 12px;
  color: var(--humo);
}
.alerta-cierre.ojo {
  border-left-color: var(--ambar);
  color: var(--ambar);
}

.brief .rango { color: var(--humo); }
.brief .rango b { color: var(--niebla); font-weight: 600; }
.brief .es { font-family: var(--mono); font-size: 11px; color: var(--humo); }
.brief .es b { color: var(--niebla); }
.brief li { margin-bottom: 5px; }
.brief li:last-child { margin-bottom: 0; }

.peso {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}
.peso.alta { color: var(--ambar); }
.peso.media { color: var(--ok); }
.peso.baja { color: var(--humo); }

/* --- Red de vínculos -------------------------------------------------- */

.selector-red {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--humo);
}
.selector-red select {
  margin-left: 6px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  color: var(--niebla);
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 6px;
  border-radius: 4px;
}
.selector-red select:focus { outline: none; border-color: var(--cian); }

.red-vinculos {
  position: relative;
  margin: 4px 0 10px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--superficie);
  overflow: hidden;
}
.red-vinculos svg,
.lienzo-grafo svg { display: block; width: 100%; height: auto; }
.grafo-vivo .nodo-wrap { cursor: pointer; outline: none; }
.grafo-vivo .nodo-wrap:focus-visible .rd-cuerpo {
  stroke: var(--chart-destaque);
  stroke-width: 2.4;
}
.grafo-vivo .nodo {
  transform-box: fill-box;
  transform-origin: center;
  animation: rd-nacer 0.22s var(--curva) both;
  animation-delay: calc(var(--rd-i, 0) * 18ms);
}
.grafo-vivo .nodo .rd-cuerpo {
  transition: fill 0.2s, stroke 0.2s, stroke-width 0.2s;
}
/* El halo es un anillo fijo: marca el nodo sin latir. */
.grafo-vivo .rd-halo {
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  stroke-opacity: 0.45;
}
.grafo-vivo .rd-eje {
  transition: stroke 0.2s, stroke-width 0.2s, stroke-opacity 0.2s;
}
.grafo-vivo .rd-eje.hover,
.grafo-vivo .rd-eje.activo {
  stroke: var(--chart-destaque);
  stroke-opacity: 1;
}
.grafo-vivo .rd-eje.hover { stroke-width: 4.5; }
.grafo-vivo .rd-eje.activo { stroke-width: 6.5; }
.grafo-vivo .nodo-wrap.hover .rd-cuerpo,
.grafo-vivo .nodo-wrap.activo .rd-cuerpo {
  fill: var(--chart-destaque);
  stroke: var(--chart-azul);
  stroke-width: 2.2;
}
.grafo-vivo .nodo-wrap.hover .rd-in,
.grafo-vivo .nodo-wrap.activo .rd-in,
.grafo-vivo .nodo-wrap.bi .rd-in {
  fill: var(--navy-950);
}
.grafo-vivo .nodo-wrap.linea .rd-in { fill: var(--silver-light); }
.grafo-vivo .nodo-wrap.linea.hover .rd-in,
.grafo-vivo .nodo-wrap.linea.activo .rd-in { fill: var(--navy-950); }
.rd-objetivo {
  font: 700 15px var(--mono);
  fill: #f7f9fb;
  pointer-events: none;
}
.rd-in {
  font-family: var(--mono);
  font-weight: 700;
  fill: var(--silver-light);
  letter-spacing: -0.4px;
  pointer-events: none;
}
.rd-es {
  font: 11px var(--mono);
  fill: var(--chart-destaque);
  pointer-events: none;
}
.rd-op {
  font: 700 10px var(--sans);
  fill: var(--silver);
  letter-spacing: 0.3px;
  pointer-events: none;
}
.rd-objetivo-op {
  font: 700 9px var(--sans);
  fill: #dceaf5;
  letter-spacing: 0.4px;
  pointer-events: none;
}
.rd-fecha {
  font: 10px var(--sans);
  fill: var(--humo);
  pointer-events: none;
}
.rd-globo {
  position: absolute;
  z-index: 4;
  width: min(340px, calc(100% - 16px));
  padding: var(--e4) var(--e8) var(--e3) var(--e4);
  background: var(--navy-800);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--sombra-3);
  color: var(--tinta);
  font-size: 12px;
  line-height: 1.45;
}
.rd-globo[hidden] { display: none; }
.rd-globo p { margin: 0 0 7px; }
.rd-globo p:last-child { margin-bottom: 0; }
.rd-g-resumen { color: var(--niebla); }
.rd-g-nom { color: var(--ok); }
.rd-globo-x {
  position: absolute;
  top: 2px;
  right: 6px;
  background: none;
  border: 0;
  color: var(--humo);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rd-globo-x:hover { color: var(--tinta); }
.rd-globo .btn-mini { margin-top: 2px; }

@keyframes rd-nacer {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .grafo-vivo .nodo,
  .grafo-vivo .rd-halo { animation: none; }
}

/* --- Pernocta --------------------------------------------------------- */

.pn-ficha { margin-bottom: 12px; }
.pn-rotulo {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}
.pn-coord {
  margin: 4px 0 12px;
  font-size: 20px;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.pn-cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.pn-cifras > div {
  border-left: 2px solid var(--linea);
  padding-left: 9px;
}
.pn-cifras b {
  display: block;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--texto-fuerte);
  line-height: 1.15;
}
.pn-cifras span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--humo);
}
#mapaPernocta {
  height: 300px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 8px;
}

/* --- Azimut por franja ------------------------------------------------ */

.az-bandas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.az-titulo {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--tinta);
  font-weight: 600;
}
#mapaAzimut {
  height: 380px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 8px;
}
#tblAzimut tbody tr {
  cursor: pointer;
}
#tblAzimut tbody tr:hover td {
  background: rgba(197, 160, 89, 0.08);
}
#tblAzimut tbody tr.az-sel td {
  background: rgba(197, 160, 89, 0.16);
  color: var(--tinta);
}

/* --- Etiquetas de contacto -------------------------------------------- */
/* El número por sí solo no dice nada. Poner un nombre es parte del trabajo
   del analista, así que se edita donde se lee, sin salir de la tabla. */

.et {
  background: none;
  border: 0;
  border-bottom: 1px dashed transparent;
  color: var(--ok);
  font: inherit;
  font-size: 12px;
  text-align: left;
  padding: 1px 0;
  cursor: text;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.et:hover { border-bottom-color: var(--institutional-gold-line); }
.et.vacia { color: var(--silver-dim); font-style: italic; }
.et.vacia:hover { color: var(--institutional-gold-light); }

.et-form { display: flex; gap: var(--e1); }
.et-form input {
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  color: var(--tinta);
  font: inherit;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  min-width: 0;
  width: 100px;
}
.et-form input:focus { outline: none; border-color: var(--institutional-gold); }
.et-form.guardando { opacity: 0.5; }
.et-form.malo input { border-color: var(--alerta); }

.et-nom {
  font-style: normal;
  color: var(--ok);
}

/* --------------------------------------------------------------------------
   Cruce de llamadas: barra de utilidades, tabla única y detalle desplegable
   -------------------------------------------------------------------------- */

/* El cruce reparte los indicadores (incl. hallazgos OSINT) en el ancho disponible. */
.kpis-cruce { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.barra-util {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
}
.barra-util .enlaces { margin-top: 0; }

.campo {
  background: var(--surface-sunken);
  border: 1px solid var(--border-primary);
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  min-width: 200px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.campo:hover { border-color: var(--border-strong); }
.campo:focus {
  outline: none;
  border-color: var(--institutional-gold);
  box-shadow: 0 0 0 2px var(--institutional-gold-soft);
}
.campo::placeholder { color: var(--silver-dim); }
.campo-sm { min-width: 130px; padding: var(--e2) var(--e3); }
.campo-lbl {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo);
}
.filtros-tabla {
  padding: var(--e3);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--surface-raised);
}
.filtros-tabla .chk-linea { font-size: 12px !important; }
.filtros-tabla input[type="checkbox"] { accent-color: var(--institutional-gold); }

/* El encabezado se queda fijo al recorrer una lista larga de contactos. */
.tabla-alta {
  max-height: 620px;
  overflow: auto;
}
.tabla-alta thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--institutional-gold-line);
}

.tabla-cruce th.num, .tabla-cruce td.num { text-align: right; }
.tabla-cruce td { vertical-align: middle; }
.tabla-cruce .vacio { text-align: center; padding: var(--e6) var(--e2); }

.fila-clic { cursor: pointer; }
.fila-clic.abierta td {
  background: var(--navy-700);
  border-bottom-color: var(--institutional-gold-line);
  color: var(--tinta);
}
.fila-clic.abierta td:first-child { box-shadow: inset 2px 0 0 var(--institutional-gold); }

.fila-detalle td { background: var(--surface-sunken); padding: 0; }
.fila-detalle:hover td { background: var(--surface-sunken); }
.detalle-cruce {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e6);
  padding: var(--e4) var(--e4) var(--e4);
  border-bottom: 1px solid var(--institutional-gold-line);
}
.detalle-cruce h3 { margin: 0 0 var(--e2); }
.detalle-cruce .brief li { font-size: 12px; }
.detalle-osint { grid-column: 1 / -1; }
.detalle-osint small { color: var(--humo); font-weight: 400; }

.osint-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-primary);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: 600;
}
.osint-muy { border-color: var(--institutional-gold-line); color: var(--institutional-gold-light); }
.osint-alta { border-color: rgba(79, 158, 133, 0.55); color: var(--ok); }
.osint-media { border-color: var(--institutional-gold-line); color: var(--ambar); }
.osint-baja { border-color: var(--border-primary); color: var(--humo); }

.tabla-mini { font-size: 11px; }
.tabla-mini th { background: var(--navy-800); font-size: 9px; border-bottom-color: var(--border-strong); }
.tabla-mini td { padding: 5px var(--e2); }

.fecha-cel b { display: block; font-weight: 500; font-size: 12px; color: var(--niebla); }
.fecha-cel small { display: block; font-family: var(--mono); font-size: 10px; color: var(--humo); }

.dir {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-primary);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--humo);
}
.dir-bidi { border-color: var(--border-strong); color: var(--cian); }
.dir-ent { border-color: rgba(79, 158, 133, 0.5); color: var(--ok); }
.dir-sal { border-color: var(--institutional-gold-line); color: var(--ambar); }

.cuenta-temp { color: var(--ambar); font-family: var(--mono); }
.vent-fila { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e2); }
.chip-vent {
  padding: 2px 8px;
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  font-size: 11px;
  color: var(--humo);
}
.chip-vent b { color: var(--ambar); font-family: var(--mono); }

.chip-btn { cursor: pointer; background: transparent; font: inherit; font-size: 11px; transition: border-color 0.18s ease, color 0.18s ease; }
.chip-btn:hover { border-color: var(--institutional-gold-line); color: var(--tinta); }
.chip-btn.activo {
  border-color: var(--institutional-gold-line);
  color: var(--institutional-gold-light);
  background: rgba(197, 160, 89, 0.12);
}

.bloque-mult { margin-bottom: 10px; }
.bloque-mult:last-child { margin-bottom: 0; }
.mult-cab { margin: 0 0 4px; }
.mult-cab b { color: var(--ambar); }

@media (max-width: 1280px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .visor-cartografico { grid-template-columns: 1fr; }
  .login-caja { padding: var(--e6); }
}
@media (max-width: 860px) {
  .login-marco {
    grid-template-columns: 1fr;
    justify-items: center;
    width: min(520px, calc(100% - 32px));
    gap: 28px;
    padding-top: var(--e6);
  }
  .login-manifiesto {
    text-align: center;
    padding: 0;
  }
  .login-logo { margin-left: auto; margin-right: auto; }
  .login-manifiesto-cuerpo { margin-left: auto; margin-right: auto; }
  .login-caja { justify-self: stretch; width: 100%; }
  .login-manifiesto-titulo { min-height: 0; }
}
/* En pantallas estrechas la lámina se recorta mucho: se apaga un punto más y
   se suelta el fondo fijo, que en móvil da saltos. */
@media (max-width: 760px) {
  body.login {
    background-image:
      linear-gradient(180deg, rgba(5, 14, 27, 0.76) 0%, rgba(5, 16, 31, 0.58) 45%, rgba(5, 14, 27, 0.84) 100%),
      url("/static/img/bg.webp");
    background-attachment: scroll, scroll;
  }
}
@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .meta-obj { text-align: left; padding-right: 0; border-right: 0; }
  #mapa { height: 360px; }
  .visor-mymaps { height: 360px; }
  .detalle-cruce { grid-template-columns: 1fr; }
  .lista-sab { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .tabla-wrap { overflow-x: auto; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .meta-obj, .chip-usuario small { display: none; }
  .kpi .n { font-size: 18px; }
  table { font-size: 11px; }
  th, td { padding: 6px var(--e2); }
  .chip-usuario { max-width: 120px; }
  .card { padding: var(--e3); }
  .drop { padding: var(--e6) var(--e3); }
  .fila-botones .btn { flex: 1 1 auto; }
  .titulo-fila .buscador { min-width: 0; width: 100%; }
}

.dialogo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 7, 15, 0.78);
}
.dialogo[hidden], .dialogo.oculto { display: none !important; }
.dialogo-caja {
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--linea);
  border-radius: 8px;
  opacity: 1 !important;
  transform: none !important;
}
.dialogo-caja h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.dialogo-caja p {
  margin: 0 0 18px;
  color: var(--niebla);
  line-height: 1.45;
}
.dialogo-caja .fila-botones { justify-content: flex-end; }