/*
 * 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; }

.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; }

/* ───────── 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; }

/* ───────── 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%); }
.tab-rejilla--A .tab-reclutas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

/* B: estandartes 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-rejilla--B .tab-sec-reclutas { background: none !important; border: 0 !important; box-shadow: none !important; padding: 18px 0 0; }
.tab-rejilla--B .tab-reclutas { display: flex; gap: 16px; justify-content: center; align-items: stretch; height: 100%; min-height: 0; padding: 0 4px 6px; }
.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; }
.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; }
.tab-pnj__retrato img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 12%; 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; }

/* ── Reclutas ── */
.tab-recluta { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 6px; min-width: 0;
  background: linear-gradient(180deg, rgba(40,30,14,.55), rgba(14,10,6,.6)); border: 1px solid rgba(200,168,96,.35); }
.tab-recluta__tela { display: none; }
.tab-recluta__cabeza { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.tab-recluta__retrato { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #0b0e15; border: 2px solid var(--tab-clase, #c8963a);
  box-shadow: 0 0 0 3px rgba(0,0,0,.5); }
.tab-recluta__retrato :is(img, div) { width: 100%; height: 100%; }
.tab-recluta__datos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tab-recluta__nombre { font-family: var(--ui-fuente-titulo) !important; font-size: 16px; letter-spacing: .04em; color: var(--tab-clase, #f6e6c2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 4px #000; }
.tab-recluta__clase { font-size: 12px; color: var(--ui-tinta-1); }
.tab-recluta__ficha { position: relative; z-index: 1; font-size: 11px; }
.tab-recluta__pie { position: relative; z-index: 1; margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px;
  border-top: 1px solid rgba(200,168,96,.2); }
.tab-recluta__precio { font-size: 13px; color: #e9d9b6; }
.tab-recluta__precio b { color: #ffe7a1; font-size: 15px; }
.tab-recluta__pie .tab-boton { padding: 8px 18px; }
.tab-recluta__pista { flex-basis: 100%; margin: 0; font-size: 11px; color: #bfdbfe; }

/* B: cada recluta es un estandarte del color de su clase */
.tab-rejilla--B .tab-recluta { flex: 0 1 220px; min-height: 0; overflow: hidden; padding: 22px 14px 40px; border: 0; background: none; align-items: stretch; text-align: center;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)); }
.tab-rejilla--B .tab-recluta__tela { display: block; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  background: radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--tab-clase, #6b2418) 30%, #2a0f09) 0%, color-mix(in srgb, var(--tab-clase, #6b2418) 14%, #0e0806) 70%, #0a0605 100%);
  box-shadow: inset 0 0 0 2px rgba(233,196,106,.55); }
.tab-rejilla--B .tab-recluta::before { content: ''; position: absolute; left: -10px; right: -10px; top: -9px; height: 14px; border-radius: 7px; z-index: 2;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.tab-rejilla--B .tab-recluta__cabeza { flex-direction: column; text-align: center; }
.tab-rejilla--B .tab-recluta__retrato { width: 62px; height: 62px; border-color: #e9c46a; }
.tab-rejilla--B .tab-recluta__datos { align-items: center; }
.tab-rejilla--B .tab-recluta__nombre { color: #fff3c4; }
.tab-rejilla--B .tab-recluta__pie { justify-content: center; border-top-color: rgba(233,196,106,.3); }
/* en el estandarte no cabe la nota de la comparación: queda en el title del botón y en la vista A */
.tab-rejilla--B .tab-recluta__ficha p { display: none; }
.tab-rejilla--B .tab-recluta { gap: 8px; }

/* ── 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; }

/* ════════════════════ Ayuntamiento (D-UI-AYUNTAMIENTO) ════════════════════ */
.ayto-rejilla { flex: 1; min-height: 0; display: grid; gap: 14px; }
.ayto-rejilla--A { grid-template-columns: minmax(250px, 34%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.ayto-rejilla--A .ayto-sec-lista { grid-row: 1 / 3; }
.ayto-rejilla--B { grid-template-columns: minmax(0, 1fr) minmax(220px, 28%); grid-template-rows: auto minmax(0, 1fr); }
.ayto-rejilla--B .ayto-sec-lista { grid-column: 1 / 3; background: none !important; border: 0 !important; box-shadow: none !important; padding: 16px 0 0; }
.ayto-pie { flex: none; margin: 0; font-size: 11px; line-height: 1.4; color: var(--ui-tinta-3); }

/* Progreso general en la cabecera */
.ayto-progreso { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 200px; }
.ayto-progreso__texto { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #e9c46a; }
.ayto-progreso__pista { display: block; width: 200px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); border: 1px solid rgba(200,168,96,.35); overflow: hidden; }
.ayto-progreso__pista span { display: block; height: 100%; background: linear-gradient(90deg, #b07d26, #ffe7a1); }

/* Lista de edificios */
.ayto-lista { display: flex; flex-direction: column; gap: 8px; }
.ayto-edificio { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; cursor: pointer; text-align: left;
  color: var(--ui-tinta-1); background: linear-gradient(90deg, rgba(40,30,14,.5), rgba(16,12,7,.35)); border: 1px solid rgba(200,168,96,.22);
  transition: border-color .15s, box-shadow .15s, background .15s; }
.ayto-edificio:hover, .ayto-edificio:focus-visible { outline: none; border-color: rgba(233,196,106,.6); }
.ayto-edificio--elegido { border-color: #e9c46a; background: linear-gradient(90deg, rgba(90,62,16,.55), rgba(30,22,10,.45)); box-shadow: 0 0 18px rgba(233,196,106,.25), inset 0 0 14px rgba(233,196,106,.1); }
.ayto-edificio__tela { display: none; }
.ayto-edificio__sigla { position: relative; z-index: 1; flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--ui-fuente-titulo); letter-spacing: .06em; color: #ffe7a1; background: radial-gradient(circle at 35% 30%, #4a3612, #140e06); border: 2px solid #8a6a2c;
  font-family: var(--ui-fuente-titulo) !important; }
.ayto-edificio--elegido .ayto-edificio__sigla { border-color: #ffe7a1; box-shadow: 0 0 12px rgba(255,231,161,.5); }
.ayto-edificio__texto { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ayto-edificio__nombre { font-family: var(--ui-fuente-titulo) !important; font-size: 14px; letter-spacing: .06em; color: #f6e6c2; }
.ayto-edificio__pips { display: flex; gap: 3px; }
.ayto-edificio__nivel { font-size: 11px; color: var(--ui-tinta-2); }
.ayto-edificio__insignias { display: flex; flex-wrap: wrap; gap: 4px; }
.ayto-insignia { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; }
.ayto-insignia--rec { color: #1b1406; background: linear-gradient(180deg, #ffe7a1, #c8963a); }
.ayto-insignia--near { color: #fde68a; border: 1px solid rgba(253,230,138,.5); }
.ayto-estado { position: relative; z-index: 1; flex: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; }
.ayto-estado--ready { color: #bff3cf; border: 1px solid rgba(110,220,150,.55); background: rgba(10,40,20,.5); }
.ayto-estado--blocked { color: #c9b48c; border: 1px solid rgba(200,168,96,.3); }
.ayto-estado--max { color: #ffe7a1; border: 1px solid rgba(233,196,106,.6); background: rgba(60,44,12,.5); }

/* B: los edificios como estandartes en fila */
.ayto-rejilla--B .ayto-lista { flex-direction: row; justify-content: center; gap: 14px; }
.ayto-rejilla--B .ayto-edificio { flex: 0 1 170px; flex-direction: column; text-align: center; gap: 6px; padding: 18px 10px 30px; border: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)) brightness(.82); }
.ayto-rejilla--B .ayto-edificio--elegido { filter: drop-shadow(0 0 14px rgba(233,196,106,.55)) drop-shadow(0 10px 16px rgba(0,0,0,.55)); transform: translateY(-4px); }
.ayto-rejilla--B .ayto-edificio__tela { display: block; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  background: radial-gradient(ellipse at 50% 15%, rgba(255,214,140,.14), transparent 60%), linear-gradient(180deg, #4d1a12, #2c0e09 70%, #180806);
  box-shadow: inset 0 0 0 2px rgba(233,196,106,.5); }
.ayto-rejilla--B .ayto-edificio::before { content: ''; position: absolute; left: -8px; right: -8px; top: -8px; height: 12px; border-radius: 6px; z-index: 2;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); box-shadow: 0 2px 5px rgba(0,0,0,.6); }
.ayto-rejilla--B .ayto-edificio__sigla { width: 50px; height: 50px; font-size: 15px; }
.ayto-rejilla--B .ayto-edificio__texto { align-items: center; }
.ayto-rejilla--B .ayto-edificio__pips { justify-content: center; }

/* Detalle */
.ayto-detalle { display: flex; flex-direction: column; gap: 10px; }
.ayto-detalle__texto, .ayto-detalle__datos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* B: el detalle en dos columnas (los estandartes se llevan la mitad del alto) */
.ayto-rejilla--B .ayto-detalle { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; height: 100%; }
.ayto-rejilla--B .ayto-detalle__datos { border-left: 1px solid rgba(200,168,96,.2); padding-left: 16px; }
.ayto-rejilla--B .ayto-edificio { padding: 14px 10px 26px; gap: 4px; }
.ayto-detalle__cabeza { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ayto-detalle__nombre { font-family: var(--ui-fuente-titulo) !important; font-size: 18px; color: #fff3c4; letter-spacing: .06em; }
.ayto-detalle__nivel { font-size: 12px; color: #e9c46a; }
.ayto-detalle__desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ui-tinta-1); }
.ayto-detalle__beneficio { margin: 0; padding: 8px 10px; border-left: 2px solid #e9c46a; font-size: 13px; color: #fde68a; background: rgba(60,44,12,.35); }
.ayto-etiqueta { margin: 4px 0 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ui-tinta-2); }
.ayto-efectos { display: flex; flex-wrap: wrap; gap: 6px; }
.ayto-efecto { font-size: 12px; padding: 4px 10px; border-radius: 4px; color: #e9dcc0; background: rgba(0,0,0,.35); border: 1px solid rgba(200,168,96,.25); }
.ayto-detalle__accion { margin-top: auto; padding-top: 8px; display: flex; justify-content: flex-end; }
.ayto-mejorar { padding: 11px 26px; }
.ayto-maximo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ffe7a1; }

/* Almacén */
.ayto-almacen { display: flex; flex-wrap: wrap; gap: 8px; }
.ayto-material { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 5px; font-size: 12px; color: var(--ui-tinta-1);
  background: rgba(0,0,0,.35); border: 1px solid rgba(200,168,96,.3); }
.ayto-material b { font-size: 14px; color: #ffe7a1; }
@media (max-width: 1000px) {
  .ayto-rejilla--A, .ayto-rejilla--B { grid-template-columns: 1fr; grid-template-rows: none; }
  .ayto-rejilla--A .ayto-sec-lista, .ayto-rejilla--B .ayto-sec-lista { grid-row: auto; grid-column: auto; }
  .ayto-rejilla--B .ayto-lista { flex-wrap: wrap; }
}

/* ════════════════════ Bazar (D-UI-BAZAR) ════════════════════ */
.bz-rejilla { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bz-rejilla > .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-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-escaparate { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.bz-objeto { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 12px 10px; border-radius: 6px; cursor: help;
  background: linear-gradient(180deg, rgba(30,24,14,.65), rgba(12,9,6,.7)); border: 1px solid color-mix(in srgb, var(--bz-rareza) 45%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--bz-rareza) 75%, transparent); transition: box-shadow .15s, border-color .15s, transform .15s; }
.bz-objeto:hover { border-color: var(--bz-rareza); box-shadow: inset 3px 0 0 var(--bz-rareza), 0 0 16px color-mix(in srgb, var(--bz-rareza) 30%, transparent); }
.bz-objeto__tela { display: none; }
.bz-objeto__nombre { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 600; font-size: 14px; line-height: 1.25; }
.bz-objeto__nombre .bazaar-item-name { overflow-wrap: anywhere; }
.bz-objeto__especial { margin-left: 4px; color: #fbbf24; }
.bz-objeto__nivel { position: relative; z-index: 1; font-size: 11px; color: var(--ui-tinta-2); }
.bz-objeto__pie { position: relative; z-index: 1; 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,.15); }
.bz-objeto__precio { font-size: 14px; font-weight: 700; }
.bz-objeto__precio--falta { color: #f08a7a !important; -webkit-text-fill-color: #f08a7a; }
.bz-objeto .bazaar-buy-btn { padding: 6px 14px; font-size: 11px; }

/* B: tablillas colgadas, la tela teñida del color de la rareza */
.bz-rejilla--B .bz-escaparate { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px 14px; padding-top: 6px; }
.bz-rejilla--B .bz-objeto { border: 0; box-shadow: none; background: none; padding: 16px 12px 22px; text-align: center; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.bz-rejilla--B .bz-objeto:hover { transform: translateY(-3px); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bz-rareza) 45%, transparent)) drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.bz-rejilla--B .bz-objeto__tela { display: block; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  background: radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bz-rareza) 26%, #2a160c) 0%, color-mix(in srgb, var(--bz-rareza) 10%, #0e0806) 75%, #0a0605 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bz-rareza) 55%, rgba(233,196,106,.4)); }
.bz-rejilla--B .bz-objeto::before { content: ''; position: absolute; left: -6px; right: -6px; top: -7px; height: 10px; border-radius: 5px; z-index: 2;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); box-shadow: 0 2px 5px rgba(0,0,0,.6); }
.bz-rejilla--B .bz-objeto__nombre { align-items: center; }
.bz-rejilla--B .bz-objeto__pie { flex-direction: column; border-top-color: rgba(233,196,106,.25); }

/* ════════════════════ 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; }
.sitio-raiz[data-sitio="relaciones"] .relations-guild-apply-btn { border-radius: 5px; font-family: var(--ui-fuente-titulo) !important; letter-spacing: .12em; }

/* 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; } }

/* ════════════════════ 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 (D-UI-OPCIONES) ════════════════════ */
.sitio-raiz[data-sitio="opciones"] .opc-rejilla { flex: 1; min-height: 0; display: flex; flex-direction: row; gap: 14px; }
.sitio-raiz[data-sitio="opciones"] .options-rpg-tablist { flex: none; width: 210px; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border: 0;
  border-radius: 6px; overflow: visible; }
.sitio-raiz[data-sitio="opciones"][data-estilo="A"] .options-rpg-tablist { background: linear-gradient(180deg, rgba(22,16,8,.86), rgba(10,8,5,.92)); border: 1px solid var(--ui-linea); }
.sitio-raiz[data-sitio="opciones"][data-estilo="B"] .options-rpg-tablist { background: linear-gradient(180deg, #4d1a12, #2c0e09 70%, #180806); border: 1px solid rgba(233,196,106,.4);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 50% 100%, 0 94%); padding-bottom: 34px; }
.sitio-raiz[data-sitio="opciones"] .options-rpg-tablist .nav-rpg { width: 100%; justify-content: flex-start; padding: 10px 12px; border-radius: 5px; border: 1px solid transparent;
  background: transparent; color: #e9dcc0; font-family: var(--ui-fuente-titulo) !important; font-size: 13px; letter-spacing: .08em; box-shadow: none; transform: none; }
.sitio-raiz[data-sitio="opciones"] .options-rpg-tablist .nav-rpg:hover { border-color: rgba(233,196,106,.45); color: #fff3c4; background: rgba(60,44,12,.3); }
.sitio-raiz[data-sitio="opciones"] .options-rpg-tablist .nav-rpg.active { color: #1b1406; border-color: #e9c46a; background: linear-gradient(180deg, #ffe7a1, #c8963a); box-shadow: 0 0 14px rgba(233,196,106,.35); }
.sitio-raiz[data-sitio="opciones"] .opc-contenido { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 20px 24px; border-radius: 6px; box-shadow: none;
  scrollbar-width: thin; scrollbar-color: rgba(200,168,96,.4) transparent; }
.sitio-raiz[data-sitio="opciones"][data-estilo="A"] .opc-contenido { background: linear-gradient(180deg, rgba(22,16,8,.86), rgba(10,8,5,.92)); border: 1px solid var(--ui-linea); }
.sitio-raiz[data-sitio="opciones"][data-estilo="B"] .opc-contenido { background: linear-gradient(180deg, rgba(14,10,6,.92), rgba(8,6,4,.95)); border: 1px solid rgba(200,168,96,.4);
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.5); }
.sitio-raiz[data-sitio="opciones"] .opc-contenido h3 { font-family: var(--ui-fuente-titulo) !important; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; color: #e9c46a; }
.sitio-raiz[data-sitio="opciones"] .divider-medieval { height: 1px; margin: 4px 0; border: 0; background: linear-gradient(90deg, rgba(233,196,106,.5), transparent); }
.sitio-raiz[data-sitio="opciones"] .opc-contenido .btn-rpg { border-radius: 5px; font-family: var(--ui-fuente-titulo) !important; letter-spacing: .08em; }
.sitio-raiz[data-sitio="opciones"] .opc-contenido .btn-rpg.ring-glow-gold { color: #1b1406 !important; border-color: #e9c46a !important; background: linear-gradient(180deg, #ffe7a1, #c8963a) !important; }
.sitio-raiz[data-sitio="opciones"] .opc-contenido input[type="checkbox"] { accent-color: #c8963a; }
@media (max-width: 1000px) { .sitio-raiz[data-sitio="opciones"] .opc-rejilla { flex-direction: column; } .sitio-raiz[data-sitio="opciones"] .options-rpg-tablist { width: auto; flex-direction: row; flex-wrap: wrap; clip-path: none; } }

/* ════════════════════ 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; }

/* ════════════════════ 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-rejilla--B .tab-reclutas { flex-wrap: wrap; height: auto; }
  .tab-cinta { grid-template-columns: 1fr; max-height: none; }
  .sitio-seccion__cuerpo { overflow: visible; }
  .sitio-cabecera { flex-wrap: wrap; }
}