/* THE PRISON · la barra y el pie comunes de la web y de la guía (r645-web, 24-10-2026).
 * El HTML lo pinta server/webBarra.js (el mismo en las dos). Los nombres llevan «tpw-» para no pisar
 * nada de la guía ni de las páginas. Letras del juego (public/fonts, OFL). */
@font-face { font-family: 'TPW Rotulo'; src: url('/fonts/BarlowCondensed-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'TPW Rotulo'; src: url('/fonts/BarlowCondensed-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.tpw-barra { position: sticky; top: 0; z-index: 46; background: rgba(8,10,12,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.08); padding-top: env(safe-area-inset-top, 0px); }
.tpw-in { max-width: 1280px; margin: 0 auto; padding-inline: 32px; box-sizing: border-box; }
.tpw-barra .tpw-in { display: flex; align-items: center; gap: 24px; height: 60px; }
.tpw-logo { display: flex; align-items: center; flex: none; color: #eceef1; text-decoration: none; }
.tpw-logo img { height: 34px; width: auto; display: block; }
.tpw-logo b, .tpw-pie-marca { font: 700 21px/1 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.tpw-nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.tpw-nav a { font: 600 15px/1 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #b5bcc6; padding: 10px 12px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.tpw-nav a:hover { color: #eceef1; background: rgba(255,255,255,.05); }
.tpw-nav a.on { color: #eceef1; background: rgba(255,255,255,.05); box-shadow: inset 0 -2px 0 #f29a2e; }
.tpw-jugar { flex: none; display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .1em; padding: 12px 22px; min-height: 44px; box-sizing: border-box; border-radius: 4px; white-space: nowrap; text-decoration: none; background: linear-gradient(180deg, #ffb85c, #f29a2e); color: #1b1004; box-shadow: 0 6px 24px rgba(242,154,46,.35); transition: transform .12s, box-shadow .12s; }
.tpw-jugar:hover { color: #1b1004; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(242,154,46,.45); }
.tpw-jugar:focus-visible, .tpw-nav a:focus-visible, .tpw-logo:focus-visible { outline: 2px solid #ffb85c; outline-offset: 2px; }
.tpw-corto { display: none; }
.tpw-pie { margin-top: 70px; border-top: 1px solid rgba(255,255,255,.08); padding: 34px 0 calc(40px + env(safe-area-inset-bottom, 0px)); color: #8b939e; font-size: 14px; }
.tpw-pie .tpw-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
.tpw-pie img { height: 30px; width: auto; margin-bottom: 10px; opacity: .85; display: block; }
.tpw-pie p { margin: 0 0 14px; }
.tpw-pie b { display: block; font: 700 14px/1.2 'TPW Rotulo', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #b5bcc6; margin-bottom: 8px; }
.tpw-pie .tpw-pie-uno b.tpw-pie-marca { color: #eceef1; font-size: 21px; margin-bottom: 10px; }
.tpw-pie div > a:not(.tpw-jugar) { display: block; padding: 3px 0; color: #8b939e; text-decoration: none; }
.tpw-pie div > a:not(.tpw-jugar):hover { color: #eceef1; }
@media (max-width: 1100px) { .tpw-pie .tpw-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .tpw-in { padding-inline: 16px; }
  .tpw-barra .tpw-in { gap: 8px; height: 54px; }
  .tpw-logo img { height: 26px; }
  .tpw-logo b { font-size: 17px; }
  .tpw-nav { gap: 0; }
  .tpw-nav a { padding: 12px 7px; font-size: 13.5px; letter-spacing: .05em; }
  .tpw-largo { display: none; } .tpw-corto { display: inline; }
  .tpw-barra .tpw-jugar { padding: 8px 14px; min-height: 40px; font-size: 15px; }
  .tpw-pie .tpw-in > :first-child { grid-column: 1 / -1; }
  .tpw-pie div > a:not(.tpw-jugar) { padding: 10px 0; }
}
@media (max-width: 359px) { .tpw-nav a { padding-inline: 4px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .tpw-jugar { transition: none; } }

/* La guía de The Prison — el lenguaje de la interfaz 2026 del juego (src/u26/tokens.css), en el estilo
   «Luces de patio» de la web (r645-web, 24-10-2026): encima va la barra común de la web (logo, Guía ·
   Cárceles · Novedades y JUGAR, public/web/barra.css, que el generador pega delante de este fichero) y
   esta barra de la guía queda debajo, pegada a ella. Lo de antes:
   vidrio oscuro, filetes de 1 px, un solo acento ámbar, Barlow Condensed en los rótulos,
   los colores de rareza del juego. Sólo oscuro, como el juego. */
@font-face { font-family: 'Guia Rotulo'; font-weight: 600; font-display: swap; src: url('/fonts/BarlowCondensed-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Guia Rotulo'; font-weight: 700; font-display: swap; src: url('/fonts/BarlowCondensed-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Guia Texto'; font-weight: 400; font-display: swap; src: url('/fonts/BarlowSemiCondensed-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Guia Texto'; font-weight: 500; font-display: swap; src: url('/fonts/BarlowSemiCondensed-500-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --fondo: #0B0D10;
  --fondo-2: #111419;
  --vidrio: rgba(17, 20, 25, 0.82);
  --vidrio-alto: rgba(22, 26, 32, 0.92);
  --hueco: rgba(255, 255, 255, 0.035);
  --hover: rgba(255, 255, 255, 0.07);
  --borde: rgba(255, 255, 255, 0.10);
  --borde-fuerte: rgba(255, 255, 255, 0.18);
  --divisor: rgba(255, 255, 255, 0.07);
  --texto: #F2F4F7;
  --texto-2: #A7AFB9;
  --texto-3: #8A929C;
  --ambar: #F29A2E;
  --ambar-hover: #FFB04D;
  --ambar-tenue: rgba(242, 154, 46, 0.14);
  --ambar-borde: rgba(242, 154, 46, 0.55);
  --segura: #4CC38A;
  --peligro: #E5484D;
  --peligro-texto: #FF6B70;   /* el rojo para LETRA: el #E5484D a 13 px se quedaba en 4,2:1 */
  --info: #3FB6D9;
  --r-comun: #D4A228;
  --r-poco: #5AC85A;
  --r-raro: #4AA3FF;
  --r-epico: #B46CFF;
  --r-leg: #FF9B2E;
  --rotulo: 'Guia Rotulo', 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --letra: 'Guia Texto', 'Barlow Semi Condensed', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --radio: 6px;
  --ancho: 1280px;
  --gutter: 32px;
  --tpw-h: 60px;   /* el alto de la barra común de la web (public/web/barra.css) */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tpw-h) + 72px); }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
  font-family: var(--letra); font-size: 16px; line-height: 1.5;
  background-image:
    radial-gradient(1200px 520px at 50% -180px, rgba(242, 154, 46, 0.10), transparent 70%),
    radial-gradient(900px 600px at 100% 0, rgba(63, 182, 217, 0.04), transparent 70%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body.con-menu { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ambar-hover); }
/* Los enlaces DENTRO DEL TEXTO se distinguen: ámbar y subrayados (las filas, chips y tarjetas no). */
main p a, main li a, main blockquote a, .pie a, .vacio a {
  color: var(--ambar); text-decoration: underline; text-decoration-color: rgba(242, 154, 46, 0.45); text-underline-offset: 3px;
}
main p a:hover, main li a:hover, .pie a:hover { color: var(--ambar-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; border-radius: 3px; }
h1:focus { outline: none; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ambar); color: #111; padding: 8px 14px; border: 0; border-radius: var(--radio); font-weight: 600; cursor: pointer; }
.saltar:focus { left: 8px; }
.etiq { color: var(--texto-2); font-weight: 600; }
.cifra-d { color: var(--texto); font-weight: 500; }
.nv { color: var(--texto-3); font-weight: 400; font-size: .9em; font-variant-numeric: tabular-nums; }
.seg-txt { color: var(--ambar); }

/* ── Barra superior ─────────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: var(--tpw-h); z-index: 40; height: 60px;
  background: rgba(11, 13, 16, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.barra-in { max-width: var(--ancho); margin: 0 auto; height: 100%; padding: 0 var(--gutter); display: flex; align-items: center; gap: 18px; }
.marca { display: flex; align-items: baseline; gap: 8px; font-family: var(--rotulo); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.marca b { font-size: 21px; color: var(--texto); }
.marca span { font-size: 13px; color: var(--ambar); letter-spacing: .12em; }
.buscador { position: relative; flex: 1 1 auto; max-width: 460px; }
.buscador input {
  width: 100%; height: 38px; padding: 0 36px 0 38px; border-radius: var(--radio);
  background: var(--hueco); border: 1px solid var(--borde); color: var(--texto); font: inherit; font-size: 15px;
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus { outline: none; border-color: var(--ambar-borde); background: rgba(255,255,255,.06); }
.buscador .lupa { position: absolute; left: 11px; top: 10px; color: var(--texto-3); pointer-events: none; }
.buscador kbd { position: absolute; right: 9px; top: 9px; font: 12px/18px var(--rotulo); color: var(--texto-3); border: 1px solid var(--borde); border-radius: 4px; padding: 0 6px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { font-family: var(--rotulo); font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); padding: 8px 10px; border-radius: var(--radio); }
.nav a:hover { color: var(--texto); background: var(--hover); }
.nav a.activo { color: var(--ambar); background: var(--ambar-tenue); }
.boton-menu, .boton-lupa { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radio); align-items: center; justify-content: center; cursor: pointer; }
.boton-menu svg, .boton-lupa svg { width: 22px; height: 22px; }
.velo { position: fixed; inset: calc(var(--tpw-h) + 60px) 0 0 0; z-index: 35; background: rgba(4, 5, 7, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.velo[hidden] { display: none; }

/* Resultados del buscador rápido */
.sugerencias {
  position: absolute; left: 0; right: 0; top: 44px; max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--vidrio-alto); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 6px; display: none; z-index: 45;
}
.sugerencias.abierto { display: block; }
.sug-grupo { font: 600 12px/1 var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); padding: 10px 8px 6px; }
.sug { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 5px; min-height: 44px; cursor: pointer; }
.sug:hover, .sug.sel { background: var(--ambar-tenue); }
.sug.atajo b { color: var(--ambar); }
.sug .t { flex: 1 1 auto; min-width: 0; }
.sug .t b { display: block; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.sug .t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--texto-3); font-size: 13px; line-height: 1.3; }
.sug-todos { display: block; text-align: center; padding: 10px; color: var(--ambar); font: 600 14px var(--rotulo); letter-spacing: .06em; text-transform: uppercase; }

/* ── Estructura ─────────────────────────────────────────────────────────────────── */
main { max-width: var(--ancho); margin: 0 auto; padding: 22px var(--gutter) 60px; min-height: 70vh; outline: none; }
.pie { max-width: var(--ancho); margin: 0 auto; padding: 22px var(--gutter) 40px; color: var(--texto-3); font-size: 13.5px; border-top: 1px solid var(--divisor); }
.pie p { margin: 4px 0; }
.migas { font-size: 13.5px; color: var(--texto-3); margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.migas a { color: var(--texto-2); display: inline-block; padding: 4px 0; }
.migas span::before { content: '›'; margin-right: 6px; color: var(--texto-3); }
h1, h2, h3 { font-family: var(--rotulo); font-weight: 700; letter-spacing: .02em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: 22px; text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); }
.sub { color: var(--texto-2); margin: 6px 0 0; }
.panel { background: var(--vidrio); border: 1px solid var(--borde); border-radius: 8px; padding: 18px; }
.panel + .panel { margin-top: 14px; }
.panel > h2, .panel > h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel > h2 .cuenta, .panel > h3 .cuenta { font-family: var(--letra); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--texto-3); margin-left: auto; }
.aviso-panel { border-color: var(--ambar-borde); }
.nota { color: var(--texto-3); font-size: 14px; margin: 10px 0 0; }
.vacio { color: var(--texto-3); font-style: italic; }
.dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; }
.dos > div { min-width: 0; }
.cabecera { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; }
.cabecera .tit { min-width: 0; max-width: 100%; }
.cabecera h1, .banner h1 { overflow-wrap: anywhere; }
.compartir { margin-top: 12px; min-height: 36px; padding: 0 12px; font-size: 14px; }
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .2s; z-index: 80; background: var(--vidrio-alto); border: 1px solid var(--ambar-borde); color: var(--texto); padding: 10px 16px; border-radius: var(--radio); max-width: calc(100vw - 32px); overflow-wrap: anywhere; pointer-events: none; }
.aviso.visto { opacity: 1; transform: translate(-50%, 0); }

/* Chips y etiquetas */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.15 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; background: var(--hueco); border: 1px solid var(--borde); color: var(--texto-2); max-width: 100%; }
a.chip:hover { border-color: var(--borde-fuerte); }
.chip.ambar { color: var(--ambar); border-color: var(--ambar-borde); background: var(--ambar-tenue); }
.chip.seg { color: var(--segura); border-color: rgba(76,195,138,.45); }
.chip.pel { color: var(--peligro-texto); border-color: rgba(229,72,77,.5); }
button.chip { cursor: pointer; min-height: 32px; }
button.chip[aria-pressed="true"] { color: var(--ambar); border-color: var(--ambar-borde); background: var(--ambar-tenue); }
.puestos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip.quita { text-transform: none; letter-spacing: .02em; font-size: 14px; color: var(--ambar); border-color: var(--ambar-borde); background: var(--ambar-tenue); }
.chip.quita.todos { color: var(--texto-2); border-color: var(--borde); background: transparent; }
.globo { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ambar); color: #121212; font: 700 13px/1 var(--rotulo); }

/* Rareza */
.r0 { color: var(--r-comun); } .r1 { color: var(--r-poco); } .r2 { color: var(--r-raro); } .r3 { color: var(--r-epico); } .r4 { color: var(--r-leg); }
.rb0 { --rc: rgba(255,255,255,.14); } .rb1 { --rc: var(--r-poco); } .rb2 { --rc: var(--r-raro); } .rb3 { --rc: var(--r-epico); } .rb4 { --rc: var(--r-leg); }

/* El dibujo de un objeto: una casilla de vidrio con el brillo de su rareza. El dibujo (.ico) se pinta
   con porcentajes de la lámina, así que su tamaño lo pone aquí cada casilla. */
.ico { display: inline-block; flex: 0 0 auto; background-repeat: no-repeat; }
/* r616: el dibujo es el fichero del juego (alta o el de 1999), no un trozo de atlas. */
.ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ico img.px { image-rendering: pixelated; }
.casilla { position: relative; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc, rgba(255,255,255,.14)) 22%, transparent), transparent 72%), var(--hueco); border: 1px solid color-mix(in srgb, var(--rc, rgba(255,255,255,.14)) 55%, transparent); overflow: hidden; }
.casilla.s { width: 52px; height: 40px; }
.casilla.s .ico { width: 45px; height: 32px; }
.casilla.m { width: 102px; height: 76px; }
.casilla.m .ico { width: 90px; height: 64px; }
.casilla.g { width: 224px; height: 164px; border-radius: 10px; }
.casilla.g .ico { width: 210px; height: 149px; }

/* Catálogo de objetos */
.cat { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.filtros { position: sticky; top: calc(var(--tpw-h) + 80px); display: flex; flex-direction: column; gap: 14px; }
.filtros .bloque > b, .filtros .bloque > label, .etiq-sel { display: block; font: 600 12.5px/1 var(--rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 8px; }
.filtros input[type=search], .filtros input[type=number], .filtros select, .campo {
  width: 100%; height: 40px; padding: 0 10px; border-radius: var(--radio); background: var(--hueco); border: 1px solid var(--borde); color: var(--texto); font: inherit; font-size: 15px;
}
.filtros select option, .campo option { background: #15181d; }
.rango { display: flex; gap: 8px; align-items: center; color: var(--texto-3); }
.rango input { min-width: 0; }
.boton.boton-filtros { display: none; }
.ver-resultados { display: none; }
.cat-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; color: var(--texto-2); }
.cat-cab .cuenta { margin-right: auto; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tarjeta { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 8px; background: var(--vidrio); border: 1px solid var(--borde); transition: transform .12s, border-color .12s, background .12s; min-width: 0; }
.tarjeta:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); background: var(--vidrio-alto); color: inherit; }
.tarjeta .t { min-width: 0; flex: 1 1 auto; }
.tarjeta .t b { display: block; font-weight: 500; font-size: 15px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tarjeta .t small { display: block; color: var(--texto-3); font-size: 13px; margin-top: 2px; }
.vias { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 5px; color: var(--texto-2); }
.via { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1.2 var(--rotulo); letter-spacing: .04em; text-transform: uppercase; }
.via svg { width: 14px; height: 14px; color: var(--texto-3); }
.leyenda .via { margin-right: 10px; color: var(--texto-2); }
.mas { display: flex; justify-content: center; padding: 18px 0 0; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--radio); border: 1px solid var(--ambar-borde); background: var(--ambar-tenue); color: var(--ambar); font: 600 15px var(--rotulo); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.boton:hover { background: rgba(242,154,46,.22); color: var(--ambar-hover); }
.boton.sec { border-color: var(--borde); background: var(--hueco); color: var(--texto-2); }

/* Listas tipo tabla (sin scroll lateral: en el teléfono el nombre parte línea, la cifra sigue a la derecha) */
.lista { display: flex; flex-direction: column; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--divisor); min-height: 52px; }
.fila:first-child { border-top: 0; }
.fila .q { display: flex; gap: 10px; align-items: center; min-width: 0; }
.fila .q .t { min-width: 0; }
.fila .q .t b { display: block; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.fila .q .t small { display: block; color: var(--texto-3); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.fila .d { text-align: right; color: var(--texto-2); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fila .d small, .fila .d .marca { color: var(--texto-3); font-size: 12.5px; }
.fila .d .vias { justify-content: flex-end; margin: 4px 0 0; max-width: 220px; }
.fila .d .cant { font-weight: 600; color: var(--texto); }
a.fila:hover { background: var(--hover); color: inherit; }
.prob { display: grid; grid-template-columns: 110px auto; gap: 2px 10px; align-items: center; justify-items: end; }
.barra-p { width: 110px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra-p i { display: block; height: 100%; background: linear-gradient(90deg, #d9811a, var(--ambar)); border-radius: 3px; min-width: 2px; }
.prob b { font-weight: 500; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prob small { grid-column: 1 / -1; color: var(--texto-3); font-size: 12.5px; white-space: nowrap; }
.orden { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.pieza-delitos { margin: 0 4px 10px; font-size: 13px; }
/* r-guía v3: lo que hoy no se puede hacer, las misiones que se llaman igual y los tocayos */
.no-se-puede { color: var(--peligro-texto); }
.grupo-mis .chips { margin-top: 6px; }
.grupo-mis .chips .chip { font-size: 12.5px; }
.nota.tocayo { border-left: 3px solid var(--ambar-borde); padding-left: 10px; }

/* Datos de una ficha */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.dato { background: var(--hueco); border: 1px solid var(--divisor); border-radius: 6px; padding: 8px 10px; }
.dato small { display: block; font: 600 13px/1.2 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.dato b { display: block; font-family: var(--rotulo); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.tabla-precios { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.tabla-precios div { background: var(--hueco); border: 1px solid var(--divisor); border-radius: 6px; padding: 6px 8px; }
.tabla-precios small { display: block; color: var(--texto-3); font-size: 12.5px; }
.tabla-precios b { font-weight: 500; }
.renglones { list-style: none; margin: 0; padding: 0; }
.renglones li { padding: 4px 0; border-top: 1px solid var(--divisor); }
.renglones li:first-child { border-top: 0; }
.renglones li.no { color: var(--texto-3); }
.renglones li.no::after { content: ' (sin efecto en The Prison)'; font-size: 13px; }
.renglones .cond { color: var(--texto-3); font-size: 13px; }
.fuente { border-top: 1px solid var(--divisor); padding-top: 14px; margin-top: 14px; }
.fuente:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.fuente > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ambar); }
.fuente > h3 .cuenta { margin-left: auto; font: 400 13px var(--letra); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.sin-fuente { color: var(--texto-3); }
.cita { border-left: 3px solid var(--ambar-borde); padding: 4px 0 4px 12px; color: var(--texto-2); font-style: italic; margin: 0; }
.pasos { margin: 0; padding-left: 20px; }
.pasos li { margin: 4px 0; }
.sitios-mueble { align-items: center; margin: 8px 0 6px; color: var(--texto-3); }
.tit-enlace:hover { color: var(--ambar-hover); }
.ok { color: var(--segura); }

/* Retratos */
.retrato { flex: 0 0 auto; border-radius: 8px; background-color: #1a1d23; border: 1px solid var(--borde); display: grid; place-items: center; font: 700 22px var(--rotulo); color: var(--texto-3); overflow: hidden; }
.retrato.s { width: 40px; height: 40px; font-size: 16px; border-radius: 6px; }
.retrato.s .ico { width: 40px; height: 40px; }
.retrato.g { width: 112px; height: 112px; font-size: 40px; }
.retrato.g .ico { width: 112px; height: 112px; }

/* Portada */
.hero { position: relative; border-radius: 12px; border: 1px solid var(--borde); padding: clamp(26px, 5vw, 56px) clamp(18px, 4vw, 48px); margin-bottom: 22px; background: #0e1014; }
.hero::before { content: ''; position: absolute; inset: 0; border-radius: 12px; background: var(--hero-img, none) center/cover no-repeat; opacity: .55; }
.hero::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(11,13,16,.25), rgba(11,13,16,.92) 78%), linear-gradient(90deg, rgba(11,13,16,.85), transparent 70%); }
.hero > * { position: relative; z-index: 1; }
.hero .antetitulo { font: 600 14px var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--ambar); }
.hero h1 { margin: 6px 0 8px; font-size: clamp(34px, 6vw, 64px); }
.hero p { max-width: 640px; color: var(--texto-2); margin: 0 0 18px; font-size: 17px; }
.hero .buscador { max-width: 620px; z-index: 5; }
.hero .buscador input { height: 50px; font-size: 17px; padding-left: 44px; background: rgba(11,13,16,.75); }
.hero .buscador .lupa { top: 15px; left: 14px; }
.hero .buscador .sugerencias { top: 56px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 22px; }
.cifra { padding: 14px; border-radius: 8px; background: var(--vidrio); border: 1px solid var(--borde); display: block; }
.cifra:hover { border-color: var(--ambar-borde); color: inherit; }
.cifra b { display: block; font: 700 30px/1 var(--rotulo); font-variant-numeric: tabular-nums; color: var(--texto); }
.cifra span { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 13px var(--rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.seccion { margin: 26px 0 12px; display: flex; align-items: baseline; gap: 12px; }
.seccion a { margin-left: auto; font: 600 14px var(--rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); padding: 8px 0; }
.jefes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.jefe { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(229,72,77,.10), transparent 60%), var(--vidrio); border: 1px solid var(--borde); }
.jefe:hover { border-color: rgba(229,72,77,.5); color: inherit; }
.jefe .t b { display: block; font: 700 21px var(--rotulo); }
.jefe .t small { color: var(--texto-2); }

/* Zonas */
.leyenda-z { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; }
.familias { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.familia { border-radius: 10px; overflow: hidden; background: var(--vidrio); border: 1px solid var(--borde); }
.familia .arte { height: 120px; background: #15181d center/cover no-repeat; position: relative; }
.familia .arte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(11,13,16,.9)); }
.familia .arte h3 { position: absolute; left: 14px; bottom: 10px; z-index: 1; color: var(--texto); font-size: 20px; }
.familia .zl { padding: 10px 12px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.banner { height: clamp(140px, 24vw, 260px); border-radius: 12px; background: #15181d center/cover no-repeat; position: relative; margin-bottom: 14px; border: 1px solid var(--borde); overflow: hidden; }
.banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,16,.1), rgba(11,13,16,.88)); }
.banner .tit { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; }
.banner .chip { background: rgba(11,13,16,.8); }
.banner .compartir { margin-top: 0; min-height: 30px; }

/* Pestañas */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 14px; }
.pestanas button { border: 1px solid var(--borde); background: var(--hueco); color: var(--texto-2); padding: 0 14px; min-height: 40px; border-radius: var(--radio); cursor: pointer; font: 600 15px var(--rotulo); letter-spacing: .05em; text-transform: uppercase; }
.pestanas button[aria-selected="true"] { color: var(--ambar); border-color: var(--ambar-borde); background: var(--ambar-tenue); }

.cargando { color: var(--texto-3); padding: 40px 0; text-align: center; }

/* ── Tableta y teléfono ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .dos { grid-template-columns: minmax(0, 1fr); }
  .cat { grid-template-columns: minmax(0, 1fr); }
  .filtros { position: static; display: none; }
  .filtros.abierto { display: flex; padding-bottom: 76px; }
  .filtros.abierto .ver-resultados { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(11,13,16,.96); border-top: 1px solid var(--borde); }
  .ver-resultados .boton { width: 100%; min-height: 48px; }
  .boton.boton-filtros { display: inline-flex; }
  .nav { display: none; }
  .boton-menu { display: inline-flex; margin-left: auto; }
  .nav.abierto { display: flex; position: fixed; top: calc(var(--tpw-h) + 60px); left: 0; right: 0; z-index: 41; flex-direction: column; background: #0B0D10; border-bottom: 1px solid var(--borde-fuerte); box-shadow: 0 24px 40px rgba(0,0,0,.6); padding: 8px var(--gutter) 16px; }
  .nav.abierto a { min-height: 48px; display: flex; align-items: center; font-size: 17px; }
}
@media (max-width: 640px) {
  :root { --tpw-h: 54px; --gutter: 16px; }
  .barra-in { gap: 8px; }
  .marca span { display: none; }
  .barra .buscador { display: none; }
  .barra .buscador.movil { display: block; position: fixed; top: 0; left: 0; right: 0; max-width: none; padding: 10px var(--gutter); background: var(--fondo); height: 100dvh; z-index: 60; }
  .barra .buscador.movil input { background: #15181d; }
  .barra .buscador.movil .lupa { left: calc(var(--gutter) + 11px); top: 21px; }
  .barra .buscador.movil kbd { display: none; }
  .barra .buscador.movil .sugerencias { position: static; display: block; max-height: calc(100dvh - 80px); margin-top: 8px; box-shadow: none; }
  .barra .buscador.movil .cerrar-busca { display: inline-flex; }
  .boton-lupa { display: inline-flex; margin-left: auto; }
  .boton-menu { margin-left: 0; }
  .cabecera { flex-direction: column; align-items: stretch; gap: 12px; }
  .cabecera > .casilla, .cabecera > .retrato { align-self: flex-start; }
  .casilla.g { width: 180px; height: 132px; }
  .casilla.g .ico { width: 168px; height: 119px; }
  /* El dato de la derecha se queda a la derecha (y la barra, más corta). */
  .fila { gap: 4px 10px; padding: 10px 2px; }
  .prob { grid-template-columns: auto; justify-items: end; gap: 3px 0; }
  .barra-p { width: 70px; }
  .fila .d .vias { max-width: 140px; }
  /* El catálogo, en dos columnas: el dibujo arriba, el nombre debajo. */
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rejilla .tarjeta { flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px; }
  .rejilla .tarjeta .casilla.m { width: 100%; }
  .familias { grid-template-columns: minmax(0, 1fr); }
  .jefes { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 32px; }
  .panel { padding: 14px; }
  /* Toques del tamaño de un dedo. */
  a.chip, button.chip, .pestanas button, .compartir, .banner .compartir { min-height: 44px; }
  .marca { min-height: 44px; align-items: center; }
  .tit-enlace { display: inline-block; padding: 10px 0; }
  .pie a { display: inline-block; padding: 12px 0; }
  main p a, main li a { padding: 10px 0; }
  .migas a { padding: 12px 2px; }
  .seccion a { padding: 12px 0; }
}
/* QUÉ HAGO A MI NIVEL (r645, 24-10-2026): la pantalla de la maqueta aprobada (web v2, guia-nivel.html). */
.kicker { font-family: var(--rotulo); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--ambar); }
.selector-nv { display: grid; gap: 18px; padding: 20px 22px; }
.delitos-sel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.delitos-sel button { min-height: 52px; border-radius: 5px; border: 1px solid var(--borde); background: var(--hueco); color: var(--texto); cursor: pointer; text-align: left; padding: 8px 10px; display: grid; min-width: 0; }
.delitos-sel button b { font-family: var(--rotulo); font-size: 16px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; overflow-wrap: anywhere; }
.delitos-sel button small { color: var(--texto-3); font-size: 12px; font-family: var(--rotulo); letter-spacing: .14em; }
.delitos-sel button[aria-pressed="true"] { border-color: var(--ambar-borde); background: var(--ambar-tenue); }
.delitos-sel button[aria-pressed="true"] b { color: var(--ambar); }
.nivel-sel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; margin-top: 8px; }
.nivel-sel .chapa { width: 38px; height: 76px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.nivel-sel output { font-family: var(--rotulo); font-size: 46px; font-weight: 700; line-height: 1; min-width: 3ch; text-align: right; color: var(--texto); }
.nivel-sel .pasos { display: flex; gap: 6px; }
.nivel-sel .pasos .boton { min-width: 52px; padding: 0 10px; }
.nivel-sel input[type="range"] { width: 100%; accent-color: var(--ambar); height: 32px; }
.zonas-nv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zona-nv { position: relative; border: 1px solid var(--borde); border-radius: 8px; padding: 92px 14px 10px; background: linear-gradient(180deg, rgba(11,13,16,0) 0, rgba(11,13,16,.55) 70px, var(--vidrio) 100px), var(--zona-img, none) center top / 100% auto no-repeat, var(--vidrio); min-width: 0; }
.zona-nv .k { font: 600 12.5px var(--rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); }
.zona-nv h3 { margin: 2px 0 6px; font-size: 19px; color: var(--texto); letter-spacing: .03em; overflow-wrap: anywhere; }
.zona-nv h3 a { color: inherit; }
.zona-nv .fila { padding: 6px 0; }
.dos.iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dos.iguales > .panel + .panel { margin-top: 0; }
.chip.ok { color: var(--segura); border-color: rgba(76,195,138,.45); }
.ranura-nv { font-family: var(--rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.a-tu-nivel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 0; border-color: var(--ambar-borde); background: linear-gradient(90deg, var(--ambar-tenue), var(--vidrio) 70%); color: inherit; }
.a-tu-nivel:hover { color: inherit; border-color: var(--ambar); }
.a-tu-nivel b { display: block; font: 700 22px var(--rotulo); text-transform: uppercase; letter-spacing: .04em; color: var(--ambar); }
.a-tu-nivel span { color: var(--texto-2); }
.a-tu-nivel .boton { flex: none; }
@media (max-width: 980px) {
  .delitos-sel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zonas-nv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos.iguales { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .selector-nv { padding: 14px; }
  .delitos-sel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .delitos-sel button { min-height: 48px; padding: 6px 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
  .delitos-sel button b { overflow-wrap: normal; }
  .delitos-sel button b { font-size: 14px; }
  .nivel-sel { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .nivel-sel .pasos { grid-column: 1 / -1; }
  .nivel-sel .pasos .boton { flex: 1; min-height: 48px; }
  .nivel-sel output { font-size: 38px; }
  .zonas-nv { grid-template-columns: minmax(0, 1fr); }
  .a-tu-nivel { flex-direction: column; align-items: stretch; }
}
.cerrar-busca { display: none; position: absolute; right: var(--gutter); top: 10px; width: 44px; height: 40px; border: 0; background: transparent; align-items: center; justify-content: center; cursor: pointer; color: var(--texto-2); }
.barra .buscador.movil input { padding-right: 52px; }
.barra input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }