/* Estudio 3D: planificador de estancia */
.est { padding-top: calc(var(--head-h) + 50px); padding-bottom: 110px; }
.est__head { margin-bottom: 40px; max-width: 880px; display: grid; gap: 18px; }
.est__app { display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.est .core { padding: 22px; display: grid; gap: 26px; }
.est__t { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--txt-soft); margin-bottom: 14px; display: flex; justify-content: space-between; }
.est__side, .est__panel { position: sticky; top: 96px; max-height: calc(100dvh - 116px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.est__presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.est__dims { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est__cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.est__cats .chip { padding: 6px 12px; font-size: 12.5px; }
.est__pick { display: grid; gap: 8px; max-height: 300px; overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.est__opt { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; border: 1px solid var(--hair); text-align: left; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.est__opt:hover { border-color: var(--cu); background: color-mix(in srgb, var(--cu) 6%, transparent); }
.est__opt:active { transform: scale(.985); }
.est__opt img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--por2); }
.est__opt b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.25; }
.est__opt small { color: var(--txt-soft); font-size: 12px; }
.est__opt .ic { width: 18px; height: 18px; color: var(--cu-d); }
.est__items { display: grid; gap: 8px; }
.est__item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--hair); cursor: pointer; transition: border-color .3s, background .3s; }
.est__item.is-sel { border-color: var(--cu); background: color-mix(in srgb, var(--cu) 8%, transparent); }
.est__item b { font-weight: 500; font-size: 13.5px; }
.est__item small { color: var(--txt-soft); font-size: 12px; grid-column: 1; }
.est__item .ic-btn { width: 32px; height: 32px; grid-row: 1 / span 2; grid-column: 2; }
.est__item .ic-btn .ic { width: 15px; height: 15px; }
.est__empty { color: var(--txt-soft); font-size: 14px; line-height: 1.5; padding: 4px; }

.est__stage { display: grid; gap: 12px; min-width: 0; }
.est__view { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3.1; background: radial-gradient(120% 90% at 50% 0, #1d2025, #0b0c0e 72%); touch-action: none; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--hair-inv); }
.est__view canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.est__view canvas.is-drag { cursor: grabbing; }
.est__toolbar { position: absolute; top: 14px; left: 14px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; }
.est__toolbar .chip { background: rgba(14, 15, 18, .62); color: var(--txt-inv); border-color: var(--hair-inv); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.est__toolbar .chip[aria-pressed='true'] { background: var(--por); color: var(--obs); }
.est__hint { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; font-size: 12.5px; color: var(--txt-inv-soft); text-align: center; pointer-events: none; transition: opacity .6s; }
.est__hint.is-off { opacity: 0; }
.est__loading, .est__static { position: absolute; inset: 0; display: grid; place-items: center; color: var(--txt-inv-soft); font-size: 14px; text-align: center; padding: 30px; z-index: 3; pointer-events: none; }
.est__label { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, -50%); font: 500 11px var(--mono); letter-spacing: .04em; color: var(--txt-inv); background: rgba(14, 15, 18, .7); padding: 3px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--hair-inv); }
.est__label--cu { color: var(--cu-l); }
.est__selbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 22px; border: 1px solid var(--hair); background: #fbfaf7; }
.est__selbar b { font-weight: 500; font-size: 14px; margin-right: auto; padding-left: 6px; }
.est__selbar .chip { padding: 6px 14px; font-size: 13px; }

.est__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--por2); }
.est__tabs button { flex: 1; padding: 9px 12px; border-radius: 999px; font-size: 13.5px; transition: background .3s var(--ease), color .3s; }
.est__tabs button[aria-selected='true'] { background: var(--obs); color: var(--txt-inv); }
.est__tabs b { font-weight: 500; font-size: 11px; margin-left: 4px; color: var(--cu-d); }
.est__tabs button[aria-selected='true'] b { color: var(--cu-l); }
.est__pane { display: grid; gap: 12px; align-content: start; }
.est__pane[hidden] { display: none; }
.w { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; border: 1px solid var(--hair); }
.w .ic { width: 18px; height: 18px; margin-top: 1px; }
.w b { font-weight: 500; display: block; }
.w--bad { border-color: #d9826a; background: #fbeee9; color: #7a2c19; }
.w--warn { border-color: var(--cu); background: color-mix(in srgb, var(--cu) 10%, transparent); color: #6d3a1e; }
.w--ok { border-color: #8fb79a; background: #eef6f0; color: #28513a; }
.w--info { color: var(--txt-soft); }
.est__sum { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); }
.est__sum .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--txt-soft); }
.est__sum .row b { font: 400 30px var(--serif); color: var(--txt); }
.est__calc { display: grid; gap: 14px; }
.est__res { padding: 16px; border-radius: 18px; background: var(--obs); color: var(--txt-inv); display: grid; gap: 4px; }
.est__res b { font: 400 36px/1 var(--serif); color: var(--cu-l); }
.est__res span { font-size: 13px; color: var(--txt-inv-soft); }
.est__seg { display: flex; gap: 6px; flex-wrap: wrap; }
.est__seg .chip { font-size: 13px; padding: 7px 14px; }
@media (max-width: 1180px) {
  .est__app { grid-template-columns: 320px minmax(0, 1fr); }
  .est__panel { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 860px) {
  .est__app { grid-template-columns: 1fr; }
  .est__side { position: static; max-height: none; order: 2; }
  .est__stage { order: 1; }
  .est__panel { order: 3; }
  .est__view { aspect-ratio: 1 / 1.08; }
}

@media (max-width: 860px) { .est__hint { display: none; } }