/* =========================================================
   Mi Piano — armario
   ---------------------------------------------------------
   Armario de Chato: Chato fijo a la izquierda, accesorios a la derecha.
   ========================================================= */
body.armario-on .armariodlg{display:block}
/* con el armario abierto la página de detrás no se mueve */
body.armario-on{overflow:hidden}
/* el diálogo es una columna: cabecera fija arriba y, debajo, Chato a la
   izquierda (siempre visible) y la lista de accesorios a la derecha */
body.armario-on #armario{display:flex;flex-direction:column;overflow:hidden}
/* altura CONCRETA (no sólo max-height): así el hueco de los accesorios sabe
   cuánto mide y hace su propio scroll en vez de empujar la página */
.modalbox.armariodlg{width:min(720px,calc(100vw - 24px));
  height:min(620px,calc(100vh - 32px));max-height:calc(100vh - 32px)}
#armario > .juego-top, #armarioinfo{flex:0 0 auto}
.armariocuerpo{display:flex;gap:16px;align-items:stretch;flex:1 1 auto;min-height:0;margin-top:4px}
.armariolado{flex:0 0 152px;display:flex;flex-direction:column;gap:8px;align-self:flex-start}
.armarioperro{width:100%;aspect-ratio:110/114;background:#fbf8f1;border-radius:16px;
  border:1px solid var(--line);padding:6px}
.armarioperro svg{width:100%;height:100%;display:block}
.armariolleva{margin:0;font-size:.74rem;line-height:1.35;color:var(--soft);text-align:center}
#armarioquitar[disabled]{opacity:.45;cursor:default}
.armariogrid{flex:1 1 auto;min-width:0;min-height:0;height:100%;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:4px}
.armariogrid h5{margin:0 0 7px;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.8px;color:var(--soft);display:flex;align-items:center;gap:6px}
.armariogrid h5 + .armariofila{margin-bottom:14px}
.armariogrid h5:not(:first-child){margin-top:2px}
.armariotag{text-transform:none;letter-spacing:0;font-size:.68rem;color:#8a6d1f;
  background:#fdf3dd;border:1px solid #ecd9ae;border-radius:999px;padding:1px 8px}
.armariofila{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.acc{border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  padding:6px 4px;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px}
.acc:hover{border-color:var(--gold);background:#fffaf0}
.acc.puesto{border-color:var(--gold);background:#fdf3dd;box-shadow:inset 0 0 0 2px var(--gold)}
.acc.bloqueado{opacity:.45;cursor:default;background:#f5f2ea}
.acc.bloqueado:hover{border-color:var(--line)}
.accmini{width:56px;height:56px;display:block}
.accmini svg{width:100%;height:100%;display:block}
.accnom{font-size:.66rem;color:var(--soft);text-align:center;line-height:1.2}
/* en móvil Chato se queda pegado arriba, en pequeño, y los accesorios debajo */
@media (max-width:600px){
  .armariocuerpo{flex-direction:column;gap:10px;align-items:stretch}
  .armariolado{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;
    width:100%;background:#fff;padding-bottom:8px;
    border-bottom:1px solid var(--line);align-self:stretch}
  .armarioperro{width:74px;flex:0 0 74px;aspect-ratio:110/114;border-radius:12px;padding:4px}
  .armariolleva{flex:1;text-align:left}
  .armariogrid{width:100%;height:auto}
}
.fiestagift{display:none;background:#fdf3dd;border:1px solid #ecd9ae;border-radius:12px;
  padding:9px 13px;margin:0 0 14px;font-size:.9rem}
.fiestagift.hay{display:flex;align-items:center;gap:10px;justify-content:center}
.fiestagift .accmini{width:44px;height:44px;flex:0 0 44px}