/* ============ Transcriptor Pro — diseño ============ */
:root{
  --bg:#0b0e1a; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.12); --txt:#eef1ff; --dim:#9aa3c7;
  --indigo:#6366f1; --violet:#a855f7; --cyan:#22d3ee;
  --grad:linear-gradient(92deg,var(--indigo),var(--violet) 55%,var(--cyan));
  --radius:20px; --shadow:0 24px 60px rgba(2,4,18,.55);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100dvh; color:var(--txt);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  background:var(--bg); overflow-x:hidden;
}
/* ---------- Fondo animado ---------- */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(1100px 600px at 85% -10%,rgba(168,85,247,.22),transparent 60%),
             radial-gradient(900px 550px at -10% 20%,rgba(99,102,241,.20),transparent 60%),
             radial-gradient(800px 500px at 50% 115%,rgba(34,211,238,.14),transparent 60%),var(--bg);}
.orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; animation:drift 16s ease-in-out infinite alternate}
.orb-a{width:340px;height:340px;background:#4f46e5;top:-90px;right:-60px}
.orb-b{width:280px;height:280px;background:#9333ea;bottom:-80px;left:-70px;animation-delay:-6s}
.orb-c{width:180px;height:180px;background:#0891b2;top:44%;left:64%;animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-46px,34px) scale(1.12)}}
.grid-floor{position:absolute; left:-25%; right:-25%; bottom:-12%; height:46%;
  background:linear-gradient(transparent,rgba(99,102,241,.13)),
             repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 40px);
  transform:perspective(520px) rotateX(62deg); transform-origin:bottom;
  animation:floorMove 7s linear infinite;}
@keyframes floorMove{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 0,0 40px}}

/* ---------- Hero + escena 3D ---------- */
.hero{padding:52px 20px 6px; text-align:center; perspective:900px}
.stage3d{position:relative; width:210px; height:150px; margin:0 auto 8px; transform-style:preserve-3d}
.ring{position:absolute; inset:0; transform-style:preserve-3d; animation:spin 22s linear infinite}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.chip{position:absolute; top:50%; left:50%; padding:5px 11px; border-radius:999px; white-space:nowrap;
  font-size:12px; color:#dfe4ff; background:rgba(20,24,48,.72); border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 22px rgba(0,0,0,.35); backdrop-filter:blur(3px);
  transform:translate(-50%,-50%) rotateY(calc(var(--i)*45deg)) translateZ(118px)}
.core{position:absolute; top:50%; left:50%; width:86px; height:86px; transform:translate(-50%,-50%);
  border-radius:26px; background:var(--grad); box-shadow:0 18px 42px rgba(124,58,237,.5);
  display:grid; place-items:center; animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translate(-50%,-54%)}50%{transform:translate(-50%,-44%)}}
.eq{display:flex; gap:4px; align-items:flex-end; height:30px}
.eq i{width:6px; border-radius:3px; background:#fff; animation:eq 1s ease-in-out infinite}
.eq i:nth-child(1){height:38%; animation-delay:0s}.eq i:nth-child(2){height:82%; animation-delay:.14s}
.eq i:nth-child(3){height:56%; animation-delay:.28s}.eq i:nth-child(4){height:96%; animation-delay:.42s}
.eq i:nth-child(5){height:48%; animation-delay:.56s}
@keyframes eq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.15)}}
.hero h1{margin:6px 0 8px; font-size:clamp(34px,7.5vw,52px); letter-spacing:-.02em; font-weight:800}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.tag{max-width:620px; margin:0 auto; color:var(--dim); font-size:clamp(15px,3.6vw,17.5px)}
.tag strong{color:var(--txt)}

/* ---------- Layout ---------- */
.wrap{max-width:760px; margin:26px auto 40px; padding:0 16px calc(24px + env(safe-area-inset-bottom))}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(14px);
  transform-style:preserve-3d; will-change:transform; transition:transform .25s ease}
.hidden{display:none !important}

/* ---------- Tabs ---------- */
.tabs{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; margin-bottom:18px}
.tab{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 10px; border:0; border-radius:999px; background:transparent; color:var(--dim);
  font-size:16px; font-weight:700; cursor:pointer; transition:color .25s; min-height:52px}
.tab .ic{width:21px; height:21px}
.tab.active{color:#fff}
.tab-glider{position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 9px); border-radius:999px;
  background:var(--grad); box-shadow:0 10px 26px rgba(124,58,237,.45); transition:transform .38s cubic-bezier(.6,.05,.2,1.2)}
.tabs.local .tab-glider{transform:translateX(calc(100% + 6px))}

/* ---------- Formularios ---------- */
.lbl{display:block; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin:14px 0 7px}
.lbl:first-child{margin-top:0}
input[type=url],select{width:100%; padding:14px 15px; border-radius:14px; border:1px solid var(--line);
  background:rgba(10,13,28,.65); color:var(--txt); font-size:16px; outline:none; transition:border .2s, box-shadow .2s}
input[type=url]:focus,select:focus{border-color:var(--violet); box-shadow:0 0 0 4px rgba(168,85,247,.18)}
.field-row{display:flex; gap:9px}.field-row input{flex:1; min-width:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.btn{appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--txt);
  padding:13px 18px; border-radius:14px; font-size:15.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px;
  transition:transform .12s, box-shadow .2s, filter .2s; touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--grad); border:0; color:#fff; box-shadow:0 12px 28px rgba(124,58,237,.4)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.big{width:100%; margin-top:18px; font-size:17px; padding:16px}
.btn.ghost{background:rgba(255,255,255,.06)}
.btn:disabled{opacity:.55; pointer-events:none}
.hint{color:var(--dim); font-size:13.5px; margin:12px 2px 0}
.spinner{width:19px;height:19px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff; animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- Preview YouTube ---------- */
.yt-preview{display:flex; gap:13px; align-items:center; margin-top:13px; padding:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:14px}
.yt-preview img{width:104px; aspect-ratio:16/9; object-fit:cover; border-radius:9px}
.pv-label{margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim)}
.pv-id{margin:2px 0 0; font-weight:700; word-break:break-all}

/* ---------- Drop zone ---------- */
.drop{border:2px dashed rgba(255,255,255,.25); border-radius:16px; padding:28px 16px; text-align:center;
  cursor:pointer; transition:border .2s, background .2s; background:rgba(255,255,255,.03)}
.drop:hover,.drop.over{border-color:var(--cyan); background:rgba(34,211,238,.07)}
.drop-ic{width:42px; height:42px; color:var(--cyan)}
.drop-main{margin:8px 0 3px; font-weight:700; font-size:16.5px}
.drop-sub{margin:0; color:var(--dim); font-size:13px}
.file-info{display:flex; align-items:center; gap:9px; margin-top:12px; padding:11px 13px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; font-size:14.5px}
.file-info span:first-child{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-info .x{margin-left:auto; border:0; background:rgba(255,255,255,.1); color:#fff; width:30px; height:30px;
  border-radius:50%; cursor:pointer; flex:none}
.dim{color:var(--dim)}
.progress{position:relative; height:30px; margin-top:16px; background:rgba(255,255,255,.07);
  border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.progress #lc-bar{height:100%; width:0%; background:var(--grad); transition:width .25s}
.progress span{position:absolute; inset:0; display:grid; place-items:center; font-size:13px; font-weight:700}

/* ---------- Resultado ---------- */
.result{margin-top:20px}
.res-head{display:flex; gap:14px; align-items:center}
.res-thumb{width:118px; aspect-ratio:16/9; object-fit:cover; border-radius:11px; flex:none}
.res-meta h2{margin:0 0 3px; font-size:19px; line-height:1.3}
.res-meta p{margin:0; font-size:13.5px}
.res-actions{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:16px 0 12px}
.res-text{max-height:46dvh; overflow:auto; padding:16px; border-radius:14px; white-space:pre-wrap;
  word-break:break-word; background:rgba(7,9,20,.72); border:1px solid var(--line);
  font-size:15.5px; line-height:1.65; -webkit-overflow-scrolling:touch}
.switch{margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--dim); cursor:pointer}
.switch input{display:none}
.switch span{width:44px; height:25px; border-radius:999px; background:rgba(255,255,255,.16); position:relative; transition:background .2s; flex:none}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:left .2s}
.switch input:checked + span{background:var(--violet)}
.switch input:checked + span::after{left:22px}

.error{margin-top:16px; padding:14px 16px; border-radius:14px; font-size:15px;
  background:rgba(239,68,68,.13); border:1px solid rgba(239,68,68,.45); color:#fecaca}
.foot{margin-top:26px; text-align:center; color:var(--dim); font-size:13px}
.foot a{color:var(--cyan)}
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background:#141a36; color:#fff; border:1px solid var(--line); padding:12px 20px; border-radius:999px;
  font-weight:700; box-shadow:var(--shadow); opacity:0; transition:.3s; z-index:50}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){
  .ring,.core,.orb,.grid-floor,.eq i{animation:none !important}
}