/* Director IA — estilos (solo celular, vertical) */
:root { --bg:#000; --card:#1b1b1d; --red:#d93025; --txt:#fff; --mut:#aaa; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--txt); overflow:hidden;
  font-family:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
section { position:fixed; inset:0; background:var(--bg); }
[hidden] { display:none !important; }
h1 { font-size:30px; font-weight:800; margin:0 0 10px; }
h2 { font-size:22px; margin:18px 0 6px; text-align:center; }
.muted { color:#ddd; font-size:15px; line-height:1.4; }
.small { font-size:13px; opacity:.6; }

/* ---------- piezas comunes ---------- */
.scroll { position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(env(safe-area-inset-top) + 28px) 20px 170px; }
.bar { position:absolute; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom) + 28px); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:5; }
.btn { background:var(--red); color:#fff; border:0; border-radius:14px; padding:16px 28px; font:inherit; font-size:16px; font-weight:700; width:100%; }
.btn.gray { background:#333; }
.btn:disabled { opacity:.5; }
.link { background:none; border:0; color:#ddd; font:inherit; font-size:15px; text-decoration:underline; padding:6px; }
.item { display:flex; align-items:center; gap:12px; background:var(--card); border:2px solid transparent; border-radius:16px; padding:16px; margin-top:12px; }
.item.on { border-color:var(--red); }
.item .t { font-size:17px; font-weight:700; }
.item .s { color:var(--mut); font-size:13px; margin-top:3px; }
.item .s.bad { color:#ff8a80; }
.badge { background:#2b2b2e; border-radius:12px; padding:8px 14px; font-size:15px; font-weight:700; white-space:nowrap; }
.badge.bad { background:#7a2a2a; }
.glass { background:rgba(46,46,48,.52); -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5); border:1px solid rgba(255,255,255,.15); color:#fff; }
.circ { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; }
.spinner { width:44px; height:44px; border:4px solid #444; border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; }
.spin-sm { width:22px; height:22px; border-width:3px; }
@keyframes spin { to { transform:rotate(360deg); } }
.center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:8px; }
.center .btn { max-width:420px; margin-top:8px; }
.errtxt { color:#ff8a80; text-align:center; margin:8px 0 18px; line-height:1.4; }
.shade-top { position:absolute; top:0; left:0; right:0; height:230px; background:linear-gradient(rgba(0,0,0,.55), transparent); pointer-events:none; }
.shade-bot { position:absolute; bottom:0; left:0; right:0; height:360px; background:linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events:none; }
.toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 150px); transform:translateX(-50%); background:rgba(0,0,0,.8); color:#fff; padding:10px 18px; border-radius:20px; font-size:15px; z-index:70; max-width:90%; text-align:center; }

/* ---------- 3. grabación en vivo ---------- */
#cam-preview { touch-action:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
#live-x, #ed-x, #pl-x { position:absolute; top:calc(env(safe-area-inset-top) + 14px); left:16px; z-index:6; }
.timer { position:absolute; top:calc(env(safe-area-inset-top) + 26px); right:18px; display:flex; align-items:center; gap:10px; font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.timer .dot { width:14px; height:14px; border-radius:50%; background:#8a8a8e; display:block; }
.timer .dot.live { background:#ff3b4e; animation:blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.35; } }
.brand { position:absolute; top:calc(env(safe-area-inset-top) + 30px); right:14px; display:flex; align-items:center; gap:6px; font-size:16px; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.steppill { position:absolute; top:calc(env(safe-area-inset-top) + 84px); left:50%; transform:translateX(-50%); padding:8px 22px; border-radius:22px; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.22); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:16px; white-space:nowrap; }
.qcard { position:absolute; left:14px; right:78px; bottom:calc(env(safe-area-inset-bottom) + 152px); padding:14px 18px 15px; border-radius:24px; text-align:left; box-shadow:0 8px 40px rgba(0,0,0,.25); transform-origin:34px 100%; }
.qcard::after { content:""; position:absolute; left:26px; bottom:-9px; width:18px; height:18px; background:inherit; border-radius:0 0 6px 0; transform:rotate(45deg); -webkit-backdrop-filter:inherit; backdrop-filter:inherit; clip-path:polygon(100% 0,100% 100%,0 100%); }
.qcard.pop { animation:qpop .38s cubic-bezier(.2,1.2,.3,1); }
@keyframes qpop { from { opacity:0; transform:scale(.4) translateY(30px); } to { opacity:1; transform:none; } }
.qcard h2 { text-align:left; margin:0 0 4px; font-size:21px; line-height:1.2; font-weight:700; }
.qcard p { text-align:left; margin:0; font-size:15px; color:#d4d4d6; font-weight:500; }
.errbox { position:absolute; left:16px; right:16px; top:calc(env(safe-area-inset-top) + 130px); color:#ff8a80; background:rgba(0,0,0,.75); padding:8px; border-radius:8px; font-size:14px; }
.ctrl { position:absolute; left:4px; right:4px; bottom:calc(env(safe-area-inset-bottom) + 8px); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)) 96px repeat(2, minmax(0,1fr)); align-items:end; justify-items:center; }
.cbtn { margin-bottom:40px; display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:0; color:#fff; font:inherit; padding:0; width:56px; overflow:visible; }
.cbtn small { font-size:12.5px; font-weight:500; text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; }
.cbtn:disabled { opacity:.38; }
.fin-sq { display:block; width:20px; height:20px; border-radius:6px; background:#ff3b4e; }
.micbig { width:92px; height:92px; border-radius:50%; border:0; color:#fff; display:flex; align-items:center; justify-content:center; touch-action:none; margin-bottom:22px;
  background:radial-gradient(circle at 50% 32%, #ff6574, #f0303f 68%); box-shadow:0 0 0 7px rgba(255,59,78,.22), 0 0 44px 12px rgba(255,59,78,.5); transition:transform .12s, box-shadow .12s; }
.micbig.on { transform:scale(1.1); box-shadow:0 0 0 12px rgba(255,59,78,.3), 0 0 64px 22px rgba(255,59,78,.7); }
.micbig:disabled { opacity:.4; box-shadow:none; }

/* ---------- 4. editor ---------- */
#ed-video, #pl-video { touch-action:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.musicbtn { position:absolute; top:calc(env(safe-area-inset-top) + 20px); right:16px; z-index:6; border-radius:24px; padding:13px 20px; font:inherit; font-size:16px; font-weight:700; max-width:68%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.musicbtn.dirty { border-color:#ffd54f; }
.cc { position:absolute; top:calc(env(safe-area-inset-top) + 86px); right:16px; z-index:6; width:50px; height:50px; border-radius:50%; padding:0; font:inherit; font-size:15px; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; justify-content:center; }
.cc.on { background:#fff; color:#111; border-color:#fff; }
.cc.off::after { content:""; position:absolute; width:34px; height:2.5px; background:#fff; border-radius:2px; transform:rotate(-40deg); box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.ed-cap { position:absolute; left:18px; right:18px; top:61%; transform:translateY(-50%); text-align:center; font-family:"Nunito", sans-serif; font-size:29px; font-weight:900; line-height:1.15; color:#fff; z-index:4; pointer-events:none; min-height:1em;
  text-shadow:-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 4px 10px rgba(0,0,0,.5); }
.ed-status { position:absolute; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom) + 112px); display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 18px; border-radius:26px; font-size:15px; font-weight:600; white-space:nowrap; z-index:5; }
.ed-status.err { background:rgba(120,30,30,.8); }
.ed-status.err .spinner { display:none; }
.sound-hint { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 112px); padding:12px 20px; border-radius:22px; font:inherit; font-size:15px; font-weight:700; z-index:8; white-space:nowrap; }
.ed-bar { z-index:7; }

/* ---------- hoja de música ---------- */
.msheet { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; background:rgba(0,0,0,.18); }
.msheet-card { width:100%; height:80%; display:flex; flex-direction:column; padding:0 16px calc(env(safe-area-inset-bottom) + 10px);
  background:rgba(22,22,25,.88); -webkit-backdrop-filter:blur(30px) saturate(1.5); backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid rgba(255,255,255,.13); border-bottom:0; border-radius:40px 40px 0 0; transform:translateY(100%); transition:transform .6s cubic-bezier(.22,.9,.25,1); }
.msheet.open .msheet-card { transform:translateY(0); }
.grab-area { padding:12px 0 10px; display:flex; justify-content:center; touch-action:none; }
.grab { width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.35); }
.m-head { display:flex; align-items:center; justify-content:space-between; }
.m-head h2 { margin:2px 0 4px; padding:0 4px; font-size:28px; letter-spacing:-.3px; font-weight:800; text-align:left; }
.m-search { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:0 14px; height:50px; color:#bbb; }
.m-search input { flex:1; min-width:0; background:none; border:0; outline:none; color:#fff; font:inherit; font-size:17px; -webkit-user-select:text; user-select:text; }
.m-search input::placeholder { color:#aaa; }
.m-tabs { display:flex; gap:8px; margin:12px 0 8px; }
.tab { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:22px; padding:11px 0; font:inherit; font-size:15px; font-weight:500; }
.tab.on { background:#fff; color:#111; border-color:#fff; font-weight:700; }
.m-list { overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; padding-bottom:8px; }
.mrow { display:flex; align-items:center; gap:12px; padding:8px 12px 8px 8px; margin-top:8px; border-radius:22px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04); }
.mrow.on { background:linear-gradient(100deg,rgba(255,80,98,.22),rgba(255,80,98,.07)); border-color:rgba(255,92,108,.65); }
.mrow .cov { width:52px; height:52px; border-radius:50%; background:#2a2a2d center/cover no-repeat; flex:none; }
.mrow .mid { flex:1; min-width:0; }
.mrow .tt { font-size:16.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow .ss { font-size:13px; line-height:1.25; color:#a9a9ae; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow .pb { width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.8); background:none; color:#fff; display:flex; align-items:center; justify-content:center; flex:none; padding:0; }
.mrow .pb svg { margin-left:2px; }
.mrow .ck { width:28px; height:28px; border-radius:50%; background:#ff5d6c; display:flex; align-items:center; justify-content:center; flex:none; }
.eq-bars { display:flex; align-items:center; gap:3px; height:22px; }
.eq-bars i { display:block; width:4px; height:8px; border-radius:2px; background:#fff; }
.mrow.playing .eq-bars i { animation:eq .9s ease-in-out infinite; }
.mrow.playing .eq-bars i:nth-child(2) { animation-delay:.15s; } .mrow.playing .eq-bars i:nth-child(3) { animation-delay:.3s; } .mrow.playing .eq-bars i:nth-child(4) { animation-delay:.45s; }
@keyframes eq { 0%, 100% { height:6px; } 50% { height:22px; } }
.m-empty { color:#aaa; text-align:center; padding:28px 12px; font-size:15px; line-height:1.4; }

/* ---------- 1. inicio: mis videos (diseño final) ---------- */
.home-top { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top) + 22px) 18px 14px 20px; z-index:2; }
.home-top h1 { margin:0; font-family:"Montserrat", sans-serif; font-weight:800; font-size:30px; letter-spacing:-.4px; line-height:1; }
.prof { width:38px; height:38px; border-radius:50%; border:0; background:#1c1c1f; display:flex; align-items:center; justify-content:center; padding:0; }
.home-scroll { position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(env(safe-area-inset-top) + 68px) 0 150px; }
.vcard { display:flex; align-items:center; gap:14px; height:101px; margin:11px 16px 0; padding:0 14px 0 12px; border-radius:51px; background:#111113; border:1px solid rgba(255,255,255,.06); box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.vthumb { position:relative; width:82px; height:82px; flex:none; border-radius:50%; background:linear-gradient(145deg,#3a3a40,#1d1d21) center/cover no-repeat; }
.vdur { position:absolute; left:50%; bottom:6px; transform:translateX(-50%); padding:3px 9px; border-radius:13px; background:rgba(18,18,20,.8); font:600 10.5px "Montserrat", sans-serif; letter-spacing:.2px; white-space:nowrap; }
.vmid { flex:1; min-width:0; }
.vtitle { font:700 14px "Montserrat", sans-serif; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vsub { margin-top:6px; display:flex; align-items:center; gap:5px; font:400 12px "Jost", sans-serif; color:#8e8e93; white-space:nowrap; overflow:hidden; }
.vsub svg { flex:none; }
.vsub.bad { color:#ff8a80; }
.vgo { width:44px; height:44px; flex:none; border-radius:50%; border:0; background:#2a2a2e; display:flex; align-items:center; justify-content:center; padding:0; color:#fff; }
.vgo svg { margin-left:2px; }
.home-hint { margin:20px 22px 0; text-align:center; font:400 11.5px "Jost", sans-serif; color:#8e8e93; line-height:1.3; }
.home-empty { margin:30px 26px; font:400 16px "Jost", sans-serif; color:#a0a0a5; line-height:1.4; }
.newbtn { width:100%; height:52px; border:0; border-radius:26px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:700 17px "Montserrat", sans-serif;
  background:linear-gradient(180deg,#ff5d6c,#f94557); box-shadow:0 0 44px rgba(255,80,98,.42), 0 6px 18px rgba(255,80,98,.25); }

/* ---------- hoja de elegir voz y música antes de grabar ---------- */
.m-sub { margin:0 4px 6px; font-size:13px; line-height:1.35; color:#b5b5b8; }
.sheet-ok { flex:none; margin-top:14px; height:52px; border-radius:26px; display:flex; align-items:center; justify-content:center; position:relative; font:700 17px "Montserrat", sans-serif; background:linear-gradient(180deg,#ff5d6c,#f94557); box-shadow:0 0 36px rgba(255,80,98,.35); }
.sheet-ok svg { position:absolute; right:20px; width:22px; height:22px; }
.sheet-ok[hidden] { display:none; }


/* listas verticales deslizables a la derecha: filtros arriba, zoom abajo; se desvanecen en los extremos */
.zoombar, .lookbar { position:absolute; right:14px; z-index:5; width:50px; height:150px; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:y proximity; touch-action:pan-y;
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 0;
  -webkit-mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.zoombar::-webkit-scrollbar, .lookbar::-webkit-scrollbar { display:none; }
.lookbar { top:22%; }
.zoombar { top:calc(22% + 176px); }
.zoombar button { flex:none; scroll-snap-align:center; width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); background:rgba(20,20,22,.4); color:#fff; font:700 13px "Figtree", sans-serif; padding:0; }
.zoombar button.on { background:#fff; color:#111; border-color:#fff; }

/* nombre del filtro al deslizar */
.look-name { position:absolute; left:0; right:0; top:34%; text-align:center; z-index:4; pointer-events:none; font:700 30px "Montserrat", sans-serif; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55); opacity:0; transition:opacity .25s; }
.look-name.show { opacity:1; }

/* circulitos de filtros */
.lk { flex:none; scroll-snap-align:center; width:42px; height:42px; border-radius:50%; border:2px solid rgba(255,255,255,.35); padding:0; }
.lk.on { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.lk-vivo { background:linear-gradient(135deg,#ff5d6c,#ffb43c,#3ccf91); }
.lk-natural { background:linear-gradient(135deg,#cfd3d8,#8d939b); }
.lk-calido { background:linear-gradient(135deg,#ffd27a,#ff8a3d); }
.lk-cine { background:linear-gradient(135deg,#2f6f8f,#1b2433); }

.zoombar[hidden], .lookbar[hidden] { display:none; }

#c-ask.on .circ { background:rgba(255,255,255,.28); }
.qcard[hidden] { display:none; }

.cbtn small { display:none; }
.qcard.out { animation:qout .22s ease-in forwards; }
@keyframes qout { to { opacity:0; transform:scale(.6) translateY(24px); } }
.dots { display:none; gap:5px; align-items:center; height:30px; }
.dots i { width:9px; height:9px; border-radius:50%; background:#d4d4d6; animation:dotb 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay:.15s; } .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes dotb { 0%, 60%, 100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-6px); opacity:1; } }
.qcard.typing { right:auto; width:auto; padding:12px 20px; animation:qpop .3s cubic-bezier(.2,1.2,.3,1); }
.qcard.typing .dots { display:flex; }
.qcard.typing h2, .qcard.typing p { display:none; }
.qcard.pop h2, .qcard.pop p { animation:qtext .35s ease-out; }
@keyframes qtext { from { opacity:0; } to { opacity:1; } }

/* la hoja sube suave y su contenido aparece escalonado con fade */
.msheet { transition:background .5s; }
.mrow.enter { opacity:0; animation:rowin .5s ease-out forwards; animation-delay:calc(var(--i) * 80ms + 280ms); }
@keyframes rowin { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.msheet.open #sheet-title, .msheet.open #sheet-sub { animation:rowin .5s ease-out both; animation-delay:.2s; }

.vcard.enter { opacity:0; animation:rowin .5s ease-out forwards; animation-delay:calc(var(--i) * 80ms + 120ms); }

.msheet { pointer-events:none; }
.msheet-card { pointer-events:auto; }

.ed-cap .k { color:#ffd61f; }

/* Compartir video: mismo botón que "Crear nuevo video" y "Continuar" */
#btn-share, #pl-share { height:52px; padding:0; border-radius:26px; display:flex; align-items:center; justify-content:center; font:700 17px "Montserrat", sans-serif;
  background:linear-gradient(180deg,#ff5d6c,#f94557); box-shadow:0 0 44px rgba(255,80,98,.42), 0 6px 18px rgba(255,80,98,.25); }
#btn-share:disabled, #pl-share:disabled { opacity:.55; }

.ed-status span { min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 0. inicio de sesión ---------- */
#s-login { overflow:hidden; background:#000; }
.lg-bg { position:absolute; inset:0; background:#000 url(/login-bg.jpg) right top/100% auto no-repeat; }
.lg-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 80%), linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 52%, #000 70%); }
.lg-top { position:absolute; left:26px; right:26px; top:calc(env(safe-area-inset-top) + 56px); z-index:2; }
.lg-logo { display:flex; align-items:center; gap:0; font:800 38px "Figtree", sans-serif; letter-spacing:-1.4px; color:#fff; margin-left:-4px; }
.lg-logo svg { margin-right:-8px; }
.lg-logo b { color:#ff4d5e; font-weight:800; }
.lg-h { margin:30px 0 16px; text-align:left; font:800 38px/1.04 "Figtree", sans-serif; letter-spacing:-1.1px; max-width:300px; }
.lg-red { position:relative; color:#ff4d5e; display:inline-block; }
.lg-red svg { position:absolute; left:0; bottom:-9px; width:100%; height:12px; }
.lg-p { margin:0; max-width:270px; font:400 16.5px/1.35 "Figtree", sans-serif; color:#c9c9cd; }
.lg-card { position:absolute; left:14px; right:14px; bottom:calc(env(safe-area-inset-bottom) + 70px); z-index:3; padding:20px 18px 18px; border-radius:34px; background:rgba(14,14,16,.9); border:1px solid rgba(255,255,255,.09); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); transition:bottom .25s; }
.lg-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.lg-ic { width:52px; height:52px; border-radius:50%; background:#222225; display:flex; align-items:center; justify-content:center; flex:none; }
.lg-t { font:700 21px "Figtree", sans-serif; letter-spacing:-.3px; }
.lg-s { font:400 15px "Figtree", sans-serif; color:#a9a9ae; margin-top:2px; }
.lg-field { display:flex; align-items:center; height:56px; border-radius:28px; border:1.5px solid rgba(255,255,255,.18); padding:0 20px 0 14px; margin-bottom:12px; }
.lg-field:focus-within { border-color:rgba(255,255,255,.5); }
.lg-field[hidden] { display:none; }
.lg-cc { display:flex; align-items:center; gap:9px; font:600 18px "Figtree", sans-serif; }
.lg-sep { width:1.5px; height:28px; background:rgba(255,255,255,.18); margin:0 14px; }
.lg-field input { flex:1; min-width:0; background:none; border:0; outline:0; color:#fff; font:500 19px "Figtree", sans-serif; -webkit-user-select:text; user-select:text; }
.lg-field input::placeholder { color:#6e6e73; }
.lg-err { margin:-2px 8px 10px; color:#ff8a80; font:500 14px "Figtree", sans-serif; }
.lg-go { position:relative; }
.lg-go svg { position:absolute; right:22px; }
.lg-go:disabled { opacity:.6; }
.lg-foot { position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 18px); z-index:3; margin:0; text-align:center; font:400 13.5px/1.45 "Figtree", sans-serif; color:#8e8e93; }
.lg-foot a { color:#b5b5ba; text-decoration:underline; }

/* datos del video (hoja antes de elegir la voz) */
.m-form { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 6px; }
.m-form[hidden] { display:none; }
.f-lbl { display:block; font:600 14px "Figtree", sans-serif; color:#a9a9ae; margin:10px 4px 0; }
.f-lbl input { display:block; width:100%; margin-top:6px; height:52px; border-radius:26px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#fff; padding:0 20px; font:500 17px "Figtree", sans-serif; outline:0; -webkit-user-select:text; user-select:text; }
.f-lbl input:focus { border-color:rgba(255,255,255,.5); }
.f-lbl input::placeholder { color:#6e6e73; }
.f-logo { display:flex; align-items:center; gap:14px; margin:16px 4px 4px; }
.f-logo-pick { width:60px; height:60px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.35); background:rgba(255,255,255,.05) center/cover no-repeat; color:#fff; font:300 30px "Figtree", sans-serif; padding:0; flex:none; }
.f-logo-pick.has { border-style:solid; border-color:rgba(255,255,255,.5); background-color:#fff; background-size:contain; }
.f-logo-pick.has span { display:none; }
.f-logo-txt { flex:1; min-width:0; }
.f-logo-t { font:700 17px "Figtree", sans-serif; }
.f-logo-s { font:400 14px "Figtree", sans-serif; color:#a9a9ae; margin-top:2px; }

.m-form { padding-bottom:40px; }