/* ═══ Mapa 3D del cerebro (Configuración → Sinapsis) ═══
   Estética mínima en escala de grises: nodos grises e identidad en el color del texto.
   Los tokens vienen de style.css; aquí solo hay valores por defecto por si faltan. */

/* EL MAPA NO TIENE FONDO PROPIO (regla del director, 10-sep-2026: “el fondo debe perderse”).
   Tenía un degradado —papel en el centro, gris en los cantos— que en el tema claro lo volvía un
   panel gris metido en la tarjeta blanca, con un corte recto contra la columna de la tabla. Ahora
   el fondo es el de la tarjeta y la nube se desvanece hacia los bordes (máscara del lienzo, más
   abajo): no hay caja, hay nodos que se pierden. Sirve igual en claro y en oscuro porque no
   depende de ningún color. */
.mapa-cerebro {
  --mapa-canto: 72px;
  position: relative;
  height: 460px;
  min-height: 320px;
  flex: none;
  background: transparent;
  overflow: hidden;
  margin-bottom: 20px;
  user-select: none;
  -webkit-user-select: none;
}
.mapa-cerebro .mapa-lienzo {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none;
  /* Lo que se acerca al filo se desvanece: la intersección de dos degradados, uno por eje. */
  /* Primero los dos atajos y después los dos modos de combinar: un atajo pone el modo a su valor
     por defecto, y escrito detrás de “intersect” lo deshacía. */
  -webkit-mask:
    linear-gradient(to right, transparent, #000 var(--mapa-canto), #000 calc(100% - var(--mapa-canto)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--mapa-canto), #000 calc(100% - var(--mapa-canto)), transparent);
  mask:
    linear-gradient(to right, transparent, #000 var(--mapa-canto), #000 calc(100% - var(--mapa-canto)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--mapa-canto), #000 calc(100% - var(--mapa-canto)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* HUD: cifras y leyenda, arriba a la izquierda, sin capturar el puntero */
.mapa-hud {
  position: absolute; top: 14px; left: 16px; pointer-events: none;
  display: flex; flex-direction: column; gap: 7px;
  /* Nunca por debajo de los controles: la columna de botones ocupa 32px + su margen. */
  max-width: calc(100% - 72px);
}
.mp { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.mp-identidad { background: var(--texto, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--texto, #fff) 18%, transparent); }

/* ─── EL BORDE SE DESENFOCA (regla del director, 10-sep-2026) ───
   La nube se disuelve contra el filo en vez de cortarse en seco: cuatro franjas con desenfoque
   que se desvanecen hacia dentro, sobre el lienzo que ya se va apagando por su máscara. Ya no
   hay velo de color: pintaba el canto del gris del viejo fondo. Franjas y no un velo entero
   porque el desenfoque se paga por píxel y la nube se repinta en cada cuadro: solo se cobra
   donde se ve. Encima del lienzo y debajo de todo lo demás (controles, ticker, nota). */
.mapa-bruma { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mapa-bruma i {
  position: absolute; display: block;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.mapa-bruma .b-n, .mapa-bruma .b-s { left: 0; right: 0; height: 64px; }
.mapa-bruma .b-o, .mapa-bruma .b-e { top: 0; bottom: 0; width: 64px; }
.mapa-bruma .b-n { top: 0;    -webkit-mask: linear-gradient(to bottom, #000, transparent); mask: linear-gradient(to bottom, #000, transparent); }
.mapa-bruma .b-s { bottom: 0; -webkit-mask: linear-gradient(to top, #000, transparent);    mask: linear-gradient(to top, #000, transparent); }
.mapa-bruma .b-o { left: 0;   -webkit-mask: linear-gradient(to right, #000, transparent);  mask: linear-gradient(to right, #000, transparent); }
.mapa-bruma .b-e { right: 0;  -webkit-mask: linear-gradient(to left, #000, transparent);   mask: linear-gradient(to left, #000, transparent); }

/* Los controles, en COLUMNA a la derecha: en el ancho de la sinapsis (320px) una fila de
   cuatro botones se comía el sitio de las estadísticas y acababa encima de la leyenda. */
.mapa-controles {
  position: absolute; top: 14px; right: 16px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}

/* Ticker del pulso: últimos 3 eventos, abajo a la izquierda */
.mapa-ticker {
  position: absolute; left: 16px; bottom: 12px; pointer-events: none;
  display: flex; flex-direction: column-reverse; gap: 3px;
  font-size: 11px; color: var(--texto-suave, #8a8a8a);
  font-variant-numeric: tabular-nums;
}
.mapa-ticker-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(46vw, 420px); }
.mapa-ticker-item .hora { font-family: var(--font-mono, ui-monospace, Menlo, monospace); }
.mapa-ticker-item b { color: var(--texto-2, #cfcfcf); font-weight: 500; }
.mapa-ticker-item em { font-style: normal; opacity: .7; }
.mapa-ticker-item.escritura b { color: var(--texto, #fff); }
.mapa-ticker-item.n0 { opacity: 1; }
.mapa-ticker-item.n1 { opacity: .6; }
.mapa-ticker-item.n2 { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .mapa-ticker-item.n0 { animation: mapa-ticker-entra .35s var(--ease, ease-out); }
}
@keyframes mapa-ticker-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Etiqueta flotante del hover */
.mapa-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2;
  background: color-mix(in srgb, var(--panel, #0d0d0d) 92%, transparent); border: 1px solid var(--borde, #262626);
  border-radius: 10px; padding: 7px 10px; max-width: 320px;
  font-size: 12px; line-height: 1.4; color: var(--texto, #f5f5f5);
  box-shadow: var(--sombra, 0 6px 24px rgba(0,0,0,.45));
  will-change: transform;
}
.mapa-tip b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-tip span { display: block; font-size: 11px; color: var(--texto-suave, #8a8a8a); }
.mapa-tip.oculto, .mapa-vacio.oculto { display: none; }

.mapa-vacio {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  color: var(--texto-suave, #8a8a8a); font-size: 13.5px; line-height: 1.7; padding: 24px;
  pointer-events: none;
}
.mapa-ayuda { font-size: 12px; opacity: .8; }

/* Nota abierta desde el mapa: reutiliza .grafo-nota de style.css si existe; por si no: */
.mapa-cerebro > .grafo-nota { z-index: 3; }

/* ─── Tabla debajo del mapa ─── */
.mapa-tabla { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.mapa-tabla-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mapa-buscar {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel, #0d0d0d); border: 1px solid var(--borde, #262626);
  border-radius: 999px; padding: 0 14px; height: 34px; min-width: 260px;
}
.mapa-buscar svg { width: 14px; height: 14px; color: var(--texto-suave, #8a8a8a); flex: none; }
.mapa-buscar input {
  background: none; border: none; outline: none; color: var(--texto, #f5f5f5);
  font-family: inherit; font-size: 12.5px; width: 100%;
}
.mapa-buscar input::placeholder { color: var(--texto-suave, #8a8a8a); }
.mapa-buscar:focus-within { border-color: var(--texto-suave, #8a8a8a); }
.mapa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-chip {
  border: 1px solid var(--borde, #262626); background: transparent; color: var(--texto-suave, #8a8a8a);
  border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-family: inherit; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.mapa-chip b { font-weight: 500; color: var(--texto-2, #cfcfcf); margin-left: 3px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; }
.mapa-chip:hover { border-color: var(--texto-suave, #8a8a8a); color: var(--texto, #f5f5f5); }
.mapa-chip.activo { background: var(--contraste, #fff); border-color: var(--contraste, #fff); color: var(--contraste-texto, #000); }
.mapa-chip.activo b { color: var(--contraste-texto, #000); }
.mapa-tabla-cuenta { margin-left: auto; font-size: 11.5px; color: var(--texto-suave, #8a8a8a); font-variant-numeric: tabular-nums; }

.mapa-filas {
  border: 1px solid var(--borde, #262626); border-radius: 14px; overflow: hidden;
  background: var(--panel, #0d0d0d);
}
.mapa-fila {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1.6fr) 56px 128px;
  gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 8px 14px; border: 0; border-top: 1px solid var(--panel-2, #161616);
  background: transparent; color: var(--texto, #f5f5f5); font: inherit; font-size: 12.5px;
  cursor: pointer; transition: background .12s;
}
.mapa-fila:first-child { border-top: 0; }
.mapa-fila:hover, .mapa-fila:focus-visible { background: var(--realce, rgba(255,255,255,.035)); outline: none; }
.mapa-fila.cabecera {
  cursor: default; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave, #8a8a8a); padding-top: 9px; padding-bottom: 7px;
}
.mapa-fila.cabecera:hover { background: transparent; }
.mapa-fila.cabecera span { font: inherit; color: inherit; }
.mapa-fila-titulo { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-fila-titulo .mp { box-shadow: none; }
.mapa-fila-ruta { color: var(--texto-suave, #8a8a8a); font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-fila-frag { color: var(--texto-suave, #8a8a8a); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; text-align: right; }
.mapa-fila-fecha { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mapa-fila-fecha .hh { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11.5px; color: var(--texto-2, #cfcfcf); }
.mapa-fila-fecha .dd { font-size: 10.5px; color: var(--texto-suave, #8a8a8a); }
.mapa-vacio-tabla { padding: 16px; text-align: center; font-size: 12.5px; color: var(--texto-suave, #8a8a8a); }

@media (max-width: 760px) {
  .mapa-cerebro { height: 380px; }
  .mapa-fila { grid-template-columns: minmax(140px, 1.4fr) 44px 92px; }
  .mapa-fila-ruta { display: none; }
}

/* ─── Pantalla completa ───
   La nativa (navegador) cubre la pantalla entera. Sin ella —la app de macOS no la tiene— el
   mapa se fija a la TARJETA de contenido y no a la ventana (regla del director, 10-sep-2026: “en
   pantalla completa no debe ir hasta donde está el menú”): antes corría por debajo del menú
   lateral y la ficha de una memoria pasaba por detrás de él. La geometría de la tarjeta la pone
   encuadrarPantalla() en mapa-cerebro.js, en las variables --pc-*. */
.mapa-cerebro:fullscreen {
  position: fixed; inset: 0; z-index: 1000;
  width: 100%; height: 100%; min-height: 0;
  border: 0; border-radius: 0;
  /* Ya no hay tarjeta debajo que le preste el fondo: se pone el suyo. */
  background: var(--fondo, #000);
}
/* El segundo selector le gana a `.config-grupo.sinapsis .mapa-cerebro` (style.css), que en la
   ventana de Sinapsis fija alto, borde y radio y aquí dejaría el mapa sin las esquinas de la tarjeta. */
.mapa-cerebro.pantalla-completa,
.config-grupo.sinapsis .mapa-cerebro.pantalla-completa {
  position: fixed; z-index: 1000;
  top: var(--pc-arriba, 0); right: var(--pc-der, 0); bottom: var(--pc-abajo, 0); left: var(--pc-izq, 0);
  width: auto; height: auto; min-height: 0;
  border: 0; border-radius: var(--pc-radio, 0);
  background: var(--fondo, #000);
}
html.mapa-en-pantalla { overflow: hidden; }
/* EL MENÚ, ENCIMA (11-sep-2026). El lienzo ocupa el marco entero y le pasa por debajo; para que
   el menú se siga viendo sobre él hay que levantarlo por encima del z-index 1000 del mapa. Va
   acotado a `html.mapa-en-pantalla` a propósito: en reposo el .sidebar no cambia, que es lo que
   comprueba `npm run vidrio`, y ningún otro estado de la app se entera de esta regla. */
html.mapa-en-pantalla .sidebar { z-index: 1001; }
/* Y LO QUE SE LEE SE APARTA DEL MENÚ (--pc-menu, medido en encuadrarPantalla). Lo de debajo del
   menú son puntos y líneas, que es justo lo que se quería ver a pantalla completa; la ficha de
   la memoria, el rótulo y el ticker no: esconderlos detrás del menú fue lo que obligó a encoger
   el mapa el 10-sep. Ahora se corren, y no hace falta encoger nada. */
.mapa-cerebro.en-pantalla .mapa-hud {
  top: 18px; left: calc(var(--pc-menu, 0px) + 20px);
  max-width: calc(100% - var(--pc-menu, 0px) - 460px);
}
.mapa-cerebro.en-pantalla .mapa-controles { top: 18px; right: 20px; }
.mapa-cerebro.en-pantalla .mapa-ticker { left: calc(var(--pc-menu, 0px) + 20px); bottom: 18px; }
.mapa-cerebro.en-pantalla .grafo-nota {
  left: calc(var(--pc-menu, 0px) + 20px); right: 20px; bottom: 20px; max-height: max(150px, 30%);
}
.mapa-agente { height: 30px; font-size: 12px; max-width: 220px; }
.mapa-agente.oculto { display: none; }
.mapa-ayuda {
  position: absolute; right: 16px; bottom: 12px; font-size: 11px; color: var(--texto-suave, rgba(255,255,255,.38));
  pointer-events: none; text-align: right; max-width: 60%;
  opacity: 0; transition: opacity .3s;
}
.mapa-cerebro:hover .mapa-ayuda, .mapa-cerebro:focus-within .mapa-ayuda { opacity: 1; }
.mapa-cerebro:focus { outline: none; }
.mapa-cerebro:focus-visible { box-shadow: inset 0 0 0 1px var(--borde-2, rgba(255,255,255,.25)); }

/* Los cuatro botones del mapa: mismo tamaño, mismo trazo, sin una palabra encima. */
.mapa-icono {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--texto-2); cursor: pointer;
  transition: color .16s var(--ease, ease), border-color .16s var(--ease, ease), background .16s var(--ease, ease);
}
.mapa-icono svg { width: 15px; height: 15px; }
.mapa-icono:hover { color: var(--texto); border-color: var(--borde-2); background: var(--panel); }

/* Lo que se LEE no se desenfoca: el ticker, la ayuda y los avisos viven en el borde, justo
   donde está la bruma, y con `z-index: auto` quedaban debajo de ella y salían borrosos. */
.mapa-hud, .mapa-ticker, .mapa-ayuda, .mapa-vacio { z-index: 2; }