/* D-PUESTOS (mesa claude/_CLAUDE_D_PUESTOS_MESA.md, D-PUE-5/6/7) — la pestaña Puestos de la Forja Brasaviva: el resumen
   (tarjetas sin botones) y el puesto por dentro, a pantalla completa como la Taberna (sitio.css .tab-escena/.tab-figura). */

/* ---------------------------------------------------------------- el resumen */
.pue-resumen { display: flex; flex-direction: column; gap: 12px; }
.pue-nota { margin: 0; font-size: 12px; color: #cdb98d; }
.pue-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pue-tarjeta { display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(233,196,106,.45); background: rgba(10,7,4,.72); color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.pue-tarjeta:hover, .pue-tarjeta:focus-visible { border-color: #e9c46a; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 12px rgba(233,196,106,.25); outline: none; }
.pue-tarjeta__img { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 138px; padding: 8px 10px;
  background-size: cover; background-position: center; box-shadow: inset 0 -60px 40px -20px rgba(0,0,0,.85); }
.pue-tarjeta__nombre { font-family: var(--ui-fuente-titulo, serif) !important; font-size: 18px; color: #fff3c4; text-shadow: 0 2px 4px #000; letter-spacing: .04em; }
.pue-tarjeta__nivel { font-size: 11px; color: #f0d58c; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.pue-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; }
.pue-tarjeta__recurso { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #f3e6c4; }
.pue-tarjeta__recurso img { width: 26px; height: 26px; object-fit: contain; }
.pue-tarjeta__recurso em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; color: #9fe0a8; }
.pue-tarjeta__aviso { font-size: 11px; color: #ffb0a0; }
.pue-tarjeta__caras { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; align-items: center; }
.pue-tarjeta__cara { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #e9d9b6; }
.pue-tarjeta__herrs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #bfae86; }
.pue-tarjeta__herr { display: inline-flex; align-items: center; gap: 3px; }
.pue-tarjeta__herr img { width: 18px; height: 18px; object-fit: contain; }
.pue-retrato { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top center; border: 1px solid rgba(233,196,106,.55); background: #1a1510; flex: none; }
.pue-vacio { color: #8f8064; font-size: 12px; font-style: italic; }
.pue-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 12px; color: #d8c79c; }
.pue-herramientas span { display: inline-flex; align-items: center; gap: 4px; }
.pue-herramientas img { width: 22px; height: 22px; object-fit: contain; }
.pue-herramientas small { color: #8f8064; }

/* ---------------------------------------------------------------- por dentro */
.sitio-raiz[data-sitio="forja"] .forja-col > #oficiosPuestosMount:has(.pue-dentro) { flex: 1 1 auto; min-height: 0; display: flex; }
.pue-dentro { flex: 1; min-height: 420px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); gap: 12px; }
.pue-dentro__escena { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pue-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; color: #d8c79c; }
.pue-barra__nombre { font-family: var(--ui-fuente-titulo, serif) !important; font-size: 18px; color: #fff3c4; letter-spacing: .05em; }
.pue-barra__recurso select, .pue-ficha select { margin-left: 4px; padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(233,196,106,.5); background: #120d07; color: #f3e6c4; }
.pue-barra__ritmo { display: inline-flex; align-items: center; gap: 4px; color: #9fe0a8; font-variant-numeric: tabular-nums; }
.pue-barra__ritmo img { width: 22px; height: 22px; object-fit: contain; }
.pue-boton { padding: 4px 10px; border-radius: 5px; border: 1px solid rgba(233,196,106,.55); background: rgba(40,28,12,.85); color: #f3dca0; cursor: pointer; font-size: 12px; }
.pue-boton:hover { border-color: #e9c46a; color: #fff3c4; }
.pue-boton--ampliar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pue-coste { display: inline-flex; gap: 6px; }
.pue-coste span { display: inline-flex; align-items: center; gap: 2px; }
.pue-coste img { width: 18px; height: 18px; object-fit: contain; }
.pue-coste .pue-falta { color: #ff9b8a; }
.pue-boton--retirar { border-color: rgba(220,90,70,.7); color: #ffc1b5; background: rgba(60,16,10,.8); width: 100%; }
.pue-aviso { margin: 0; padding: 4px 10px; border-radius: 5px; font-size: 12px; color: #ffd2c8; background: rgba(90,20,10,.55); }

.pue-escena { position: relative; flex: 1; min-height: 300px; container-type: size; overflow: hidden; border-radius: 8px; background: #0d0905; }
.pue-escena__lienzo { position: absolute; left: 50%; top: 50%; width: min(100cqw, calc(100cqh * 1600 / 900)); aspect-ratio: 1600 / 900; translate: -50% -50%; }
.pue-escena__fondo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pue-arrastrando-libre .pue-escena { box-shadow: inset 0 0 0 2px rgba(233,196,106,.85), inset 0 0 40px rgba(233,196,106,.25); }
.pue-arrastrando-trabajador .pue-dentro__col { box-shadow: inset 0 0 0 2px rgba(220,90,70,.85); }

/* los sitios libres: un círculo en el suelo que late */
.pue-sitio { position: absolute; left: var(--x); top: var(--y); width: 9%; aspect-ratio: 3.2; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 2px dashed rgba(255,231,161,.7); background: radial-gradient(ellipse, rgba(255,231,161,.22), rgba(255,231,161,0) 70%); animation: pue-sitio 1.8s ease-in-out infinite; }
@keyframes pue-sitio { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* las figuras: como las de la taberna, con los pies en el sitio, y un vaivén de trabajo en bucle */
.pue-figura { position: absolute; left: var(--x); top: var(--y); height: var(--alto); translate: -50% -100%; z-index: 3; cursor: grab; }
.pue-figura:active { cursor: grabbing; }
.pue-figura:focus-visible { outline: none; }
.pue-figura__cuerpo { display: block; height: 100%; transform-origin: 50% 100%; animation: var(--pue-gesto, none) 1.6s ease-in-out var(--retardo, 0s) infinite; }
.pue-figura--golpear { --pue-gesto: pue-golpear; }
.pue-figura--serrar { --pue-gesto: pue-serrar; }
.pue-figura--agacharse { --pue-gesto: pue-agacharse; }
.pue-figura--quieta { --pue-gesto: none; }
.pue-figura__img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 6px 5px rgba(0,0,0,.65)); -webkit-user-drag: none; }
img.pue-figura__img { border-radius: 8px; }
.pue-figura:hover .pue-figura__img, .pue-figura:focus-visible .pue-figura__img, .pue-figura--sel .pue-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)); }
.pue-figura__rotulo { position: absolute; bottom: calc(100% - 2px); left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center;
  white-space: nowrap; line-height: 1.1; text-shadow: 0 1px 3px #000, 0 0 6px #000; pointer-events: none; }
.pue-figura__rotulo b { font-family: var(--ui-fuente-titulo, serif) !important; font-size: clamp(10px, 1.25cqw, 15px); color: #fff3c4; }
.pue-figura__rotulo small { font-size: clamp(9px, 1cqw, 12px); color: #9fe0a8; }
@keyframes pue-golpear { 0%, 55%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 40% { rotate: 4deg; translate: 0 1%; } }
@keyframes pue-serrar { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 3% 0; rotate: 2deg; } }
@keyframes pue-agacharse { 0%, 100% { scale: 1 1; } 50% { scale: 1.02 .95; } }

/* luces y partículas (ui/puestos_ambiente.ts) */
.pue-amb { position: absolute; inset: 0; pointer-events: none; }
.pue-amb__luz { position: absolute; left: var(--x); top: var(--y); width: var(--t); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, var(--c) 0, rgba(0,0,0,0) 70%); animation: pue-luz var(--d) ease-in-out infinite alternate; }
@keyframes pue-luz { 0% { opacity: .6; scale: .94; } 40% { opacity: 1; scale: 1.04; } 70% { opacity: .75; } 100% { opacity: .95; scale: 1; } }
.pue-amb__particulas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
body.ui-efectos-reducidos .pue-amb__luz, body.ui-efectos-reducidos .pue-figura__cuerpo, body.ui-efectos-reducidos .pue-sitio { animation: none; }
@media (prefers-reduced-motion: reduce) { .pue-amb__luz, .pue-figura__cuerpo, .pue-sitio { animation: none; } }

/* la columna derecha: la ficha del elegido y los compañeros libres */
.pue-dentro__col { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 8px; border-radius: 8px;
  border: 1px solid rgba(233,196,106,.35); background: rgba(10,7,4,.7); }
.pue-col__titulo { margin: 0; font-family: var(--ui-fuente-titulo, serif) !important; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #e9c46a; }
.pue-col__ayuda { margin: auto 0 0; font-size: 11px; color: #8f8064; }
.pue-libres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pue-libre { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; cursor: grab; border: 1px solid rgba(233,196,106,.2); background: rgba(30,22,12,.7); }
.pue-libre:hover, .pue-libre:focus-visible { border-color: rgba(233,196,106,.7); outline: none; }
.pue-libre span { display: flex; flex-direction: column; font-size: 12px; color: #f3e6c4; }
.pue-libre small { color: #a8977a; font-size: 11px; }
/* D-PUESTOS-ESCUADRA D-PE-2 — el de la formación: al ponerlo a trabajar, deja la escuadra */
.pue-libre--escuadra { border-style: dashed; }
.pue-libre__escuadra { font-style: normal; font-size: 10px; color: #9fd0ff; }
.pue-aviso--escuadra { color: #d8ecff; background: rgba(20,50,90,.6); }
.pue-ficha { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 6px; border: 1px solid rgba(233,196,106,.55); background: rgba(40,28,12,.7); font-size: 12px; color: #e9d9b6; }
.pue-ficha p { margin: 0; }
.pue-ficha__cabeza { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff3c4; }
.pue-ficha__herr { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

/* D-DESGASTE D-DES-13 (claude/_CLAUDE_D_DESGASTE_MESA.md) — la vida de la herramienta: barra (llena = nueva), poca en ámbar, gastada en rojo */
.pue-vida { display: inline-flex; align-items: center; gap: 4px; }
.pue-vida__barra { position: relative; display: inline-block; width: 34px; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(233,196,106,.35); }
.pue-vida__barra i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8fbf5a, #cfe08a); }
.pue-vida--poca .pue-vida__barra i { background: linear-gradient(90deg, #d08a2a, #ffd36b); }
.pue-vida--gastada .pue-vida__barra { box-shadow: inset 0 0 0 1px rgba(230,90,70,.7); }
.pue-vida__texto { font-size: 11px; color: #d8c79c; }
.pue-vida--gastada .pue-vida__texto { color: #ff9a85; font-weight: 700; }
.pue-ficha__vida { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pue-ficha__vida .pue-vida__barra { width: 90px; height: 7px; }
.pue-ficha__gastada { padding: 4px 6px; border-radius: 4px; background: rgba(90,20,12,.55); color: #ffd2c8; font-size: 11px; }
.pue-herramientas__gastadas { font-style: normal; color: #ff9a85; }
.sitio-raiz[data-estilo="B"] .pue-vida__barra { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(233,196,106,.6); }
.sitio-raiz[data-estilo="B"] .pue-vida__barra i { background: linear-gradient(90deg, #6b8f3a, #b9d36a); }
.sitio-raiz[data-estilo="B"] .pue-vida--poca .pue-vida__barra i { background: linear-gradient(90deg, #a8541c, #e9a23a); }
.sitio-raiz[data-estilo="B"] .pue-ficha__gastada { border-radius: 0; border-left: 3px solid #b0301c; background: rgba(60,14,8,.7); }

/* D-EDIFICIOS-3 F3b D-ED3-B6 — la runa del armero (Torre del mago): el sello en la tarjeta y en la barra, y su rombo en la escena.
   Los colores de la Torre (torre.css): filo, azul; temple, ámbar. */
.pue-runa { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; line-height: 1.3; white-space: nowrap;
  color: #ece8ff; background: rgba(12,9,28,.78); border: 1px solid rgba(160,140,255,.55); }
.pue-runa__rombo { flex: none; display: block; width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid rgba(160,140,255,.6); background: rgba(0,0,0,.35); }
.pue-runa--filo .pue-runa__rombo { border-color: #7cc8ff; box-shadow: 0 0 7px rgba(124,200,255,.7); background: radial-gradient(circle, rgba(124,200,255,.6), rgba(0,0,0,.2)); }
.pue-runa--temple .pue-runa__rombo { border-color: #ffaa5a; box-shadow: 0 0 7px rgba(255,170,90,.65); background: radial-gradient(circle, rgba(255,170,90,.55), rgba(0,0,0,.2)); }
.pue-runa--tarjeta { position: absolute; top: 8px; left: 8px; }
.pue-escena__runa { position: absolute; top: 5%; right: 3.5%; width: 2.6%; aspect-ratio: 1; display: grid; place-items: center; z-index: 4; pointer-events: none; }
.pue-escena__runa .pue-runa__rombo { width: 70%; height: 70%; border-width: 3px; animation: pue-runa-latir 3.4s ease-in-out infinite; }
@keyframes pue-runa-latir { 0%, 100% { opacity: .72; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.4); } }
@media (prefers-reduced-motion: reduce) { .pue-escena__runa .pue-runa__rombo { animation: none; } }
.sitio-raiz[data-estilo="B"] .pue-runa { border-radius: 0; border-color: rgba(233,196,106,.55); }

@media (max-width: 900px) {
  .pue-dentro { grid-template-columns: minmax(0, 1fr); }
  .pue-escena { min-height: 56vw; }
}