/*
 * D-UI-SITIOS — esqueleto común de las pantallas de la ciudad en los dos estilos (mesa claude/_CLAUDE_D_UI_SITIOS_MESA.md;
 * marcado en src/ui/sitio.ts) y la primera pantalla que lo usa, la Taberna (src/modules/taberna_vista.ts).
 *   A · Salón dorado — título centrado con filete, secciones en paneles ui-marco con esquinas.
 *   B · Estandartes  — título en una cinta carmesí colgada, rayos; personas en estandartes; el resto en cintas oscuras.
 * Trampa: v2-theme pone la familia a todo con `* { … !important }` (P-UI-13): las fuentes llevan !important.
 */

/* ───────── Encaje en el escenario (como Tácticas): sin la cabecera vieja, sin desplazar el panel ───────── */
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz) { overflow: hidden; }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz) > div:first-child { display: none; }
#rpg-root #buildingPanel #buildingContent:has(> .sitio-raiz) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* D-PULIDO D-PUL-1 — en estrecho el escenario se desplaza y su relleno inferior no entra en lo desplazable (es flex): el sitio acababa pegado
   al borde (15-19 px medidos en el Templo). El contenido crece con el sitio y pone el hueco. Sólo el Templo (el medido): los sitios con
   escena o plano que llenan el alto (Taberna, mazmorra del Atlas) no se han medido en estrecho */
@media (max-width: 1000px) { #rpg-root #buildingPanel #buildingContent:has(> .sitio-raiz[data-sitio="templo"]) { flex: none; padding-bottom: 16px; } }

/* ───────── D-OPCIONES-REDISENO A-2 — fondo fijo por sitio ─────────
   Detrás de los paneles de cada pantalla de la ciudad, su escena del menú (assets/escenas/menu/escena_sitio_<sitio>.webp),
   ampliada, difuminada y oscurecida, sin animación (sustituye a la capa #v2Atmosphere, que apenas se veía). Con «Efectos
   visuales: mínimos», sin difuminado. Sitio sin escena (Opciones, Palacio): el fondo liso de siempre. La lista de sitios
   y ficheros es la de FONDO_SITIO (src/ui/arte_ui.ts); lo vigila d_opciones_rediseno.test.ts. En estrecho el escenario se
   desplaza, así que no lleva fondo. */
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz) { position: relative; isolation: isolate; }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 4, 2, 0.5), rgba(6, 4, 2, 0.78)), var(--sitio-fondo, none) center 40% / cover no-repeat;
  filter: blur(12px) brightness(0.55) saturate(0.9); transform: scale(1.08);
}
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="taberna"])      { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_taberna.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="ayuntamiento"]) { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_ayuntamiento.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="bazar"])        { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_bazaar.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="compendio"])    { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_compendio.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="forja"])        { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_forja.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="atlas"])        { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_atlas.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="relaciones"])   { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_relaciones.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="templo"])       { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_templo.webp"); }
#rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz[data-sitio="torre"])        { --sitio-fondo: url("../assets/escenas/menu/escena_sitio_torre.webp"); }
body.ui-efectos-reducidos #rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz)::before { filter: brightness(0.45) saturate(0.85); transform: none; }
@media (max-width: 1000px) { #rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz)::before { display: none; } }

.sitio-raiz { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ui-tinta-1); }
.sitio-raiz, .sitio-raiz :is(p, li, small, span, em) { font-family: var(--ui-fuente-texto) !important; }
.sitio-raiz :is(.sitio-titulo, .sitio-seccion__titulo, .sitio-seccion__titulo span, button) { font-family: var(--ui-fuente-titulo) !important; }

.sitio-cuerpo { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

/* ───────── Cabecera ───────── */
.sitio-cabecera { position: relative; z-index: 1; flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.sitio-cabecera__texto { position: relative; min-width: 0; }
.sitio-titulo { margin: 0; font-weight: 700; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.1; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3c4, #e0b252 55%, #9a6a1c); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(233,196,106,.3)) drop-shadow(0 2px 0 #000); }
.sitio-lema { margin: 4px 0 0; font-size: 13px; letter-spacing: .04em; color: var(--ui-tinta-2); }
.sitio-acciones { flex: none; display: flex; gap: 8px; align-items: center; }

/* A: título con filete */
.sitio-raiz[data-estilo="A"] .sitio-filete { display: block; width: 260px; max-width: 60%; height: 14px; margin-top: 4px; background:
  linear-gradient(90deg, #e0b252, #ffe7a1 35%, transparent) left center/100% 1px no-repeat,
  radial-gradient(circle, #ffe7a1 0 3px, transparent 4px) left center/14px 14px no-repeat; }

/* B: título en una cinta carmesí colgada de su barra, rayos detrás */
/* D-UI-SITIOS-2: los rayos (absolutos, más grandes que la raíz) no agrandan el área desplazable; clip no crea scroll */
.sitio-raiz[data-estilo="B"] { overflow: clip; overflow-clip-margin: 12px; } /* el margen deja asomar la barra de la cinta (left:-6px) */
.sitio-raiz[data-estilo="B"] .sitio-rayos { position: absolute; left: 50%; top: -160px; width: 1400px; height: 900px; transform: translateX(-50%); opacity: .4; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255,214,140,.1) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%); mask: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%); }
.sitio-raiz[data-estilo="B"] .sitio-cabecera__texto { padding: 16px 30px 18px 22px; margin-top: 8px;
  background: linear-gradient(180deg, #4d1a12, #2c0e09); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(233,196,106,.35); }
.sitio-raiz[data-estilo="B"] .sitio-cinta-barra { position: absolute; left: -6px; right: 10px; top: -8px; height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.sitio-raiz[data-estilo="B"] .sitio-lema { color: #e9d9b6; }

/* D-TITULOS D-TIT-1 (claude/_CLAUDE_D_TITULOS_MESA.md) — en todas las pantallas, el título centrado en Germania One. Rejilla
   1fr auto 1fr: el texto en el centro, las acciones a la derecha; los lados guardan su mínimo de contenido, así que con
   acciones anchas (Bazar, Forja) el título se corre un poco en vez de montarse encima. */
.sitio-raiz .sitio-cabecera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; row-gap: 0; }
.sitio-raiz .sitio-cabecera__texto { grid-column: 2; grid-row: 1; text-align: center; }
.sitio-raiz .sitio-acciones { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
/* más específico que .sitio-raiz :is(.sitio-titulo, .sitio-seccion__titulo span, button), que fija Cinzel */
.sitio-raiz .sitio-cabecera .sitio-titulo { font-family: 'Germania One', var(--ui-fuente-titulo) !important; font-weight: 400; letter-spacing: .07em;
  font-size: clamp(26px, 2.1vw, 40px); }
/* estilo A: título y filete en el centro, el lema en su propia fila a todo lo ancho (así un lema largo no estira la cabecera) */
.sitio-raiz[data-estilo="A"] .sitio-cabecera__texto { display: contents; }
.sitio-raiz[data-estilo="A"] .sitio-cabecera .sitio-titulo { grid-column: 2; grid-row: 1; text-align: center; }
.sitio-raiz[data-estilo="A"] .sitio-cabecera .sitio-filete { grid-column: 2; grid-row: 2; justify-self: center; margin: 4px auto 0; background:
  linear-gradient(90deg, transparent, #e0b252 25%, #ffe7a1 50%, #e0b252 75%, transparent) center/100% 1px no-repeat,
  radial-gradient(circle, #ffe7a1 0 3px, transparent 4px) center/14px 14px no-repeat; }
.sitio-raiz[data-estilo="A"] .sitio-cabecera .sitio-lema { grid-column: 1 / -1; grid-row: 3; text-align: center; }
.sitio-raiz[data-estilo="A"] .sitio-acciones { grid-row: 1 / span 2; }
/* estilo B: la cinta carmesí va sólo detrás del título (como en Tácticas B) y el lema debajo, a todo lo ancho */
.sitio-raiz[data-estilo="B"] .sitio-cabecera__texto { display: contents; }
.sitio-raiz[data-estilo="B"] .sitio-cabecera .sitio-titulo { grid-column: 2; grid-row: 1; position: relative; margin-top: 8px; padding: 14px 30px 15px 22px;
  background: linear-gradient(180deg, #4d1a12, #2c0e09); -webkit-background-clip: border-box; background-clip: border-box; color: #fff3c4; -webkit-text-fill-color: #fff3c4;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(233,196,106,.35); filter: none; }
.sitio-raiz[data-estilo="B"] .sitio-cinta-barra { position: relative; grid-column: 2; grid-row: 1; align-self: start; left: auto; right: auto; top: 0; width: 100%; z-index: 1; }
.sitio-raiz[data-estilo="B"] .sitio-cabecera .sitio-lema { grid-column: 1 / -1; grid-row: 2; text-align: center; margin-top: 6px; }

/* D-TABERNA-RETOQUES D-TAB-RET-2 — la taberna «El Dragón Durmiente»: título centrado en Germania One (la letra del logotipo
   de Drakenhal), lema centrado y filete simétrico. */
.sitio-raiz[data-sitio="taberna"] .sitio-cabecera { justify-content: center; }
.sitio-raiz[data-sitio="taberna"] .sitio-cabecera__texto { text-align: center; }
.sitio-raiz[data-sitio="taberna"] .sitio-titulo { font-family: 'Germania One', var(--ui-fuente-titulo) !important; font-weight: 400; letter-spacing: .07em;
  font-size: clamp(26px, 2.1vw, 40px); }
.sitio-raiz[data-sitio="taberna"][data-estilo="A"] .sitio-filete { margin: 4px auto 0; background:
  linear-gradient(90deg, transparent, #e0b252 25%, #ffe7a1 50%, #e0b252 75%, transparent) center/100% 1px no-repeat,
  radial-gradient(circle, #ffe7a1 0 3px, transparent 4px) center/14px 14px no-repeat; }

/* ───────── Secciones ───────── */
.sitio-seccion { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.sitio-seccion__titulo { flex: none; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #e9c46a; }
.sitio-seccion__titulo span { flex: none; }
.sitio-seccion__titulo::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(233,196,106,.55), transparent); }
.sitio-seccion__cifra { order: 3; flex: none; font-style: normal; font-size: 12px; letter-spacing: .08em; color: var(--ui-tinta-2); font-family: var(--ui-fuente-texto) !important; }
.sitio-seccion__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(200,168,96,.4) transparent; }
.sitio-raiz[data-estilo="A"] .sitio-seccion { background: linear-gradient(180deg, rgba(22,16,8,.86), rgba(10,8,5,.92)); }
.sitio-raiz[data-estilo="B"] .sitio-seccion { background: linear-gradient(180deg, rgba(14,10,6,.92), rgba(8,6,4,.95)); border: 1px solid rgba(200,168,96,.4); border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.5); padding-top: 22px; }
/* B: el título de la sección es un banderín carmesí que sobresale arriba */
.sitio-raiz[data-estilo="B"] .sitio-seccion__titulo { position: absolute; top: -11px; left: 14px; margin: 0; padding: 4px 22px 5px 12px; font-size: 11px; color: #fff3c4;
  background: linear-gradient(180deg, #6b2418, #3a120c); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(233,196,106,.4); }
.sitio-raiz[data-estilo="B"] .sitio-seccion__titulo::after { display: none; }
.sitio-raiz[data-estilo="B"] .sitio-seccion__cifra { color: #e9c46a; }
/* D-ARTE-1-5 — icono de sección y banda pintada (franja de fondo arriba, fundida con el panel; no mueve nada) */
.sitio-seccion__icono { width: 20px; height: 20px; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px rgba(233,196,106,.35); }
.sitio-raiz[data-estilo="B"] .sitio-seccion__icono { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.sitio-seccion--banda::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 84px; pointer-events: none; z-index: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(10,8,5,.05) 0%, rgba(10,8,5,.55) 55%, rgba(10,8,5,.96) 100%), var(--sitio-banda) center 35% / cover no-repeat; opacity: .9; }
.sitio-seccion--banda > .sitio-seccion__cuerpo { position: relative; z-index: 1; }
.sitio-raiz[data-estilo="A"] .sitio-seccion--banda > .sitio-seccion__titulo { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.sitio-raiz[data-estilo="B"] .sitio-seccion--banda > .sitio-seccion__titulo { z-index: 2; }

/* ───────── Botones del sitio ───────── */
.sitio-raiz .tab-boton { cursor: pointer; border-radius: 5px; padding: 9px 16px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #f1e3c4; background: rgba(10,8,5,.8); border: 1px solid rgba(200,168,96,.5); transition: border-color .15s, box-shadow .15s, filter .15s; }
.sitio-raiz .tab-boton:hover:not(:disabled), .sitio-raiz .tab-boton:focus-visible { outline: none; border-color: #ffe7a1; color: #fff3c4; box-shadow: 0 0 14px rgba(233,196,106,.3); }
.sitio-raiz .tab-boton--principal { color: #1b1406; border-color: #e9c46a; background: linear-gradient(180deg, #ffe7a1 0%, #e0b252 45%, #b07d26 100%); box-shadow: 0 0 0 1px #5a3f10 inset; }
.sitio-raiz .tab-boton--principal:hover:not(:disabled), .sitio-raiz .tab-boton--principal:focus-visible { color: #1b1406; filter: brightness(1.08); box-shadow: 0 0 0 1px #5a3f10 inset, 0 0 18px rgba(233,196,106,.5); }
.sitio-raiz .tab-boton:disabled { filter: grayscale(.85) brightness(.6); cursor: not-allowed; }

/* ════════════════════ Taberna ════════════════════ */
.tab-aviso { flex: none; margin: 0; padding: 8px 12px; border-radius: 5px; font-size: 13px; line-height: 1.45; }
.tab-aviso--info { color: #dbeafe; background: rgba(30,64,110,.35); border: 1px solid rgba(96,165,250,.45); }
.tab-aviso--max { color: #e5e0d5; background: rgba(0,0,0,.4); border: 1px solid rgba(160,160,160,.4); }
.tab-vacio { margin: 0; font-size: 13px; font-style: italic; color: var(--ui-tinta-2); }
.tab-rejilla { flex: 1; min-height: 0; display: grid; gap: 14px; }

/* A: tres columnas */
.tab-rejilla--A { grid-template-columns: minmax(200px, 22%) 1fr minmax(220px, 26%); }
.tab-rejilla--A.tab-rejilla--sin-pnj { grid-template-columns: 1fr minmax(220px, 30%); }

/* B: la sala a lo ancho y, a la derecha, una columna con los PNJ y el roster */
.tab-rejilla--B { grid-template-columns: minmax(0, 1fr) minmax(220px, 25%); }
.tab-cinta { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; min-height: 0; padding-top: 12px; }
.tab-rejilla--B .tab-cinta .sitio-seccion { min-height: 0; }

/* ── PNJ de la historia ── */
.tab-pnjs { display: flex; flex-direction: column; gap: 12px; }
.tab-rejilla--B .tab-pnjs { gap: 10px; }
/* D-CHAT-SIN-IA D-CSI-3 — «Hablar con la mesa» */
.tab-mesa { display: block; width: 100%; margin-top: 10px; padding: 8px 10px; font-weight: 600; color: #f3e3b8; background: rgba(120, 82, 34, 0.55); border: 1px solid rgba(214, 170, 92, 0.55); border-radius: 6px; cursor: pointer; }
.tab-mesa:hover, .tab-mesa:focus-visible { background: rgba(150, 104, 44, 0.7); outline: none; }
.tab-rejilla--B .tab-pnj__retrato { width: 52px; height: 52px; }
.tab-pnj { display: flex; align-items: center; gap: 12px; }
.tab-pnj__retrato { position: relative; flex: none; width: 66px; height: 66px; padding: 0; border-radius: 50%; overflow: visible; cursor: pointer; background: #0b0e15;
  border: 2px solid #c8963a; box-shadow: 0 0 0 3px rgba(0,0,0,.55), 0 0 16px rgba(233,196,106,.3); transition: box-shadow .15s, border-color .15s; }
/* D-I18N-EN D-IEN2-10 — la imagen ya llega encuadrada en busto (cuadrada) desde el compositor: centrada */
.tab-pnj__retrato img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 50%; display: block; }
.tab-pnj__retrato:hover, .tab-pnj__retrato:focus-visible { outline: none; border-color: #ffe7a1; box-shadow: 0 0 0 3px rgba(0,0,0,.55), 0 0 22px rgba(255,231,161,.6); }
.tab-pnj__aviso { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 13px 'Cinzel', serif; color: #1a1200; background: linear-gradient(135deg, #f0d060, #c8a84b); border: 2px solid #1a1200; animation: tutorialPulse 1.4s ease-in-out infinite; }
.tab-pnj__texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tab-pnj__nombre { font-family: var(--ui-fuente-titulo) !important; font-size: 15px; letter-spacing: .06em; color: #f6e6c2; }
.tab-pnj__rotulo { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-tinta-2); }
.tab-pnj__botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tab-pnj__boton { cursor: pointer; border-radius: 4px; padding: 4px 9px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #e9dcc0; background: rgba(10,8,5,.75); border: 1px solid rgba(200,168,96,.4); }
.tab-pnj__boton:hover, .tab-pnj__boton:focus-visible { outline: none; border-color: #ffe7a1; color: #fff3c4; }
.tab-pnj__boton--unir { color: #bff3cf; border-color: rgba(110,220,150,.5); }
.tab-pnj__boton--tell { color: #e9c46a; }

/* ── La sala (D-TABERNA, claude/_CLAUDE_D_TABERNA_MESA.md D-TAB-4) ──
   El lienzo guarda la proporción del fondo (1376 × 768) y cabe entero en la sección: los sitios de los personajes, en %,
   caen siempre en el mismo punto del dibujo. Con alguien elegido, zoom sobre él. */
.tab-sec-sala .sitio-seccion__cuerpo { overflow: hidden; }
.tab-escena { position: relative; height: 100%; min-height: 280px; container-type: size; overflow: hidden; border-radius: 6px; background: #0d0905; }
.tab-escena__lienzo { position: absolute; left: 50%; top: 50%; width: min(100cqw, calc(100cqh * 1376 / 768)); aspect-ratio: 1376 / 768; translate: -50% -50%;
  transform-origin: var(--tab-foco-x, 50%) var(--tab-foco-y, 50%); transition: scale .45s ease; }
.tab-escena--zoom .tab-escena__lienzo { scale: 1.65; }
.tab-escena__fondo, .tab-escena__mesas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tab-escena__mesas { z-index: 2; }
/* D-TABERNA-AMBIENTE (claude/_CLAUDE_D_TABERNA_AMBIENTE_MESA.md) — la sala con vida. Delante del fondo y detrás de todo
   lo demás: el resplandor de las velas y del hogar, y el canvas de brasas, humo y polvo. La sombra y la luz del fuego (mapas
   calculados de la imagen, tools/arte/taberna_luces.py), que laten a la par, son del cuarto: D-TABERNA-LUZ D-TL-1
   (claude/_CLAUDE_D_TABERNA_LUZ_MESA.md) las pone sobre el fondo y DEBAJO de todas las figuras (sin z-index, antes en el DOM),
   que ya llevan su luz en el shader; y una copia enmascarada con el alfa de las mesas sobre la capa de mesas (z 2, por debajo
   de los de delante, z 3), para que mesa y fondo laten igual. */
.tab-amb { position: absolute; inset: 0; pointer-events: none; }
.tab-amb__llama, .tab-amb__hogar { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; }
.tab-amb__llama { width: var(--t); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,224,150,.7) 0, rgba(255,160,60,.28) 35%, rgba(255,120,30,0) 70%);
  animation: tab-amb-llama var(--d) ease-in-out var(--r) infinite alternate; }
.tab-amb__hogar { width: 30%; aspect-ratio: 1.4; background: radial-gradient(ellipse, rgba(255,170,70,.42) 0, rgba(255,110,30,.16) 40%, rgba(255,90,20,0) 70%);
  animation: tab-amb-fuego 3.3s linear infinite; }
.tab-amb__particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tab-amb__sombra, .tab-amb__luz { position: absolute; inset: 0; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }
.tab-amb__sobre-mesas { z-index: 2; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tab-amb__luz { mix-blend-mode: screen; animation: tab-amb-fuego 3.3s linear infinite; }
.tab-amb__sombra { animation: tab-amb-sombra 3.3s linear infinite; }
@keyframes tab-amb-llama { 0% { opacity: .55; scale: .9; } 25% { opacity: .9; scale: 1.03; } 45% { opacity: .62; scale: .95; } 70% { opacity: 1; scale: 1.06; } 100% { opacity: .72; scale: .97; } }
@keyframes tab-amb-fuego { 0% { opacity: .78; } 9% { opacity: .95; } 17% { opacity: .82; } 31% { opacity: 1; } 38% { opacity: .86; } 52% { opacity: .93; } 61% { opacity: .76; } 74% { opacity: .98; } 86% { opacity: .84; } 100% { opacity: .78; } }
@keyframes tab-amb-sombra { 0% { opacity: 1; } 9% { opacity: .9; } 17% { opacity: .97; } 31% { opacity: .86; } 38% { opacity: .95; } 52% { opacity: .9; } 61% { opacity: 1; } 74% { opacity: .88; } 86% { opacity: .96; } 100% { opacity: 1; } }
body.ui-efectos-reducidos .tab-amb__llama, body.ui-efectos-reducidos .tab-amb__hogar, body.ui-efectos-reducidos .tab-amb__luz, body.ui-efectos-reducidos .tab-amb__sombra { animation: none; }
@media (prefers-reduced-motion: reduce) { .tab-amb__llama, .tab-amb__hogar, .tab-amb__luz, .tab-amb__sombra { animation: none; } }
.tab-figura { position: absolute; left: var(--tab-x); top: var(--tab-y); height: var(--tab-alto); translate: -50% -100%; z-index: 3; padding: 0; margin: 0; border: 0;
  background: none; cursor: pointer; display: block; }
.tab-figura--tras-mesa { z-index: 1; }
.tab-figura:focus-visible { outline: none; }
.tab-figura__img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 6px 5px rgba(0,0,0,.65)); transition: filter .2s ease; -webkit-user-drag: none; }
.tab-figura:hover .tab-figura__img, .tab-figura:focus-visible .tab-figura__img, .tab-figura--sel .tab-figura__img {
  filter: drop-shadow(0 0 5px rgba(255,231,161,.95)) drop-shadow(0 0 14px rgba(233,196,106,.45)) drop-shadow(0 6px 5px rgba(0,0,0,.65)); }
.tab-figura__rotulo { position: absolute; bottom: calc(100% - 2px); left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  white-space: nowrap; line-height: 1.1; text-shadow: 0 1px 3px #000, 0 0 6px #000; pointer-events: none; }
.tab-figura__rotulo b { font-family: var(--ui-fuente-titulo) !important; font-size: clamp(10px, 1.25cqw, 15px); letter-spacing: .04em; color: #fff3c4; }
.tab-figura__rotulo small { font-size: clamp(9px, 1cqw, 12px); color: #d8c08a; }
.tab-figura__icono { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-bottom: 2px; border-radius: 50%; font-size: 11px; font-weight: 800;
  text-shadow: none; box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.tab-figura__icono--favor { color: #1b1406; background: #ffd75e; }
.tab-figura__icono--amigo { color: #0d2414; background: #8fe3a8; }
.tab-figura__linea, .tab-figura__detalle { position: absolute; left: 50%; translate: -50% 0; opacity: 0; transition: opacity .2s ease; pointer-events: none; white-space: nowrap; }
.tab-figura__linea { bottom: calc(100% + 34px); max-width: 26cqw; white-space: normal; width: max-content; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-style: italic;
  color: #2a1d0a; background: #f3e6c4; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.tab-figura__detalle { top: calc(100% + 4px); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #e9d9b6; background: rgba(0,0,0,.65); }
.tab-figura:hover .tab-figura__linea, .tab-figura:hover .tab-figura__detalle, .tab-figura:focus-visible .tab-figura__linea { opacity: 1; }
.tab-escena--zoom .tab-figura:not(.tab-figura--sel) { filter: brightness(.55); }
.tab-escena--zoom .tab-figura__linea, .tab-escena--zoom .tab-figura__detalle { display: none; }
.tab-escena__pie { position: absolute; top: 8px; left: 10px; z-index: 6; margin: 0; padding: 3px 9px; border-radius: 4px; font-size: 11px; letter-spacing: .08em; color: #e9d9b6;
  background: rgba(0,0,0,.55); }
.tab-escena__vacia { position: absolute; inset: auto 0 40% 0; z-index: 6; margin: 0; text-align: center; font-style: italic; color: #e9d9b6; text-shadow: 0 1px 4px #000; }
/* el diálogo, abajo, sobre la escena */
.tab-dialogo { position: absolute; left: 2%; right: 2%; bottom: 2%; z-index: 7; max-height: 58%; overflow: auto; display: grid; gap: 6px 16px;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cabeza ficha" "texto ficha" "opciones opciones";
  padding: 12px 16px; border-radius: 8px; background: linear-gradient(180deg, rgba(28,20,9,.95), rgba(10,7,4,.97)); border: 1px solid rgba(233,196,106,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.6); animation: tabDialogo .25s ease; }
@keyframes tabDialogo { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.tab-dialogo__cabeza { grid-area: cabeza; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tab-dialogo__cabeza b { font-family: var(--ui-fuente-titulo) !important; font-size: 17px; color: #ffe7a1; }
.tab-dialogo__cabeza span { font-size: 11px; letter-spacing: .06em; color: var(--ui-tinta-2); }
.tab-dialogo__texto { grid-area: texto; margin: 0; font-size: 14px; line-height: 1.5; color: #f1e4c6; }
.tab-dialogo__ficha { grid-area: ficha; align-self: start; max-width: 260px; font-size: 11px; }
.tab-dialogo__opciones { grid-area: opciones; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(200,168,96,.25); }
.sitio-raiz .tab-dialogo__opciones .tab-boton { padding: 7px 12px; font-size: 11px; letter-spacing: .08em; }

/* B: la sala sin marco, a lo ancho */
.tab-rejilla--B .tab-sec-sala { background: none !important; border: 0 !important; box-shadow: none !important; padding: 18px 0 0; }

/* ── El tablón y la ficha (D-TABERNA tanda 3, D-TAB-6) ── */
.tab-tablon { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.tab-tablon__h { margin: 8px 0 2px; font-family: var(--ui-fuente-titulo) !important; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #e9c46a; }
.tab-tablon__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tab-tablon__lista li { padding: 5px 8px; border-left: 2px solid rgba(233,196,106,.45); background: rgba(0,0,0,.25); font-size: 12px; line-height: 1.4; color: #e9dfc6; }
.tab-tablon__lista li b { color: #ffe7a1; }
.tab-tablon__lista li.tab-tablon__listo { border-left-color: #8fe3a8; color: #d6f5df; }
.tab-tablon__grupo { margin: 0; font-size: 13px; color: #f1e4c6; }
.tab-tablon__huecos { margin: 0; font-size: 11px; color: var(--ui-tinta-2); }
/* ── D-ECONOMIA D-ECO-3c — la despensa: hogazas y odres del héroe ── */
.tab-despensa { display: flex; flex-direction: column; gap: 4px; }
.tab-despensa__estado { margin: 0; font-size: 12px; color: #d6f5df; }
.tab-despensa--hambre .tab-despensa__estado { color: #ffb38a; }
.tab-despensa__lista li.tab-despensa__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.tab-despensa__icono { display: inline-block; width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-right: 6px; } /* D-DIARIO-LIBRO D-DL-6 */
.tab-despensa__botones { display: flex; gap: 4px; }
.sitio-raiz .tab-despensa__botones .tab-boton { padding: 4px 8px; font-size: 10px; letter-spacing: .06em; }
.tab-despensa__nota { margin: 0; font-size: 11px; color: var(--ui-tinta-2); line-height: 1.4; }
/* ── D-TABLON-TRABAJOS (claude/_CLAUDE_D_TABLON_TRABAJOS_MESA.md, D-TAB-TRA-8) — los trabajos: papeles clavados en la madera ── */
.tab-trabajos-bloque { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(200,168,96,.22); }
.tab-trabajos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tab-trabajo { position: relative; padding: 9px 10px 8px; border-radius: 4px; color: #eadfc4; font-size: 12px; line-height: 1.35;
  background: linear-gradient(180deg, rgba(64,44,20,.92), rgba(34,23,10,.95)); border: 1px solid rgba(200,168,96,.38);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,231,161,.08); }
.tab-trabajo::before { content: ''; position: absolute; top: -4px; left: 50%; translate: -50% 0; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe7a1, #b07d26 60%, #5a3f10); box-shadow: 0 1px 2px rgba(0,0,0,.7); }
.tab-trabajo--gremio { border-color: rgba(233,196,106,.6); }
.tab-trabajo--listo { border-color: #8fe3a8; box-shadow: 0 3px 8px rgba(0,0,0,.55), 0 0 12px rgba(143,227,168,.25); }
.tab-trabajo--hueco { padding: 7px 10px; font-style: italic; text-align: center; color: var(--ui-tinta-2); background: rgba(0,0,0,.22); border-style: dashed; box-shadow: none; }
.tab-trabajo--hueco::before { display: none; }
.tab-trabajo__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
/* D-PULIDOS-31 D-P31-6 — el título de un trabajo es una frase: en la letra de texto en negrita (Cinzel, para títulos cortos y rótulos) */
.tab-trabajo__titulo { font-family: var(--ui-fuente-texto) !important; font-weight: 700; font-size: 13.5px; letter-spacing: normal; color: #ffe7a1; }
.tab-trabajo__etiqueta { padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #1b1406; background: linear-gradient(180deg, #ffe7a1, #c8963a); }
.tab-trabajo p { margin: 2px 0 0; }
.tab-trabajo__cliente { font-size: 11px; color: #d8c08a; }
.tab-trabajo__cliente small { color: #e9c46a; }
.tab-trabajo__objetivo { color: #f6ead0; }
.tab-trabajo__donde { font-size: 11px; color: var(--ui-tinta-2); }
.tab-trabajo__progreso { position: relative; height: 14px; margin-top: 5px; border-radius: 3px; overflow: hidden; background: rgba(0,0,0,.5); border: 1px solid rgba(200,168,96,.35); }
.tab-trabajo__progreso span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #e9c46a, #a8771f); }
.tab-trabajo--listo .tab-trabajo__progreso span { background: linear-gradient(180deg, #a6efbd, #3f9a5c); }
.tab-trabajo__progreso b { position: relative; display: block; text-align: center; font-size: 10px; line-height: 12px; color: #fff3c4; text-shadow: 0 1px 2px #000; }
.tab-trabajo__paga { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tab-trabajo__paga li { padding: 1px 6px; border-radius: 3px; font-size: 11px; color: #ffe7a1; background: rgba(0,0,0,.35); border: 1px solid rgba(200,168,96,.3); }
.tab-trabajo__nota { font-size: 11px; font-style: italic; color: #e9c46a; }
.tab-trabajo--listo .tab-trabajo__nota { color: #a6efbd; }
.tab-trabajo__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sitio-raiz .tab-trabajo__acciones .tab-boton { padding: 5px 10px; font-size: 10px; letter-spacing: .08em; }
.sitio-raiz .tab-trabajo__acciones .tab-trabajo__peligro { color: #ffd2c8; border-color: rgba(230,120,100,.6); }
.tab-ficha-scroll { height: 100%; min-height: 0; overflow-y: auto; padding-right: 4px; }
.tab-ficha { font-size: 12px; }
.tab-ficha__equipo { display: flex; flex-wrap: wrap; gap: 6px; --ui-lado: 46px; }
.tab-ficha__equipo .tac-hueco__rotulo { display: none; }

/* ── Roster ── */
.tab-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tab-fila { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 5px; cursor: pointer; border: 1px solid rgba(200,168,96,.18);
  background: linear-gradient(90deg, rgba(40,30,14,.45), rgba(16,12,7,.3)); transition: border-color .15s, background .15s; }
.tab-fila:hover { border-color: rgba(233,196,106,.55); background: linear-gradient(90deg, rgba(70,50,18,.5), rgba(24,18,9,.35)); }
.tab-fila__retrato { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #0b0e15; border: 1px solid var(--tab-clase, #8a6a2c); }
.tab-fila__retrato :is(img, div) { width: 100%; height: 100%; }
.tab-fila__texto { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.tab-fila__texto b { font-family: var(--ui-fuente-titulo) !important; font-size: 13px; color: var(--tab-clase, #f6e6c2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-fila__texto small { flex-basis: 100%; font-size: 11px; color: var(--ui-tinta-2); }
.tab-roster__pie { margin: 8px 0 0; padding: 6px 10px; border: 1px dashed rgba(233,196,106,.45); border-radius: 5px; font-size: 11px; text-align: center; color: #e9d9b6; }

/* ════════════════════ Bazar (D-BAZAR, claude/_CLAUDE_D_BAZAR_MESA.md) ════════════════════
   Puestos como iconos grandes a la izquierda; a la derecha, la Oferta del día y el escaparate del puesto en tarjetas. */
.bz-rejilla { flex: 1; min-height: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
.bz-principal { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.bz-principal > .bz-sec { flex: 1; }
.bz-rejilla--B .bz-sec { background: none !important; border: 0 !important; box-shadow: none !important; padding: 18px 0 0; }
.bz-platino { font-size: 13px; color: var(--ui-tinta-1); }
.bz-platino b { font-size: 15px; }
.bz-reloj-caja { font-size: 12px; color: var(--ui-tinta-2); letter-spacing: .04em; }
.bz-reloj { font-variant-numeric: tabular-nums; color: #ffe7a1; font-size: 14px; }

/* Los puestos */
.bz-puestos { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bz-puesto { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 8px;
  color: #c9b48c; background: linear-gradient(180deg, rgba(30,24,14,.8), rgba(10,8,5,.85)); border: 1px solid rgba(200,168,96,.3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); transition: border-color .15s, box-shadow .15s, transform .15s; }
.bz-puesto:hover, .bz-puesto:focus-visible { outline: none; border-color: #ffe7a1; color: #fff3c4; transform: translateY(-2px); }
.bz-puesto--activo { border-color: #e9c46a; color: #fff3c4; box-shadow: 0 0 18px rgba(233,196,106,.28), inset 0 0 0 1px rgba(233,196,106,.35);
  background: linear-gradient(180deg, rgba(74,52,18,.85), rgba(20,14,6,.9)); }
.bz-puesto__icono { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.bz-puesto__nombre { font-family: var(--ui-fuente-titulo) !important; font-size: 13px; letter-spacing: .08em; }
.bz-puesto__cifra { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 11px; color: var(--ui-tinta-2); }

/* Orden y pista */
.bz-orden { display: flex; gap: 6px; margin-bottom: 10px; }
.bz-orden__boton { cursor: pointer; border-radius: 4px; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #c9b48c; background: rgba(10,8,5,.6); border: 1px solid rgba(200,168,96,.3); }
.bz-orden__boton:hover, .bz-orden__boton:focus-visible { outline: none; color: #fff3c4; border-color: #ffe7a1; }
.bz-orden__boton--activo { color: #1b1406; border-color: #e9c46a; background: linear-gradient(180deg, #ffe7a1, #c8963a); }
.bz-sec .ui-paginacion { margin-top: 10px; justify-content: center; }
.bz-pista { margin: 10px 0 0; font-size: 12px; color: var(--ui-tinta-2); font-style: italic; }

/* El escaparate y las tarjetas */
.bz-escaparate { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.bz-tarjeta { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(30,24,14,.7), rgba(12,9,6,.78)); border: 1px solid color-mix(in srgb, var(--bz-rareza) 40%, rgba(200,168,96,.25));
  transition: border-color .15s, box-shadow .15s; }
.bz-tarjeta:hover { border-color: color-mix(in srgb, var(--bz-rareza) 70%, #e9c46a); box-shadow: 0 0 14px color-mix(in srgb, var(--bz-rareza) 22%, transparent); }
/* D-LETRA D-LT-2 — fuera el parche «.bz-tarjeta div, .bz-venta div { letra de texto !important }»: la regla * de v2-theme ya da la de texto */
.bz-tarjeta__cabeza { display: flex; gap: 10px; align-items: center; min-width: 0; cursor: help; }
.bz-tarjeta__icono { --ui-lado: 56px; }
.bz-tarjeta__titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bz-tarjeta__nombre { font-weight: 600; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.bz-tarjeta__nivel { font-size: 11px; color: var(--ui-tinta-2); }
.bz-tarjeta__dato { font-size: 12px; color: #e9dcc0; font-variant-numeric: tabular-nums; }
.bz-tarjeta__compara { font-size: 12px; font-weight: 600; }
.bz-mas { color: #7bd88f; }
.bz-menos { color: var(--ui-tinta-2); }
.bz-tarjeta__usan { font-size: 11px; color: var(--ui-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-tarjeta__reserva { font-size: 11px; color: #9fd0ff; }
.bz-tarjeta__pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(200,168,96,.18); }
.bz-tarjeta__precio { flex: none; white-space: nowrap; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: 14px; font-weight: 700; }
.bz-tarjeta__precio s { font-size: 11px; color: var(--ui-tinta-2); font-weight: 400; }
.bz-tarjeta__falta { flex-basis: 100%; font-size: 11px; font-weight: 600; color: #f08a7a; }
.bz-tarjeta__acciones { flex: 1; min-width: 0; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.bz-tarjeta__acciones .tab-boton { padding: 5px 9px; font-size: 10px; letter-spacing: .08em; }
.bz-tarjeta__acciones .tab-boton:disabled { opacity: .45; cursor: not-allowed; }
.bz-tarjeta--apagada { opacity: .62; filter: saturate(.55); }
.bz-tarjeta--apagada:hover { opacity: .85; }
.bz-tarjeta--reservada { border-style: dashed; }

/* El vendedor */
.bz-vendedor { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: #e9dcc0; }
.bz-vendedor__retrato { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid rgba(233,196,106,.55); flex: none; }
.bz-vendedor__retrato--oculto { display: inline-flex; align-items: center; justify-content: center; color: var(--ui-tinta-2); background: rgba(0,0,0,.5); border-color: rgba(200,168,96,.25); font-weight: 700; }
.bz-vendedor__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-vendedor__nombre em { font-style: normal; color: var(--ui-tinta-2); }
.bz-vendedor--oculto { color: var(--ui-tinta-2); font-style: italic; }

/* La Oferta del día: la misma tarjeta, ancha y con cinta */
.bz-oferta .bz-tarjeta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cab cmp pie" "cab usa pie" "cab ven pie";
  column-gap: 18px; row-gap: 4px; padding: 14px 18px 12px; border-color: #e9c46a; box-shadow: 0 0 22px rgba(233,196,106,.22), inset 0 0 0 1px rgba(233,196,106,.25);
  background: radial-gradient(ellipse at 15% 50%, rgba(233,196,106,.16), transparent 60%), linear-gradient(180deg, rgba(48,34,12,.9), rgba(14,10,5,.92)); }
.bz-oferta .bz-tarjeta__cabeza { grid-area: cab; }
.bz-oferta .bz-tarjeta__icono { --ui-lado: 76px; }
.bz-oferta .bz-tarjeta__nombre { font-size: 17px; }
.bz-oferta .bz-tarjeta__compara { grid-area: cmp; align-self: end; }
.bz-oferta .bz-tarjeta__usan { grid-area: usa; }
.bz-oferta .bz-vendedor { grid-area: ven; }
.bz-oferta .bz-tarjeta__pie { grid-area: pie; flex-direction: column; align-items: flex-end; justify-content: center; border-top: 0; padding-top: 0; }
.bz-tarjeta__cinta { position: absolute; top: -9px; left: 14px; z-index: 2; padding: 2px 10px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #1b1406; background: linear-gradient(180deg, #ffe7a1, #c8963a); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
/* D-PRECIOS D-PR-8 — la vitrina: una sola pieza, con su cinta en el color de su rareza y el marco iluminado */
.bz-tarjeta--vitrina { border-color: var(--bz-rareza); box-shadow: 0 0 18px color-mix(in srgb, var(--bz-rareza) 35%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--bz-rareza) 30%, transparent); }
.bz-tarjeta__cinta--vitrina { color: #120d05; background: linear-gradient(180deg, color-mix(in srgb, var(--bz-rareza) 55%, #fff), var(--bz-rareza)); }
.bz-pista--vitrina { margin: 0 0 10px; }

/* El puesto Vender */
.bz-escaparate--venta { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.bz-venta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px;
  background: rgba(12,9,6,.7); border: 1px solid rgba(200,168,96,.2); }
.bz-venta__icono { --ui-lado: 40px; }
.bz-venta__nombre { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-venta__precio { font-size: 13px; }
/* D-PRECIOS D-PR-7 — bajo el nombre, lo que vale en el Bazar (el mercader paga su valor de mercader) */
.bz-venta__texto { display: flex; flex-direction: column; min-width: 0; }
.bz-venta__bazar { font-size: 11px; font-style: italic; color: var(--ui-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-venta .tab-boton { padding: 5px 10px; font-size: 10px; }

/* D-ECONOMIA D-ECO-2 F2 · S-20 — el Trapero: una fila por material, con un botón por lote */
.bz-escaparate--trapero { grid-template-columns: 1fr; }
.bz-material { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico nom pre" "ico lot lot"; align-items: center; gap: 4px 10px;
  padding: 6px 10px; border-radius: 6px; background: rgba(12,9,6,.7); border: 1px solid rgba(200,168,96,.2); }
.bz-material div, .bz-material span { font-family: var(--ui-fuente-texto) !important; }
.bz-material__icono { --ui-lado: 40px; grid-area: ico; }
.bz-material__nombre { grid-area: nom; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-material__nombre em { font-style: normal; font-weight: 400; opacity: .75; }
.bz-material__precio { grid-area: pre; font-size: 12px; text-align: right; white-space: nowrap; }
.bz-material__precio s { opacity: .6; }
.bz-material__rebaja { font-style: normal; color: #e8a060; }
.bz-material__lotes { grid-area: lot; display: flex; flex-wrap: wrap; gap: 6px; }
.bz-material .tab-boton { padding: 4px 9px; font-size: 10px; }
.bz-pista--trapero { margin: 0 0 8px; }

/* B · Estandartes: los puestos como banderines */
.bz-rejilla--B .bz-puesto { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); padding-bottom: 20px; }

@media (max-width: 1000px) {
  .bz-rejilla { grid-template-columns: 1fr; }
  .bz-puestos { flex-direction: row; flex-wrap: wrap; }
  .bz-puesto { flex: 1 1 110px; }
  .bz-oferta .bz-tarjeta { grid-template-columns: 1fr; grid-template-areas: "cab" "cmp" "usa" "ven" "pie"; }
  .bz-oferta .bz-tarjeta__pie { flex-direction: row; justify-content: space-between; }
}

/* ════════════════════ Relaciones (D-UI-RELACIONES) ════════════════════ */
.rel-rejilla { flex: 1; min-height: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.25fr); }
.rel-rejilla--B { padding-top: 12px; }
.sitio-raiz[data-sitio="relaciones"] .rel-vacio { margin: 0; font-size: 13px; line-height: 1.55; font-style: italic; color: var(--ui-tinta-2); }
.sitio-raiz[data-sitio="relaciones"] #relations-npc-detail:not(:empty) + .rel-vacio { display: none; }
/* el detalle deja de flotar (style_v0.8.9.css:11474 lo hacía fixed encima de todo): va en su columna */
.sitio-raiz[data-sitio="relaciones"] #relations-npc-detail { position: static !important; display: block !important; inset: auto; transform: none; width: auto; max-width: none;
  max-height: none; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; z-index: auto; overflow: visible; }
.sitio-raiz[data-sitio="relaciones"] #relations-npc-detail .relations-close-btn { cursor: pointer; border-radius: 4px; padding: 2px 9px; color: #e9dcc0; background: rgba(10,8,5,.75);
  border: 1px solid rgba(200,168,96,.4); }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-detail-hero { display: flex; gap: 12px; align-items: center; }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-detail-name { font-family: var(--ui-fuente-titulo) !important; font-size: 18px; color: #fff3c4; letter-spacing: .04em; }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-detail-class { font-size: 12px; color: var(--ui-tinta-2); }
.sitio-raiz[data-sitio="relaciones"] .relations-faction-bar-wrap { margin-top: 14px; }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-detail-stats { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; color: var(--ui-tinta-1); }

/* listas: tarjetas de personaje y cabeceras de grupo con el aire del sitio */
.sitio-raiz[data-sitio="relaciones"] .relations-tier-header, .sitio-raiz[data-sitio="relaciones"] .relations-guild-header { border-radius: 5px; cursor: pointer;
  background: linear-gradient(90deg, rgba(40,30,14,.5), rgba(16,12,7,.3)); border: 1px solid rgba(200,168,96,.22); }
.sitio-raiz[data-sitio="relaciones"] .relations-tier-header:hover, .sitio-raiz[data-sitio="relaciones"] .relations-guild-header:hover { border-color: rgba(233,196,106,.55); }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-card { border-radius: 5px; border: 1px solid rgba(200,168,96,.18); background: rgba(0,0,0,.25); cursor: pointer; }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-card:hover { border-color: rgba(233,196,106,.6); background: rgba(60,44,12,.35); }
.sitio-raiz[data-sitio="relaciones"] .relations-npc-name { font-family: var(--ui-fuente-titulo) !important; color: #f6e6c2; }

/* B: las tarjetas de personaje en rejilla de pequeños estandartes */
.rel-rejilla--B .relations-tier-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 8px; padding-top: 10px; }
.rel-rejilla--B .relations-npc-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px 18px; border: 0;
  background: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.rel-rejilla--B .relations-npc-card::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  background: linear-gradient(180deg, #4d1a12, #2c0e09 70%, #180806); box-shadow: inset 0 0 0 1px rgba(233,196,106,.45); }
.rel-rejilla--B .relations-npc-card::after { content: ''; position: absolute; left: -4px; right: -4px; top: -5px; height: 7px; border-radius: 4px;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); }
.rel-rejilla--B .relations-npc-card:hover { background: none; transform: translateY(-2px); }
.rel-rejilla--B .relations-npc-info { min-width: 0; }
@media (max-width: 1000px) { .rel-rejilla { grid-template-columns: 1fr; } }
/* D-PULIDO-RELACIONES D-PUL-REL-10 — la ficha con el aire de la Taberna: retrato con el color del rango y el favor del día
   en su caja, con el botón de la casa (.tab-boton); antes, estilos en línea */
.sitio-raiz[data-sitio="relaciones"] .rel-ficha__retrato { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--rel-rango, #888); }
.sitio-raiz[data-sitio="relaciones"] .rel-favor { margin-top: 14px; padding: 12px; border-radius: 6px; border: 1px solid rgba(200,168,96,.3); background: rgba(0,0,0,.3); }
.sitio-raiz[data-sitio="relaciones"] .rel-favor__titulo { margin: 0 0 8px; font-family: var(--ui-fuente-titulo) !important; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #e9c46a; }
.sitio-raiz[data-sitio="relaciones"] .rel-favor__texto { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--ui-tinta-0); }
.sitio-raiz[data-sitio="relaciones"] .rel-favor__mejora { margin: 0 0 10px; font-size: 12px; font-style: italic; color: var(--ui-tinta-2); }
.sitio-raiz[data-sitio="relaciones"] .rel-favor__boton { width: 100%; }
/* D-GREMIOS D-GRE-9 — entrar en un gremio: «Tu gremio», requisitos con ✓/✗, tensiones y la marca de amigo */
.sitio-raiz[data-sitio="relaciones"] .rel-gre { margin: 0 0 12px; padding: 12px; border-radius: 6px; border: 1px solid rgba(200,168,96,.3); background: rgba(0,0,0,.3); }
.sitio-raiz[data-sitio="relaciones"] #relations-npc-detail .rel-gre { margin-top: 14px; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre--mio { border-color: rgba(233,196,106,.55); background: linear-gradient(180deg, rgba(60,44,12,.45), rgba(0,0,0,.3)); }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__estado { margin: 0 0 6px; font-size: 13px; color: var(--ui-tinta-0); }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__estado strong { color: #fff3c4; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__estado--tuyo { color: #e9c46a; font-weight: 700; letter-spacing: .06em; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__nota { margin: 0 0 8px; font-size: 12px; line-height: 1.5; font-style: italic; color: var(--ui-tinta-2); }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__nota strong { color: #e9c46a; font-style: normal; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__tensiones { margin: 0 0 8px; font-size: 12px; color: var(--ui-tinta-1); }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__tension--aliados { color: #8fd18a; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__tension--tensos { color: #e0b252; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__tension--rivales, .sitio-raiz[data-sitio="relaciones"] .rel-gre__tension--enemistados { color: #e0705a; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__reqs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; font-size: 12px; color: #d9a08f; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__req--ok { color: #8fd18a; }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__req em { color: var(--ui-tinta-2); }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__marca { flex: none; padding: 1px 7px; border-radius: 9px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #1b1406; background: linear-gradient(180deg, #ffe7a1, #b07d26); }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__marca--estudio { color: #e9dcc0; background: rgba(90,70,30,.8); }
.sitio-raiz[data-sitio="relaciones"] .rel-gre__amigo { flex: none; padding: 0 6px; border-radius: 8px; font-size: 10px; letter-spacing: .06em; color: #8fd18a; border: 1px solid rgba(143,209,138,.45); }
/* D-QUEST-CAPA D-QC-9 — la última conexión de quien ya no está en el mundo */
.sitio-raiz[data-sitio="relaciones"] .rel-gre__ultima { flex: none; font-size: 10px; font-style: italic; color: #9a8f7a; }
.sitio-raiz[data-sitio="relaciones"] .relations-guild-group .rel-favor__boton { margin: 0 0 10px; }

/* ════════════════════ Misiones (D-UI-MISIONES) ════════════════════ */
.sitio-raiz[data-sitio="misiones"] .mis-envoltura { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sitio-raiz[data-sitio="misiones"] #panel-quest-journal.mis-rejilla { flex: 1; min-height: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, .9fr); }
.mis-rejilla--B { padding-top: 12px; }
.sitio-raiz[data-sitio="misiones"] .mis-aceptar { width: 100%; margin-top: 8px; padding: 9px 12px; }
.sitio-raiz[data-sitio="misiones"] .quest-available-card { border-radius: 6px; border: 1px solid rgba(200,168,96,.35) !important; background: linear-gradient(180deg, rgba(40,30,14,.5), rgba(14,10,6,.55)) !important; }
.sitio-raiz[data-sitio="misiones"] .quest-available-title { font-family: var(--ui-fuente-titulo) !important; color: #fff3c4 !important; letter-spacing: .04em; }
.sitio-raiz[data-sitio="misiones"] .mis-sec--disponibles .sitio-seccion__cuerpo > div + div { margin-top: 12px; }
.sitio-raiz[data-sitio="misiones"] .quest-journal-completed-row { border-bottom-color: rgba(200,168,96,.15) !important; }
@media (max-width: 1000px) { .sitio-raiz[data-sitio="misiones"] #panel-quest-journal.mis-rejilla { grid-template-columns: 1fr; } }

/* ════════════════════ Opciones: su aspecto vive en public/ui/opciones.css (D-OPCIONES-REDISENO) ════════════════════ */

/* ════════════════════ Forja y Atlas (D-UI-FORJA-ATLAS, primera pasada) ════════════════════ */
/* Su contenido de siempre, envuelto en la raíz del sitio. Desplaza dentro de su caja hasta la segunda pasada. */
.sitio-raiz[data-sitio="forja"] .sitio-cuerpo, .sitio-raiz[data-sitio="atlas"] .sitio-cuerpo { display: block; overflow-y: auto; overflow-x: hidden; min-height: 0; padding-right: 6px; }
.sitio-raiz[data-sitio="forja"] .forge-thorin-root, .sitio-raiz[data-sitio="atlas"] .atlas-zone-panel { background: none !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; }
.sitio-raiz[data-sitio="forja"] .forge-thorin-tabs { gap: 6px; }
.sitio-raiz[data-sitio="forja"] .forge-thorin-tab { border-radius: 5px !important; font-family: var(--ui-fuente-titulo) !important; letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px !important;
  color: rgba(233,196,106,.72) !important; background: rgba(10,8,5,.6) !important; border: 1px solid rgba(200,168,96,.3) !important; }
.sitio-raiz[data-sitio="forja"] .forge-thorin-tab:hover { color: #f3dca0 !important; border-color: rgba(233,196,106,.6) !important; }
.sitio-raiz[data-sitio="forja"] .forge-thorin-tab[aria-selected="true"] { color: #1b1406 !important; border-color: #e9c46a !important; background: linear-gradient(180deg, #ffe7a1, #c8963a) !important; }
.sitio-raiz[data-sitio="forja"][data-estilo="B"] .forge-thorin-tab { clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); padding-bottom: 11px !important; }
.sitio-raiz[data-sitio="atlas"] .atlas-zone-panel h2, .sitio-raiz[data-sitio="atlas"] .atlas-zone-panel h3 { font-family: var(--ui-fuente-titulo) !important; letter-spacing: .12em; }

/* ════════════════════ Forja · columnas (D-UI-FORJA-2) ════════════════════ */
/* ordenarForja (forge.ts) sube las pestañas a la cabecera y reparte el resto en trabajo · almacén; cada columna desplaza dentro. */
.sitio-raiz[data-sitio="forja"] > .sitio-cuerpo:has(> .forja-ordenada) { display: flex; flex-direction: column; overflow: hidden; padding-right: 0; }
.sitio-raiz[data-sitio="forja"] .forge-thorin-root.forja-ordenada { flex: 1; min-height: 0; display: grid; gap: 14px; padding: 0; margin: 0; }
.sitio-raiz[data-sitio="forja"] .forja-ordenada--dos { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
.sitio-raiz[data-sitio="forja"] .forja-ordenada--una { grid-template-columns: minmax(0, 1fr); }
.sitio-raiz[data-sitio="forja"] .forja-col { min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 12px; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(200,168,96,.4) transparent; }
.sitio-raiz[data-sitio="forja"] .forja-col > * { flex: none; margin-bottom: 0 !important; }
/* las pestañas en la cabecera: sin el margen de cuando iban arriba del cuerpo */
.sitio-raiz[data-sitio="forja"] .sitio-acciones .forge-thorin-tabs { margin: 0 !important; flex-wrap: nowrap; }
@media (max-width: 1000px) {
  .sitio-raiz[data-sitio="forja"] .forja-ordenada--dos { grid-template-columns: minmax(0, 1fr); }
  .sitio-raiz[data-sitio="forja"] > .sitio-cuerpo:has(> .forja-ordenada) { overflow-y: auto; }
  .sitio-raiz[data-sitio="forja"] .forja-col { overflow: visible; }
}

/* D-COMPENDIO paso 4 — aquí estaba el panel de zona del Atlas (D-UI-ATLAS-2): retirado, su información está en el Compendio. */

/* ════════════════════ Misiones · tarjetas de historia (D-UI-MISIONES-2) ════════════════════ */
/* Fuera el violeta de style_v0.8.9.css:2114-2270: tarjeta oscura cálida, oro; el paso hecho sigue en verde (es información). */
.sitio-raiz[data-sitio="misiones"] .quest-story-card { border-radius: 5px; border: 1px solid rgba(200,168,96,.35);
  background: linear-gradient(180deg, rgba(26,19,10,.92), rgba(12,9,5,.95)); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.sitio-raiz[data-sitio="misiones"] .quest-story-card__title { font-family: var(--ui-fuente-titulo) !important; letter-spacing: .06em; color: #e9c46a; }
.sitio-raiz[data-sitio="misiones"] .quest-story-card__badge { border-radius: 3px; color: #f3dca0; background: rgba(10,8,5,.75); border: 1px solid rgba(233,196,106,.55);
  font-family: var(--ui-fuente-titulo) !important; letter-spacing: .08em; }
.sitio-raiz[data-sitio="misiones"] .quest-story-progress__track { background: rgba(0,0,0,.55); border-color: rgba(200,168,96,.3); }
.sitio-raiz[data-sitio="misiones"] .quest-story-progress__fill { background: linear-gradient(90deg, #9a6a1c, #e9c46a); }
.sitio-raiz[data-sitio="misiones"] .quest-story-progress__label { color: #e9d9b6; }
.sitio-raiz[data-sitio="misiones"] .quest-story-node:not(:last-child)::before { background: rgba(200,168,96,.3); }
.sitio-raiz[data-sitio="misiones"] .quest-story-node__icon--current { color: #1b1406; background: linear-gradient(180deg, #ffe7a1, #c8963a); border-color: #ffe7a1; }
.sitio-raiz[data-sitio="misiones"] .quest-story-node--current .quest-story-node__body { border-color: rgba(233,196,106,.5); background: rgba(10,8,5,.7); }
.sitio-raiz[data-sitio="misiones"] .quest-story-node--current .quest-story-node__label { color: #f3dca0 !important; }
/* A: línea interior, como .ui-marco */
.sitio-raiz[data-sitio="misiones"][data-estilo="A"] .quest-story-card { box-shadow: inset 0 0 0 3px rgba(12,9,5,.95), inset 0 0 0 4px rgba(200,168,96,.18), 0 6px 16px rgba(0,0,0,.45); }
/* B: banda carmesí a la izquierda; la etiqueta, en banderín carmesí */
.sitio-raiz[data-sitio="misiones"][data-estilo="B"] .quest-story-card { border-left: 4px solid #6b2418; border-radius: 0 5px 5px 0; }
.sitio-raiz[data-sitio="misiones"][data-estilo="B"] .quest-story-card__badge { color: #fff3c4; border: 0; border-radius: 0; padding-right: 12px;
  background: linear-gradient(180deg, #6b2418, #3a120c); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); }

/* ── Pantallas estrechas: una columna, con desplazamiento dentro del escenario ── */
@media (max-width: 1000px) {
  #rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz) { overflow-y: auto; }
  .sitio-raiz, .sitio-cuerpo { flex: none; }
  .tab-rejilla--A, .tab-rejilla--A.tab-rejilla--sin-pnj { grid-template-columns: 1fr; }
  .tab-cinta { grid-template-columns: 1fr; max-height: none; }
  .sitio-seccion__cuerpo { overflow: visible; }
  .sitio-cabecera { flex-wrap: wrap; }
}

/* ════════════════════ Atlas · mazmorra con plano (D-MAZMORRAS paso 2) ════════════════════ */
.sitio-raiz.atlas-mazmorra > .sitio-cuerpo { display: flex; flex-direction: column; overflow: hidden; padding-right: 0; }
.atlas-mazmorra .mazmorra-cont, .atlas-mazmorra .mazmorra { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.atlas-mazmorra .mazmorra__cabecera { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 0 0 8px; color: #e9dcc0; font-size: 13px; }
.atlas-mazmorra .mazmorra__titulo b { font-family: var(--ui-fuente-titulo) !important; color: #f3dca0; letter-spacing: .06em; }
.atlas-mazmorra .mazmorra__track { color: #b7d3a8; }
.atlas-mazmorra .mazmorra__botones { margin-left: auto; display: flex; gap: 8px; }
.atlas-mazmorra .mazmorra__visor { position: relative; flex: 1; min-height: 240px; overflow: hidden; border-radius: 6px; background: #1a140c; box-shadow: inset 0 0 0 1px rgba(200,168,96,.35); touch-action: none; }
/* D-SMOKE-4 D-SM4-10 — el plano no entra en el desplazamiento de las pantallas estrechas: llena el hueco que queda (a 680×464
   quedaba bajo la cabecera y había que desplazar el panel); en pantallas bajas el visor se conforma con menos alto */
@media (max-width: 1000px) {
  #rpg-root #buildingPanel:has(> #buildingContent > .sitio-raiz.atlas-mazmorra) { overflow-y: hidden; }
  .sitio-raiz.atlas-mazmorra, .sitio-raiz.atlas-mazmorra > .sitio-cuerpo { flex: 1 1 auto; min-height: 0; }
}
@media (max-height: 600px) {
  .atlas-mazmorra .mazmorra__visor { min-height: 150px; }
  .atlas-mazmorra .mazmorra__cabecera { gap: 4px 10px; padding-bottom: 4px; font-size: 12px; }
}
/* D-SMOKE-5 D-SM5-3 (claude/_CLAUDE_D_SMOKE_5_MESA.md) — a 680×464 el panel mide ~218 px: el hueco del reloj (46, marco.css), la
   cabecera del sitio (71) y su hueco (12) dejaban del plano ~45-77 px. Estrecho y bajo: sin el hueco del reloj (la cabecera va a su
   derecha), la cabecera en una línea (sólo el título), 2 px de hueco y el visor se conforma con 100 px. */
@media (max-width: 1000px) and (max-height: 600px) {
  body.ui-marco-activo #rpg-root #cityView #buildingPanel:has(> #buildingContent > .sitio-raiz.atlas-mazmorra) { padding-top: 6px; }
  .sitio-raiz.atlas-mazmorra { gap: 2px; }
  .sitio-raiz.atlas-mazmorra > .sitio-cabecera { display: flex; justify-content: flex-start; align-items: center; min-height: 34px; padding-left: 104px; }
  .sitio-raiz.atlas-mazmorra > .sitio-cabecera :is(.sitio-lema, .sitio-filete, .sitio-cinta-barra) { display: none; }
  .sitio-raiz.atlas-mazmorra > .sitio-cabecera .sitio-titulo { font-size: 18px; line-height: 1.1; margin: 0; padding: 0; text-align: left;
    background: none; clip-path: none; box-shadow: none; filter: none; color: #f3dca0; -webkit-text-fill-color: #f3dca0; text-shadow: 0 1px 2px #000; }
  .atlas-mazmorra .mazmorra__visor { min-height: 100px; }
  .atlas-mazmorra .mazmorra__botones .tab-boton { padding: 3px 10px; min-height: 0; font-size: 11px; line-height: 1.2; }
}
/* D-SMOKE-5 D-SM5-6 — la marca de la Torre del mago en los sitios atados del Atlas (punto de interés: arriba a la izquierda, como el
   sello del misterio a la derecha; zona: delante del nombre en su píldora) */
.atlas-atado { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 1;
  color: #e9f2ff; background: radial-gradient(circle at 35% 30%, #a9c8ff, #4a62b8 60%, #23306a); box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 8px rgba(140,170,255,.7); }
.atlas-poi .atlas-atado { position: absolute; z-index: 3; top: -4px; left: -4px; pointer-events: auto; }
.atlas-zona-punto .atlas-atado { margin-right: 4px; vertical-align: middle; }
.atlas-mazmorra .mazmorra__lienzo { position: absolute; inset: 0; display: block; cursor: grab; }
.atlas-mazmorra .mazmorra__ficha { position: absolute; z-index: 3; min-width: 170px; max-width: 240px; padding: 8px 10px; border-radius: 6px; background: rgba(12,9,5,.94); border: 1px solid rgba(200,168,96,.6); color: #efe3c8; font-size: 12.5px; line-height: 1.45; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.atlas-mazmorra .mazmorra__ficha-camp { font-family: var(--ui-fuente-titulo) !important; color: #e9c46a; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 3px; }
.atlas-mazmorra .mazmorra__ficha-named { color: #fbbf24; font-weight: 700; }
.atlas-mazmorra .mazmorra__ficha-nivel { margin-top: 3px; font-weight: 700; }
/* D-DUNGEONS F1 (D-DG1-9) — con quién está enlazado el grupo */
.atlas-mazmorra .mazmorra__ficha-enlace { margin-top: 3px; color: #fca5a5; font-size: 12px; }
.atlas-mazmorra .mazmorra__ficha-pie { margin-top: 4px; color: #a8a29e; font-size: 11.5px; }
.atlas-mazmorra .mazmorra__aviso { position: absolute; z-index: 3; left: 50%; top: 12px; transform: translateX(-50%); padding: 6px 14px; border-radius: 6px; background: rgba(12,9,5,.92); border: 1px solid rgba(200,168,96,.6); color: #f3dca0; font-size: 13px; pointer-events: none; }
/* D-MAZMORRA-MAPA D-M-5/6 — el grupo en el plano: vida y maná como acabó el combate; los caídos, en gris */
.atlas-mazmorra .mazmorra__grupo { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 70px); pointer-events: auto; }
.atlas-mazmorra .mazmorra__miembro { width: 104px; padding: 4px 6px; border-radius: 5px; background: rgba(12,9,5,.85); border: 1px solid rgba(200,168,96,.5); color: #f3dca0; font-size: 11.5px; line-height: 1.2; }
.atlas-mazmorra .mazmorra__miembro--caido { filter: grayscale(1); opacity: .6; }
.atlas-mazmorra .mazmorra__miembro-nombre { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.atlas-mazmorra .mazmorra__barra { display: block; height: 5px; margin-top: 2px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.atlas-mazmorra .mazmorra__barra > span { display: block; height: 100%; }
.atlas-mazmorra .mazmorra__barra--vida > span { background: #dc2626; }
.atlas-mazmorra .mazmorra__barra--mana > span { background: #3b82f6; }
.atlas-mazmorra .mazmorra__regenera { align-self: center; padding: 4px 10px; border-radius: 5px; background: rgba(12,9,5,.85); border: 1px solid rgba(200,168,96,.5); color: #f3dca0; font-size: 12px; }
@media (max-width: 520px) { .atlas-mazmorra .mazmorra__miembro { width: 78px; font-size: 10.5px; } }
.atlas-mazmorra .mazmorra__zoom { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.atlas-mazmorra .mazmorra__zoom button { width: 32px; height: 32px; border-radius: 5px; border: 1px solid rgba(200,168,96,.6); background: rgba(12,9,5,.85); color: #f3dca0; font-size: 16px; }
.atlas-mazmorra .mazmorra__evento { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92%); padding: 14px 16px; border-radius: 8px; background: rgba(14,10,6,.96); border: 1px solid rgba(200,168,96,.7); color: #efe3c8; font-size: 14px; line-height: 1.5; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.atlas-mazmorra .mazmorra__evento-titulo { font-family: var(--ui-fuente-titulo) !important; color: #e9c46a; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin-bottom: 6px; }
.atlas-mazmorra .mazmorra__evento-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.atlas-mazmorra .mazmorra__evento-opciones button { padding: 6px 12px; border-radius: 5px; border: 1px solid rgba(200,168,96,.6); background: rgba(40,28,12,.9); color: #f3dca0; cursor: pointer; }
.atlas-mazmorra .mazmorra__lamina { display: flex; justify-content: center; margin: -4px 0 4px; }
.atlas-mazmorra .mazmorra__lamina img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
/* D-MAZMORRAS-40 — la leyenda del plano (lo que se ha visto), como en los mapas de EQ */
.atlas-mazmorra .mazmorra__leyenda { position: absolute; z-index: 2; left: 10px; top: 10px; width: min(300px, 46%); max-height: calc(100% - 20px); display: flex; flex-direction: column; border-radius: 6px; background: rgba(243, 236, 218, .94); border: 1px solid rgba(90, 64, 32, .5); color: #2b1d10; font-size: 12.5px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.atlas-mazmorra .mazmorra__leyenda-boton { flex: none; text-align: left; padding: 5px 10px; background: none; border: 0; border-bottom: 1px solid rgba(90, 64, 32, .3); color: #5a3d1c; font-family: var(--ui-fuente-titulo) !important; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; cursor: pointer; }
.atlas-mazmorra .mazmorra__leyenda-cuerpo { overflow-y: auto; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.atlas-mazmorra .mazmorra__leyenda--cerrada .mazmorra__leyenda-cuerpo { display: none; }
.atlas-mazmorra .mazmorra__leyenda .sutil { color: #6b5a44; }
.atlas-mazmorra .mazmorra__leyenda-camp { margin: 2px 0; }
.atlas-mazmorra .mazmorra__leyenda-named { color: #8a3b0e; font-weight: 700; }
.atlas-mazmorra .mazmorra__leyenda-planta { margin-top: 4px; font-family: var(--ui-fuente-titulo) !important; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; color: #8a6a3a; }
/* D-MAZMORRAS-6 — el zoom desde el mapa del mundo hasta el plano */
.atlas-mazmorra .mazmorra-transicion { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #1a140c; pointer-events: none; }
.atlas-mazmorra .mazmorra-transicion__mundo { position: absolute; }
.atlas-mazmorra .mazmorra-transicion__mundo > img:first-child { display: block; width: 100%; height: 100%; }
.atlas-mazmorra .mazmorra-transicion__entrada { position: absolute; width: 5.5%; transform: translate(-50%, -70%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }

/* ════════════════════ Atlas · pulido (D-PULIDO-ATLAS, claude/_CLAUDE_D_PULIDO_ATLAS_MESA.md) ════════════════════ */
/* D-PUL-ATL-8 (adenda A-1) — fuera la pantalla completa de D-PUL-ATL-3: Miguel prefiere el mapa con scroll. El cuerpo
   vuelve a desplazar y el visor a su alto de siempre (style_v0.8.9.css); sólo queda la línea de ayuda, separada del mapa. */
.sitio-raiz[data-sitio="atlas"] .atlas-ayuda { margin: 12px 0 0; text-align: center; color: var(--ui-tinta-2); }
/* D-KITS-EQ (D-S2-3, claude/_CLAUDE_D_KITS_EQ_MESA.md) — la ayuda del Atlas, plegada tras un «?» de la cabecera (map.ts,
   montarAyudaAtlas); en ventana baja (740×530, móvil) la cabecera se compacta y el mapa empieza justo debajo y ocupa todo lo que
   se ve. El cuerpo sigue desplazando y el visor conserva su alto (D-PUL-ATL-8: Miguel prefiere el mapa con scroll). */
.sitio-raiz.atlas-con-ayuda .sitio-cabecera { padding-right: 40px; }
.atlas-ayuda-boton { position: absolute; right: 4px; top: 0; z-index: 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(233, 196, 106, .6); background: rgba(10, 8, 6, .6);
  color: #f3d58a; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; }
.atlas-ayuda-boton:hover, .atlas-ayuda-boton[aria-expanded="true"] { background: rgba(80, 50, 10, .85); }
.sitio-raiz.atlas-con-ayuda:not(.atlas-ayuda-abierta) .sitio-lema,
.sitio-raiz.atlas-con-ayuda:not(.atlas-ayuda-abierta) .atlas-ayuda { display: none; }
@media (max-height: 760px), (max-width: 768px) {
  .sitio-raiz.atlas-con-ayuda { gap: 6px; }
  .sitio-raiz.atlas-con-ayuda .sitio-cabecera { align-items: center; flex-wrap: nowrap; }
  .sitio-raiz.atlas-con-ayuda .sitio-titulo { font-size: 17px; }
  .sitio-raiz.atlas-con-ayuda .sitio-filete, .sitio-raiz.atlas-con-ayuda .sitio-cinta-barra { display: none; }
  .sitio-raiz.atlas-con-ayuda .atlas-ayuda { flex: none; margin-top: 6px; }
  /* los controles del mapa, más juntos y, si no caben en el alto del visor, en otra columna */
  .sitio-raiz.atlas-con-ayuda .atlas-mapa-controles { top: 8px; right: 8px; gap: 4px; max-height: calc(100% - 16px); flex-wrap: wrap; align-content: flex-end; }
  .sitio-raiz.atlas-con-ayuda .atlas-mapa-controles button { height: 30px; }
  .sitio-raiz.atlas-con-ayuda .atlas-mapa-controles button:not(.atlas-mapa-vista):not(.atlas-portal-btn):not(.atlas-construir-btn) { width: 30px; }
}
/* D-KITS-EQ (D-S2-4) — mientras el grupo anda: adónde va y cuánto le queda, arriba a la izquierda del mapa (los controles van a la
   derecha; map.ts, pintarPlacaDeViaje). D-DP-12 — el botón de velocidad está en esa misma esquina: con él, la placa baja debajo. */
.atlas-map-visor:has(.atlas-viaje-rapido):not(:has(.atlas-construir)) .atlas-viaje-placa { top: 44px; }
.atlas-viaje-placa { position: absolute; z-index: 46; left: 10px; top: 10px; max-width: calc(100% - 150px);
  font-family: var(--ui-fuente-texto, inherit) !important; text-transform: none; letter-spacing: normal; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; background: rgba(10, 8, 6, .82); border: 1px solid rgba(233, 196, 106, .55);
  color: #fde9c0; font-size: 13px; line-height: 1.3; text-align: center; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
/* D-PUL-ATL-9/10 (adenda A-1) — huellas más pequeñas (0,26 % → 0,18 % del ancho) que aparecen, se aclaran y se apagan del
   todo en 15 s; al acabar, mapa_viaje.ts las quita del DOM. Sustituye a la entrada de 0,6 s y a la huella «vieja» fija. */
.atlas-huellas > .atlas-huella { width: 0.18%; opacity: 0; animation: atlas-huella-vida 15s ease-out both; }
@keyframes atlas-huella-vida {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) scaleX(var(--esp)) scale(1.8); }
  4% { opacity: 0.85; transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) scaleX(var(--esp)) scale(1); }
  35% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) scaleX(var(--esp)) scale(1); }
}
/* D-PUL-ATL-4 — los avisos del mapa, apilados en una columna arriba y partiendo línea (antes, uno encima de otro y
   cortados por los lados con white-space: nowrap). Deja sitio a los botones de zoom de la derecha. */
.atlas-avisos { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: max-content; max-width: calc(100% - 110px); pointer-events: none; }
.atlas-avisos > .atlas-aviso { position: static; transform: none; white-space: normal; text-align: center; }
/* D-PUL-ATL-6c — el «?» de una zona por descubrir se pulsa (el grupo anda hasta allí): cursor de mano (antes, la flecha de lo que no se pulsa) */
.atlas-map-lienzo .atlas-zona-punto.atlas-zona-punto--cerrada { cursor: pointer; }
/* D-PUL-ATL-6a — confirmar el reseteo dentro del selector (antes, window.confirm del navegador) */
.atlas-selector__pie.atlas-selector__pie--confirmar { flex-direction: column; align-items: stretch; gap: 8px; }
.atlas-selector__confirmar { margin: 0; font-size: 13px; line-height: 1.4; color: #f0c8a0; }
.atlas-selector__confirmar-botones { display: flex; justify-content: flex-end; gap: 8px; }
.atlas-selector__boton { padding: 6px 14px; border-radius: 5px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  color: #f1e3c4; background: rgba(10,8,5,.8); border: 1px solid rgba(200,168,96,.5); }
.atlas-selector__boton:hover, .atlas-selector__boton:focus-visible { outline: none; border-color: #ffe7a1; color: #fff3c4; }
.atlas-selector__boton--peligro { color: #ffe1d6; background: linear-gradient(180deg, #7a2a1c, #4a140c); border-color: #c0634a; }
.atlas-selector__boton--peligro:hover, .atlas-selector__boton--peligro:focus-visible { border-color: #ff9f85; color: #fff; }
/* D-BOTIN-2 F2b D-DIF-1/5 (claude/_CLAUDE_D_BOTIN_2_F2_MESA.md) — las dificultades de zona: la fila del selector, su sello y la oferta tras el jefe */
.atlas-selector__boton--primario { color: #fff3c4; background: linear-gradient(180deg, #6b4a12, #3d2706); border-color: #e9c46a; }
.atlas-selector__boton--primario:hover, .atlas-selector__boton--primario:focus-visible { border-color: #ffe7a1; color: #fff; }
.atlas-selector__dificultad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.atlas-selector__dificultad-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #e9c46a; margin-right: 4px; }
.atlas-selector__dif { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; color: #f1e3c4; background: rgba(10,8,5,.75); border: 1px solid rgba(200,168,96,.45); }
.atlas-selector__dif:hover, .atlas-selector__dif:focus-visible { outline: none; border-color: #ffe7a1; }
.atlas-selector__dif--actual { background: linear-gradient(180deg, #6b4a12, #3d2706); border-color: #e9c46a; color: #fff3c4; cursor: default; }
.atlas-selector__dificultad-pista { flex-basis: 100%; font-size: 11px; color: var(--ui-tinta-2, #c9b48a); }
.atlas-selector__lema--tenue { opacity: .75; font-size: 12px; }
.atlas-dificultad { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; border: 1px solid rgba(233,196,106,.5); color: #fde9c0; background: rgba(10,8,6,.6); }
.atlas-dificultad--d1 { border-color: #7dd3fc; color: #d7f1ff; }
.atlas-dificultad--d2 { border-color: #c084fc; color: #f0e1ff; }
.atlas-dificultad--d3 { border-color: #f97316; color: #ffe2cc; }
.atlas-selector__dif.atlas-dificultad--d1:not(.atlas-selector__dif--actual) { border-color: rgba(125,211,252,.55); }
.atlas-selector__dif.atlas-dificultad--d2:not(.atlas-selector__dif--actual) { border-color: rgba(192,132,252,.55); }
.atlas-selector__dif.atlas-dificultad--d3:not(.atlas-selector__dif--actual) { border-color: rgba(249,115,22,.6); }
.atlas-oferta-dificultad .atlas-selector__caja { max-width: 460px; }
.atlas-oferta-dificultad .atlas-selector__confirmar-botones { margin-top: 10px; flex-wrap: wrap; }