/* Rediseño compacto: hogar (panel Decorar) — prefijo hd- */
.decor-panel { grid-template-columns: minmax(0, 1fr); }
#decorBody.hd-body { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: hidden; }
#decorBody.hd-body > .hidden { display: none !important; }

/* Cabecera en una fila */
.hd-head { display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto minmax(0, 1.3fr) auto; gap: 8px; align-items: stretch; padding: 8px; border-radius: 12px; background: linear-gradient(135deg, #fff6dc, #f0dfba); border: 2px solid var(--edge-dark); box-shadow: 0 3px 0 var(--edge-dark); }
.hd-stat { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border-radius: 9px; background: rgba(255, 250, 240, .75); border: 1px solid var(--paper-2); }
.hd-stat-l { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; line-height: 1.15; }
.hd-stat-l b { font: 900 14px 'Nunito', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-stat-l small { font: 700 11px/1.2 'Nunito', sans-serif; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-lbl { font: 800 10px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hd-stat .btn.small { flex: 0 1 auto; padding: 4px 9px; min-height: 30px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; max-width: 170px; }
.hd-num { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 4px 12px; }
.hd-num b { font: 900 20px/1 'Nunito', sans-serif; color: var(--ink); }
.hd-animos b { color: #b8842a; }
.hd-bar { width: 64px; height: 5px; border-radius: 3px; background: #e3d3b4; overflow: hidden; }
.hd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8ad86a, #3f8f3a); }
.hd-help-btn { align-self: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--edge-dark); background: var(--paper); color: var(--edge-dark); font: 900 16px 'Nunito', sans-serif; cursor: pointer; padding: 0; }
.hd-help-btn.on { background: var(--accent); color: #fff; }
.hd-help { margin: 0; padding: 6px 10px; border-radius: 9px; background: #fffaf0; border: 1px dashed var(--edge); font: 700 12px/1.35 'Nunito', sans-serif; color: var(--muted); }

/* Dos columnas: tus muebles | catálogo */
.hd-tabs { display: none; }
.hd-cols { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px; min-height: 0; }
.hd-col { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-width: 0; min-height: 0; }
.hd-colh { display: grid; gap: 6px; }
.hd-colh .cx-h { margin: 0; }
.hd-chips .cx-chip { padding: 3px 10px; font-size: 12px; box-shadow: none; min-height: 0; height: auto; line-height: 1.4; }
/* .act es también la clase de los botones del HUD (en táctil van en posición absoluta): se neutraliza aquí */
.hd-chips .cx-chip.act, html.touch .hd-chips .cx-chip.act { position: static; display: inline-flex; min-width: 0; min-height: 0; border-radius: 999px; gap: 4px; transform: none; box-shadow: none; }
.hd-chips .cx-chip.act:not(.on):hover { background: #fff3cc; border-color: var(--edge); }
.hd-chips .cx-chip.act:not(.on) { background: var(--paper-3); color: var(--ink); }
.hd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hd-search { flex: 1 1 140px; min-width: 0; max-width: 240px; margin-left: auto; padding: 5px 10px; border-radius: 999px; border: 2px solid var(--paper-2); background: #fffaf0; font: 700 13px 'Nunito', sans-serif; color: var(--ink); }
.hd-search:focus { outline: none; border-color: var(--edge); }
.hd-scroll { overflow-y: auto; min-height: 0; padding-right: 2px; }
.hd-empty { margin: 0; padding: 12px; text-align: center; font: 800 12px 'Nunito', sans-serif; color: var(--muted); border: 2px dashed var(--paper-2); border-radius: 10px; grid-column: 1 / -1; }
.hd-ic { image-rendering: pixelated; flex: none; border-radius: 8px; }

/* Lista de tus muebles */
.hd-list { display: grid; gap: 4px; align-content: start; }
.hd-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; background: #fffaf0; border: 2px solid var(--paper-2); }
.hd-row.placed { border-color: rgba(184, 132, 42, .6); background: #fff6dc; }
.hd-row .hd-ic { background-color: var(--paper-3); }
.hd-row-i { display: grid; min-width: 0; line-height: 1.15; }
.hd-row-i b { font: 800 13px 'Nunito', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-row-i small { font: 700 11px 'Nunito', sans-serif; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-row.placed .hd-row-i small { color: #8a5a00; }
.hd-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 176px; }
.hd-acts .btn.small { padding: 3px 8px; min-height: 26px; font-size: 11px; text-align: center; }

/* Catálogo en mosaico */
.hd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; align-content: start; }
.hd-tile { position: relative; display: grid; grid-template-rows: 48px auto auto 1fr; justify-items: center; gap: 2px; padding: 6px 5px; border-radius: 10px; background: #fffaf0; border: 2px solid var(--paper-2); text-align: center; min-width: 0; }
.hd-tile:hover { border-color: var(--edge); }
.hd-tile b { font: 800 12px/1.15 'Nunito', sans-serif; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-zone { font: 800 9px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; border-radius: 999px; background: var(--paper-2); color: var(--muted); }
.hd-zone.room { background: #f3e2c8; color: #7a4a1a; }
.hd-zone.garden { background: #dcefd2; color: #2a6627; }
.hd-tile > .btn.small { align-self: end; width: 100%; margin-top: 3px; padding: 3px 4px; min-height: 26px; font-size: 11px; text-align: center; white-space: nowrap; }
.hd-own { position: absolute; top: 4px; right: 5px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #3a2a10; font: 900 10px/15px 'Nunito', sans-serif; font-style: normal; }
.hd-tile.trophy.got { border-color: var(--gold-dark); background: linear-gradient(180deg, #fff6dc, #f3e2bd); }
.hd-tile.trophy.locked > :not(.hd-how) { opacity: .55; filter: grayscale(.6); }
.hd-how, .hd-got { align-self: end; font: 700 10px/1.2 'Nunito', sans-serif; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hd-got { color: #8a5a00; }

/* Pantallas medianas: la cabecera se reparte en dos filas */
@media (max-width: 980px) {
  .hd-head { grid-template-columns: minmax(0, 1fr) auto auto; }
  .hd-house { grid-column: 1; } .hd-farm { grid-column: 1; grid-row: 2; }
  .hd-help-btn { grid-column: 3; grid-row: 2; justify-self: end; }
  .hd-cols { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
/* Estrecho / móvil: pestañas en lugar de dos columnas, todo con scroll normal */
@media (max-width: 720px) {
  #decorBody.hd-body { display: grid; grid-template-rows: none; overflow-y: auto; padding: 8px; }
  .hd-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-auto-flow: row dense; padding: 6px; gap: 6px; }
  .hd-house, .hd-farm { grid-column: 1 / -1; grid-row: auto; }
  .hd-num { grid-row: auto; }
  .hd-help-btn { grid-column: auto; grid-row: auto; }
  .hd-tabs { display: flex; width: 100%; }
  .hd-tabs .seg-opt { flex: 1 1 0; text-align: center; padding: 7px 4px; font-size: 12px; }
  .hd-cols { grid-template-columns: minmax(0, 1fr); }
  .hd-cols.side-mine .hd-shop, .hd-cols.side-shop .hd-mine { display: none; }
  .hd-col { grid-template-rows: none; }
  .hd-scroll { overflow: visible; }
  .hd-search { max-width: none; margin-left: 0; flex-basis: 100%; }
  .hd-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .hd-acts { max-width: 164px; }
}