/* Iteracion 2: capa premium (se aplica encima de app.css, sin romper nada) */
:root{
  --surface:#0f0f14; --surface2:#15151c; --hair:#1f1f28;
  --glow:0 0 0 1px rgba(255,255,255,.03), 0 24px 60px -30px rgba(0,0,0,.9);
  --fs-hero:clamp(26px,7vw,40px);
}
body{letter-spacing:.005em}

/* ---------- inicio ---------- */
.home{padding-top:6px}
.home-hero{display:flex;flex-direction:column;gap:4px;margin:6px 2px 18px}
.home-hero h1{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.02em;margin:0}
.home-hero p{color:var(--muted);font-size:13px;margin:0}
.home-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:16px 0 22px}
.recents{display:flex;flex-direction:column;gap:12px}
.recent{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--hair);border-radius:20px;padding:14px;box-shadow:var(--glow);transition:transform .14s,border-color .14s}
.recent:active{transform:scale(.985)}
.recent.active{border-color:rgba(34,211,238,.5)}
.recent-cover{width:64px;height:64px;border-radius:14px;background:#171720 center/cover no-repeat;border:1px solid var(--hair);
  display:grid;place-items:center;font-size:22px}
.recent-name{font-weight:700;font-size:15px;line-height:1.25}
.recent-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.recent-pct{font-weight:800;font-size:19px;text-align:right}
.recent-pct small{display:block;font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.08em}

/* ---------- proyecto ---------- */
.proj-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.proj-title{font-size:clamp(22px,6vw,30px);font-weight:800;letter-spacing:-.02em;margin:0}
.proj-sub{color:var(--muted);font-size:13px}
.proj-progress{display:flex;align-items:flex-end;gap:14px;margin:8px 0 4px}
.proj-progress b{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.03em}
.proj-progress span{color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding-bottom:6px}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:12px}
.tool{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;background:var(--surface);
  border:1px solid var(--hair);border-radius:16px;font-size:12px;color:var(--fg)}
.tool i{font-style:normal;font-size:20px;opacity:.9}
.tool:active{transform:scale(.97)}

/* ---------- rodaje minimo ---------- */
.shoot-min{display:flex;flex-direction:column;gap:12px}
.shoot-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px}
.shoot-scene{font-size:12px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.small-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.small-controls button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;font-size:10.5px;
  letter-spacing:.06em;background:var(--surface);border:1px solid var(--hair);border-radius:14px;color:var(--muted);text-transform:uppercase}
.small-controls button.on{color:var(--fg);border-color:rgba(34,211,238,.45);background:#121a1e}
.small-controls button i{font-style:normal;font-size:17px}
.big-action{padding:24px;font-size:20px;font-weight:800;letter-spacing:.03em;border-radius:22px}

/* ---------- panel rapido deslizable ---------- */
.drawer-backdrop{position:fixed;inset:0;z-index:70;background:rgba(4,4,7,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.drawer-backdrop.open{opacity:1}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--bg2);border-top:1px solid var(--hair);
  border-radius:22px 22px 0 0;padding:14px 16px calc(20px + var(--safe-bottom));transform:translateY(102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);
  max-height:82dvh;overflow-y:auto}
.drawer.open{transform:translateY(0)}
.drawer-grip{width:44px;height:4px;border-radius:99px;background:#2a2a34;margin:0 auto 14px}
.dr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.dr-row:last-child{border-bottom:0}
.dr-row .dr-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dr-row .dr-value{font-weight:700}
.dr-ctl{display:flex;align-items:center;gap:10px}
.switch{width:52px;height:30px;border-radius:99px;background:#24242e;position:relative;transition:.18s;flex:none;border:1px solid var(--hair)}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#6a6a78;transition:.18s}
.switch.on{background:linear-gradient(135deg,var(--accent2),#3b82f6);border-color:transparent}
.switch.on i{left:26px;background:#fff}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--hair);font-size:19px}
.stepper input{width:74px;text-align:center;font-weight:700}

/* ---------- camara: mas limpio ---------- */
.stage .hud{padding:calc(var(--safe-top) + 10px) 16px calc(var(--safe-bottom) + 16px)}
.rec-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:rgba(255,59,48,.14);
  border:1px solid rgba(255,59,48,.4);color:#fff;font-weight:700;letter-spacing:.1em;font-size:12px}
.rec-pill i{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1.1s infinite}
.time-pill{padding:6px 12px;border-radius:99px;background:rgba(10,10,14,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);
  font-variant-numeric:tabular-nums;font-weight:700}
.voice-badge{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(10,10,14,.55);
  border:1px solid rgba(255,255,255,.12);font-size:12px;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-badge.live{border-color:rgba(55,214,122,.5);color:#eafff4}
.voice-badge.hit{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(34,211,238,.25)}
.cd-hint{font-size:15px;letter-spacing:.06em;color:rgba(255,255,255,.85);text-align:center;margin-top:10px}
.countdown b.hot{color:transparent;background:linear-gradient(180deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text}
.ai-card{margin-top:10px;border-radius:16px;padding:12px;border:1px solid var(--hair);background:var(--surface)}
.ai-card.good{border-color:rgba(55,214,122,.5)}.ai-card.warn{border-color:rgba(255,176,32,.5)}.ai-card.bad{border-color:rgba(255,107,107,.5)}
.ai-verdict{font-weight:800;letter-spacing:.06em;margin-bottom:4px}
.ai-tips{margin:6px 0 0 16px;padding:0;font-size:13px}
.ai-tips li{margin:3px 0}
.quality{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.quality span{padding:5px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--hair);font-size:11.5px}
.status-line{display:flex;align-items:center;gap:8px;font-size:13px}
.status-line .dot{width:9px;height:9px;border-radius:50%;background:#6a6a78;flex:none}
.status-line.rec .dot{background:var(--rec);animation:blink 1.1s infinite}
.status-line.up .dot{background:var(--warn)}.status-line.ok .dot{background:var(--ok)}.status-line.fail .dot{background:var(--red,#ff6b6b)}
.native-hero{text-align:center;padding:10px 0}
.native-hero b{display:block;font-size:clamp(24px,8vw,38px);font-weight:800;letter-spacing:-.02em}
.steps{counter-reset:s;margin:12px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;margin:10px 0;font-size:13.5px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:1px solid var(--hair);font-weight:700;font-size:12px}

/* ---------- horizontal (videoclip 16:9) ---------- */
@media (orientation: landscape) and (max-height:560px){
  .stage .hud{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:calc(var(--safe-top) + 6px) calc(var(--safe-bottom) + 8px) 10px calc(var(--safe-bottom) + 8px)}
  .stage .hud-top{position:absolute;top:calc(var(--safe-top) + 6px);left:14px;right:14px;flex-direction:row;align-items:center;justify-content:space-between}
  .stage .hud-bottom{flex:1;max-width:min(52%,420px);max-height:calc(100dvh - 20px);overflow-y:auto}
  .tele.bottom{bottom:12%;left:38%;right:2%}
  .tele.top{top:10%;left:38%;right:2%}
  .timer{font-size:34px}
  .countdown b{font-size:min(24vh,190px)}
  #tabbar{padding:4px 6px calc(4px + var(--safe-bottom))}
  .tab span{display:none}
}
.rotate-hint{display:none}
@media (orientation: portrait){
  .stage .rotate-hint{display:block}
}

/* ---------- iteracion 3: wizard, preview, onboarding, segmentos ---------- */
.onboard{border-color:rgba(34,211,238,.35);background:linear-gradient(180deg,#121a1e,#0f0f14)}
.wizard h2{margin:16px 0 6px;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wizard .f>span{font-size:11px}
.choice{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--hair);border-radius:18px;
  background:var(--surface);margin-bottom:10px;transition:border-color .15s,transform .12s}
.choice.on{border-color:var(--accent2);box-shadow:0 0 0 1px rgba(34,211,238,.25) inset}
.choice:active{transform:scale(.99)}
.choice-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.choice-head b{font-size:15px}
.segs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;-webkit-overflow-scrolling:touch}
.segs::-webkit-scrollbar{display:none}
.seg{flex:none;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--hair);
  color:var(--muted);font-size:12.5px;letter-spacing:.04em}
.seg.on{color:var(--fg);border-color:var(--accent2);background:#121a1e}
.tools.big{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.tools.big .tool{padding:16px 10px;gap:4px}
.tools.big .tool b{font-size:12px;letter-spacing:.06em}
.preview-stage{position:relative;margin-top:12px;border-radius:16px;overflow:hidden;background:#000;min-height:180px}
.preview-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);
  background:repeating-linear-gradient(45deg,#0c0c10,#0c0c10 12px,#0f0f14 12px,#0f0f14 24px);
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:20px}
.preview-bar{height:7px;border-radius:99px;background:#20202a;overflow:hidden;margin-top:8px}
.preview-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .15s linear}
.preview-now{font-weight:700;font-size:13px}
.shot.current{border-color:var(--accent2)}