/* =====================================================================
   KIRA · ui4 (7 oct 2026): interacción rehecha según Pablo.
   - Cabecera mínima: MENU (cajón lateral izquierdo) + logo. En el mapa flota y el mapa ocupa toda la pantalla.
   - Cajón #cajon: DROPS · DIARY · WHO IS KIRA · YOUR FINDS · HOW IT WORKS (acordeón) + aviso de IA.
   - Controles del mapa .mctl: +, −, recentrar y sonido, abajo a la derecha.
   - Pistas .pistas (primera vez), título de misión .mision (CHONGQING en verde Matrix) y puntos
     escondidos .secreto (src/secretos.js).
   Manifiesto: la interfaz se repliega; la luz (el verde) solo como recompensa o como firma de la misión.
   ===================================================================== */
:root { --cajon: min(400px, 92vw); --verde-matrix: #00FF41; }

/* ---------- cabecera ---------- */
.cabecera { justify-content: flex-start; gap: 12px; padding: 0 12px 0 10px; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; min-width: 44px; padding: 0 15px 0 11px; flex: none;
  border: 1px solid rgba(122, 27, 255, .55); background: rgba(9, 7, 16, .78); color: var(--platino); cursor: pointer;
  font: 700 12px/1 var(--font-mono); letter-spacing: .2em; clip-path: var(--kw-chaflan);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, border-color .15s;
}
.menu-btn:hover { background: rgba(42, 0, 102, .8); border-color: var(--violeta); }
.menu-btn:hover svg path:last-child { fill: var(--platino); }
.menu-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gusano); }
.menu-btn[aria-expanded="true"] { background: var(--violeta-hondo); border-color: var(--violeta); }
/* en el mapa: la cabecera flota sobre la ciudad (sin barra) */
body[data-vista="mapa"] .cabecera {
  position: fixed; top: 0; left: 0; right: auto; height: auto; padding: 12px 14px; background: none; border: 0; pointer-events: none;
}
body[data-vista="mapa"] .cabecera > * { pointer-events: auto; }
body[data-vista="mapa"] .logo { filter: drop-shadow(0 0 6px rgba(7, 6, 10, .9)); }
body[data-vista="mapa"] .logo-sub { text-shadow: 0 0 4px var(--negro); }
body.con-entrada .cabecera { visibility: hidden; }
body.mapa-3d:not(.mundo-listo)[data-vista="mapa"] .cabecera { opacity: 0; pointer-events: none; }
body.mapa-3d[data-vista="mapa"] .cabecera { transition: opacity .6s .1s; }
/* el mapa ocupa toda la pantalla (menos el aviso de IA) */
body[data-vista="mapa"] .vista-mapa { height: calc(100vh - var(--aviso)); height: calc(100dvh - var(--aviso)); min-height: 420px; margin: 0; }
/* titular del mapa: solo para lectores de pantalla; reserva la franja de la cabecera (los indicadores de borde no se meten debajo) */
.vista-mapa .mapa-intro { position: absolute; top: 0; left: 0; right: 0; max-width: none; height: 64px; padding: 0; opacity: 0 !important; clip-path: inset(50%); pointer-events: none; overflow: hidden; }

/* ---------- cajón ---------- */
.cajon-velo { position: fixed; inset: 0 0 var(--aviso) 0; z-index: 25; background: rgba(4, 3, 8, .55); opacity: 0; transition: opacity .25s ease; }
.cajon-velo.visible { opacity: 1; }
.cajon {
  position: fixed; z-index: 26; top: 0; left: 0; bottom: var(--aviso); width: var(--cajon);
  display: flex; flex-direction: column; color: var(--platino);
  background: linear-gradient(180deg, rgba(14, 9, 28, .97), rgba(8, 6, 14, .98) 40%);
  border-right: 1px solid var(--violeta); box-shadow: 24px 0 70px rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateX(-104%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.cajon.visible { transform: none; }
.cajon::after { /* filo de escaneo en el borde */
  content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 120px; background: linear-gradient(transparent, var(--gusano), transparent);
  opacity: .7; animation: cj-filo 6s linear infinite; pointer-events: none;
}
@keyframes cj-filo { from { transform: translateY(-120px); } to { transform: translateY(100vh); } }
.cj-cab { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--kw-borde); }
.cj-tit { margin: 0; font-size: 11px; letter-spacing: .34em; color: var(--violeta-texto); }
.cj-x { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--plata); cursor: pointer; clip-path: var(--kw-chaflan); }
.cj-x:hover { color: var(--platino); background: rgba(42, 0, 102, .6); }
.cj-x:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gusano); color: var(--platino); }
.cj-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 14px; scrollbar-width: thin; scrollbar-color: rgba(122, 27, 255, .5) transparent; }
.cj-volver { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 20px; font-size: 11px; letter-spacing: .16em; color: var(--gusano); text-decoration: none; }
.cj-volver:hover { color: var(--platino); }
.cj-volver[hidden] { display: none; }
.cj-sec { border-bottom: 1px solid rgba(169, 175, 186, .1); }
.cj-h { margin: 0; font: inherit; }
.cj-sec-b {
  all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 20px;
  cursor: pointer; color: var(--plata); transition: background .15s, box-shadow .15s;
}
.cj-ico { flex: none; width: 22px; display: grid; place-items: center; color: var(--violeta-texto); }
.cj-nom { flex: 1; min-width: 0; font-size: 21px; color: var(--platino); transition: text-shadow .15s, color .15s; }
.cj-meta { flex: none; font-size: 11px; letter-spacing: .08em; color: var(--gusano); }
.cj-flecha { flex: none; width: 8px; height: 8px; margin: 0 3px 4px 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.cj-sec-b[aria-expanded="true"] .cj-flecha { transform: rotate(-135deg); margin-bottom: -3px; }
.cj-sec-b:hover { background: rgba(42, 0, 102, .28); }
.cj-sec-b:hover .cj-nom { text-shadow: -2px 0 var(--violeta), 2px 0 rgba(163, 245, 31, .45); }
.cj-sec-b:focus-visible { box-shadow: inset 3px 0 0 var(--gusano); background: rgba(42, 0, 102, .4); }
.cj-sec.abierta > .cj-h .cj-sec-b { box-shadow: inset 3px 0 0 var(--violeta); }
.cj-sec.abierta > .cj-h .cj-sec-b:focus-visible { box-shadow: inset 3px 0 0 var(--gusano); }
.cj-pan { padding: 2px 20px 20px; }
.cj-pan:focus { outline: none; }
.cj-pie { flex: none; padding: 10px 20px 12px; border-top: 1px solid var(--kw-borde); }
.cj-pie p { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.45; color: var(--plata); }
.cj-pie .aviso-chip { margin-top: 1px; }
/* drops y diario dentro del cajón: tiras horizontales (todo el menú se ve de un vistazo) */
.cajon .kw-drops, .cajon .kw-diario {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -2px;
  scrollbar-width: thin; scrollbar-color: rgba(122, 27, 255, .55) transparent;
  -webkit-mask: linear-gradient(90deg, #000 86%, transparent); mask: linear-gradient(90deg, #000 86%, transparent);
}
.cajon .kw-drops > li { flex: 0 0 124px; scroll-snap-align: start; }
.cajon .kw-diario > li { flex: 0 0 92px; scroll-snap-align: start; }
.cajon .kw-drops > li:last-child, .cajon .kw-diario > li:last-child { margin-right: 40px; }
.cajon .velo-q { font-size: 20px; }
.cajon .kw-tit { font-size: 12px; }
.cajon .kw-todo { margin-top: 4px; min-height: 44px; }
/* YOUR FINDS */
.cj-anillo { width: 22px; height: 22px; }
.cj-anillo .jg-anillo { display: block; width: 22px; height: 22px; }
.cj-anillo.pulso { animation: cj-pulso 1.2s ease-out; }
@keyframes cj-pulso { 0% { filter: drop-shadow(0 0 0 var(--gusano)); } 30% { filter: drop-shadow(0 0 6px var(--gusano)); } 100% { filter: none; } }
.cjf-cab { display: grid; grid-template-columns: 64px 1fr; gap: 2px 16px; align-items: center; }
.cjf-anillo { grid-row: span 2; display: block; width: 64px; height: 64px; }
.cjf-anillo .jg-anillo { display: block; width: 64px; height: 64px; }
.cjf-n { margin: 0; font-size: 32px; color: var(--platino); align-self: end; }
.cjf-n small { font-size: 16px; color: var(--plata); }
.cjf-txt { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--plata); align-self: start; }
.cjf-txt b { color: var(--gusano); font-size: 11px; letter-spacing: .1em; }
.cjf-col { width: 100%; margin-top: 16px; }
.cjf-codigos { margin: 10px 0 0; font-size: 10px; letter-spacing: .1em; color: var(--violeta-texto); }
/* HOW IT WORKS */
.cj-pasos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.cj-pasos li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--plata); }
.cj-pasos b { padding-top: 2px; font-size: 11px; color: var(--violeta-texto); }
.cj-pasos strong { color: var(--platino); font-weight: 600; }
.cj-ex { display: inline-grid; place-items: center; width: 15px; height: 15px; vertical-align: -2px; color: var(--platino); background: var(--violeta); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font: 700 9px/1 var(--font-mono); font-style: normal; }
.solo-tactil { display: none; }
body.es-tactil .solo-raton { display: none; }
body.es-tactil .solo-tactil { display: inline; }
.cj-pan .mapa-leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; padding: 12px 0; border-top: 1px solid var(--linea); font-size: 10.5px; color: var(--plata); }
.cj-pan .mapa-leyenda i { display: inline-block; vertical-align: middle; margin: 0 7px 0 0; }
.cj-teclas { margin: 0 0 14px; font-size: 10px; letter-spacing: .08em; color: rgba(169, 175, 186, .75); }
body.es-tactil .cj-teclas { display: none; }
.cj-dron-b {
  all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; row-gap: 3px; align-items: center;
  width: 100%; min-height: 54px; padding: 9px 14px; border: 1px solid var(--kw-borde); background: rgba(7, 6, 10, .5); clip-path: var(--kw-chaflan);
  cursor: pointer; color: var(--platino); font: 700 12px/1.2 var(--font-mono); letter-spacing: .16em;
}
.cj-dron-b:hover { border-color: var(--violeta); background: rgba(42, 0, 102, .45); }
.cj-dron-b:focus-visible { box-shadow: inset 0 0 0 2px var(--gusano); }
.cj-dron-ico {
  grid-row: span 2; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='3.5' cy='3.5' r='2'/%3E%3Ccircle cx='12.5' cy='3.5' r='2'/%3E%3Ccircle cx='3.5' cy='12.5' r='2'/%3E%3Ccircle cx='12.5' cy='12.5' r='2'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/g%3E%3Crect x='6.5' y='6.5' width='3' height='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='3.5' cy='3.5' r='2'/%3E%3Ccircle cx='12.5' cy='3.5' r='2'/%3E%3Ccircle cx='3.5' cy='12.5' r='2'/%3E%3Ccircle cx='12.5' cy='12.5' r='2'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/g%3E%3Crect x='6.5' y='6.5' width='3' height='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cj-dron-sub { font-weight: 400; font-size: 10px; letter-spacing: .06em; color: var(--plata); }
.cj-dron-b.activo { color: var(--gusano); border-color: rgba(163, 245, 31, .7); }
.cj-dron-b.activo::before { position: absolute; top: 8px; right: 8px; margin: 0; }

/* ---------- controles del mapa ---------- */
.mctl { position: fixed; z-index: 15; right: 14px; bottom: calc(var(--aviso) + 14px); display: flex; flex-direction: column; gap: 8px; }
body:not([data-vista="mapa"]) .mctl { display: none; }
body.con-entrada .mctl { visibility: hidden; }
body.mapa-3d:not(.mundo-listo) .mctl { opacity: 0; pointer-events: none; }
body.mapa-3d .mctl { transition: opacity .6s .1s; }
.mctl-son { display: contents; }
.mctl-b {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; flex: none;
  border: 1px solid var(--kw-borde); background: rgba(9, 7, 16, .82); color: var(--plata); cursor: pointer; clip-path: var(--kw-chaflan);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color .15s, background .15s, border-color .15s;
}
.mctl-b:hover { color: var(--platino); border-color: var(--violeta); background: rgba(42, 0, 102, .75); }
.mctl-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gusano); color: var(--platino); }
.mctl-b:active { background: var(--violeta-hondo); }
/* + y − forman una sola pieza */
.mctl .btn-zoom-mas { clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.mctl .btn-zoom-menos { margin-top: -8px; border-top-color: rgba(169, 175, 186, .14); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.mctl .vivo-sonido svg { width: 16px; height: 16px; }
.mctl .vivo-sonido .onda, .mctl .vivo-sonido.activo .mudo { display: none; }
.mctl .vivo-sonido.activo .onda { display: inline; }
.mctl .vivo-sonido.activo { color: var(--gusano); border-color: rgba(163, 245, 31, .7); }
/* la atribución y la hora no van debajo de los controles */
body.mapa-3d .vista-mapa .atribucion { max-width: calc(100% - 90px); }

/* ---------- nodos: zona táctil ≥ 44 px y respuesta al pasar ---------- */
.nodo3d.nodo-senal:not(.revelado):not(.fuera)::before { left: -27px; width: 54px; height: 62px; }
.nodo3d.nodo-senal:not(.revelado) .senal { transition: scale .18s ease, filter .18s ease; }
.nodo3d.nodo-senal:not(.revelado):hover .senal, .nodo3d.nodo-senal:not(.revelado):focus-visible .senal { scale: .8; filter: drop-shadow(0 0 6px rgba(163, 245, 31, .55)); }
.nodo3d.revelado .nodo-foto { transition: background .15s, box-shadow .2s, filter .2s; }
.nodo3d.revelado:hover .nodo-foto, .nodo3d.revelado:focus-visible .nodo-foto { filter: brightness(1.12); box-shadow: 0 0 26px rgba(163, 245, 31, .45); }
.nodo3d.revelado:hover .nodo-et, .nodo3d.revelado:focus-visible .nodo-et { border-color: var(--gusano); }
.nodo3d.nodo-hq.revelado::before { content: ""; position: absolute; left: -26px; bottom: -10px; width: 52px; height: 52px; }
.nodo3d.fuera::before { content: ""; position: absolute; inset: -13px -6px; }

/* ---------- puntos escondidos (src/secretos.js): invisibles de lejos, un susurro de cerca ---------- */
.nodo.secreto {
  position: absolute; left: 0; top: 0; width: 52px; height: 52px; display: grid; place-items: center; gap: 0;
  padding: 0; border: 0; background: none; color: var(--gusano); cursor: pointer; opacity: 0; will-change: transform, opacity;
}
.nodo.secreto:not(.vivo) { visibility: hidden; pointer-events: none; }
.sc-halo { position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(163, 245, 31, .2), transparent 64%); animation: sc-respira 3.8s ease-in-out infinite; pointer-events: none; }
.sc-ico { position: relative; display: grid; place-items: center; filter: drop-shadow(0 0 3px rgba(163, 245, 31, .55)); transition: transform .18s ease, filter .18s ease; }
.sc-codigo .sc-ico { color: #8dff9e; }
.sc-et {
  position: absolute; left: 50%; top: calc(100% - 2px); transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; letter-spacing: .14em; color: var(--gusano); background: rgba(7, 6, 10, .88); padding: 3px 7px;
  border: 1px solid rgba(163, 245, 31, .45); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.secreto.cerca .sc-et { opacity: .7; }
.secreto.cerca .sc-halo { background: radial-gradient(circle, rgba(163, 245, 31, .32), transparent 66%); }
.secreto:hover .sc-ico, .secreto:focus-visible .sc-ico { transform: scale(1.18); filter: drop-shadow(0 0 8px var(--gusano)); }
.secreto:hover .sc-et, .secreto:focus-visible .sc-et { opacity: 1; }
.secreto:focus-visible { outline: none; }
.secreto:focus-visible .sc-ico { outline: 2px solid var(--gusano); outline-offset: 5px; }
.sc-car { animation: sc-parpadeo 1.1s steps(1) infinite; }
.sc-brillo { animation: sc-respira 2.6s ease-in-out infinite; }
.secreto.tocado .sc-halo { animation: sc-toque .7s ease-out; }
@keyframes sc-respira { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes sc-parpadeo { 50% { opacity: 0; } }
@keyframes sc-toque { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- pistas de uso (primera vez) ---------- */
.pistas {
  position: fixed; z-index: 14; left: 50%; bottom: calc(var(--aviso) + 72px); transform: translate(-50%, 10px);
  display: flex; align-items: center; gap: 14px; padding: 11px 18px; white-space: nowrap; pointer-events: none;
  background: rgba(9, 7, 16, .8); border: 1px solid rgba(122, 27, 255, .5); clip-path: var(--chaflan);
  color: var(--platino); font-size: 11px; letter-spacing: .18em; opacity: 0; transition: opacity .7s ease, transform .7s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pistas.visible { opacity: 1; transform: translate(-50%, 0); }
body:not([data-vista="mapa"]) .pistas, body.cajon-abierto .pistas { display: none; }
.pz-i { display: inline-flex; align-items: center; gap: 8px; }
.pz-i svg { flex: none; color: var(--plata); }
.pz-i b { font-weight: 700; }
.pz-sep { font-style: normal; color: var(--violeta-texto); }
.pz-tap b { color: var(--gusano); }
.pz-luz { display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--violeta); border: 1px solid var(--platino); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: sc-respira 2.4s ease-in-out infinite; }
.pz-luz i { font: 700 11px/1 var(--font-mono); font-style: normal; color: var(--platino); }
.pistas.visible .pz-i:first-child svg { animation: pz-arrastra 2.2s ease-in-out infinite; }
.pz-rueda { animation: pz-rueda 1.6s ease-in-out infinite; }
@keyframes pz-arrastra { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes pz-rueda { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }

/* ---------- título de misión: CHONGQING en verde Matrix ---------- */
.mision { position: fixed; z-index: 14; top: 12px; right: 16px; pointer-events: none; text-align: right; }
body:not([data-vista="mapa"]) .mision, body.con-entrada .mision { display: none; }
.mision-cv { display: block; margin-left: auto; transition: opacity 1s ease; }
.mision-sub { margin: 0 6px 0 0; min-height: 1.5em; font-size: 12px; letter-spacing: .14em; color: var(--verde-matrix); text-shadow: 0 0 6px rgba(0, 255, 65, .55), 0 0 2px #000; transition: opacity .6s ease; white-space: nowrap; }
.mision-car { display: inline-block; width: 7px; height: 11px; margin-left: 3px; vertical-align: -1px; background: var(--verde-matrix); opacity: 0; box-shadow: 0 0 6px rgba(0, 255, 65, .7); }
.mision.escribiendo .mision-car { opacity: 1; animation: sc-parpadeo .7s steps(1) infinite; }
.mision.tenue .mision-cv, .mision.tenue .mision-sub { opacity: 0; }
.mision.linea .mision-cv { display: none; }
.mision.linea .mision-sub { opacity: .8; margin: 8px 2px 0 0; font-size: 12px; letter-spacing: .2em; text-shadow: 0 0 4px #000, 0 0 2px #000; color: rgba(0, 255, 65, .8); }

/* ---------- «YOU'RE BEING NOTICED · JOIN THE HUNTERS» (js/juegos.js) ---------- */
.jg-notado {
  position: fixed; z-index: 44; left: 50%; bottom: calc(var(--aviso) + 14px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; width: min(540px, calc(100vw - 24px)); padding: 12px 46px 12px 16px;
  background: #0A0812; border: 1px solid var(--violeta); box-shadow: 0 0 36px rgba(122, 27, 255, .4); clip-path: var(--chaflan);
}
.jg-notado[hidden] { display: none; }
.jg-notado.jg-entra { animation: jg-sube .5s cubic-bezier(.2, .9, .2, 1) both; }
.jg-notado .jg-x { position: absolute; right: 0; top: 0; }
.jg-notado-ojo { flex: none; position: relative; width: 34px; height: 20px; border: 1.5px solid var(--platino); border-radius: 50% / 50%; }
.jg-notado-ojo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--gusano); box-shadow: 0 0 8px var(--gusano); animation: jg-mira 3s ease-in-out infinite; }
@keyframes jg-mira { 0%, 100% { transform: translateX(-5px); } 45%, 55% { transform: translateX(5px); } }
.jg-notado-txt { flex: 1; min-width: 0; }
.jg-notado-1 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--platino); white-space: nowrap; }
.jg-notado-2 { margin: 3px 0 0; font-size: 10px; letter-spacing: .1em; color: var(--violeta-texto); }
.jg-notado-ir { flex: none; white-space: nowrap; font-size: 13px; }

/* ---------- ficha: «Got a code from the reel?» ---------- */
.jg-ficha-cod {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 18px 0 14px; padding: 10px 10px 10px 14px;
  border: 1px solid var(--kw-borde); background: rgba(42, 0, 102, .2); color: var(--gusano); clip-path: var(--kw-chaflan);
}
.jg-ficha-cod p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.jg-ficha-cod b { font-size: 11px; letter-spacing: .12em; color: var(--platino); }
.jg-ficha-cod p span { font-size: 12px; line-height: 1.4; color: var(--plata); }
.jg-ficha-cod .jg-btn { font-size: 13px; white-space: nowrap; }

/* ---------- móvil ---------- */
@media (max-width: 759px) {
  :root { --cajon: min(440px, 94vw); }
  body[data-vista="mapa"] .cabecera { padding: 10px; gap: 10px; }
  .menu-btn { padding: 0 13px 0 10px; letter-spacing: .16em; }
  .cj-nom { font-size: 19px; }
  .mctl { right: 10px; bottom: calc(var(--aviso) + 76px); gap: 7px; }
  .mision { top: 10px; right: 10px; }
  .mision-sub { font-size: 12px; letter-spacing: .04em; }
  .mision.linea .mision-sub { letter-spacing: .08em; margin-top: 12px; }
  /* a la izquierda de los controles, sin taparlos */
  .pistas { left: 10px; right: 10px; bottom: calc(var(--aviso) + 276px); transform: translateY(10px); justify-content: center; gap: 7px; padding: 10px 8px; font-size: 12px; letter-spacing: .04em; }
  .pistas.visible { transform: none; }
  .pz-i { gap: 6px; }
  .pz-i svg { width: 18px; height: 18px; }
}
@media (max-width: 420px) {
  .jg-notado { flex-wrap: wrap; padding-right: 40px; }
  .jg-notado-ir { width: 100%; }
  .jg-ficha-cod { grid-template-columns: auto 1fr; }
  .jg-ficha-cod .jg-btn { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cajon, .cajon-velo, .pistas, .mision-cv, .mision-sub { transition: none; }
  .cajon::after, .sc-halo, .sc-car, .sc-brillo, .pz-luz, .pz-rueda, .pistas .pz-i svg, .jg-notado-ojo::after, .mision-car { animation: none !important; }
}

/* =====================================================================
   Propuestas del diseñador aceptadas por el CEO (7 oct): pulgar, legibilidad y zonas táctiles
   ===================================================================== */
/* ---- textos secundarios: 12 px como mínimo y contraste ≥ 4,5:1 (plata #A9AFBA sobre negro ≈ 9:1) ---- */
body.mapa-3d .vista-mapa .atribucion { font-size: 12px; line-height: 1.35; color: var(--plata); opacity: 1; text-shadow: 0 0 4px var(--negro), 0 0 2px var(--negro); bottom: 8px; }
.mh { bottom: 46px; }
.mh .vivo-hud { font-size: 12px; letter-spacing: .1em; color: var(--plata); text-shadow: 0 0 4px var(--negro), 0 0 2px var(--negro); }
.velo-pie, .cajon .velo-pie { font-size: 12px; letter-spacing: .06em; color: var(--plata); }
.logo-sub { font-size: 12px; letter-spacing: .06em; }
.kw-et, .kw-todo, .cj-teclas, .cj-dron-sub, .cjf-codigos, .sc-et, .jg-notado-2, .kw-datos, .cj-pie p, .cj-pan .mapa-leyenda, .kw-chip, .kw-ia-vid, .kw-ia, .cj-tit, .cj-meta { font-size: 12px; }
.cj-teclas { color: var(--plata); }
.kw-chip { padding: 4px 5px 3px; letter-spacing: .02em; }
.cj-tit, .cj-volver { letter-spacing: .2em; }
.kw-retrato span { font-size: 12px; letter-spacing: .1em; }
.pistas { font-size: 12px; letter-spacing: .12em; }
.jg-ficha-cod b { font-size: 12px; }
.ch-pronto { color: var(--plata); }
/* indicadores de borde del mapa (src/nodos.js) */
.nodo3d.fuera .nodo-fuera { font-size: 12px; }

/* ---- barra del pulgar (móvil) ---- */
.barra-m { display: none; }
@media (max-width: 759px) {
  :root { --barra: 58px; }
  /* arriba solo información: el MENU se muda abajo */
  .cabecera .menu-btn { display: none; }
  body[data-vista="mapa"] .cabecera { padding: 12px; }
  .barra-m {
    position: fixed; z-index: 21; left: 0; right: 0; bottom: var(--aviso); height: calc(var(--barra) + 12px);
    display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; touch-action: none;
    background: linear-gradient(180deg, rgba(7, 6, 10, 0), rgba(7, 6, 10, .82) 30%, rgba(7, 6, 10, .96));
  }
  body.con-entrada .barra-m { visibility: hidden; }
  body.mapa-3d:not(.mundo-listo)[data-vista="mapa"] .barra-m { opacity: 0; pointer-events: none; }
  body.mapa-3d .barra-m { transition: opacity .6s .1s; }
  .barra-asa { position: absolute; left: 50%; top: 3px; width: 38px; height: 3px; margin-left: -19px; background: rgba(169, 175, 186, .45); }
  .barra-m .menu-btn { height: 48px; padding: 0 15px 0 12px; flex: none; }
  .ultimo {
    flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 4px; cursor: pointer;
    border: 1px solid var(--gusano); background: rgba(9, 7, 16, .9); color: var(--platino); clip-path: var(--kw-chaflan); text-align: left;
  }
  .ultimo:active, .ultimo:hover { background: rgba(42, 0, 102, .85); }
  .ultimo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gusano); }
  .ultimo.en-niebla { border-color: var(--violeta); }
  .ultimo-foto { flex: none; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; background: var(--panel); clip-path: var(--kw-chaflan); }
  .ultimo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .ultimo-foto i { font: 700 12px/1 var(--font-mono); font-style: normal; color: rgba(236, 234, 242, .5); }
  .en-niebla .ultimo-foto { background: radial-gradient(circle at 40% 40%, rgba(122, 27, 255, .4), #08070d 70%); }
  .ultimo-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .ultimo-txt b { font-size: 12px; letter-spacing: .14em; color: var(--gusano); white-space: nowrap; }
  .ultimo-et { font-size: 12px; color: var(--plata); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* lo demás sube por encima de la barra */
  body[data-vista="mapa"] .vista-mapa { height: calc(100vh - var(--aviso)); height: calc(100dvh - var(--aviso)); }
  .mh { left: 10px; bottom: calc(var(--barra) + 50px); }
  body.mapa-3d .vista-mapa .atribucion { left: 10px; right: 66px; max-width: none; bottom: calc(var(--barra) + 14px); }
  .jg-notado, .jg-tarjeta { bottom: calc(var(--aviso) + var(--barra) + 18px); }
  .cajon { bottom: var(--aviso); }
  body:not([data-vista="mapa"]) { padding-bottom: calc(var(--aviso) + var(--barra) + 40px); }
}
@media (prefers-reduced-motion: reduce) { .barra-m { transition: none; } }

/* =====================================================================
   Camino de compra (8 oct, informe comercial 03:11): precio, total con envío, talla y botón juntos.
   Móvil: barra fija abajo (encima del aviso de IA). Escritorio: dentro de la ficha, arriba, y pegada al borde
   inferior si la ventana es baja (siempre visible sin hacer scroll). «ENTER CODE» va debajo, en una línea discreta.
   ===================================================================== */
.compra { margin: 0 0 8px; padding: 10px 12px 6px; background: var(--negro); border: 1px solid var(--violeta); }
.compra-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; }
.compra-importe { font-size: 20px; line-height: 1.1; color: var(--platino); }
.compra-total { font-size: 13px; color: var(--platino); }
.compra-inc { flex-basis: 100%; font-size: 12px; color: var(--plata); }
.compra-fila { display: flex; gap: 8px; align-items: stretch; }
.compra-talla { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--plata); }
.compra-talla-et { font-size: 12px; letter-spacing: .12em; }
.talla-btn {
  height: 48px; min-width: 48px; max-width: 140px; padding: 0 12px; border: 1px solid var(--gusano); border-radius: 0;
  background: var(--violeta-hondo); color: var(--platino); font: 700 14px var(--font-mono); cursor: default; white-space: nowrap;
}
.talla-btn[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--gusano); }
.talla-btn:focus-visible { outline: 2px solid var(--gusano); outline-offset: 2px; }
.talla-btn:disabled { opacity: .5; border-color: var(--violeta); box-shadow: none; }
.compra-talla-hueco { padding: 0 4px; }
.compra .boton { flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 12px 10px; }
.compra-cod { min-height: 0; }
.compra-cod-b {
  all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 0 12px; min-height: 44px; cursor: pointer;
  font-size: 12px; letter-spacing: .04em; color: var(--plata); text-align: center;
}
.compra-cod-b b { font-weight: 400; color: var(--platino); border-bottom: 1px dotted var(--plata); }
.compra-cod-b:hover b, .compra-cod-b:focus-visible b { color: var(--gusano); border-bottom-color: var(--gusano); }
.compra-cod-b:focus-visible { outline: 2px solid var(--gusano); outline-offset: -2px; }
.compra + .nota-proto { margin: 0 0 14px; }

@media (max-width: 759px) {
  .compra {
    position: fixed; z-index: 6; left: 0; right: 0; bottom: var(--aviso); margin: 0;
    padding: 8px 12px 4px; border: 0; border-top: 1px solid var(--violeta);
    background: rgba(7, 6, 10, .97); box-shadow: 0 -12px 24px rgba(7, 6, 10, .85);
  }
  .compra-precio { margin-bottom: 6px; }
  /* el contenido de la ficha deja sitio a la barra (alto real medido en app.js: --compra-h) */
  .ficha-caja { padding-bottom: calc(var(--aviso) + var(--compra-h, 150px) + 16px); }
}
@media (min-width: 760px) {
  .compra { position: sticky; bottom: 8px; z-index: 4; box-shadow: 0 8px 24px rgba(7, 6, 10, .9); }
}
/* indicadores de borde apilados (src/nodos.js · colocarBordes): el que no cabe se agrupa en su vecino, que muestra «+N» */
.nodo3d.fuera.agrupado { visibility: hidden; pointer-events: none; }
.nodo3d .nodo-mas { color: var(--gusano); font-weight: 700; padding-left: 5px; border-left: 1px solid rgba(163, 245, 31, .45); }
.nodo3d .nodo-mas:empty { display: none; }
/* carga en dos tiempos (móvil): póster fijo del encuadre inicial mientras carga el 3D; src/main.js lo funde al primer fotograma */
.mapa-poster { display: none; }
@media (max-width: 759px) {
  .mapa-poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 1; pointer-events: none; opacity: 1; transition: opacity .6s ease; }
  .mapa-poster.fundido { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mapa-poster { transition: none; } }
html.sin-3d .mapa-poster { display: none; }
/* ?poster=captura&debug=1: solo el lienzo 3D, para generar img/poster-mapa.webp */
body.modo-poster * { visibility: hidden !important; }
body.modo-poster canvas.mapa3d { visibility: visible !important; }

/* Objetivos táctiles ≥44 px (cola 13, 9 oct): el logo amplía el área con padding y margen negativo (sin mover nada);
   el aviso de IA es un botón y en móvil crece a 44 px (JS actualiza --aviso; el mapa pierde 14 px de 844). */
.logo { padding: 3px 0; margin: -3px 0; }
@media (max-width: 759px) {
  :root { --aviso: 44px; }
  .aviso-btn { min-height: 44px; }
}
/* Punto 30 de la revisión (9 oct): nada informativo por debajo de 12 px en móvil. Quedan fuera, por decorativos, los HUD de nodos, leyenda de barrios, coordenadas y «vivo-hud». */
@media (max-width: 759px) {
  .mapa-intro .mapa-ayuda, .tarjeta-meta, .video-pie, .real-cab, .nota-proto, .entrada-ia, .kw-datos, .kw-todo, .kw-ia-vid,
  .jg-sub, .jg-ej, .jg-alc, .jg-hall-txt span, .jg-hn, .jg-premios li .mono, .jg-legal, .jg-legal .hueco, .jg-err, .jg-reservado,
  .jg-estado, .jg-hito .jg-copiar, .jg-hito .jg-btn, .jg-linea1, .jg-ficha-dig p, .jg-cupon-cod i,
  .jg-barra, .jg-reserva legend, .datos dt, .jg-reserva label,
  .cj-tit, .cj-volver, .cj-meta, .cjf-txt b, .cjf-codigos, .cj-pasos b, .cj-pan .mapa-leyenda, .cj-teclas, .cj-dron-sub, .jg-notado-2, .jg-ficha-cod b { font-size: 12px; }
}

/* =====================================================================
   MODO EDITOR (11 oct, js/terminal.js): barra de estado, línea de comandos, muro de código, temas y foco.
   La barra de estado va justo encima del aviso de IA y su alto entra en --aviso (app.js · medirAviso):
   los valores de aquí son los mismos que mide el JS, para que no haya salto al arrancar.
   ===================================================================== */
:root {
  --estado: 22px; --aviso-real: 31px; --aviso: 53px;
  --term-acento: #9D4DFF; --es-txt: #A58AF0; --es-fondo: rgba(122, 27, 255, .08); --es-modo: rgba(122, 27, 255, .36); --es-borde: rgba(122, 27, 255, .32);
}
@media (max-width: 759px) { :root { --estado: 20px; --aviso-real: 45px; --aviso: 65px; } }
html[data-tema="matrix"] {
  --term-acento: #00FF41; --gusano: #00FF41; --es-txt: rgba(0, 255, 65, .8); --es-fondo: rgba(0, 255, 65, .05); --es-modo: rgba(0, 255, 65, .2); --es-borde: rgba(0, 255, 65, .3);
}
html[data-tema="fog"] {
  --term-acento: #C3BCD9; --gusano: #C9DC9C; --violeta-texto: #A99CD8; --es-txt: #BAB5C9; --es-fondo: rgba(169, 175, 186, .07); --es-modo: rgba(169, 175, 186, .22); --es-borde: rgba(169, 175, 186, .26);
}
html[data-tema="fog"] body::after { /* una bruma leve en los bordes */
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, rgba(150, 155, 175, 0) 55%, rgba(150, 155, 175, .08));
}

/* ---------- barra de estado ---------- */
.estado {
  position: fixed; z-index: 49; left: 0; right: 0; bottom: var(--aviso-real); height: var(--estado);
  display: flex; align-items: stretch; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  font: 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--es-txt); white-space: nowrap; overflow: hidden;
  background: linear-gradient(var(--es-fondo), var(--es-fondo)), var(--negro); border-top: 1px solid var(--es-borde);
  contain: layout paint; user-select: none; -webkit-user-select: none;
}
.estado > span { display: flex; align-items: center; padding: 0 10px; }
.es-modo { flex: none; width: 88px; box-sizing: border-box; font-weight: 700; letter-spacing: .12em; color: var(--platino); background: var(--es-modo); }
.estado[data-modo="COMMAND"] .es-modo { background: var(--violeta); }
html[data-tema="matrix"] .estado[data-modo="COMMAND"] .es-modo { background: rgba(0, 255, 65, .4); color: #031a08; }
.estado[data-modo="INSERT"] .es-modo { background: rgba(163, 245, 31, .2); color: var(--gusano); }
.es-vista { color: var(--platino); min-width: 0; }
.es-ciudad { flex: none; width: 96px; overflow: hidden; color: var(--es-txt); white-space: pre; }
.es-hueco { flex: 1; padding: 0 !important; }
/* anchos fijos en px y texto a la izquierda: cuando llega JetBrains Mono (font-display swap) no se mueve ninguna caja */
.es-loot, .es-piezas, .es-hora { flex: none; box-sizing: border-box; overflow: hidden; border-left: 1px solid var(--es-borde); }
.es-loot { width: 98px; } .es-piezas { width: 98px; } .es-hora { width: 124px; }
.es-piezas > span, .es-hora > span { white-space: pre; }
.es-corto { display: none; }
.es-hora { font-variant-numeric: tabular-nums; }

.es-term {
  all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 34px; cursor: pointer;
  color: var(--es-txt); opacity: .68; border-left: 1px solid var(--es-borde); font: 700 12px/1 var(--font-mono); /* .68: contraste 3:1 (revisión 11 oct) */
}
.es-term:hover { opacity: 1; color: var(--platino); }
.es-term:focus-visible { opacity: 1; outline: 2px solid var(--gusano); outline-offset: -2px; }
body.con-entrada .estado { visibility: hidden; }
body.mapa-3d:not(.mundo-listo)[data-vista="mapa"] .estado { opacity: 0; }
body.mapa-3d .estado { transition: opacity .6s .1s; }

/* ---------- línea de comandos ---------- */
.term {
  position: fixed; z-index: 48; left: 0; right: 0; bottom: var(--aviso); color: var(--platino); font-family: var(--font-mono);
  background: var(--negro); border-top: 1px solid var(--term-acento); box-shadow: 0 -18px 44px rgba(0, 0, 0, .6);
}
.term[hidden] { display: none; }
.term-salida { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 6px; font-size: 13px; line-height: 1.6; scrollbar-width: thin; scrollbar-color: rgba(122, 27, 255, .5) transparent; }
.term-salida:empty { display: none; }
.term-linea { display: flex; align-items: center; gap: 4px; height: 40px; margin: 0; padding: 0 16px; border-top: 1px solid rgba(122, 27, 255, .22); }
.term-salida:empty + .term-linea { border-top: 0; }
.term-prompt { flex: none; width: 1.4ch; color: var(--term-acento); font: 700 15px/1 var(--font-mono); }
.term-campo { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; font: 15px/1 var(--font-mono); }
.term-in { all: unset; box-sizing: border-box; width: 100%; height: 100%; font: inherit; letter-spacing: 0; color: var(--platino); caret-color: transparent; }
.term-in::placeholder { color: rgba(169, 175, 186, .5); }
.term-cursor {
  position: absolute; left: calc(var(--c, 0) * 1ch); top: 50%; width: 1ch; height: 1.25em; margin-top: -.66em;
  background: var(--term-acento); opacity: .75; pointer-events: none; animation: term-parpadeo 1.05s steps(1) infinite;
}
.term-in:not(:focus) + .term-cursor, .term-campo.nativo .term-cursor { display: none; }
.term-campo.nativo .term-in { caret-color: var(--term-acento); }
@keyframes term-parpadeo { 50% { opacity: 0; } }
.tl { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl b { color: var(--platino); font-weight: 700; }
.tl-tit { margin-top: 6px; font-size: 12px; letter-spacing: .16em; color: var(--term-acento); }
.tl-tit:first-child { margin-top: 0; }
.tl-dim { color: var(--plata); }
.tl-err { color: #FF7A66; }
.tl-ok { color: var(--gusano); }
.tl-ia .aviso-chip { vertical-align: 1px; }
.tl-cmd { all: unset; cursor: pointer; color: var(--platino); text-decoration: underline dotted rgba(169, 175, 186, .6); text-underline-offset: 4px; }
.tl-cmd:hover, .tl-cmd:focus-visible { color: var(--term-acento); text-decoration-color: var(--term-acento); }
.tl-cmd:focus-visible { outline: 2px solid var(--gusano); outline-offset: 2px; }
.tl-pieza {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: 5ch 12ch minmax(0, 1fr) auto; gap: 14px; align-items: center;
  width: 100%; min-height: 32px; padding: 4px 8px; cursor: pointer; color: var(--platino); font-size: 13px;
}
.tl-pieza > span:nth-child(1), .tl-pieza > span:nth-child(2) { color: var(--term-acento); }
.tl-pieza > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-pieza > span:nth-child(4) { color: var(--gusano); font-size: 12px; }
.tl-pieza:hover, .tl-pieza:focus-visible { background: rgba(122, 27, 255, .22); }
.tl-pieza:focus-visible { outline: 2px solid var(--gusano); outline-offset: -2px; }
.tl-pieza.velada { cursor: default; color: var(--plata); }
.tl-pieza > span:empty { display: none; }
.tl-pieza.velada:hover { background: none; }
.tl-pieza.velada > span:nth-child(1), .tl-pieza.velada > span:nth-child(2) { color: var(--plata); }
.term.despierta { animation: term-despierta .9s steps(6) 1; }
@keyframes term-despierta { 0% { filter: none; } 30% { filter: hue-rotate(-140deg) brightness(1.4); transform: translateX(-2px); } 60% { transform: translateX(2px); } 100% { filter: none; transform: none; } }
/* botón del móvil, casi invisible, al final de la barra del pulgar */
.term-m { display: none; }

/* ---------- muro de código ---------- */
.muro { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; contain: strict; transition: opacity 2.4s ease; }
.muro.visible { opacity: .045; }
body[data-vista="mapa"] .muro {
  z-index: 1; /* sobre el lienzo 3D y debajo de las luces (.nodos, z 2): solo asoma por los bordes */
  -webkit-mask: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 52%, #000 100%); mask: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 52%, #000 100%);
}
body[data-vista="mapa"] .muro.visible { opacity: .16; }
.muro-cv { display: block; will-change: transform; animation: muro-sube 150s linear infinite; }
@keyframes muro-sube { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-1 * var(--muro-h, 900px)), 0); } }

/* ---------- foco visible (navegación con teclado) ---------- */
.kw-todo:focus-visible, .cj-volver:focus-visible, .video-pie a:focus-visible, .logo:focus-visible { outline: 2px solid var(--gusano); outline-offset: 3px; }
.nodo3d:focus-visible { outline: none; }
.nodo3d.nodo-senal:not(.revelado):focus-visible .senal { outline: 2px solid var(--gusano); outline-offset: 6px; }
.nodo3d.revelado:focus-visible .nodo-foto { outline: 2px solid var(--gusano); outline-offset: 3px; }

@media (max-width: 759px) {
  .estado > span { padding: 0 8px; }
  .es-modo { width: 74px; letter-spacing: .06em; }
  .es-loot { width: 90px; } .es-piezas { width: 58px; } .es-hora { width: 58px; }
  .es-ciudad, .es-largo, .es-term { display: none; }
  .es-corto { display: inline; }
  .term-m {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0;
    border: 0; background: none; color: var(--plata); opacity: .56; cursor: pointer; font: 700 13px/1 var(--font-mono); /* .56: casi invisible, pero con contraste 3:1 */
  }
  .term-m:active, body.con-term .term-m { opacity: 1; color: var(--platino); }
  .term-m:focus-visible { opacity: 1; outline: 2px solid var(--gusano); outline-offset: -2px; }
  .term-linea { height: 48px; padding: 0 12px; }
  .term-campo, .term-prompt { font-size: 16px; } /* 16 px: iOS no amplía la página al escribir */
  .term-salida { padding: 10px 12px 6px; max-height: min(52vh, 420px); }
  .tl-pieza { grid-template-columns: 4ch 10ch minmax(0, 1fr); gap: 10px; min-height: 44px; font-size: 12.5px; }
  .tl-pieza > span:nth-child(4) { grid-column: 3; margin-top: -8px; }
  .tl-cmd { display: inline-block; padding: 5px 0; }
  .tl-fila { line-height: 1.5; }
  .muro.visible { opacity: .04; }
  body[data-vista="mapa"] .muro.visible { opacity: .11; }
}
@media (prefers-reduced-motion: reduce) {
  .muro-cv { animation: none; will-change: auto; }
  .muro, .estado { transition: none; }
  .term-cursor, .term.despierta { animation: none; }
}