/* La vitrina (/ui/galeria-canje). El <style> de propuesta/vitrina.html sin la cabecera ni el pie,
   que pone ExperienceShell, más lo que la maqueta no tiene: la invitación sin sesión, la búsqueda
   que ya tenía la galería y la vitrina vacía. */

/* ---------- Cabecera de la página ---------- */
.cab-vitrina { border-bottom: 2px solid color-mix(in srgb, var(--oro) 32%, transparent); }
.cab-vitrina .marco { padding-top: var(--e-xl); }
.cab-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--e-l) var(--e-xxl); margin-bottom: var(--e-l); }
.cab-fila .intro { display: grid; gap: var(--e-xs); max-width: 640px; }
.cab-fila h1 { font-size: var(--t-titulo); }
.cab-fila .intro p { color: var(--marfil-suave); }
.saldo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding-left: var(--e-m); border-left: 2px solid var(--oro); color: var(--marfil-suave); }
.saldo strong { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1; color: var(--oro); font-variant-numeric: lining-nums tabular-nums; }

/* Sin sesión: en el sitio del saldo, la invitación a crear la cuenta o a entrar (el lacre de
   «Crear cuenta» ya está en la cabecera, aquí van como enlaces) */
.invitacion { max-width: 22rem; padding-left: var(--e-m); border-left: 2px solid var(--oro); color: var(--marfil-suave); font-size: var(--t-secundario); }

/* El .boton de arte-furtivo.css lleva interlineado 1,3 (por las páginas viejas); en la maqueta
   hereda el de la página (1,55) */
.cab-vitrina .boton, .sala .boton { line-height: inherit; }

/* Pestañas de cuaderno: la activa es una lengüeta de papel con filete de oro */
.barra-filtros { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--e-s) var(--e-xl); }
.pestanas { display: flex; gap: 2px; align-items: flex-end; margin-bottom: -2px; }
.pestana { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px 10px 26px; border-radius: var(--r-ficha) var(--r-ficha) 0 0;
  color: var(--marfil); text-decoration: none; font-size: 1.0625rem; font-weight: 500; white-space: nowrap; }
.pestana .cuenta { font-size: var(--t-minimo); color: var(--marfil-suave); font-variant-numeric: tabular-nums; }
.pestana > span:first-child { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--d-foco) var(--curva-papel); }
.pestana::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; background: var(--oro); transform: translateY(-50%) rotate(45deg) scale(0); transition: transform var(--d-foco) var(--curva-papel); }
.pestana:hover::before, .pestana:focus-visible::before { transform: translateY(-50%) rotate(45deg) scale(1); }
.pestana:hover > span:first-child, .pestana:focus-visible > span:first-child { background-size: 100% 2px; }
.pestana:focus-visible { outline-offset: 2px; }
.pestana[aria-current] { background-color: var(--arena); background-image: var(--grano); color: var(--tinta); font-weight: 700; box-shadow: inset 0 3px 0 var(--oro); }
.pestana[aria-current] .cuenta { color: var(--tinta-suave); }
.pestana[aria-current]::before { background: var(--terracota-oscura); transform: translateY(-50%) rotate(45deg) scale(1); }

/* Buscar y ordenar: subrayados, sin caja (la búsqueda es de la galería de antes) */
.orden { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-xs) var(--e-l); padding-bottom: 10px; }
.orden .campo { display: flex; align-items: center; gap: var(--e-s); }
.orden label { color: var(--marfil-suave); font-size: var(--t-secundario); }
.orden select, .orden input { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 2px solid var(--oro-apagado); border-radius: 0;
  color: var(--marfil); font: 500 1.0625rem var(--f-cuerpo); padding: 4px 26px 4px 2px; }
.orden select { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23E8C77A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 2px center / 13px 9px; cursor: pointer; }
.orden input { width: 13.5rem; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23E8C77A' stroke-width='2.2'/%3E%3Cpath d='M17.2 17.2L23.5 23.5' stroke='%23E8C77A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 2px center / 16px 16px; }
.orden input::placeholder { color: var(--marfil-suave); opacity: .7; }
.orden input::-webkit-search-cancel-button { -webkit-appearance: none; }
.orden select:focus-visible, .orden input:focus-visible { outline-offset: 4px; }
.orden option { color: var(--tinta); background: var(--arena); }
/* El orden se aplica al elegirlo; el botón solo aparece con el teclado (y sin JavaScript sigue ahí) */
.orden .aplicar:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.orden .aplicar { font-size: var(--t-secundario); padding-block: 4px; }

/* ---------- La sala ---------- */
.sala { background: radial-gradient(70% 60% at 50% 0%, #222B4A 0%, var(--noche-profunda) 60%, #10131F 100%); padding-block: var(--e-xl) var(--e-3xl); }
.piezas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-xxl) var(--e-xl); }
.pieza { display: grid; grid-template-rows: auto 1fr; gap: var(--e-m); }
.peana { position: relative; height: 260px; display: grid; justify-items: center; align-content: end; text-decoration: none;
  background: radial-gradient(40% 80% at 50% 0%, rgba(255,226,170,.20), rgba(255,226,170,0) 72%); transition: background-color var(--d-papel); }
.peana::before { content: ""; position: absolute; top: 0; left: 50%; width: 40px; height: 6px; transform: translateX(-50%); background: #2A3253; border-radius: 0 0 6px 6px; box-shadow: 0 2px 10px rgba(255,226,170,.35); }
.peana svg { position: relative; z-index: 1; height: 180px; width: auto; margin-bottom: -4px; filter: drop-shadow(0 12px 10px rgba(0,0,0,.45)); }
.peana::after { content: ""; display: block; width: 52%; height: 44px; background: linear-gradient(180deg, #2C3456 0, #1F2642 12%, #151A2C 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oro) 40%, transparent), 0 18px 26px rgba(0,0,0,.5); }
.pieza:hover .peana { background-color: rgba(255,226,170,.025); }

.cartela { padding: var(--e-l); display: flex; flex-direction: column; gap: 4px; transition: transform var(--d-papel) var(--curva-papel); }
.cartela h3 { font-size: 1.375rem; }
.cartela h3 a { text-decoration: none; }
.cartela h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-ficha); }
.cartela h3 a:hover, .cartela h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; outline: none; }
/* Oro a propósito: la cartela es .ficha (su --foco es TerracotaOscura), pero este contorno cae fuera de ella, sobre la tela. */
.cartela:focus-within { outline: 2px dashed var(--oro); outline-offset: 5px; }
.pieza:hover .cartela { transform: translateY(-2px); }
.cartela .autor { font-style: italic; color: var(--tinta-suave); }
.cartela .tecnica { font-size: var(--t-secundario); color: var(--tinta-suave); }
.cartela .fila { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-s); border-top: 1px solid var(--arena-oscura); padding-top: 10px; font-size: var(--t-secundario); }
.cartela .fila b { font-family: var(--f-titulo); font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.cartela .fila span, .estado { font-variant-numeric: lining-nums; }
.cartela .fila + .estado { margin-top: 6px; }

/* Estado respecto al jugador: forma + texto, nunca solo color */
.estado { display: flex; align-items: center; gap: 10px; font-size: var(--t-secundario); font-weight: 700; color: var(--tinta); }
.estado .marca { flex: none; width: 10px; height: 10px; transform: rotate(45deg); margin-inline: 2px; }
.estado--puede { color: var(--exito-tinta); }
.estado--puede .marca { background: var(--exito-tinta); }
.estado--falta .marca { border: 2px solid var(--tinta); background: transparent; }
.estado--agotada { color: var(--tinta-suave); font-weight: 500; font-style: italic; }
.estado--agotada .marca { transform: none; width: auto; height: auto; font-style: normal; font-weight: 700; font-size: 1.125rem; line-height: 1; margin-inline: 1px 0; }

/* Agotada: el foco apagado y la pieza en penumbra (además del texto) */
.pieza--agotada .peana { background: none; }
.pieza--agotada .peana::before { box-shadow: none; }
.pieza--agotada .peana svg { opacity: .42; filter: grayscale(.5) drop-shadow(0 12px 10px rgba(0,0,0,.45)); }

/* Revelado lento (js/animaciones.js): con JavaScript y movimiento permitido, cada pieza empieza a oscuras. Al llegar a ella
   se enciende su foco, la obra sale de la sombra y, al final, entra la cartela de papel. Sin partículas ni destellos
   (DESIGN.md §5 y §6). Sin el script, o con «reducir movimiento», la sala se ve encendida desde el principio. */
@media screen and (prefers-reduced-motion: no-preference) {
  .af-anima .sala .pieza:not(.encendida) .peana { opacity: .3; }
  .af-anima .sala .pieza:not(.encendida) .peana svg, .af-anima .sala .pieza:not(.encendida) .cartela { opacity: 0; }
  .af-anima .sala .pieza.encendida .peana { animation: foco-enciende 1100ms cubic-bezier(.4, 0, .2, 1) backwards; }
  .af-anima .sala .pieza.encendida .peana svg { animation: obra-sale 900ms var(--curva-papel) 400ms backwards; }
  .af-anima .sala .pieza.encendida .cartela { animation: papel-entra var(--d-papel) var(--curva-papel) 1000ms backwards; }
}
@keyframes foco-enciende { from { opacity: .3; } }
@keyframes obra-sale { from { opacity: 0; } }

/* Ninguna pieza con esa búsqueda */
.vacia { display: grid; gap: var(--e-s); justify-items: start; max-width: 40rem; }
.vacia h3 { font-size: var(--t-sub); }
.vacia p { color: var(--tinta-suave); }

.cierre { margin-top: var(--e-xxl); padding-top: var(--e-l); border-top: 1px solid color-mix(in srgb, var(--oro) 20%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-m) var(--e-xxl); }
.cierre p { color: var(--marfil-suave); max-width: 46em; font-size: var(--t-secundario); }

/* ---------- Tableta ---------- */
@media (max-width: 980px) {
  .piezas { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Móvil: cada pieza en su hornacina, peana a la izquierda y cartela a la derecha ---------- */
@media (max-width: 640px) {
  .cab-vitrina .marco { padding-top: var(--e-l); }
  .cab-fila { gap: var(--e-m); margin-bottom: var(--e-m); }
  .cab-fila .intro p { font-size: var(--t-secundario); }
  .barra-filtros { flex-direction: column-reverse; align-items: stretch; gap: var(--e-s); }
  .orden { padding-bottom: 0; justify-content: stretch; gap: var(--e-s); }
  .orden .campo { flex: 1 1 100%; }
  .orden label { flex: none; min-width: 4.25rem; }
  .orden select, .orden input { flex: 1; min-width: 0; width: auto; }
  .pestanas { gap: 0; }
  .pestana { padding: 10px 12px 10px 20px; font-size: 1rem; }
  .pestana::before { left: 7px; width: 7px; height: 7px; }
  .pestana .cuenta { display: none; }
  .sala { padding-block: var(--e-l) var(--e-xxl); }
  .piezas { grid-template-columns: 1fr; gap: var(--e-l); }
  .pieza { grid-template-columns: 112px 1fr; grid-template-rows: none; gap: var(--e-s); align-items: stretch; }
  .peana { height: auto; min-height: 210px; background: radial-gradient(60% 70% at 50% 0%, rgba(255,226,170,.20), rgba(255,226,170,0) 75%); }
  .peana svg { height: 128px; }
  .peana::after { width: 78%; height: 26px; }
  .cartela { padding: var(--e-m) var(--e-m) var(--e-m) 20px; }
  .cartela h3 { font-size: 1.25rem; }
  .cartela .autor, .cartela .tecnica { font-size: var(--t-secundario); line-height: 1.4; }
  .cartela .fila { flex-wrap: wrap; gap: 0 var(--e-s); }
  .cierre { margin-top: var(--e-xl); }
}