/* D-UI-MARCO — el marco de la interfaz: menú a la izquierda, escenario y chat en franja inferior.
   Sólo coloca las piezas; el interior de cada pantalla no se toca aquí.
   La clase body.ui-marco-activo la pone ui/marco.js mientras la ciudad está visible.
   Los selectores llevan dos ids a propósito: las utilidades de Tailwind del HTML viejo
   van bajo "#rpg-root" (un id) y hay que ganarles sin !important. */

body.ui-marco-activo {
  overflow: hidden;
}

/* ───────── El marco ───────── */

#rpg-root #cityView:not(.hidden) {
  position: fixed;
  inset: 0;
  display: grid;
  /* Adenda A-1: la franja inferior va en cuatro partes; el chat ocupa las dos centrales. */
  grid-template-columns: var(--ui-menu-ancho) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--ui-chat-alto);
  grid-template-areas:
    "menu escenario escenario escenario"
    "menu pieizq    chat      pieder";
  margin: 0;
  transition: grid-template-columns var(--ui-transicion);
}

/* Las dos cajas intermedias del HTML viejo dejan de pintar: sus hijos pasan a ser las zonas del marco. */
#rpg-root #cityView > .v2-city-container,
#rpg-root #cityView #citySection {
  display: contents;
}

/* ───────── Escenario ───────── */

#rpg-root #cityView #buildingPanel,
#rpg-root #cityView #combatView {
  grid-area: escenario;
  z-index: var(--ui-capa-escenario);
  min-width: 0;
  min-height: 0;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 0;
  /* D-UI-M-12: provisional. Las pantallas viejas que no caben se desplazan DENTRO del escenario
     hasta que les llegue su tanda; la página no se mueve. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* ───────── Menú ───────── */

#rpg-root .ui-menu {
  grid-area: menu;
  z-index: var(--ui-capa-menu);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--ui-fondo-1);
  border-right: 1px solid var(--ui-linea);
  font-family: var(--ui-fuente-titulo) !important;
}

#rpg-root .ui-menu__lista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-esp-2);
  padding: var(--ui-esp-2);
}

#rpg-root .ui-sitio {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 132px;
  display: flex;
  align-items: center;
  gap: var(--ui-esp-3);
  padding: 0 var(--ui-esp-3);
  overflow: hidden;
  text-align: left;
  color: var(--ui-tinta-0);
  background-color: var(--ui-fondo-3);
  background-image:
    linear-gradient(90deg, rgba(7, 9, 14, 0.92) 0%, rgba(7, 9, 14, 0.62) 55%, rgba(7, 9, 14, 0.25) 100%),
    var(--ui-sitio-imagen, none);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--ui-linea);
  border-radius: var(--ui-radio-m);
  cursor: pointer;
  transition: border-color var(--ui-transicion), box-shadow var(--ui-transicion), filter var(--ui-transicion);
}

#rpg-root .ui-sitio:hover {
  border-color: var(--ui-acento-suave);
  filter: brightness(1.15);
}

#rpg-root .ui-sitio:focus-visible {
  outline: 2px solid var(--ui-acento);
  outline-offset: 1px;
}

/* script_core.js marca el sitio abierto con esta clase (highlightCityBuilding). */
#rpg-root .ui-sitio.city-building-highlight {
  border-color: var(--ui-acento);
  box-shadow: inset 3px 0 0 var(--ui-acento), 0 0 14px var(--ui-acento-brillo);
  animation: none;
}

/* D-ARTE-1-3 — la escena pintada de cada sitio (antes, D-UI-M-19: recortes provisionales de fondos de zona). */
#rpg-root .ui-sitio[data-ui-sitio="taberna"]      { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_taberna.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="tacticas"]     { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_tacticas.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="ayuntamiento"] { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_ayuntamiento.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="templo"]       { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_templo.webp"); } /* D-ICONOS-TEMPLO D-IT-3 — del arte del edificio */
#rpg-root .ui-sitio[data-ui-sitio="torre"]        { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_torre.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="relaciones"]   { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_relaciones.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="compendio"]    { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_compendio.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="diario"]       { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_misiones.webp"); } /* D-DIARIO D-DI-9 */
#rpg-root .ui-sitio[data-ui-sitio="forja"]        { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_forja.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="bazaar"]       { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_bazaar.webp"); }
#rpg-root .ui-sitio[data-ui-sitio="atlas"]        { --ui-sitio-imagen: url("../assets/escenas/menu/escena_sitio_atlas.webp"); }

/* D-ARTE-1-3 — iconos pintados (antes, siluetas teñidas con máscara): ya traen su color y su marco. */
.ui-icono {
  display: inline-block;
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--ui-icono) center / contain no-repeat;
  border-radius: 6px;
}

.ui-icono--taberna      { --ui-icono: url("../assets/icons/sitios/icono_sitio_taberna.webp"); }
.ui-icono--tacticas     { --ui-icono: url("../assets/icons/sitios/icono_sitio_tacticas.webp"); }
.ui-icono--ayuntamiento { --ui-icono: url("../assets/icons/sitios/icono_sitio_ayuntamiento.webp"); }
.ui-icono--templo       { --ui-icono: url("../assets/icons/sitios/icono_sitio_templo.webp"); } /* D-ICONOS-TEMPLO D-IT-1 */
.ui-icono--torre        { --ui-icono: url("../assets/icons/sitios/icono_sitio_torre.webp"); }
.ui-icono--relaciones   { --ui-icono: url("../assets/icons/sitios/icono_sitio_relaciones.webp"); }
.ui-icono--compendio    { --ui-icono: url("../assets/icons/sitios/icono_sitio_compendio.webp"); }
.ui-icono--diario       { --ui-icono: url("../assets/icons/sitios/icono_sitio_diario.webp"); } /* D-DI-9, D-DIARIO-LIBRO D-DL-6 */
.ui-icono--forja        { --ui-icono: url("../assets/icons/sitios/icono_sitio_forja.webp"); }
.ui-icono--bazaar       { --ui-icono: url("../assets/icons/sitios/icono_sitio_bazaar.webp"); }
.ui-icono--atlas        { --ui-icono: url("../assets/icons/sitios/icono_sitio_atlas.webp"); }
.ui-icono--opciones     { --ui-icono: url("../assets/icons/sitios/icono_sitio_opciones.webp"); }

#rpg-root .ui-sitio__texto {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* v2-theme_v0.8.9.css:* fuerza una familia con !important sobre TODO el documento:
   para que las fichas manden en el menu hace falta !important aqui (y solo aqui). */
#rpg-root .ui-sitio__nombre {
  font-family: var(--ui-fuente-titulo) !important;
  font-size: var(--ui-letra-l);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ui-tinta-0);
  text-shadow: 0 1px 3px #000;
}
/* D-CIUDAD A-1 (D-CIU-13): «AYUNTAMIENTO» es una sola palabra larga y no puede partirse como «Forja Brasaviva»;
   a 1280×720 le caben 131 px y pide 150. Al 86 % y con menos espaciado, 124 px. */
#rpg-root .ui-sitio[data-ui-sitio="ayuntamiento"] .ui-sitio__nombre {
  font-size: calc(var(--ui-letra-l) * 0.86);
  letter-spacing: 0.03em;
}

#rpg-root .ui-sitio__sub {
  font-family: var(--ui-fuente-texto) !important;
  font-size: var(--ui-letra-s);
  line-height: 1.2;
  color: var(--ui-tinta-1);
  text-shadow: 0 1px 2px #000;
}

#rpg-root .ui-sitio__aviso {
  position: absolute;
  top: var(--ui-esp-1);
  right: var(--ui-esp-1);
  z-index: 1;
  min-width: 18px;
  min-height: 18px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-fuente-texto);
  font-size: var(--ui-letra-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--ui-aviso-tinta);
  background: var(--ui-aviso);
  border-radius: 999px;
  pointer-events: none;
}

#rpg-root .ui-menu__pie {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-esp-2);
  height: 56px;
  padding: 0 var(--ui-esp-2);
  border-top: 1px solid var(--ui-linea);
}

#rpg-root .ui-menu__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ui-tinta-1);
  background: var(--ui-fondo-3);
  border: 1px solid var(--ui-linea);
  border-radius: var(--ui-radio-m);
  cursor: pointer;
}

#rpg-root .ui-menu__boton:hover {
  border-color: var(--ui-acento-suave);
  color: var(--ui-acento);
}

.ui-flecha {
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 4px;
  transition: transform var(--ui-transicion);
}

/* ── Menú retraído (D-UI-M-3): sólo el icono; el escenario gana el ancho ── */

body.ui-menu-retraido #rpg-root .ui-sitio {
  justify-content: center;
  padding: 0;
  background-image:
    linear-gradient(rgba(7, 9, 14, 0.7), rgba(7, 9, 14, 0.7)),
    var(--ui-sitio-imagen, none);
}

body.ui-menu-retraido #rpg-root .ui-sitio__texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

body.ui-menu-retraido #rpg-root .ui-menu__pie {
  justify-content: center;
}

body.ui-menu-retraido .ui-flecha {
  transform: rotate(225deg);
  margin-left: -4px;
}

/* ── Botón de opciones: en la partida vive en el pie del menú (D-UI-M-9) ── */

body.ui-marco-activo #rpg-root #optionsIcon {
  top: auto;
  right: auto;
  left: var(--ui-esp-2);
  bottom: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-fondo-3);
  border: 1px solid var(--ui-linea);
  border-radius: var(--ui-radio-m);
  box-shadow: none;
}

body.ui-marco-activo.ui-menu-retraido #rpg-root #optionsIcon {
  /* Retraído no caben los dos botones en fila: opciones sube encima del de plegar. */
  left: calc((var(--ui-menu-ancho) - 44px) / 2);
  bottom: 62px;
}

body.ui-marco-activo.ui-menu-retraido #rpg-root .ui-menu__pie {
  height: 112px;
  align-items: flex-end;
  padding-bottom: 6px;
}

#rpg-root #optionsIcon .ui-icono {
  width: 24px;
  height: 24px;
}

/* ───────── Chat (franja inferior) ─────────
   Durante el combate V3 la sección se muda al panel del combate (replay-adapter.jsx,
   CombatChroniclePanel) con la clase chronicles-hosted-in-combat: ahí no se toca nada. */

#rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat) {
  grid-area: chat;
  z-index: var(--ui-capa-chat);
  min-width: 0;
  min-height: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--ui-esp-2) var(--ui-esp-3);
  background: var(--ui-fondo-1);
  border: 0;
  border-top: 1px solid var(--ui-linea);
  border-left: 1px solid var(--ui-linea);
  border-right: 1px solid var(--ui-linea);
  border-radius: 0;
  box-shadow: none;
}

/* #logBox trae min-height y max-height en línea (el combate cuenta con ellos): aquí hace falta !important. */
#rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat) #logBox {
  min-height: 0 !important;
  max-height: none !important;
}

/* ───────── Laterales de la franja inferior (adenda A-1) ─────────
   Nombre, nivel y experiencia a la izquierda; dinero a la derecha.
   Los valores los escribe refreshResources (script_core.js) en los ids de siempre. */

#rpg-root .ui-pie {
  z-index: var(--ui-capa-chat);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ui-esp-2);
  padding: var(--ui-esp-3) var(--ui-esp-4);
  overflow: hidden;
  color: var(--ui-tinta-1);
  background: var(--ui-fondo-1);
  border-top: 1px solid var(--ui-linea);
}

#rpg-root .ui-pie--izq { grid-area: pieizq; }
#rpg-root .ui-pie--der { grid-area: pieder; }

#rpg-root .ui-pie__nombre,
#rpg-root .ui-pie__nombre * {
  font-family: var(--ui-fuente-titulo) !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ui-acento);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rpg-root .ui-pie__fila,
#rpg-root .ui-pie__fila * {
  font-family: var(--ui-fuente-texto) !important;
}

#rpg-root .ui-pie__fila {
  display: flex;
  align-items: baseline;
  gap: var(--ui-esp-2);
  font-size: var(--ui-letra-m);
  color: var(--ui-tinta-0);
}

#rpg-root .ui-pie__fila--tenue {
  font-size: var(--ui-letra-s);
  color: var(--ui-tinta-2);
}

#rpg-root .ui-pie__rotulo {
  font-size: var(--ui-letra-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-tinta-2);
}

#rpg-root .ui-pie__valor {
  font-size: 20px;
  font-weight: 700;
  color: var(--ui-tinta-0);
}

/* ───────── El marco vestido con las piezas (D-UI-PIEZAS, D-UI-P-10) ─────────
   Las piezas están en ui/piezas.css; aquí sólo se ajusta su encaje en el marco. */

#rpg-root .ui-pie.ui-marco {
  border-radius: 0;
  border-width: 1px 0 0;
}

/* El chat no lleva la clase de la pieza Marco (cambiaría su aspecto dentro del combate):
   aquí se le da la línea interior y sitio para las esquinas, sólo fuera del combate. */
#rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat) { position: relative; }

#rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat)::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(200, 168, 96, 0.22);
  border-radius: 4px;
  pointer-events: none;
}

#chroniclesSection.chronicles-hosted-in-combat .ui-esquina { display: none; }

/* Menú: el brillo recorre sólo el sitio abierto. El botón recorta lo que sobresale, así que va por dentro. */
#rpg-root .ui-sitio.ui-brillo::after { inset: 0; display: none; }
#rpg-root .ui-sitio.ui-brillo.city-building-highlight::after { display: block; }
body.ui-efectos-reducidos #rpg-root .ui-sitio.ui-brillo::after { display: none; }

/* Viñeta y grano: sólo con el marco activo, por detrás de la ciudad. */
.ui-vineta,
.ui-grano { display: none; }
body.ui-marco-activo .ui-vineta { display: block; }
body.ui-marco-activo:not(.ui-efectos-reducidos) .ui-grano { display: block; }

/* ───────── Pantallas estrechas (D-UI-M-14): usable, sin diseñar ─────────
   Menú en tira de iconos arriba; chat plegable (ui/marco.js pone body.ui-chat-plegado). */

@media (max-width: 1000px) {
  #rpg-root #cityView:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 64px minmax(0, 1fr) auto 150px;
    grid-template-areas:
      "menu      menu"
      "escenario escenario"
      "pieizq    pieder"
      "chat      chat";
  }

  body.ui-chat-plegado #rpg-root #cityView:not(.hidden) {
    grid-template-rows: 64px minmax(0, 1fr) auto 44px;
  }

  #rpg-root .ui-pie {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ui-esp-3);
    padding: var(--ui-esp-1) var(--ui-esp-3);
  }

  #rpg-root .ui-pie--der {
    justify-content: flex-end;
  }

  #rpg-root .ui-pie .ui-barra,
  #rpg-root .ui-pie__fila--tenue {
    display: none;
  }

  #rpg-root .ui-pie__nombre,
  #rpg-root .ui-pie__nombre *,
  #rpg-root .ui-pie__valor,
  #rpg-root .ui-pie .ui-recurso {
    font-size: var(--ui-letra-m);
  }

  #rpg-root .ui-pie .ui-esquina,
  #rpg-root .ui-pie.ui-marco::before { display: none; }

  /* Una regla vieja para móvil deja el chat translúcido y con desenfoque (con !important):
     aquí se repone el fondo del marco. */
  #rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat) {
    border-left: 0;
    border-right: 0;
    background: var(--ui-fondo-1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #rpg-root .ui-menu {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--ui-linea);
  }

  #rpg-root .ui-menu__lista {
    flex-direction: row;
    gap: var(--ui-esp-1);
    padding: var(--ui-esp-1);
    padding-right: 52px;
  }

  #rpg-root .ui-sitio {
    justify-content: center;
    padding: 0;
    max-height: none;
  }

  #rpg-root .ui-sitio__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  #rpg-root .ui-icono {
    width: 26px;
    height: 26px;
  }

  #rpg-root .ui-menu__pie {
    display: none;
  }

  body.ui-marco-activo #rpg-root #optionsIcon,
  body.ui-marco-activo.ui-menu-retraido #rpg-root #optionsIcon {
    top: 10px;
    right: var(--ui-esp-1);
    left: auto;
    bottom: auto;
  }

  #rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat) h2 {
    cursor: pointer;
  }

  body.ui-chat-plegado #rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat) > :not(:first-child) {
    display: none;
  }
}

/* D-ICONOS-TEMPLO D-IT-3 (claude/_CLAUDE_D_ICONOS_TEMPLO_MESA.md) — once botones que no se salgan ni se partan, sin scroll.
   Las pantallas estrechas tienen arriba su franja de iconos: esto es sólo para el menú de columna. */
@media (min-width: 1001px) and (max-height: 760px) {
  #rpg-root .ui-menu__lista { gap: var(--ui-esp-1); padding: var(--ui-esp-1); }
}
@media (min-width: 1001px) and (max-height: 700px) {
  #rpg-root .ui-sitio__sub { display: none; }
}
@media (min-width: 1001px) and (max-height: 540px) {
  #rpg-root .ui-sitio .ui-icono { width: 24px; height: 24px; }
  #rpg-root .ui-sitio__nombre,
  #rpg-root .ui-sitio[data-ui-sitio="ayuntamiento"] .ui-sitio__nombre { font-size: var(--ui-letra-s); }
}
@media (max-width: 1000px) {
  /* en un móvil de pie, once botones miden menos que el icono: el icono cede */
  #rpg-root .ui-menu__lista,
  #rpg-root .ui-sitio { min-width: 0; }
  #rpg-root .ui-sitio .ui-icono { flex: 0 1 auto; max-width: 100%; }
}

/* D-INVENTARIO-COMBATE D-INV-2' — fuera de la ciudad, los sitios de la ciudad se ven apagados (el aviso va en su tooltip) */
#rpg-root .ui-sitio.ui-sitio--apagado { filter: grayscale(0.85) brightness(0.55); opacity: 0.7; cursor: not-allowed; }
#rpg-root .ui-sitio.ui-sitio--apagado:hover { filter: grayscale(0.85) brightness(0.65); }

/* ───────── D-RELOJ-24H D-R24-2 (claude/_CLAUDE_D_RELOJ_24H_MESA.md) — la hora del mundo ─────────
   Un solo indicador (#uiReloj, lo crea src/ui/reloj_indicador.ts dentro de #cityView): arriba a la izquierda del
   escenario, en la columna libre de la cabecera de cada pantalla (la del centro es el título; la de la derecha, las
   acciones). En combate se oculta: lo pinta la placa de la zona (.ui-reloj--en-placa, combat_exp/disposiciones.css). */
.ui-reloj {
  --ui-reloj-astro: #ffd27a;
  --ui-reloj-tinta: #f3e2b4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-reloj-tinta);
  font-family: var(--ui-fuente-texto);
  line-height: 1;
  user-select: none;
  cursor: default;
}
.ui-reloj__astro { display: grid; place-items: center; flex: none; color: var(--ui-reloj-astro); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ui-reloj-astro) 55%, transparent)); }
.ui-reloj__svg { display: block; width: 40px; height: 40px; }
.ui-reloj__texto { display: flex; flex-direction: column; gap: 3px; }
.ui-reloj__hora { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.ui-reloj__franja { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }

.ui-reloj--alba { --ui-reloj-astro: #ffb070; }
.ui-reloj--atardecer { --ui-reloj-astro: #ff8a5c; --ui-reloj-tinta: #f6d6b8; }
.ui-reloj--noche { --ui-reloj-astro: #d6defc; --ui-reloj-tinta: #d8e0ff; }
.ui-reloj--luna-llena { --ui-reloj-astro: #f4f1df; }
.ui-reloj--luna-roja { --ui-reloj-astro: #ff5a4a; }

#cityView > #uiReloj {
  position: fixed;
  top: 10px;
  left: calc(var(--ui-menu-ancho) + 14px);
  margin: 0; /* #cityView es space-y-4: sin esto, 16 px de margen arriba */
  z-index: 5; /* sobre el escenario (1), el chat (2) y el menú (3) del marco; bajo lo que tapa la ciudad */
  padding: 6px 14px 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(214, 178, 94, 0.5);
  background: linear-gradient(180deg, rgba(28, 20, 10, 0.86), rgba(14, 10, 6, 0.8));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#cityView > #uiReloj.ui-reloj--noche { border-color: rgba(150, 170, 255, 0.5); background: linear-gradient(180deg, rgba(14, 18, 40, 0.88), rgba(8, 10, 24, 0.82)); }
html[data-estilo-marco="B"] #cityView > #uiReloj { border-radius: 4px; border-color: rgba(190, 90, 70, 0.6); }
/* Tácticas lleva sus pestañas a la izquierda del título (.tac-titulo): allí el reloj va a la derecha del título, en el
   hueco que queda hasta el grupo (el título va centrado en el escenario). */
#cityView:has(.tac-titulo) > #uiReloj { left: calc(var(--ui-menu-ancho) + (100% - var(--ui-menu-ancho)) / 2 + 110px); }
#cityView.hidden > #uiReloj,
body:not(.ui-marco-activo) #cityView > #uiReloj,
body.en-combate-v3 #cityView > #uiReloj { display: none; }

/* ───────── D-PRIMERA-HORA-3 D-PH3-15 (claude/_CLAUDE_D_PRIMERA_HORA_3_MESA.md) — lo que se sigue, arriba a la derecha ─────────
   #uiSeguimiento lo crea src/ui/seguimiento.ts dentro de #cityView (como #uiReloj, que va arriba a la izquierda). Sustituye a la fijada de
   la franja de abajo. En combate y fuera del marco se oculta. Estrecho y bajo, debajo de la cabecera, más pequeño. */
#cityView > #uiSeguimiento {
  position: fixed;
  /* D-SMOKE-PH4 S-5b — el techo: lo más arriba que puede ir; seguimiento.ts lo lee para subir el panel plegado por encima de las pestañas */
  --ui-seg-techo: 10px;
  top: var(--ui-seg-techo);
  right: 14px;
  z-index: 5;
  width: min(300px, 26vw);
  max-height: calc(100vh - 260px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 6px 8px 8px;
  border-radius: 10px;
  border: 1px solid rgba(214, 178, 94, 0.5);
  background: linear-gradient(180deg, rgba(28, 20, 10, 0.86), rgba(14, 10, 6, 0.8));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  color: #f3e2b4;
  /* D-SIGUIENDO D-SG-4 — sin font-family propio: la letra de texto la pone la regla * de v2-theme (D-LETRA D-LT-2, con !important) */
}
html[data-estilo-marco="B"] #cityView > #uiSeguimiento { border-radius: 4px; border-color: rgba(190, 90, 70, 0.6); }
/* la columna de la derecha de la cabecera es la de las acciones (pestañas de la Forja y el Ayuntamiento, el grupo de Tácticas): con ellas, el panel
   baja bajo la cabecera para no taparlas. Es su sitio de siempre: si aun así las tapa, seguimiento.ts lo pliega solo (D-SMOKE-PH4 S-5b), no lo
   baja más (bajarlo tapaba la columna de un puesto de la Forja) */
#cityView:has(.sitio-acciones, .tac-grupo) > #uiSeguimiento { top: 96px; }
#cityView.hidden > #uiSeguimiento,
#cityView > #uiSeguimiento.hidden,
body:not(.ui-marco-activo) #cityView > #uiSeguimiento,
body.en-combate-v3 #cityView > #uiSeguimiento { display: none; }
.ui-seg__cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ui-seg__rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.7; } /* D-LT-3: caja normal (antes uppercase); D-SG-4: 600, .7 */
.ui-seg__plegar { width: 20px; height: 20px; line-height: 18px; border-radius: 4px; border: 1px solid rgba(214, 178, 94, 0.45); background: rgba(0, 0, 0, 0.3); color: inherit; cursor: pointer; padding: 0; }
.ui-seg__item, .ui-seg__mas { position: relative; display: flex; flex-direction: column; gap: 1px; text-align: left; width: 100%; padding: 4px 7px 5px; border-radius: 6px; border: 1px solid transparent; background: rgba(0, 0, 0, 0.22); color: inherit; cursor: pointer; overflow: hidden; }
.ui-seg__item:hover, .ui-seg__mas:hover { border-color: rgba(233, 196, 106, 0.6); }
.ui-seg__item--auto { opacity: 0.72; }
.ui-seg__item--listo .ui-seg__valor { color: #9be39b; }
/* D-SIGUIENDO D-SG-1 (claude/_CLAUDE_D_SIGUIENDO_MESA.md) — dos líneas por fila, cada una de una línea con elipsis: el nombre con su
   progreso a la derecha; debajo, el lugar y la distancia. El objetivo largo, el nivel y los pasos se quedan en el Diario (D-SG-5). */
.ui-seg__linea { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ui-seg__titulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: #ffe7a1; line-height: 1.25; }
.ui-seg__valor { flex: 0 0 auto; font-weight: 600; font-size: 11.5px; color: #e9d7a6; font-variant-numeric: tabular-nums; }
.ui-seg__lugar { display: flex; min-width: 0; font-size: 11.5px; font-weight: 400; line-height: 1.3; color: rgba(243, 226, 180, 0.75); white-space: nowrap; }
.ui-seg__sitio { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-seg__dist { flex: 0 0 auto; white-space: pre; } /* el « · » de delante: un flex item recorta su espacio inicial */
/* D-SG-1 — el progreso: un filo de 2 px al pie de la fila (antes, una barra de 3 px en fila propia) */
.ui-seg__filo { position: absolute; left: 0; bottom: 0; height: 2px; background: #e9c46a; border-radius: 0 2px 0 0; pointer-events: none; }
.ui-seg__mas { font-size: 11px; opacity: 0.8; align-items: center; }
@media (max-width: 1000px) {
  /* el menú es una franja arriba: como el reloj, bajo la franja, a la derecha y más estrecho */
  #cityView > #uiSeguimiento { --ui-seg-techo: 69px; top: var(--ui-seg-techo); right: 8px; width: min(240px, 46vw); padding: 4px 6px 6px; }
  #cityView > #uiSeguimiento .ui-seg__titulo { font-size: 12px; }
  #cityView > #uiSeguimiento .ui-seg__lugar { font-size: 11px; }
}

/* La placa del combate ya es la caja: sólo el astro y la hora */
.ui-reloj--en-placa { gap: 6px; }
.ui-reloj--en-placa .ui-reloj__svg { width: 34px; height: 34px; }
.ui-reloj--en-placa .ui-reloj__hora { font-size: 17px; }
.ui-reloj--en-placa .ui-reloj__franja { font-size: 10px; }

@media (max-width: 1000px) {
  /* el menú es una franja de 64 px arriba y las cabeceras ocupan el ancho: el reloj va bajo la franja, más pequeño, y el
     escenario le deja su hueco arriba (en combate el overlay tapa el escenario entero, hueco incluido) */
  #cityView > #uiReloj,
  #cityView:has(.tac-titulo) > #uiReloj { top: 69px; left: 8px; padding: 3px 10px 3px 6px; }
  #cityView > #uiReloj .ui-reloj__svg { width: 24px; height: 24px; }
  #cityView > #uiReloj .ui-reloj__hora { font-size: 14px; }
  #cityView > #uiReloj .ui-reloj__franja { font-size: 9px; }
  body.ui-marco-activo #rpg-root #cityView #buildingPanel { padding-top: 46px; }
}

/* ───────── Canales del chat de ciudad: Todo · Grupo · Sistema (D-CHAT T1, D-CH1-11) ─────────
   La misma pestaña que el combate (combat_exp/disposiciones.css, .cv-chat-pestanas); la variante B va en su bloque, abajo.
   En combate la barra se oculta y el filtro no se aplica: allí manda la barra del combate (Crónicas · Combate · Daño). */
#chroniclesSection .chat-canales { display: flex; gap: 2px; margin: 2px 0 4px; flex-shrink: 0; }
#chroniclesSection .chat-canales button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8d8773;
  padding: 1px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
#chroniclesSection .chat-canales button.on { color: #f3dfa0; border-bottom-color: #c8a860; }
#chroniclesSection .chat-canales .cv-cnt { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px; border-radius: 8px; background: #7a2a24; color: #fff; font-size: 9px; letter-spacing: 0; }
#chroniclesSection.cv-chat-en-combate .chat-canales { display: none; }
#chroniclesSection:not(.cv-chat-en-combate) #logBox[data-filtro="grupo"] > :not([data-canal="grupo"]),
#chroniclesSection:not(.cv-chat-en-combate) #logBox[data-filtro="sistema"] > :not([data-canal="sistema"]),
#chroniclesSection:not(.cv-chat-en-combate) #logBox[data-filtro="comercio"] > :not([data-canal="comercio"]) { display: none; } /* D-COMERCIO-C1 D-CC1-9 */

/* ───────── Rumores de la ciudad (D-CHAT T4, D-CH4-3/7): el sitio abre el Atlas allí; el nombrado lleva su tooltip ───────── */
#logBox .chat-lugar-link { color: #e9c46a; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
#logBox .chat-lugar-link:hover, #logBox .chat-lugar-link:focus-visible { color: #fff1c4; outline: none; text-decoration-style: solid; }
#logBox .chat-nombrado { color: #f0a868; font-weight: 600; cursor: help; }
/* D-CHAT-5 D-CH5-3/8 — el [Ir a…] de un aviso y el [Aceptar] de una petición del chat */
#logBox .chat-aviso-ir, #logBox .chat-peticion-aceptar { color: #8ecae6; cursor: pointer; font-weight: 600; white-space: nowrap; }
#logBox .chat-aviso-ir:hover, #logBox .chat-aviso-ir:focus-visible,
#logBox .chat-peticion-aceptar:hover, #logBox .chat-peticion-aceptar:focus-visible { color: #e0f4ff; outline: none; text-decoration: underline; }
#logBox .chat-peticion-aceptar.chat-peticion-hecha { color: #6b7280; cursor: default; text-decoration: line-through; }
/* el sitio del rumor en el Atlas, resaltado unos segundos al abrirlo desde el chat */
.atlas-foco-rumor { animation: atlas-foco-rumor 1.5s ease-in-out 4; z-index: 25; } /* D-CH6-11 — por encima de zonas y puntos (antes 5 bajaba la zona) */
@keyframes atlas-foco-rumor {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 210, 122, 0)); }
  50% { filter: drop-shadow(0 0 12px #f5d27a) drop-shadow(0 0 4px #fff1c4); }
}
@media (prefers-reduced-motion: reduce) { .atlas-foco-rumor { animation: none; filter: drop-shadow(0 0 8px #f5d27a); } }

/* ───────── D-PULIDOS-28 D-P28-9 (claude/_CLAUDE_D_PULIDOS_28_MESA.md) — más líneas del registro en la franja del chat ─────────
   Con ratón, la fila de escribir deja el alto táctil (44 px, index.html) y su margen: el registro del combate pasa de 3 a 4 líneas
   en la franja de 168 px (y de 2 a 3 en la de 150). Con el dedo se queda como estaba. La pantalla de la intro tiene su propio chat. */
@media (pointer: fine) {
  #chroniclesSection:not(.intro-pantalla) > div:has(> #cityChatInput) { margin-top: 4px !important; }
  #chroniclesSection:not(.intro-pantalla) #cityChatInput { padding-top: 4px !important; padding-bottom: 4px !important; }
  #chroniclesSection:not(.intro-pantalla) #cityChatSendBtn { min-height: 32px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
}
/* el icono de la habilidad no hace la línea más alta que el texto (18 px en una línea de 17,4) */
#chroniclesSection .cv-chat-registro .combat-log-entry__icono { width: 14px !important; height: 14px !important; vertical-align: -2px; }

/* ═════════ D-UI-MARCO-B — el marco en el estilo B · Estandartes (mesa claude/_CLAUDE_D_UI_MARCO_B_MESA.md) ═════════
   El atributo lo pone marco.js desde Opciones. A es el marco de siempre: aquí sólo va B. */

/* Menú: estandarte oscuro cálido, borde carmesí con filete dorado */
html[data-estilo-marco="B"] #rpg-root .ui-menu {
  background: linear-gradient(180deg, #1c0b08 0%, #120806 60%, #0a0605 100%);
  border-right: 3px solid #6b2418;
  box-shadow: inset -1px 0 0 rgba(233, 196, 106, 0.45);
}
/* Sitios: paños sin radio con banda carmesí; el elegido, banda dorada y brillo cálido */
html[data-estilo-marco="B"] #rpg-root .ui-sitio {
  border-radius: 0;
  border: 1px solid rgba(200, 168, 96, 0.28);
  border-left: 4px solid #6b2418;
  background-image:
    linear-gradient(90deg, rgba(20, 8, 6, 0.94) 0%, rgba(20, 8, 6, 0.66) 55%, rgba(20, 8, 6, 0.28) 100%),
    var(--ui-sitio-imagen, none);
}
html[data-estilo-marco="B"] #rpg-root .ui-sitio:hover { border-color: rgba(233, 196, 106, 0.6); border-left-color: #9a2c1c; }
html[data-estilo-marco="B"] #rpg-root .ui-sitio.city-building-highlight {
  border-color: #e9c46a;
  border-left-color: #e9c46a;
  box-shadow: inset 0 0 0 1px rgba(233, 196, 106, 0.35), 0 0 16px rgba(233, 150, 64, 0.35);
}
html[data-estilo-marco="B"] #rpg-root .ui-sitio__nombre { color: #f3dca0; }
html[data-estilo-marco="B"] #rpg-root .ui-menu__pie { border-top: 3px solid #6b2418; }
html[data-estilo-marco="B"] #rpg-root .ui-menu__boton { border-radius: 0; background: rgba(20, 8, 6, 0.9); border-color: rgba(200, 168, 96, 0.4); color: #e9d9b6; }
html[data-estilo-marco="B"] #rpg-root .ui-menu__boton:hover { border-color: #e9c46a; color: #fff3c4; }

/* Chat y laterales de la franja inferior: banda carmesí arriba, fondo oscuro cálido */
html[data-estilo-marco="B"] #rpg-root #cityView #chroniclesSection:not(.chronicles-hosted-in-combat),
html[data-estilo-marco="B"] #rpg-root .ui-pie {
  /* !important: el chat lleva .rpg-panel.bg-rpgCard, que fija fondo y borde con !important (style_v0.8.9.css) */
  background: linear-gradient(180deg, #1a0b08, #0d0705) !important;
  border-top: 3px solid #6b2418 !important;
  box-shadow: inset 0 1px 0 rgba(233, 196, 106, 0.35);
}
html[data-estilo-marco="B"] #rpg-root .ui-pie__nombre,
html[data-estilo-marco="B"] #rpg-root .ui-pie__nombre * { color: #e9c46a; }

/* Crónica de combate (CvChatCombate, en #logBox): la pestaña elegida en oro sobre carmesí */
html[data-estilo-marco="B"] #chroniclesSection .cv-chat-pestanas button { border-radius: 0; }
html[data-estilo-marco="B"] #chroniclesSection .cv-chat-pestanas button.on {
  color: #fff3c4;
  background: linear-gradient(180deg, #6b2418, #3a120c);
  border-bottom-color: #e9c46a;
}

/* Canales del chat de ciudad (D-CH1-11): la pestaña elegida, como la del combate */
html[data-estilo-marco="B"] #chroniclesSection .chat-canales button { border-radius: 0; }
html[data-estilo-marco="B"] #chroniclesSection .chat-canales button.on {
  color: #fff3c4;
  background: linear-gradient(180deg, #6b2418, #3a120c);
  border-bottom-color: #e9c46a;
}