:root {
  --ink: #14213d;
  --ink-soft: #1c2c52;
  --paper: #f7f6f2;
  --paper-raised: #ffffff;
  --accent: #1f6f5c;
  --accent-dark: #164f42;
  --line: #ddd9ce;
  --line-on-ink: rgba(255, 255, 255, 0.14);
  --text: #1b1d29;
  --text-muted: #6b6f7f;
  --text-on-ink: #f2f1ec;
  --text-muted-on-ink: #aab0c4;

  --risk-alto-bg: #fbeaea;
  --risk-alto-text: #8c1f1a;
  --risk-alto-border: #d64f45;

  --risk-medio-bg: #fbf1e1;
  --risk-medio-text: #7a4e06;
  --risk-medio-border: #c98a1f;

  --risk-bajo-bg: #eef3e4;
  --risk-bajo-text: #3b5b1e;
  --risk-bajo-border: #7fa050;

  --risk-informativo-bg: #eeeeec;
  --risk-informativo-text: #54554f;
  --risk-informativo-border: #b7b7ae;

  --risk-sin-bg: #e7f1ee;
  --risk-sin-text: #1f6f5c;
  --risk-sin-border: #5fa692;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "IBM Plex Sans", -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.mono { font-family: "IBM Plex Mono", monospace; }

a { color: var(--accent); }

.layout { display: flex; min-height: 100vh; align-items: flex-start; }

.nav-rail {
  width: 230px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  /* position: sticky (no fixed) para que el pie -- nombre de usuario,
     empresa y "Cerrar sesión" -- se quede siempre visible dentro del alto
     de la ventana, sin importar qué tan larga sea la página de contenido
     (p. ej. Inicio, que es la más larga). Antes, al ser parte del mismo
     flex row que .columna-principal con align-items: stretch (el default),
     el nav-rail se estiraba a la altura del contenido y el pie terminaba
     mucho más abajo del borde inferior de la ventana. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.columna-principal {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nav-rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.nav-rail__logo { flex: none; }

.nav-rail__subtitulo {
  font-size: 13px;
  color: var(--text-muted-on-ink);
  margin-bottom: 40px;
}

.nav-rail__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.nav-rail__links a {
  color: var(--text-on-ink);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  border-left: 2px solid transparent;
}

.nav-rail__links a:hover,
.nav-rail__links a.activo {
  background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid var(--accent);
}

/* Submenú -- entradas nuevas anidadas bajo un enlace existente (p. ej.
   Expedientes bajo Mis clientes), sin rediseñar el nav-rail plano. */
.nav-rail__links a.subitem {
  padding-left: 28px;
  font-size: 12.5px;
  color: var(--text-muted-on-ink);
}

/* Grupo sin enlace propio (p. ej. "Cuentas"), solo etiqueta para los
   subitem que le siguen -- mismo patrón que arriba, sin un link padre. */
.nav-rail__grupo {
  padding: 10px 12px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted-on-ink);
}

.nav-rail__pie {
  border-top: 1px solid var(--line-on-ink);
  padding-top: 16px;
  font-size: 13px;
  color: var(--text-muted-on-ink);
}

.nav-rail__pie form { margin-top: 8px; }

.nav-rail__pie button {
  background: none;
  border: none;
  color: var(--text-muted-on-ink);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ---------- Barra superior (usuario, empresa, búsqueda global, salir) ---------- */
.barra-superior {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 32px;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 15;
}

.barra-superior__identidad {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  flex-shrink: 0;
}

.barra-superior__usuario { font-size: 14px; font-weight: 500; color: var(--text); }
.barra-superior__empresa { font-size: 12px; color: var(--text-muted); }

.barra-superior__selector-empresa { margin: 0; }
.barra-superior__selector-empresa select {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  max-width: 220px;
}

.barra-superior__busqueda {
  position: relative;
  flex-grow: 1;
  max-width: 460px;
}

.barra-superior__campo {
  width: 100%;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
}

.barra-superior__campo:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper-raised);
}

.barra-superior__acciones {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.busqueda-global__resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 33, 61, 0.14);
  max-height: 400px;
  overflow-y: auto;
  z-index: 20;
}

.busqueda-global__grupo-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 10px 14px 4px;
}

.busqueda-global__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--text);
}

.busqueda-global__item:hover,
.busqueda-global__item.activo { background: var(--paper); }

.busqueda-global__item-titulo { font-size: 14px; font-weight: 500; }
.busqueda-global__item-detalle { font-size: 12px; color: var(--text-muted); }

.busqueda-global__vacio,
.busqueda-global__cargando {
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Buscar en listas: fuentes disponibles ---------- */
.fuentes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 24px 0 40px;
}

.fuente-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}

.fuente-card__articulo {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.fuente-card__nombre { font-size: 14px; font-weight: 500; margin-bottom: 10px; }

.fuente-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-muted);
}

.fuente-card__registros {
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.fuente-card--sin-datos { color: var(--text-muted); font-size: 12px; }

.contenido {
  flex-grow: 1;
  padding: 56px 64px;
  max-width: 920px;
}

h1 {
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 8px;
}

h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 16px;
}

.subtitulo {
  color: var(--text-muted);
  margin: 0 0 40px;
  max-width: 60ch;
}

.busqueda {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; color: var(--text-muted); }

.campo input[type="text"],
.campo select {
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--text);
  min-width: 260px;
}

.campo select { font-family: "IBM Plex Sans", sans-serif; min-width: 200px; }

.campo--rfc input { text-transform: uppercase; }

.boton {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
}

.boton:hover { background: var(--accent-dark); }

.campo--separador {
  color: var(--text-muted);
  font-size: 13px;
  padding-bottom: 12px;
  align-self: flex-end;
}

.lista-nombres {
  border-top: 1px solid var(--line);
}

.resultado-nombre {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}

.resultado-nombre:hover { background: var(--paper-raised); }

.resultado-nombre__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.resultado-nombre__nombre { font-weight: 500; }
.resultado-nombre__rfc { font-size: 13px; color: var(--text-muted); }

.mensaje {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 24px;
  border: 1px solid;
}
.mensaje--success { background: var(--risk-bajo-bg); color: var(--risk-bajo-text); border-color: var(--risk-bajo-border); }
.mensaje--error { background: var(--risk-alto-bg); color: var(--risk-alto-text); border-color: var(--risk-alto-border); }

.acciones-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

/* :not(:only-child) es la parte que importa -- esta regla es para el
   segundo elemento de "acciones-cabecera" (el botón/badge de la derecha),
   pero varias páginas (Red de relaciones, Cartografía de riesgo,
   Expedientes) solo tienen el <div> del título, sin ningún botón al lado.
   Sin este :not(), ese único <div> también calificaba como ":last-child"
   y se volvía flex-row -- el título y el párrafo de abajo (que deberían
   quedar uno encima del otro) se veían lado a lado, como si el párrafo
   fuera parte de la fila de acciones. */
.acciones-cabecera > div:last-child:not(:only-child) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.boton-secundario {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.boton-secundario:hover { border-color: var(--accent); color: var(--accent); }

.boton-peligro {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--risk-alto-border);
  background: none;
  color: var(--risk-alto-text);
  cursor: pointer;
}
.boton-peligro:hover { background: var(--risk-alto-bg); }

.formulario { max-width: 560px; }

.seccion {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 32px;
}
.seccion:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.formulario .campo { width: 100%; margin-bottom: 18px; }
.formulario .campo input,
.formulario .campo select,
.formulario .campo textarea {
  width: 100%;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--text);
}
.formulario .campo textarea { resize: vertical; }
.formulario .ayuda { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.formulario .error { font-size: 13px; color: var(--risk-alto-text); margin-top: 4px; }
.formulario .campo-checkbox { display: flex; align-items: center; gap: 8px; }
.formulario .campo-checkbox input { width: auto; }

table.tabla-clientes {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tabla-clientes th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
table.tabla-clientes td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
table.tabla-clientes tr:hover { background: var(--paper-raised); }
table.tabla-clientes a { color: var(--text); text-decoration: none; font-weight: 500; }
table.tabla-clientes a:hover { color: var(--accent); }

.ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  margin-bottom: 8px;
}
.ficha__campo { font-size: 14px; }
.ficha__etiqueta { color: var(--text-muted); font-size: 12px; margin-bottom: 2px; }

.fila-beneficiario, .fila-riesgo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.fila-beneficiario__acciones { display: flex; gap: 8px; }

.cruce-screening {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 24px;
}

.resultado-cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.badge--alto { background: var(--risk-alto-bg); color: var(--risk-alto-text); border-color: var(--risk-alto-border); }
.badge--medio { background: var(--risk-medio-bg); color: var(--risk-medio-text); border-color: var(--risk-medio-border); }
.badge--bajo { background: var(--risk-bajo-bg); color: var(--risk-bajo-text); border-color: var(--risk-bajo-border); }
.badge--informativo { background: var(--risk-informativo-bg); color: var(--risk-informativo-text); border-color: var(--risk-informativo-border); }
.badge--sin_alerta { background: var(--risk-sin-bg); color: var(--risk-sin-text); border-color: var(--risk-sin-border); }

.score { font-size: 13px; color: var(--text-muted); }
.score span { font-family: "IBM Plex Mono", monospace; font-size: 15px; color: var(--text); }

.coincidencias { border-top: 1px solid var(--line); }

.coincidencia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 0.6fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.coincidencia__fuente { font-weight: 500; }
.coincidencia__meta { color: var(--text-muted); font-size: 14px; }
.coincidencia__fecha { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--text-muted); text-align: right; }

.vacio {
  padding: 40px 0;
  color: var(--text-muted);
}

.aviso-no-encontrado {
  padding: 20px 24px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-muted);
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}

.login-card {
  background: var(--paper-raised);
  padding: 48px;
  border-radius: 10px;
  width: 360px;
}

.login-card h1 { font-size: 20px; }

.login-card__marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-card__marca h1 { margin: 0; }

.login-card form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.login-card input {
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

table.tabla-consultas {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.tabla-consultas th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

table.tabla-consultas td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

/* ---------- Red de relaciones (grafo a todo lo ancho posible) ----------
   Esta es la única página que usa "contenido--ancho" -- antes topaba a
   1200px, lo que le quitaba espacio al grafo en pantallas más anchas sin
   ninguna razón real (no hay texto largo que proteger aquí). Sin tope. */
.contenido.contenido--ancho { max-width: none; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.kpi-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
}

.kpi-card__label { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.kpi-card__valor { font-family: "IBM Plex Mono", monospace; font-size: 28px; font-weight: 500; color: var(--ink); }
.kpi-card__delta { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.kpi-card__delta--sube { color: var(--risk-alto-text); }
.kpi-card__delta--baja { color: var(--risk-bajo-text); }

.paneles-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
  align-items: stretch;
}

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 32px;
}
.paneles-grid .panel { margin-bottom: 0; }

.panel h2 { font-size: 15px; margin: 0 0 2px; }
.panel .panel__sub { font-size: 12px; color: var(--text-muted); margin: 0 0 16px; }

.grafica-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.grafica-leyenda__item { display: flex; align-items: center; gap: 6px; }
.grafica-leyenda__punto { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.grafica-leyenda__punto--circulo { border-radius: 50%; }

.grafica-vacia { color: var(--text-muted); font-size: 13px; padding: 40px 0; text-align: center; }

table.tabla-avisos {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tabla-avisos th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
table.tabla-avisos td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
table.tabla-avisos tr:last-child td { border-bottom: none; }
table.tabla-avisos a { color: var(--text); text-decoration: none; font-weight: 500; }
table.tabla-avisos a:hover { color: var(--accent); }

.formulario-filtros {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.formulario-filtros select {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-raised);
}

.paginacion {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.paginacion a { color: var(--accent); text-decoration: none; }
.paginacion a:hover { text-decoration: underline; }

/* Biografía de cumplimiento -- línea de tiempo vertical, de la fecha de
   alta (arriba) al presente (abajo). Un punto por evento, coloreado según
   su nivel de riesgo (services_biografia.EventoBiografia.nivel_riesgo). */
.biografia-linea { position: relative; padding-left: 6px; }
.biografia-evento {
  position: relative;
  padding-left: 24px;
  padding-bottom: 20px;
  margin-left: 6px;
  border-left: 2px solid var(--line);
}
.biografia-evento:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
.biografia-punto {
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--paper-raised);
}
.biografia-fecha { margin-bottom: 2px; }
.biografia-evento strong { display: block; margin-bottom: 3px; }

.biografia-evento--resaltado {
  background: #fdf4d8;
  border-radius: 8px;
  transition: background 1.4s ease;
}

.biografia-evento__enlace {
  display: block;
  color: inherit;
  text-decoration: none;
  margin: -4px -8px -4px -4px;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
}
.biografia-evento--clicable { cursor: pointer; }
.biografia-evento--clicable:hover .biografia-evento__enlace,
.biografia-evento__enlace:focus-visible {
  background: var(--paper-raised);
}
.biografia-evento--clicable:hover strong { color: var(--accent); }

/* Gráfico de línea de tiempo -- capa visual sobre la biografía descriptiva
   (que sigue existiendo íntegra, colapsada abajo bajo <details>, y hace de
   "vista de tabla" del mismo dato). Los colores reutilizan las mismas
   variables --risk-*-border que ya usan los badges en toda la app -- es el
   mismo canal de estado (bajo/medio/alto), nunca una paleta nueva. */
.biografia-grafico-wrap {
  position: relative;
  padding: 6px 0 0;
  margin-bottom: 6px;
}

.biografia-grafico-fecha {
  position: absolute;
  top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.biografia-grafico-fecha--inicio { left: 0; }
.biografia-grafico-fecha--fin { right: 0; }

.biografia-grafico {
  position: relative;
  height: 64px;
  margin: 26px 10px 4px;
}

.biografia-grafico-linea {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
  transform: translateY(-50%);
}

/* El elemento con el hit target real es .biografia-nodo (24px, invisible)
   -- el punto que se ve es el <span> de adentro (14px, r=7, por encima del
   mínimo de 8px de marca recomendado). Así el área para pasar el mouse o
   dar clic siempre es más grande que lo que se pinta. */
.biografia-nodo {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.biografia-nodo:hover .biografia-nodo__punto,
.biografia-nodo:focus-visible .biografia-nodo__punto {
  transform: scale(1.3);
}
.biografia-nodo:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.biografia-nodo__punto {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--paper-raised); /* "anillo" de superficie -- para que se distingan aunque se toquen */
  box-shadow: 0 0 0 1px var(--line);
  background: var(--risk-informativo-border);
  transition: transform 0.12s ease;
}
.biografia-nodo__punto[data-riesgo="alto"] { background: var(--risk-alto-border); }
.biografia-nodo__punto[data-riesgo="medio"] { background: var(--risk-medio-border); }
.biografia-nodo__punto[data-riesgo="bajo"] { background: var(--risk-bajo-border); }

.biografia-grafico-leyenda {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.biografia-grafico-leyenda .pt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  background: var(--risk-informativo-border);
}
.biografia-grafico-leyenda .pt[data-riesgo="alto"] { background: var(--risk-alto-border); }
.biografia-grafico-leyenda .pt[data-riesgo="medio"] { background: var(--risk-medio-border); }
.biografia-grafico-leyenda .pt[data-riesgo="bajo"] { background: var(--risk-bajo-border); }

.biografia-detalle-toggle summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 13.5px;
  margin: 14px 0 6px;
  list-style: none;
}
.biografia-detalle-toggle summary::-webkit-details-marker { display: none; }
.biografia-detalle-toggle summary::before {
  content: "▸ ";
  font-size: 11px;
}
.biografia-detalle-toggle[open] summary::before {
  content: "▾ ";
}

/* ---------- Cartografía de riesgo -- mapa de México por estado --------
   Geometría (silueta de cada estado) en compliance/geo_mexico.py. Colorea
   con las MISMAS variables --risk-*-border que ya usan los badges y el
   gráfico de la biografía en toda la app -- ni aquí se inventó una paleta
   nueva. */
.carto-mapa-panel { display: flex; flex-direction: column; }

.carto-svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 6px 0 10px;
  max-height: 460px;
}

.carto-estado {
  stroke: var(--paper-raised);
  stroke-width: 0.9;
  cursor: pointer;
  transition: filter 0.12s ease, stroke-width 0.12s ease;
}
.carto-estado:hover, .carto-estado:focus {
  filter: brightness(0.93);
  stroke: var(--ink);
  stroke-width: 1.6;
  outline: none;
}
.carto-estado--marca { stroke: var(--ink); stroke-width: 1.2; }

.carto-estado[data-riesgo="alto"] { fill: var(--risk-alto-border); }
.carto-estado[data-riesgo="medio"] { fill: var(--risk-medio-border); }
.carto-estado[data-riesgo="bajo"] { fill: var(--risk-bajo-border); }
.carto-estado[data-riesgo="sin-datos"] { fill: var(--risk-informativo-bg); }

.grafica-leyenda__punto[data-riesgo="alto"] { background: var(--risk-alto-border); }
.grafica-leyenda__punto[data-riesgo="medio"] { background: var(--risk-medio-border); }
.grafica-leyenda__punto[data-riesgo="bajo"] { background: var(--risk-bajo-border); }
.grafica-leyenda__punto[data-riesgo="sin-datos"] {
  background: var(--risk-informativo-bg);
  border: 1px solid var(--risk-informativo-border);
}

.carto-ranking__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.carto-ranking__fila:last-child { border-bottom: none; }
.carto-ranking__n { color: var(--text-muted); font-size: 12px; width: 16px; }
.carto-ranking__nombre { flex: 1; }

.carto-fila--resaltada {
  background: #fdf4d8;
  transition: background 1.4s ease;
}

.nav-rail--sistema { background: #221a1a; border-right: 3px solid #d64f45; }

.etiqueta-modo-sistema {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #d64f45;
  background: rgba(214, 79, 69, 0.14);
  border: 1px solid rgba(214, 79, 69, 0.4);
  border-radius: 4px;
  padding: 3px 7px;
}

.pagina-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pagina-marca__logo { flex: none; }

.pagina-marca__nombre {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* -- Red de relaciones (compliance/red_relaciones.html) --
   Todos los controles (búsqueda, tipo, riesgo, enfoque, distribución)
   viven en UN solo panel (.red-filtros) -- antes eran tres filas de
   chips sueltas más una sección aparte de "más filtros" detrás de un
   <details>, lo que se sentía como dos niveles de filtro distintos y se
   veía apretujado. Ahora es un único panel con grupos claramente
   separados (gap generoso entre grupos, no solo entre chips) y nada
   detrás de un clic extra. */

.red-filtros { margin-bottom: 24px; }
.red-filtros h2 { margin-bottom: 16px; }

/* El panel completo es un <details>: colapsado por defecto, con una
   flechita en el "summary" que gira al abrirse. Quitamos el triángulo
   nativo del navegador y lo sustituimos por .red-filtros__flecha. */
.red-filtros__resumen {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.red-filtros__resumen::-webkit-details-marker { display: none; }
.red-filtros__resumen::marker { content: ""; }
.red-filtros__flecha {
  display: inline-block;
  transition: transform .15s ease;
  flex: none;
}
.red-filtros[open] .red-filtros__flecha { transform: rotate(90deg); }

.red-filtros__cuerpo { margin-top: 20px; }

.red-filtros__buscar { display: block; margin-bottom: 22px; }

/* Cada grupo es su propia fila con salto de línea (flex-wrap). El gap
   separa los chips entre sí, pero además cada chip trae su propio
   margen (abajo/derecha) como respaldo: así, aunque el `gap` de flexbox
   no se aplicara por lo que sea, los chips no quedarían pegados unos a
   otros ni ocupando todo el ancho del renglón. */
.red-filtros__grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 22px;
}

.red-filtros__etiqueta { font-size: 12px; color: var(--text-muted); flex: none; margin: 0 4px 10px 0; }

.red-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 12px;
  color: var(--text);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 13px;
  margin: 0 10px 10px 0;
  cursor: pointer;
  user-select: none;
}
.red-toggle--apagado { opacity: .4; }
.red-toggle__punto { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* El grid de campos (select/number/date/range) usa CSS grid cuando el
   navegador lo soporta, pero cada campo es además una "tarjeta"
   independiente (borde, fondo y margen propios) -- así se ve agrupado
   y separado del resto aunque, por lo que sea, el grid no se aplicara
   y los campos cayeran en flujo normal uno tras otro. */
.red-filtros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 20px;
  padding: 20px 0;
  margin-bottom: 4px;
  border-top: 1px solid var(--line);
}
.red-filtros__grid label {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  min-width: 190px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 12px 12px 0;
}
.red-filtros__grid input,
.red-filtros__grid select {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--paper);
}

.red-filtros__grupo--checks {
  gap: 20px 28px;
  padding: 18px 0 2px;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}
.red-filtros__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 13px;
  color: var(--text);
  margin: 0 10px 10px 0;
  cursor: pointer;
}
.red-filtros__check input { width: auto; }

.red-toolbar-ayuda {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.red-buscar {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 260px;
}

/* El grafo ya no comparte una grilla de columnas con el panel de detalle
   -- antes .red-area reservaba 320px fijos para el detalle TODO el
   tiempo, incluso sin ningún nodo elegido, así que el grafo perdía esa
   franja de ancho de forma permanente. Ahora .red-area es solo el
   contenedor relativo sobre el que flota la tarjeta de detalle; el grafo
   usa el 100% del ancho disponible siempre. */
.red-area { position: relative; }

.red-canvas-panel { padding: 12px; position: relative; }

.red-svg {
  width: 100%;
  /* Sin la leyenda de abajo ni la columna fija del detalle, hay más alto
     y ancho reales disponibles -- se sube el piso/techo un poco respecto
     a la versión anterior para aprovecharlo. */
  height: 80vh;
  min-height: 560px;
  max-height: 960px;
  display: block;
  cursor: grab;
  background: var(--paper);
  border-radius: 6px;
}

/* Tarjeta flotante de detalle -- vive sobre la esquina superior derecha
   del grafo (position:absolute respecto a .red-canvas-panel), así que
   NO le quita ancho al grafo. Empieza oculta (display:none) y solo
   aparece al elegir un nodo; .red-detalle__cerrar ("×") o un clic en un
   espacio vacío del grafo la vuelven a ocultar. */
.red-detalle {
  display: none;
  position: absolute;
  top: 24px;
  right: 24px;
  width: 300px;
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  overflow-y: auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  font-size: 13px;
  z-index: 5;
}
.red-detalle--visible { display: block; }

.red-detalle__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
}
.red-detalle__cerrar:hover { background: var(--line); color: var(--text); }

.red-detalle h4 { margin: 0 24px 4px 0; font-size: 16px; }
.red-detalle__roles { color: var(--text-muted); font-size: 12px; margin-bottom: 14px; }

.red-detalle__ficha { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.red-detalle__fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.red-detalle__fila > span:first-child { color: var(--text-muted); }

.red-detalle__rel { padding: 8px 0; border-bottom: 1px solid var(--line); }
.red-detalle__rel:last-child { border-bottom: none; }
.red-detalle__rel-tipo { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }

@media (max-width: 900px) {
  /* En pantallas angostas, una tarjeta flotante de 300px taparía casi
     todo el grafo -- en vez de flotar, se acomoda en flujo normal debajo
     del lienzo, a todo lo ancho. */
  .red-detalle {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    margin-top: 16px;
    box-shadow: none;
  }
}