/* The 3D preview: one full-width stage with the controls above it and the lot card (plan and specs) at the bottom right;
   the card stacks under the stage on phones. Colors, type and buttons come from css/base.css. */
html, body { height: 100%; }
body { line-height: 1.45; }
main { height: 100%; display: grid; grid-template-rows: auto 1fr; }
header { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-2) var(--space-4); padding-left: max(var(--space-4), env(safe-area-inset-left)); padding-right: max(var(--space-4), env(safe-area-inset-right)); border-bottom: 1px solid var(--line); background: var(--white); }
.back { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--teal); font-family: var(--font-wordmark); font-size: var(--text-lg); text-decoration: none; }
.back:hover { text-decoration: underline; }
.pick { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.pick .control { width: auto; max-width: 14rem; font-weight: 400; }
header h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--teal); margin: 0; }
.styles, .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.actions { margin-left: auto; }
.stage { position: relative; min-height: 420px; min-width: 0; touch-action: none; cursor: grab; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
.stage-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: var(--space-3); background: var(--cream); color: var(--ink-2); font-size: var(--text-sm); }
.skeleton { display: block; width: min(320px, 70vw); height: 180px; border-radius: 16px; background: linear-gradient(90deg, var(--sand), var(--white), var(--sand)); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.lost { position: absolute; inset: 0; display: grid; place-items: center; background: var(--cream); color: var(--ink); font-size: var(--text-base); padding: var(--space-6); text-align: center; }
.lost .btn { margin-top: var(--space-3); }
.card { position: absolute; right: 1rem; bottom: 1rem; width: min(380px, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-4) var(--space-4); display: grid; gap: var(--space-2); box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 25%, transparent); }
.card h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--teal); margin: 0; }
.card .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); font-variant-numeric: tabular-nums; }
.card .nums div { border: 1px solid var(--line); border-radius: 10px; padding: var(--space-2) var(--space-2); }
.card .nums b { display: block; font-size: var(--text-base); }
.card .nums span { font-size: var(--text-xs); color: var(--ink-2); }
.hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-touch { display: none; } .hint-mouse { display: inline; } }
.card p { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
.card .muted { color: var(--ink-2); font-size: var(--text-xs); }
.card a { color: var(--teal); font-weight: 600; }
.card .reserve a { color: var(--warm-strong); }
.card svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 10px; }
.card ul { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.45; }
.hint { position: absolute; left: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem); font-size: var(--text-xs); color: var(--ink-2); background: var(--white); padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: 10px; }
.legend { position: absolute; left: 0.75rem; top: 0.75rem; display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--ink-2); background: var(--white); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: 10px; }
.legend .note { margin-top: var(--space-1); max-width: 190px; }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); vertical-align: -1px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.sw-d { background: var(--lot-available); } .sw-p { background: var(--lot-soon); } .sw-r { background: var(--lot-reserved); } .sw-v { background: var(--lot-sold); }
/* The lot plan: every fill and stroke is a --plan-* token; labels are 13 px because the plan is drawn at its shown width. */
.pl-paper { fill: var(--plan-paper); }
.pl-street { fill: var(--plan-street); }
.pl-lot { fill: var(--plan-lot); stroke: var(--teal); stroke-width: 2; }
.pl-thin { stroke-width: 1; }
.pl-buildable { fill: none; stroke: var(--teal); stroke-width: 1; }
.pl-hatch { stroke: var(--plan-hatch); stroke-width: 1; }
.pl-item { stroke: var(--plan-edge); stroke-width: 1; }
.pl-porche, .pl-cochera { fill: url(#hatch); }
.pl-entrada, .pl-sendero { fill: var(--plan-path); }
.pl-terraza { fill: var(--plan-terrace); }
.pl-patio { fill: var(--plan-patio); }
.pl-jardin { fill: var(--plan-garden); }
.pl-piscina { fill: var(--plan-pool); stroke: var(--plan-pool-edge); }
.pl-tree { fill: var(--plan-tree); stroke: var(--plan-trunk); }
.pl-trunk, .pl-dot { fill: currentColor; }
.pl-trunk { color: var(--plan-trunk); }
.pl-room { fill: var(--white); stroke: var(--plan-ink); stroke-width: 2.2; }
.pl-open { fill: var(--plan-open); }
.pl-gap { stroke: var(--white); stroke-width: 3; }
.pl-swing { fill: none; stroke: var(--plan-ink); stroke-width: 0.8; }
.pl-window { stroke: var(--plan-window); stroke-width: 3; }
.pl-dim { stroke: var(--teal); stroke-width: 0.8; }
.pl-inset { fill: var(--white); stroke: var(--plan-frame); }
.pl-frame { fill: none; stroke: var(--warm-strong); stroke-width: 1; }
.pl-scale { stroke: var(--plan-ink); stroke-width: 3; }
.pl-arrow { stroke: currentColor; stroke-width: 1.6; }
.pl-label { font-family: var(--font-body); font-size: var(--text-xs); fill: currentColor; color: var(--plan-ink); }
.pl-strong { font-weight: 600; color: var(--plan-ink); }
.pl-muted { color: var(--plan-muted); }
.pl-accent { color: var(--teal); }
.pl-breeze { color: var(--plan-breeze); }
@media (max-width: 700px) {
  .hint { position: static; display: block; margin: var(--space-2) var(--space-3); }
  .card { position: static; width: auto; max-height: none; margin: 0; }
  main { grid-template-rows: auto 1fr auto; }
  .legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); right: 0.75rem; padding: var(--space-2) var(--space-3); }
  .legend .note { display: none; }
  .actions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { background: var(--sand); }
}