*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fff6e5;color:#3a2a10}
.hidden{display:none!important}
.screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.card{background:#fff;border-radius:22px;box-shadow:0 8px 30px rgba(120,70,0,.18);padding:24px;max-width:440px;width:100%;text-align:center}
h1{margin:.2em 0 .4em;font-size:1.7rem}
.lead{font-size:1.05rem}
label{display:block;font-size:1.4rem;font-weight:700;margin:12px 0}
input{font-size:1.6rem;width:8ch;text-align:center;padding:8px;border:3px solid #f0a020;border-radius:12px}
.btn{display:block;width:100%;margin:12px 0 0;padding:14px;font-size:1.15rem;font-weight:700;border:0;border-radius:14px;background:#f08a00;color:#fff;cursor:pointer}
.btn.secondary{background:#fff;color:#a05a00;border:2px solid #f0a020}
.btn.small{display:inline-block;width:auto;margin:3px;padding:9px 11px;font-size:.92rem}
.msg{color:#b00020;min-height:1.2em}
.steps{text-align:left;padding-left:1.2em;line-height:1.5}
.privacy{font-size:.85rem;color:#6b5a40;margin-top:16px}
#ar{position:fixed;inset:0;background:#000}
#arContainer{position:absolute;inset:0;overflow:hidden}
#hud{position:absolute;inset:0;pointer-events:none}
#hud .bar{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));text-align:center;pointer-events:auto}
.pill{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;padding:8px 16px;border-radius:20px;font-weight:600;white-space:nowrap}
#preview{position:absolute;right:10px;top:60px;width:96px;height:auto;border:3px solid #fff;border-radius:8px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.btn.on{background:#2a7de1}

#capture{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);border-radius:24px;padding:18px 22px;text-align:center;width:min(82vw,320px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
#capture svg{display:block;margin:0 auto;transform:rotate(-90deg)}
#capture .ringBg{fill:none;stroke:#ffe2b0;stroke-width:12}
#capture .ring{fill:none;stroke:#f08a00;stroke-width:12;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset .15s linear}
#capPct{position:relative;margin-top:-78px;height:78px;font-size:1.4rem;font-weight:800;color:#a05a00}
#capText{margin:10px 0 0;font-weight:700;font-size:1.05rem}

.btn.room{background:#2e9d4b}
#room{position:fixed;inset:0;background:linear-gradient(#fff6e5,#ffe7bf);z-index:20;display:flex;flex-direction:column}
.roomTop{display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 6px}
.roomHint{font-weight:700;color:#7a4a00}
#mvHost{flex:1;position:relative;min-height:0}
#mvHost model-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent}
.arBtn{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(86vw,360px);font-size:1.25rem;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.roomMsg{margin:0;padding:8px 16px max(14px,env(safe-area-inset-bottom));text-align:center;font-weight:600;color:#6b4a10;min-height:1.2em}

/* Botones siempre por encima de las capas (MindAR pone capas a pantalla completa con z-index 2) */
#ar{z-index:5}
#hud{z-index:30}
#hud .bar{z-index:31}
.mindar-ui-overlay{pointer-events:none!important}
#capture{pointer-events:none}
.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}