/* ===== Tokens (dark, elevación por luminosidad) ===== */
:root{
  --bg:#0A0E1A;
  --surface:#121829;
  --surface-2:#1B2340;          /* elevación = superficie más clara, no sombra */
  --border:#28304C;
  --border-strong:#3A4568;
  --text:#DDE5F7;
  --text-weak:#8B96B8;
  --primary:#5B86E8;            /* acción / interactivo (rediseño Órbita360) */
  --primary-strong:#A9C2FF;     /* texto con color sobre dark */
  --primary-tint:rgba(91,134,232,.14);      /* fondos suaves / selección */
  --teal:#38D3C0;               /* acento secundario (degradados, avatar) */
  --grad-from:#5B86E8; --grad-to:#38D3C0;   /* degradado «VR 360°» / avatar */
  --on-primary:#0A0E1A;
  --error:#F07878;   --error-bg:rgba(240,120,120,.12);
  --success:#4CC38A; --success-bg:rgba(76,195,138,.12);
  --warning:#E8B04B; --warning-bg:rgba(232,176,75,.12);
  --scroll-thumb:#2B3350; --scroll-thumb-hover:#3A4568;
  --radius:8px; --radius-lg:12px;
  --shadow-md:0 4px 16px rgba(0,0,0,.35);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:14px; line-height:1.4;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}
:focus-visible{outline:2px solid var(--primary-strong); outline-offset:2px; border-radius:4px}
button{font-family:inherit}
/* min-width:0 anula el min-width:min-content por defecto del <fieldset>: sin él,
   un nombre de archivo largo (white-space:nowrap) ensancha el fieldset y desborda
   la tarjeta arrastrando los segmentados y la fila de música. */
fieldset{border:none;min-width:0}
::selection{background:rgba(122,162,255,.28)}

/* Scrollbar — fina, oscura, sobre track transparente */
*{scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:999px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover); background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* ===== Header ===== */
header{
  height:56px; flex:0 0 56px; display:flex; align-items:center; gap:12px;
  padding:0 16px; border-bottom:1px solid var(--border); background:var(--surface);
}
/* Grupo de acciones de la cabecera (chip de plan + novedades + ayuda + cuenta).
   position:relative para anclar los desplegables al borde derecho del header. */
.hdr-actions{display:flex;align-items:center;gap:10px;position:relative}
.hdr-btn{width:36px;height:36px;flex:none;border-radius:8px;background:transparent;border:none;color:var(--text-weak);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}
.hdr-btn:hover{background:var(--surface-2);color:var(--text)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo svg{display:block;flex:none}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__txt b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.logo__txt small{font-size:11px;color:var(--text-weak);margin-top:3px}
.n360{color:var(--primary)}
@media (max-width:640px){.logo__txt small{display:none}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinrev{from{transform:rotate(360deg)}to{transform:rotate(0)}}
.header-spacer{flex:1}
/* Botón para cambiar el lado del panel (solo escritorio) */
.panel-toggle{height:36px; padding:0 12px; margin-left:16px; flex:none; border-radius:8px;
  background:transparent; border:1px solid var(--border); color:var(--text-weak);
  font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:8px}
.panel-toggle:hover{border-color:var(--border-strong); background:rgba(122,162,255,.06); color:var(--text)}
.panel-toggle iconify-icon{font-size:17px}
@media (max-width:1024px){.panel-toggle{display:none}}
.badge{
  font-size:12px;color:var(--text-weak);border:1px solid var(--border);
  border-radius:999px;padding:4px 12px;
}
.badge.ok{color:var(--success);border-color:rgba(76,195,138,.4)}
.badge.warn{color:var(--warning);border-color:rgba(232,176,75,.4)}

/* Chip de usuario simple (pro.html) */
.user{display:flex;align-items:center;gap:8px;margin-left:12px}
.user__link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);border-radius:999px;padding:3px 10px;border:1px solid var(--border)}
.user__link:hover{background:var(--surface-2)}
.user__pic{width:24px;height:24px;border-radius:50%;object-fit:cover}
.user__name{font-size:13px;font-weight:600;color:var(--text);max-width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:560px){.user__name{display:none}}

/* Chip de plan en la cabecera */
.plan-chip{display:flex;align-items:center;gap:10px;height:36px;padding:0 6px 0 13px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.plan-chip__name{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text)}
.plan-chip__name iconify-icon{color:var(--primary);font-size:15px}
.plan-chip__name.is-pro{color:var(--primary-strong)}
.plan-chip__btn{height:26px;padding:0 12px;border-radius:999px;background:var(--primary);color:var(--on-primary);border:none;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.plan-chip__btn:hover{filter:brightness(1.08)}
@media (max-width:720px){.plan-chip{display:none}}

/* Menú de usuario (avatar + desplegable) */
/* Novedades / Ayuda / Cuenta — se anclan al borde derecho de .hdr-actions */
.help-menu,.user-menu{position:static}
.user-menu__btn{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border);cursor:pointer;color:var(--text);font:inherit;padding:3px 8px 3px 4px;border-radius:999px}
.user-menu__btn:hover{background:var(--surface-2)}
.user-menu__avatar{width:28px;height:28px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--teal));color:var(--on-primary);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.user-menu__pic{width:28px;height:28px;border-radius:50%;object-fit:cover}
.user-menu__caret{color:var(--text-weak);font-size:15px}
.help-menu__pop,.user-menu__pop{position:absolute;top:48px;right:0;z-index:70;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:8px}
.user-menu__pop{width:264px}
.help-menu__pop{width:246px}
.help-menu__item{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:var(--radius);background:transparent;border:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer;text-align:left;text-decoration:none}
.help-menu__item:hover{background:var(--surface-2);color:var(--text)}
.help-menu__item iconify-icon{color:var(--text-weak);font-size:18px;flex:none}
.help-menu__social{display:flex;gap:8px;padding:2px 4px}
.help-menu__soc{width:38px;height:38px;border-radius:8px;background:var(--surface-2);border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.help-menu__soc:hover{background:var(--border)}
.user-menu__head{display:flex;align-items:center;gap:12px;padding:8px 8px 12px}
.user-menu__avatar.big{width:40px;height:40px;font-size:16px}
.user-menu__id{min-width:0}
.user-menu__name{display:block;font-size:14px;font-weight:600}
.user-menu__email{display:block;font-size:12px;color:var(--text-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-menu__sep{height:1px;background:var(--border);margin:6px 4px}
.user-menu__item{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:var(--radius);background:transparent;border:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer;text-align:left;text-decoration:none}
.user-menu__item:hover{background:var(--surface-2);color:var(--text)}
.user-menu__item iconify-icon{color:var(--text-weak);font-size:18px;flex:none}

/* Panel de cuenta (cuenta.html) */
.acc-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.acc-avatar{width:48px;height:48px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--teal));color:var(--on-primary);font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center}
.acc-provider__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);font-size:13px;color:var(--text)}
.acc-prefgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:12px}
.acc-prefgrid .field{margin-bottom:0}
.acc-stats{display:flex;gap:32px;flex-wrap:wrap;margin-top:12px}
.acc-stat{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--primary-strong)}
.acc-stat__label{font-size:13px;color:var(--text-weak);margin-top:2px}
.acc-stats>div:nth-child(2) .acc-stat{color:var(--text)}
.acc-pic{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--border-strong)}

/* ===== Panel de administración (admin360.html, ruta /admin360) ===== */
.adm-table-wrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{text-align:left;padding:8px 10px;color:var(--text-weak);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.adm-table td{padding:10px;border-bottom:1px solid var(--border);color:var(--text)}
.adm-table tr:last-child td{border-bottom:none}
.adm-table code{font-size:12px;color:var(--primary-strong)}
.adm-empty{color:var(--text-weak);text-align:center;padding:20px 10px}
.adm-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--text-weak)}
.adm-badge.is-pro{background:var(--primary-tint);color:var(--primary-strong)}
.adm-newcoupon{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:4px}
.acc-id{min-width:0}
.acc-name{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.acc-email{display:block;font-size:13px;color:var(--text-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-planrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.acc-plan{font-size:16px;font-weight:600}
.acc-plan.is-pro{color:var(--primary-strong)}
.acc-planhint{font-size:13px;color:var(--text-weak);margin:6px 0 0}
.acc-btnrow{display:flex;gap:10px;flex-wrap:wrap}
.acc-wipe{flex-direction:column;align-items:stretch;gap:14px;margin-top:16px}
.acc-wipe p{margin:0;color:var(--text);line-height:1.55}
.acc-wipe__actions{display:flex;gap:10px}
.acc-meta{font-size:13px;color:var(--text-weak);line-height:1.5;margin-top:8px}
.acc-note{font-size:12px;color:var(--text-weak);margin-top:12px}
.card h3+.acc-head{margin-top:16px}
.card h3+.field,.card h3+.acc-meta{margin-top:12px}
.acc-links{margin-top:16px;display:flex;gap:20px;font-size:13px}
.acc-links a{color:var(--primary-strong);text-decoration:none}
.acc-links a:hover{text-decoration:underline}
.acc-foot{text-align:center;font-size:12px;color:var(--text-weak);margin-top:4px}
.acc-foot a{color:var(--text-weak)}
/* Botones de bloque apilados dentro de una tarjeta de cuenta */
.card .btn.block+.btn.block{margin-top:12px}
.card .acc-meta+.btn.block,.card .acc-planhint+.btn.block{margin-top:12px}


/* ===== Página de suscripción (pro.html) — el resto es inline, calcando el demo ===== */
.pro-wrap{max-width:560px;margin:0 auto;padding:32px 24px;display:flex;flex-direction:column;gap:16px} /* lo usa cuenta.html */
.pro-back{display:inline-flex;align-items:center;gap:6px;color:var(--text-weak);text-decoration:none;font-size:14px;height:36px}
.pro-back:hover{color:var(--text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Upsell del plan Gratis en el paso de exportar */
.upsell{
  background:var(--primary-tint); border:1px solid var(--border-strong);
  border-radius:10px; padding:14px; margin-bottom:16px;
}
.upsell__txt{font-size:13px; line-height:1.5; color:var(--text); margin-bottom:12px}
.upsell__actions{display:flex; gap:10px; flex-wrap:wrap}

/* ===== Layout ===== */
main{
  flex:1; display:flex; flex-direction:row-reverse; min-height:0;   /* panel a la izquierda (v2) */
}
main.panel-right{flex-direction:row}                                /* panel a la derecha (v1) */
main.panel-right .panel{border-right:none; border-left:1px solid var(--border)}
@media (max-width:1024px){
  main, main.panel-right{flex-direction:column; overflow:auto}
  .stage{min-height:340px}
  main .panel, main.panel-right .panel{width:auto; border-left:none; border-right:none; border-top:1px solid var(--border); max-height:none; overflow:visible}
}

/* ===== Escenario (preview) — a sangre, ocupa el resto del ancho ===== */
.stage{
  position:relative; flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); overflow:hidden;
}
.stage__grid{position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(122,162,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(122,162,255,.07) 1px,transparent 1px);
  background-size:48px 48px}
.stage__glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, rgba(122,162,255,.10), transparent 60%)}
.stage__vignette{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 140px rgba(5,7,15,.7)}
.stage.has-photo .stage__vignette{opacity:1}
#previewCanvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
  cursor:grab; touch-action:none;
}
#previewCanvas.dragging{cursor:grabbing}

/* Estado vacío — órbita animada de fondo + contenido centrado */
.empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:32px; overflow:hidden;
}
.empty.dragover{background:var(--primary-tint)}
.empty__orbit{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
.empty__orbit::before{content:''; position:absolute; width:min(120%,720px); aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(122,162,255,.08), transparent 70%)}
.empty__ring{position:absolute; border:1px solid rgba(122,162,255,.10); border-radius:50%}
.empty__ring:nth-child(1){width:min(120%,720px); aspect-ratio:1}
.empty__ring:nth-child(2){width:min(84%,500px); aspect-ratio:1; border-color:rgba(122,162,255,.13)}
.empty__ring:nth-child(3){width:min(50%,300px); aspect-ratio:1; border-color:rgba(122,162,255,.16)}
.empty__spin{position:absolute; border-radius:50%}
.empty__spin i{position:absolute; top:-4px; left:50%; margin-left:-4px; width:8px; height:8px; border-radius:50%; background:rgba(122,162,255,.7); box-shadow:0 0 12px rgba(122,162,255,.5)}
.empty__spin--a{width:min(120%,720px); aspect-ratio:1; animation:spin 28s linear infinite}
.empty__spin--b{width:min(84%,500px); aspect-ratio:1; animation:spinrev 20s linear infinite}
.empty__spin--b i{width:6px; height:6px; background:rgba(122,162,255,.55)}
.empty__content{position:relative; z-index:2; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:14px}
.empty__icon{width:64px; height:64px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); display:flex; align-items:center; justify-content:center}
.empty h2{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.empty p{color:var(--text-weak);max-width:400px;line-height:1.6}
.empty__note{font-size:12px;color:var(--text-weak)}

/* Insignias sobre el preview */
.scene-badge{position:absolute; z-index:3; pointer-events:none; font-size:12px; font-weight:600}
.scene-badge--type{left:16px; top:16px; padding:5px 11px; border-radius:999px; background:rgba(10,14,26,.7); border:1px solid var(--border-strong); color:var(--primary-strong)}
.scene-badge--wm{right:16px; top:16px; display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--radius); background:rgba(10,14,26,.55); color:rgba(221,229,247,.75); font-weight:400}
.scene-badge--wm svg{color:currentColor}

/* Barra de controles superpuesta al preview */
.stage-bar{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:3;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(18,24,41,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
}
.stage-bar__play{width:36px;height:36px;flex:none;border-radius:50%;background:var(--primary);color:var(--on-primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.stage-bar__play:hover{filter:brightness(1.08)}
.stage-bar__time{font-size:12px;color:var(--text-weak);font-variant-numeric:tabular-nums;flex:none}
.stage-bar__seg{flex:0 0 auto;width:auto}
.stage-bar__seg label{height:30px;flex:0 0 auto;font-size:12px}
.hint{font-size:13px;color:var(--text-weak)}
input[type=range]{accent-color:var(--primary); height:24px}
.stage-bar input[type=range]{flex:1 1 120px; min-width:100px}
input[type=range].wide{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Panel de control (izquierda, ancho fijo) ===== */
.panel{
  width:376px; flex:none; border-right:1px solid var(--border); background:var(--bg);
  overflow-y:auto; max-height:calc(100vh - 57px);
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
/* Conmutador Pasos/Asistente */
.flow-toggle{padding:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px}
/* Cabecera del modo asistente + navegación entre pasos */
.wiz-label{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-weak); padding:0 2px}
.wiz-label b{font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.wiz-nav{display:flex; gap:8px}
.wiz-nav .btn{flex:1; margin:0}
.wiz-nav .btn.back{flex:none}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px;
}
.card h3{
  font-size:12px; font-weight:600; color:var(--text-weak);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.card h3.mt{margin-top:16px}
.card h3 .step{
  width:20px;height:20px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border-strong); color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;
}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field>label,.field>.flabel{display:block;font-size:12px;font-weight:400;color:var(--text-weak);margin-bottom:8px}
.flabel--row{display:flex;align-items:center;justify-content:space-between}
.flabel--row .hint{font-size:12px;color:var(--text)}
.field .sub{font-size:12px;color:var(--text-weak);margin-top:8px}

select{
  width:100%; height:36px; padding:0 10px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  font:inherit; font-size:14px;
}
select:focus-visible{outline:2px solid var(--primary-strong); outline-offset:-1px}

/* Segmentado (radios reales) — botones-píldora separados, como el mockup */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{
  flex:1 1 88px; min-width:0; height:38px; padding:0 10px; cursor:pointer;
  border:1px solid var(--border); border-radius:8px; background:transparent;
  color:var(--text-weak); font-size:13px; font-weight:400; position:relative;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .12s, color .12s, border-color .12s;
}
.seg input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;cursor:pointer}
.seg input:checked+span{color:var(--text);font-weight:600}
.seg label:has(input:checked){background:var(--primary-tint);border-color:var(--border-strong)}
.seg label:hover{color:var(--text)}
/* Un solo anillo de foco (el de la píldora); el radio invisible no dibuja el suyo
   — evita el doble borde desalineado (rectángulo afilado sobre la píldora). */
.seg input:focus-visible{outline:none}
.seg label:has(input:focus-visible){outline:2px solid var(--primary-strong);outline-offset:2px}
/* Opción bloqueada por plan (SaaS): atenuada y con candado (icono, no emoji) */
.seg label.locked{opacity:.5;cursor:not-allowed}
.seg .reslock{display:none;font-size:13px}
.seg label.locked .reslock{display:inline-flex}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;border-radius:var(--radius);
  font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:background .12s ease;text-decoration:none;
}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.primary:active{filter:brightness(.96)}
.btn.primary:disabled{background:var(--surface-2);color:var(--text-weak);cursor:not-allowed}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--text-weak);height:36px;padding:0 12px;font-weight:400}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.ghost.inline{display:inline-flex;height:auto;padding:0;color:var(--primary-strong)}
.btn.danger{background:transparent;color:var(--error);border-color:rgba(240,120,120,.4);margin-top:8px}
.btn.danger:hover{background:var(--error-bg)}
.btn.block{width:100%}
/* Botón punteado para «Elegir foto/música» en los pasos vacíos */
.btn.dashed{background:transparent;border:1px dashed var(--border-strong);color:var(--text)}
.btn.dashed:hover{background:var(--surface-2)}
/* Botón pequeño (Cambiar / Quitar / acciones del upsell) */
.btn.sm{height:34px;padding:0 14px;font-size:13px}
.btn svg{flex:0 0 auto}
/* Paso de música vacío: texto + botón punteado apilados */
.music-idle{display:flex;flex-direction:column;gap:12px}
.music-idle .hint{margin:0}

/* Foto cargada */
.photo-row{display:flex;align-items:center;gap:12px}
.photo-row img{
  width:56px;height:36px;object-fit:cover;border-radius:6px;
  border:1px solid var(--border);background:var(--surface-2);
}
.photo-meta{flex:1;min-width:0}
.photo-meta b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-meta span{font-size:12px;color:var(--text-weak)}

/* Música */
.card h3 .opt{font-weight:400;text-transform:none;letter-spacing:0}
.audio-ico{
  width:36px;height:36px;flex:0 0 36px;border-radius:var(--radius);
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--primary-strong);
}
.check{
  display:flex;gap:10px;align-items:center;margin-top:12px;
  font-size:14px;color:var(--text);cursor:pointer;
}
.check input{accent-color:var(--primary);width:16px;height:16px}

/* Progreso de exportación */
.progress-wrap{margin-top:12px}
.progress-track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--primary);border-radius:4px;transition:width .15s linear}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-weak);margin-top:8px}

/* Banners y estados */
.banner{
  border-radius:var(--radius); padding:12px; font-size:13px; line-height:1.45;
  display:flex; gap:8px; align-items:flex-start;
}
.banner.warn{background:var(--warning-bg);color:var(--warning)}
.banner.error{background:var(--error-bg);color:var(--error);margin-top:12px}
.banner.success{background:var(--success-bg);color:var(--success)}
.banner .body{color:var(--text)}
.banner b{font-weight:600}

#successCard .btn.secondary{margin-top:12px}

/* Pasos YouTube */
.yt-steps{list-style:none;counter-reset:yt;margin-top:12px}
.yt-steps li{
  counter-increment:yt; position:relative; padding-left:32px; margin-bottom:12px;
  font-size:13px; color:var(--text);
}
.yt-steps li:last-child{margin-bottom:0}
.yt-steps li::before{
  content:counter(yt); position:absolute; left:0; top:0;
  width:20px;height:20px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border-strong); font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.yt-steps .note{color:var(--text-weak);display:block;margin-top:2px}

/* Toast */
#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius); padding:12px 16px; font-size:14px; font-weight:500;
  box-shadow:var(--shadow-md); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; max-width:90vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Splash de carga (marca) ===== */
.splash{
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .55s ease;
}
.splash.is-hidden{opacity:0; pointer-events:none}
.splash__orbit{position:relative; width:130px; height:130px; margin-bottom:26px}
.splash__planet{
  position:absolute; top:50%; left:50%; width:66px; height:66px; margin:-33px 0 0 -33px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #A9C2FF, #3A4D9E 70%, #1B2340);
  box-shadow:0 0 44px rgba(122,162,255,.45); animation:orb-float 6s ease-in-out infinite;
}
.splash__ring{
  position:absolute; top:50%; left:50%; width:118px; height:36px; margin:-18px 0 0 -59px;
  border:1.5px solid rgba(122,162,255,.5); border-radius:50%; transform:rotate(-18deg);
}
.splash__track{position:absolute; top:50%; left:50%; width:0; height:0; transform:rotate(-18deg) scaleY(.305)}
.splash__dotpath{position:absolute; left:-59px; top:-59px; width:118px; height:118px; animation:spin 2.4s linear infinite}
.splash__dot{
  position:absolute; top:-5px; left:54px; width:10px; height:10px; border-radius:50%;
  background:#fff; box-shadow:0 0 12px rgba(122,162,255,.9); transform:scaleY(3.28);
}
.splash__brand{font-size:22px; font-weight:600; letter-spacing:-.01em; margin-bottom:22px}
.splash__bar{position:relative; width:160px; height:2px; border-radius:2px; background:rgba(122,162,255,.15); overflow:hidden}
.splash__bar span{position:absolute; top:0; height:100%; width:40%; border-radius:2px; background:var(--primary); animation:orb-load 1.1s ease-in-out infinite}
@keyframes orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes orb-load{0%{left:-45%}100%{left:105%}}

[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}