/* Componentes generales. Ningún color literal: todo sale de tokens.css / dark.css / paletas. */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--fondo); color-scheme: light; }
[data-mode="dark"], [data-mode="auto"] { color-scheme: dark; }
@media (prefers-color-scheme: light) { [data-mode="auto"] { color-scheme: light; } }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--fs-base);
  line-height: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
  body, .barra, .tarjeta, .campo, .tabla td { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
}
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--acento-fuerte); text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.7rem; letter-spacing: .02em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
  background: var(--barra-fondo);
  border-bottom: 1px solid var(--borde);
}
.marca {
  flex: none; padding: 14px 0;
  font-weight: 700; font-size: 1.05rem; color: var(--texto);
  white-space: nowrap;
}
.marca:hover { text-decoration: none; color: var(--texto); }
.marca-sacha { color: var(--marca-sacha); }
.marca-wiki { color: var(--enlace); letter-spacing: .04em; }
.marca-devops { color: var(--texto); }
.marca-pve {
  font-size: .7rem; font-weight: 700; color: var(--sobre-acento); background: var(--acento);
  padding: 1px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px;
}
.nav {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; flex: 1;
}
.nav a {
  flex: none; padding: var(--nav-y) 12px calc(var(--nav-y) - 3px);
  color: var(--texto-suave); font-weight: 600; font-size: .92rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--texto); text-decoration: none; }
.nav a.activo { color: var(--acento-fuerte); border-bottom-color: var(--acento); }

/* ---------- Contenido ---------- */
.app { max-width: 1400px; margin: 0 auto; padding: var(--app-pad) 20px 60px; }
.migas { font-size: .85rem; color: var(--texto-suave); margin-bottom: 10px; }
.bajada { color: var(--texto-suave); max-width: 780px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--pad-tarjeta);
}
.etiqueta {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
  background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borde);
}
.etiqueta.wip { color: var(--wip); border-color: color-mix(in srgb, var(--wip) 45%, transparent); }
.etiqueta.trader { color: var(--enlace); }

/* ---------- Mapa de tránsito ---------- */
.transito-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px;
  margin-top: 18px;
}
.transito-lienzo { padding: 0; overflow: hidden; }
.transito-lienzo svg { display: block; width: 100%; height: auto; }

.svg-fondo { fill: var(--svg-fondo); }
.svg-grilla { stroke: var(--svg-grilla); stroke-width: 1; }

.arista { fill: none; stroke-width: 3; transition: opacity .15s; }
.zona-clic { fill: transparent; }
.arista.doble { stroke: var(--doble); }
.arista.unico {
  stroke: var(--unico); stroke-dasharray: 10 8;
  animation: fluir 1.1s linear infinite;
}
@keyframes fluir { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .arista.unico { animation: none; } }
.flecha path { fill: var(--unico); }

.nodo { cursor: pointer; }
.nodo .punto { fill: var(--nodo-punto); stroke: var(--nodo-contorno); stroke-width: 3; transition: r .15s; }
.nodo .halo { fill: var(--acento); opacity: 0; transition: opacity .15s; }
.nodo text {
  fill: var(--nodo-texto); font: 700 15px var(--fuente); letter-spacing: .04em;
  paint-order: stroke; stroke: var(--nodo-texto-borde); stroke-width: 5px; stroke-linejoin: round;
  transition: opacity .15s;
}
.nodo:hover .halo, .nodo:focus .halo, .nodo.sel .halo { opacity: .35; }
.nodo:hover text, .nodo.sel text { fill: var(--acento-fuerte); }
.nodo a:focus { outline: none; }

.transito.foco .arista:not(.on) { opacity: .1; }
.transito.foco .nodo:not(.on):not(.sel) text { opacity: .35; }
.transito.foco .nodo:not(.on):not(.sel) .punto { opacity: .45; }

.panel h2 { margin-bottom: .3em; }
.panel .grupo { margin-top: 14px; }
.panel .grupo h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); margin-bottom: 6px;
}
.panel ul { margin: 0; padding-left: 18px; }
.panel li { margin: 2px 0; }
.panel .vacio { color: var(--texto-suave); font-style: italic; }
.leyenda { display: grid; gap: 8px; margin-top: 16px; font-size: .9rem; }
.leyenda div { display: flex; align-items: center; gap: 10px; }
.leyenda svg { flex: none; }
.leyenda .linea-doble { stroke: var(--doble); }
.leyenda .linea-unico { stroke: var(--unico); }
.credito { font-size: .78rem; color: var(--texto-suave); margin-top: 16px; }

/* ---------- Grilla de mapas ---------- */
.grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--gap);
  margin-top: 12px;
}
.ficha-mapa { display: block; color: var(--texto); transition: border-color .15s, transform .15s; }
.ficha-mapa:hover { text-decoration: none; color: var(--texto); border-color: var(--acento); transform: translateY(-2px); }
.ficha-mapa h3 { margin-bottom: 4px; }
.ficha-mapa p { font-size: .82rem; color: var(--texto-suave); margin: 0; }

.campo { display: flex; justify-content: space-between; gap: 10px; padding: var(--campo-y) 0; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.campo:last-child { border-bottom: none; }
.campo span:first-child { color: var(--texto-suave); }

.lista-personas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--gap); margin-top: 12px;
}
.lista-personas .tarjeta { display: flex; flex-direction: column; gap: 6px; color: var(--texto); }
.lista-personas .tarjeta:hover { text-decoration: none; border-color: var(--acento); }
.lista-personas small { color: var(--texto-suave); }
.seccion-titulo { margin-top: 28px; }

/* ---------- Mapa interactivo ---------- */
.mapa-cabecera .bajada { margin-bottom: 0; }
.mapa-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: var(--gap); margin-top: 14px;
  height: calc(100vh - 190px); min-height: 540px;
}
.mapa-layout > .tarjeta { overflow-y: auto; }
.col-izq h2, .col-der h2 { font-size: 1rem; }
.col-izq h2.sub, .col-der h2.sub { margin-top: 18px; }
.bloque-vista:not([hidden]) + .sub-si-vista { margin-top: 18px; }
.mapa-base.satelite .grupo-base { display: none; }
.col-der .info-mapa { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.col-mapa { padding: 0; overflow: hidden; position: relative; }
.lienzo-mapa { position: absolute; inset: 0; background: var(--mapa-fondo); }
.cargando { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--texto-suave); padding: 20px; text-align: center; }
.vacio { color: var(--texto-suave); font-style: italic; font-size: .9rem; }

.filtros { display: grid; gap: 4px; }
.filtro { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; padding: 3px 0; }
.filtro input { accent-color: var(--acento); margin: 0; }
.niveles { display: flex; flex-wrap: wrap; gap: 6px; }
.nivel {
  font: inherit; font-size: .82rem; padding: 4px 10px; border-radius: 5px; cursor: pointer;
  background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borde);
}
.nivel.activo { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); font-weight: 700; }

.lista-bosses, .lista-ext { list-style: none; padding: 0 !important; }
.lista-bosses li, .lista-ext li { padding: var(--fila-lista) 0; border-bottom: 1px solid var(--borde); }
.lista-bosses li:last-child, .lista-ext li:last-child { border-bottom: none; }
.dif { display: block; font-size: .74rem; color: var(--wip); text-align: right; }
.enemigos { font-size: .9rem; margin: 3px 0; }
.no-pve a, .no-pve { text-decoration: line-through; opacity: .6; }
.nota-mapa { font-size: .85rem; color: var(--acento-fuerte); background: var(--superficie-2); border-left: 3px solid var(--acento); padding: 6px 10px; margin: 8px 0; }
.chance { float: right; color: var(--texto-suave); font-size: .85rem; }
.escoltas { font-size: .8rem; color: var(--texto-suave); }

/* Marcadores */
.mk-wrap { background: none; border: none; }
.mk {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 10px var(--fuente); color: var(--mk-texto);
  border: 2px solid var(--mk-borde); box-shadow: 0 0 0 1px var(--mk-anillo);
}
.mk-mini { width: 12px; height: 12px; flex: none; border-width: 1px; }
.mk-ext-pmc { background: var(--mk-pmc); }
.mk-ext-scav { background: var(--mk-scav); }
.mk-ext-shared { background: var(--mk-shared); }
.mk-transito { background: var(--mk-transito); }
.mk-boss { background: var(--mk-boss); color: var(--mk-texto-claro); }
.mk-spawn-pmc { background: var(--mk-spawn-pmc); border-width: 1px; }
.mk-spawn-scav { background: var(--mk-spawn-scav); border-width: 1px; }
.mk-llave { background: var(--acento); color: var(--sobre-acento); border-radius: 4px; font-size: 9px; }
.mk-peligro { background: repeating-linear-gradient(45deg, var(--mk-boss) 0 3px, var(--mk-peligro-b) 3px 6px); }
.mk-arma { background: var(--mk-arma); border-radius: 4px; font-size: 9px; }
.mk-zona { background: var(--acento-suave); border-color: var(--acento); border-radius: 3px; }
.mk-mision { background: var(--mk-mision); }
.mk-foco { background: var(--foco); color: var(--mk-texto-claro); box-shadow: 0 0 0 4px var(--foco-halo); }
.mk-etq { background: none; border: none; box-shadow: none; }
.mk-etq::after { content: "Aa"; font-size: 9px; color: var(--texto); }

/* Polígonos de Leaflet: el color sale del CSS, no de las opciones en JS */
.leaflet-interactive.poli-minefield { stroke: var(--poli-minas); fill: var(--poli-minas); }
.leaflet-interactive.poli-sniper { stroke: var(--poli-sniper); fill: var(--poli-sniper); }
.leaflet-interactive.poli-mision { stroke: var(--poli-mision); fill: var(--poli-mision); }
.leaflet-interactive.poli-zona { stroke: var(--acento); fill: var(--acento); }

.etq-wrap { background: none; border: none; }
.etq {
  position: absolute; white-space: nowrap; color: var(--etq-texto); font-weight: 700; letter-spacing: .03em;
  text-shadow: 0 0 3px var(--etq-sombra), 0 0 3px var(--etq-sombra); pointer-events: none;
}
.capa-oculta { display: none; }
.capa-atenuada { opacity: .35; }

.coords {
  background: var(--overlay-fondo); color: var(--texto-suave); padding: 3px 8px; border-radius: 4px;
  font: 12px ui-monospace, Consolas, monospace; white-space: pre;
}

/* Leaflet con el tema de la wiki */
.leaflet-container { font-family: var(--fuente); background: var(--mapa-fondo); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); }
.leaflet-popup-content { margin: 12px 14px; font-size: .88rem; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--texto-suave); }
.leaflet-tooltip { background: var(--tooltip-fondo); color: var(--texto); border: 1px solid var(--borde); box-shadow: none; }
.leaflet-tooltip-top::before { border-top-color: var(--borde); }
.leaflet-control-attribution { background: var(--overlay-fondo) !important; color: var(--texto-suave); }
.leaflet-control-attribution a { color: var(--enlace); }
.leaflet-bar a { background: var(--superficie-2); color: var(--texto); border-bottom-color: var(--borde); }
.leaflet-bar a:hover { background: var(--superficie); color: var(--acento-fuerte); }
.tt-zona { background: var(--overlay-fondo); font-weight: 700; color: var(--acento-fuerte); }
.pop .pop-sub { color: var(--texto-suave); font-size: .8rem; }
.pop ul { margin: 6px 0 0; padding-left: 16px; }

/* ---------- Selector de tema ---------- */
.tema { position: relative; flex: none; }
.tema-boton {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); border-radius: 6px; padding: 6px 12px;
}
.tema-boton:hover { border-color: var(--acento); }
.tema-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; z-index: 1001;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px; box-shadow: 0 10px 30px color-mix(in srgb, var(--etq-sombra) 35%, transparent);
}
.tema-panel[hidden] { display: none; }
.tema-panel h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); margin: 12px 0 6px; }
.tema-panel h3:first-child { margin-top: 0; }
.segmentado { display: flex; border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; }
.segmentado button {
  flex: 1; font: inherit; font-size: .85rem; padding: 6px 4px; cursor: pointer;
  background: var(--superficie-2); color: var(--texto); border: none; border-right: 1px solid var(--borde);
}
.segmentado button:last-child { border-right: none; }
.segmentado button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: 700; }
.muestras { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.muestra {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid var(--borde); outline-offset: 2px;
}
.muestra[aria-pressed="true"] { outline: 2px solid var(--texto); }
.muestra[data-valor="arena"] { background: var(--muestra-arena); }
.muestra[data-valor="acero"] { background: var(--muestra-acero); }
.muestra[data-valor="oliva"] { background: var(--muestra-oliva); }
.muestra[data-valor="oxido"] { background: var(--muestra-oxido); }
.muestra[data-valor="violeta"] { background: var(--muestra-violeta); }
.muestra-libre { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto); cursor: pointer; }
.muestra-libre input { width: 34px; height: 30px; padding: 0; border: 1px solid var(--borde); border-radius: 6px; background: none; cursor: pointer; }
.muestra-libre.activa { font-weight: 700; color: var(--acento-fuerte); }
.aviso-contraste { font-size: .8rem; color: var(--peligro); background: var(--peligro-fondo); border-radius: 6px; padding: 6px 8px; margin-top: 8px; }
.aviso-contraste[hidden] { display: none; }

/* ---------- Sesión, perfil y administración ---------- */
.perfil { position: relative; flex: none; }
.perfil-boton { display: inline-flex; align-items: center; gap: 8px; }
a.tema-boton { display: inline-block; text-decoration: none; }
.perfil-panel { width: 230px; padding: 6px; display: flex; flex-direction: column; }
.perfil-panel[hidden] { display: none; }
.perfil-panel a, .perfil-panel button {
  display: block; text-align: left; font: inherit; font-size: .9rem; padding: 8px 10px; border-radius: 6px;
  color: var(--texto); background: none; border: none; cursor: pointer;
}
.perfil-panel a:hover, .perfil-panel button:hover { background: var(--superficie-2); text-decoration: none; color: var(--acento-fuerte); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); font-weight: 800; font-size: .8rem; flex: none;
}
.avatar.grande { width: 72px; height: 72px; font-size: 2rem; }
body.sin-sesion .nav, body.sin-sesion .tema, body.sin-sesion .perfil { visibility: hidden; }

.caja-ingreso { max-width: 420px; margin: 40px auto; }
.caja-ingreso h1.marca { font-size: 1.6rem; padding: 0; white-space: normal; }
.caja-ingreso form, .form-fila { display: flex; flex-direction: column; gap: 12px; }
.form-fila { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.caja-ingreso label, .form-fila label:not(.marcar) { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texto-suave); }
.caja-ingreso input, .form-fila input:not([type=checkbox]) {
  font: inherit; padding: 9px 11px; border-radius: 6px; border: 1px solid var(--borde);
  background: var(--superficie-2); color: var(--texto);
}
.caja-ingreso input:focus, .form-fila input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.boton-primario {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer; text-align: center;
  padding: 9px 16px; border-radius: 6px; border: 1px solid var(--acento);
  background: var(--acento); color: var(--sobre-acento);
}
.boton-primario:hover { text-decoration: none; color: var(--sobre-acento); filter: brightness(1.08); }
.error-form { color: var(--peligro); background: var(--peligro-fondo); border-radius: 6px; padding: 8px 10px; font-size: .88rem; }
.error-form[hidden] { display: none; }
.boton-primario:disabled { opacity: .5; cursor: not-allowed; filter: none; }
input.campo-mal { border-color: var(--peligro); outline-color: var(--peligro); }
.aviso-global {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2000;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--acento); border-radius: 8px; padding: 10px 16px;
}
.aviso-global[hidden] { display: none; }

.barra-progreso { height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; margin-top: 6px; width: 100%; min-width: 60px; }
.barra-progreso span { display: block; height: 100%; background: var(--acento); }
.datos-progreso { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap); margin-top: 10px; }
.dato-progreso { display: flex; flex-direction: column; gap: 2px; }
.dato-progreso small { color: var(--texto-suave); }
.dato-progreso strong { font-size: 1.4rem; }
.resumen-progreso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 12px 0; }
.resumen-progreso .barra-progreso { flex: 1 1 200px; margin: 0; }
.ficha-mapa.completa { border-color: var(--acento); }
.nivel-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nivel-hideout.construido { border-color: var(--acento); }
.nivel-hideout.construido .tabla-envoltura { opacity: .55; }
.acciones { white-space: nowrap; }
.acciones button {
  font: inherit; font-size: .8rem; padding: 4px 8px; margin: 2px 4px 2px 0; border-radius: 5px; cursor: pointer;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde);
}
.acciones button:hover { border-color: var(--acento); }
.acciones button.peligro { color: var(--peligro); }

.campana { position: relative; display: inline-flex; align-items: center; padding: 6px 10px; margin-right: 6px; }
.campana svg { fill: currentColor; }
.insignia {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--acento); color: var(--sobre-acento); font-size: .7rem; font-weight: 800; line-height: 18px; text-align: center;
}
.crear-cuenta { margin-top: 16px; border-top: 1px solid var(--borde); padding-top: 12px; }
.crear-cuenta summary { cursor: pointer; color: var(--enlace); font-weight: 600; margin-bottom: 10px; }
.crear-cuenta form { display: flex; flex-direction: column; gap: 12px; }
.ok-form { color: var(--ok); background: var(--ok-fondo); border-radius: 6px; padding: 8px 10px; font-size: .88rem; }
.ok-form[hidden] { display: none; }
.form-notif { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.form-notif label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texto-suave); }
.form-notif input, .form-notif select, .form-notif textarea {
  font: inherit; padding: 9px 11px; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto);
}
.form-notif .boton-primario { align-self: flex-start; }
.lista-notif { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.notif {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--pad-celda-y) 14px;
}
.notif.nueva { border-color: var(--acento); }
.notif p { margin: 4px 0; color: var(--texto); }
.notif small { color: var(--texto-suave); }
.notif .etiqueta { justify-self: start; }
.notif-agregado { color: var(--ok); border-color: var(--fir-borde); }
.notif-mejora { color: var(--enlace); }
.notif-cambio { color: var(--aviso); }
.notif-quitado { color: var(--peligro); }
.notif-aviso { color: var(--wip); }
.notif-admin { color: var(--kappa); border-color: var(--kappa-borde); }
.acciones-boton {
  font: inherit; font-size: .8rem; padding: 4px 8px; border-radius: 5px; cursor: pointer;
  background: var(--superficie-2); color: var(--peligro); border: 1px solid var(--borde);
}

/* ---------- Administración: conexiones ---------- */
.conexion { display: flex; flex-direction: column; gap: 2px; }
.conexion small { color: var(--texto-suave); }
.fila-historial > td { background: var(--superficie-2); }
.fila-historial .tabla { margin: 4px 0; }

/* ---------- Administración: errores ---------- */
.perfil-boton { position: relative; }
.insignia-error { background: var(--peligro); color: var(--superficie); }
.menu-errores { color: var(--peligro) !important; font-weight: 600; }
.barra-errores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.barra-errores select {
  font: inherit; font-size: .85rem; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto);
}
.lista-errores { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.error-item {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--pad-celda-y) 14px;
}
.error-item.nueva { border-color: var(--peligro); }
.error-item.marcado { background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--acento); }
.marca-error, .marcar-todos input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }
.marcar-todos { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto); cursor: pointer; }
.barra-errores button:disabled { opacity: .45; cursor: not-allowed; }
.barra-errores .separador { flex: 1; }
.error-cabecera { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.error-cabecera .acciones-boton { margin-left: auto; }
.error-back { color: var(--peligro); }
.error-front { color: var(--enlace); }
.error-nuevo { color: var(--peligro); font-size: .78rem; }
.error-mensaje { overflow-wrap: anywhere; }
.error-item small { color: var(--texto-suave); }
.error-item summary { cursor: pointer; color: var(--enlace); font-size: .85rem; }
.error-item pre {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--superficie-2); color: var(--texto);
  font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto;
}

/* ---------- Flea Market ---------- */
.flea-detalle .tabla { margin-top: 10px; }
td[data-flea] { white-space: nowrap; }
.flea-grande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.flea-grande b { font-size: 1.6rem; }
.flea-grande small { flex-basis: 100%; color: var(--texto-suave); }
.flea-var { font-weight: 700; white-space: nowrap; }
.flea-var.sube { color: var(--ok); }
.flea-var.baja { color: var(--peligro); }
.flea-consejo { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--superficie-2); border-left: 3px solid var(--acento); }
.flea-consejo.flea { border-left-color: var(--ok); }
.flea-nivel { margin: 8px 0 0; font-size: .9rem; color: var(--texto-suave); }
.flea-nivel b { color: var(--texto); }
.flea-nivel.alto b { color: var(--aviso); }
.flea-nv { display: block; font-size: .75rem; color: var(--texto-suave); }
.flea-nv.alto { color: var(--aviso); font-weight: 600; }

.segmentado button.activo { background: var(--acento); color: var(--sobre-acento); font-weight: 700; }
.boton-secundario {
  display: inline-block; font: inherit; font-weight: 600; text-align: center; padding: 9px 16px; border-radius: 6px;
  border: 1px solid var(--acento); color: var(--enlace); background: transparent;
}
.boton-secundario:hover { text-decoration: none; background: var(--superficie-2); }

/* Gráfico de precio: una serie, grilla tenue, cursor con cartel */
.grafico-precio { margin-top: 16px; }
.grafico-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.grafico-cabecera h3 { margin: 0; font-size: .95rem; }
.rango-precio button { padding: 5px 10px; flex: none; }
.g-envoltura { position: relative; }
.g-precio { overflow: visible; touch-action: pan-y; }
.g-grilla { stroke: var(--borde); stroke-width: 1; }
.g-eje { fill: var(--texto-suave); font-size: 11px; }
.g-linea { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-cursor { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 3 3; }
.g-punto { fill: var(--acento); stroke: var(--superficie); stroke-width: 2; }
.g-zona { fill: transparent; cursor: crosshair; }
.g-cartel {
  position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 6px; padding: 4px 8px;
  display: flex; flex-direction: column; color: var(--texto); font-size: .8rem;
}
.g-cartel small { color: var(--texto-suave); }
.g-cartel[hidden] { display: none; }

/* Intercambios y crafts valuados con el Flea */
.trueque { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.trueque small { color: var(--texto-suave); }
.trueque .trueque-bien { color: var(--ok); font-weight: 600; }
.trueque .trueque-mal { color: var(--peligro); }
.con-cant { display: inline-flex; align-items: center; gap: 4px; }
.herramientas { display: block; margin-top: 4px; color: var(--texto-suave); font-size: .78rem; }
.fila-craft.no-disponible > td:not(.craft-plata) { opacity: .55; }
.fila-craft .escoltas { display: block; margin-top: 2px; }
.tabla-crafts td:nth-child(2), .tabla-crafts td:nth-child(4) { white-space: nowrap; }
.tabla-crafts td.craft-plata { min-width: 190px; }
.fila-craft.craft-raro { box-shadow: inset 3px 0 0 var(--wip); }
.filtros-crafts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.filtros-crafts .buscador { flex: 1 1 260px; margin: 0; }
.filtros-crafts select {
  font: inherit; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto);
}
.resumen-falta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 12px 0; }
.resumen-falta > div { display: flex; flex-direction: column; gap: 2px; }
.resumen-falta span { color: var(--texto-suave); font-size: .85rem; }
.resumen-falta b { font-size: 1.3rem; }
.resumen-falta small { color: var(--texto-suave); font-size: .75rem; }
.grupo-items { font-size: .9rem; }
.lista-goons { list-style: none; padding: 0; margin: 0; }
.lista-goons li { padding: 5px 0; border-bottom: 1px solid var(--borde); display: flex; gap: 8px; align-items: baseline; }
.lista-goons small { color: var(--texto-suave); margin-left: auto; }

.fotos-spawn { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin: 14px 0 8px; }

/* "Se craftea en el hideout" en las fichas de items */
.se-craftea { margin: 12px 0; }
.se-craftea ul { list-style: none; padding: 0; margin: 0; }
.se-craftea li { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.se-craftea li:last-child { border-bottom: none; padding-bottom: 0; }
.se-craftea .items-fila { margin-top: 6px; }

/* Calculadora de la granja de bitcoin */
.calc-btc { margin-bottom: 18px; }
.calc-btc-controles { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin: 10px 0 14px; }
.calc-etiqueta { display: block; font-size: .85rem; color: var(--texto-suave); margin-bottom: 6px; }
.calc-etiqueta b { color: var(--texto); font-size: 1rem; }
.calc-nivel button { padding: 6px 14px; flex: none; }
.calc-placas { flex: 1 1 260px; }
.calc-placas input[type=range] { width: 100%; accent-color: var(--acento); }
.calc-btc-datos { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 14px; }
.calc-btc-datos > div { display: flex; flex-direction: column; gap: 2px; }
.calc-btc-datos span { color: var(--texto-suave); font-size: .85rem; }
.calc-btc-datos b { font-size: 1.3rem; }
.calc-btc-datos small { color: var(--texto-suave); font-size: .75rem; }
.grafico-btc h3 { margin: 0 0 6px; font-size: .95rem; }
.g-tope { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.g-elegido { fill: var(--acento); stroke: var(--superficie); stroke-width: 2; }

/* ---------- Traders: grilla como en el juego ---------- */
/* Son 9, centrados: 4 arriba y 5 abajo. Cada tarjeta ocupa 2 de 10 columnas y la primera arranca en la 2,
   así la fila de 4 queda corrida media tarjeta y centrada sobre la de 5. En celular, 3×3. */
.grilla-traders {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--gap);
  max-width: 1000px; margin: 16px auto 0;
}
.grilla-traders .tarjeta-trader { grid-column: span 2; }
.grilla-traders .tarjeta-trader:first-child { grid-column: 2 / span 2; }
@media (max-width: 640px) {
  .grilla-traders { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grilla-traders .tarjeta-trader:first-child { grid-column: span 2; }
}
.tarjeta-trader {
  display: flex; flex-direction: column; align-items: stretch; overflow: hidden; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.tarjeta-trader:hover { text-decoration: none; border-color: var(--acento); }
.retrato.trader { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; image-rendering: auto; }
.trader-nombre { text-align: center; font-weight: 700; padding: 6px 4px; background: var(--superficie-2); border-top: 1px solid var(--borde); }
.trader-datos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; padding: 6px 8px; font-size: .8rem; color: var(--texto-suave); }
.trader-repo b { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; }
.trader-repo.pronto b { color: var(--aviso); }
.trader-repo.repuesto b { color: var(--ok); }

@media (max-width: 1100px) {
  .mapa-layout { grid-template-columns: 220px minmax(0, 1fr) 240px; }
}
@media (max-width: 1000px) {
  .transito-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mapa-layout { grid-template-columns: 1fr; }
  .mapa-layout .col-mapa { grid-column: 1; grid-row: 1; height: 65vh; }
  .mapa-layout .col-der, .mapa-layout .col-izq { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .barra { flex-wrap: wrap; gap: 0 10px; padding: 0 12px; }
  .marca { padding: 10px 0 0; }
  .nav { order: 3; flex-basis: 100%; }
  .tema { margin-left: auto; padding-top: 8px; }
  .tema-panel { width: min(300px, calc(100vw - 24px)); }
  .app { padding: 16px 12px 40px; }
  h1 { font-size: 1.4rem; }
}