/* D-PUESTOS (mesa claude/_CLAUDE_D_PUESTOS_MESA.md, D-PUE-5/6/7) — la pestaña Puestos de la Forja de Thorin: 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); 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); 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); 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); 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; }
.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; }

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