/* ============================================================
   VoxPlay — UI con los colores de la marca
   (magenta #F23EBE · morado #8B45F0 · azul #10A0F0 · marino #0D1526)
   ============================================================ */
:root{
  --pink:#F23EBE;
  --purple:#8B45F0;          /* color principal */
  --blue:#10A0F0;
  --navy:#0D1526;            /* texto fuerte y footer */
  --grad:linear-gradient(135deg,var(--pink) 0%,var(--purple) 55%,var(--blue) 100%);

  --purple-700:#5F2BB8;
  --purple-050:#F6F1FE;
  --purple-100:#EBE0FC;

  --ink:#141A2A;
  --muted:#6B7185;
  --line:rgba(70,50,140,.14);
  --line-2:rgba(70,50,140,.08);

  --bg:#ffffff;
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.82);
  --blur:saturate(150%) blur(18px);

  --shadow-sm:0 1px 2px rgba(20,26,42,.05);
  --shadow:0 2px 8px rgba(20,26,42,.05), 0 18px 40px -20px rgba(80,40,180,.28);
  --shadow-lg:0 30px 60px -28px rgba(80,40,180,.4);
  --glow:0 8px 26px -8px rgba(139,69,240,.55);

  --radius:22px;
  --radius-sm:13px;
  --pill:999px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

/* ---------- Iconos SVG ---------- */
.ico{width:1.15em; height:1.15em; display:inline-block; vertical-align:-0.16em; flex:none}
.btn .ico{width:1.05em; height:1.05em; vertical-align:-0.12em}
.ico-lg{width:2rem; height:2rem}
.ico-badge{width:2rem; height:2rem}
.ico-feat{width:2.4rem; height:2.4rem; stroke-width:1.6}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden;
}

/* ---------- Fondo aurora ---------- */
.aurora{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:#fff}
.aurora::before,.aurora::after{
  content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.45;
}
.aurora::before{
  width:60vw; height:60vw; top:-18vw; right:-12vw;
  background:radial-gradient(circle at 30% 30%, rgba(16,160,240,.4), rgba(139,69,240,.28) 55%, transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
.aurora::after{
  width:52vw; height:52vw; bottom:-20vw; left:-14vw;
  background:radial-gradient(circle at 60% 40%, rgba(242,62,190,.32), rgba(139,69,240,.22) 55%, transparent 70%);
  animation:drift2 32s ease-in-out infinite alternate;
}
body:not(.public) .aurora::before{opacity:.22}
body:not(.public) .aurora::after{opacity:.16}
@keyframes drift{to{transform:translate(-6vw,6vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(7vw,-5vh) scale(1.15)}}

a{color:var(--purple-700); text-decoration:none; transition:color .15s}
a:hover{color:var(--purple)}
h1,h2,h3{font-family:var(--font-display); margin:0 0 .2em; letter-spacing:-.02em; font-weight:600; color:var(--ink)}
h1{font-size:clamp(1.5rem,4.5vw,1.9rem); line-height:1.1}
h2{font-size:1.15rem}
p{margin:.35em 0}
small{color:var(--muted)}

.kicker{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  font-size:.7rem; letter-spacing:.32em; color:var(--purple); font-weight:600; margin:.9rem 0 .35rem;
}
.brand-mini{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.95rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.02em; margin-bottom:.3rem;
}

/* ---------- Barra superior (glass) ---------- */
.topbar{
  display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem;
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:700}
.brand img{height:30px; width:auto; display:block}
.brand-emp{
  font-family:var(--font-display); font-weight:600; color:var(--ink); letter-spacing:-.01em;
  font-size:.95rem; border-left:1px solid var(--line); padding-left:.6rem;
  max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topnav{display:flex; gap:.25rem; flex:1; flex-wrap:wrap}
.topnav a{
  padding:.5rem .9rem; border-radius:var(--pill); color:var(--muted); font-weight:500; font-size:.9rem;
  transition:background .18s, color .18s; position:relative;
}
.topnav a:hover{background:var(--purple-050); color:var(--purple-700)}
.topnav a.is-active{background:var(--purple); color:#fff; box-shadow:var(--glow)}
.topuser{display:flex; align-items:center; gap:.6rem}
.chip{
  background:var(--purple-050); color:var(--purple-700); font-weight:600; font-size:.78rem;
  padding:.4rem .8rem; border-radius:var(--pill); white-space:nowrap; border:1px solid var(--line-2);
}

/* ---------- Menú hamburguesa (móvil) ---------- */
.nav-toggle{display:none}                         /* oculto en escritorio */
@media(min-width:900px){ .nav-collapse{display:contents} }  /* wrapper transparente: nav y usuario como antes */
@media(max-width:899px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:44px; height:44px; border-radius:12px; cursor:pointer;
    background:var(--glass-strong); border:1px solid var(--line); color:var(--purple-700);
  }
  .nav-toggle .ico{width:24px; height:24px}
  .nav-collapse{display:none; flex-basis:100%; width:100%; flex-direction:column; gap:.2rem; padding:.4rem 0 .1rem}
  .nav-collapse.open{display:flex; animation:rise .25s ease both}
  .topnav{flex-direction:column; width:100%; gap:.15rem; flex:none}
  .topnav a{padding:.8rem .95rem; border-radius:12px; font-size:1rem}
  .topuser{width:100%; justify-content:space-between; padding-top:.55rem; margin-top:.3rem; border-top:1px solid var(--line)}
  .topuser .chip{font-size:.82rem}
}

/* ---------- Contenedores ---------- */
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:2rem 1.3rem; flex:1}
.wrap-narrow{max-width:500px}
.wrap-xl{max-width:1500px}   /* paneles con tablas anchas (maestro): aprovecha los lados */
.center-screen{flex:1; display:flex; align-items:center; justify-content:center; padding:1.6rem 1.2rem}

/* ---------- Tarjetas glass ---------- */
.card{
  background:var(--glass-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.7rem;
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.card + .card{margin-top:1.1rem}
.card-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap}
.grid{display:grid; gap:1.1rem}
@media(min-width:820px){ .grid-2{grid-template-columns:1fr 1fr; align-items:start} }

/* ---------- Formularios ---------- */
.field{margin-bottom:1.05rem}
label{display:block; font-weight:600; font-size:.86rem; margin-bottom:.4rem; color:var(--ink)}
.hint{color:var(--muted); font-size:.8rem; margin-top:.35rem}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%; padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; color:var(--ink); background:rgba(255,255,255,.7); transition:border-color .16s, box-shadow .16s, background .16s;
}
input::placeholder{color:#A9ADBD}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--purple); background:#fff; box-shadow:0 0 0 4px rgba(139,69,240,.14);
}
input[type=color]{padding:.25rem; height:48px; cursor:pointer}
.row{display:flex; gap:.8rem; flex-wrap:wrap}
.row > *{flex:1; min-width:140px}

/* Respiro entre el ultimo input y el boton de enviar */
form button[type=submit].btn-block,
form .btn-lg.btn-block{margin-top:1.1rem}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.25rem; border-radius:var(--radius-sm); border:1.5px solid transparent;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none; line-height:1;
  transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, filter .18s, opacity .18s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--grad); color:#fff; box-shadow:var(--glow)}
.btn-primary:visited{color:#fff}   /* enlaces-botón visitados (p. ej. "Pedir otra canción") no deben verse lila */
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 30px -8px rgba(139,69,240,.6); filter:brightness(1.05)}
.btn-primary:disabled{opacity:.5; box-shadow:none; cursor:not-allowed; transform:none; filter:grayscale(.2)}
.btn-block{width:100%}
.btn-lg{padding:1rem 1.4rem; font-size:1.02rem; border-radius:15px}
.btn-sm{padding:.5rem .85rem; font-size:.84rem; border-radius:10px}
.btn-ghost{background:rgba(255,255,255,.6); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--purple-050); border-color:var(--purple-100); color:var(--purple-700)}
.btn-soft,.btn-olive-soft{background:var(--purple-050); color:var(--purple-700); border-color:var(--line-2)}
.btn-soft:hover,.btn-olive-soft:hover{background:var(--purple-100)}
.btn-danger{background:#fff; border-color:#EFC3D4; color:#C22A5B}
.btn-danger:hover{background:#FDF0F5}

/* ---------- Flash ---------- */
.flash{max-width:1120px; margin:1rem auto -.4rem; padding:.85rem 1.1rem; border-radius:var(--radius-sm); font-weight:500; box-shadow:var(--shadow-sm); animation:rise .4s ease both}
.flash-ok{background:#EFF9F1; color:#22794A; border:1px solid #CBE9D4}
.flash-error{background:#FDF0F5; color:#C22A5B; border:1px solid #F3D2DF}
.flash-info{background:var(--purple-050); color:var(--purple-700); border:1px solid var(--purple-100)}

/* ---------- Publico (peticion / login / gracias) ---------- */
.hero-logo{text-align:center; margin-bottom:1.4rem}
.hero-logo img{height:auto; width:auto; max-width:min(260px,72%); max-height:86px; margin-inline:auto}
.hero-logo h1{margin-top:.1rem}
.badge-geo{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--purple-700);
  background:var(--purple-050); padding:.4rem .85rem; border-radius:var(--pill); margin-top:.9rem; border:1px solid var(--line-2);
}
.badge-geo.ok{color:#22794A; background:#EFF9F1; border-color:#CBE9D4}
.check-badge{
  width:76px; height:76px; margin:.4rem auto 0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.1rem; color:var(--purple); background:linear-gradient(135deg,var(--purple-050),#fff); border:1px solid var(--purple-100);
  box-shadow:0 0 0 8px rgba(139,69,240,.08), var(--shadow);
}
.check-badge .ico-badge{width:2.1rem; height:2.1rem}
.check-badge-warn{color:#C4802B; background:linear-gradient(135deg,#FDF4E7,#fff); border-color:#F0DBB8; box-shadow:0 0 0 8px rgba(196,128,43,.08), var(--shadow)}

/* ---------- Login ---------- */
.login-card{width:100%; max-width:400px}
.login-card .hero-logo img{max-height:70px}

/* ---- Pantallas de acceso (login / registro): imagen de fondo + formulario a la derecha ---- */
body.auth .aurora{ display:none; }
body.auth{ background:#0D1526 url('../img/background.png') left center / cover no-repeat fixed; }
.authwrap{
  flex:1; display:flex; align-items:flex-start; justify-content:flex-end;
  padding:1rem clamp(2rem, 10vw, 10rem) 1rem 2rem;   /* más aire a la derecha: el form no queda pegado al borde */
}
/* margin-block:auto -> centra verticalmente si hay espacio; si el form es más alto
   que la pantalla, se alinea arriba y hace scroll sin recortar el encabezado. */
.authwrap > .card{ width:100%; max-width:430px; margin-block:auto; box-shadow:0 30px 80px -22px rgba(0,0,0,.65); }
.authwrap > .wrap-narrow{ max-width:660px; }   /* registro: más ancho y en 2 columnas = más cuadrado */

/* Registro compacto: que entre sin scroll (solo esta tarjeta) */
.authwrap > .wrap-narrow{ padding:1.2rem 1.4rem; }
.authwrap > .wrap-narrow .hero-logo{ margin-bottom:.55rem; }
.authwrap > .wrap-narrow .hero-logo img{ max-height:38px; }
.authwrap > .wrap-narrow .hero-logo h1{ font-size:1.35rem; margin-top:.1rem; }
.authwrap > .wrap-narrow .hero-logo .muted{ font-size:.82rem; }
.authwrap > .wrap-narrow .field{ margin-bottom:.5rem; }
.authwrap > .wrap-narrow label{ margin-bottom:.22rem; font-size:.82rem; }
.authwrap > .wrap-narrow input,
.authwrap > .wrap-narrow select{ padding:.55rem .85rem; }
.authwrap > .wrap-narrow .hint{ font-size:.76rem; margin-top:.2rem; }
.authwrap > .wrap-narrow .opt-modos{ gap:.5rem; }
.authwrap > .wrap-narrow .opt-modo{ flex-direction:row; align-items:center; justify-content:center; gap:.5rem; padding:.5rem .5rem; }
.authwrap > .wrap-narrow .opt-ico .ico-lg{ width:1.35rem; height:1.35rem; }
.authwrap > .wrap-narrow .btn-lg{ padding:.72rem 1.2rem; }
.authwrap > .wrap-narrow form > p.tc{ margin-top:.55rem !important; }

/* Footer más delgado en las pantallas de acceso */
body.auth .sitefoot{ padding:.7rem 1.4rem; }

/* Footer visible y legible sobre el fondo oscuro */
body.auth .sitefoot{ border-top:none; color:rgba(255,255,255,.72); position:relative; z-index:1; text-shadow:0 1px 2px rgba(0,0,0,.5); }
body.auth .sitefoot-links a{ color:#fff; }
body.auth .sitefoot-links a:hover{ color:var(--pink); }
body.auth .sitefoot-brand{ color:#fff !important; }
body.auth .sitefoot-links .sep{ color:rgba(255,255,255,.4); }

@media (max-width:820px){
  /* En móvil: centrar el formulario y oscurecer el fondo con una capa DENTRO del
     background (no tapa flash ni contenido). */
  body.auth{
    background-image: linear-gradient(rgba(13,21,38,.5), rgba(13,21,38,.5)), url('../img/background.png');
    background-position: center, 26% center;
    background-size: cover, cover;
    background-attachment: scroll;
  }
  .authwrap{ justify-content:center; padding:1.4rem 1.05rem; }
  .authwrap > .card, .authwrap > .wrap-narrow{ max-width:480px; }
}

/* ---------- Panel DJ: barra de herramientas de la cola ---------- */
.cola-tools{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

/* ---------- Aviso "falta poco para cerrar" (DJ y cliente) ---------- */
.aviso-cierre{
  padding:.8rem 1.05rem; border-radius:var(--radius-sm); font-size:.92rem; font-weight:500;
  background:#FFF6E6; color:#9A6212; border:1px solid #F3DCA6; box-shadow:var(--shadow-sm);
  margin-bottom:1.2rem; animation:rise .35s ease both;
}
.aviso-cierre b{font-weight:700}
.aviso-cierre.cerrado{background:#FDF0F5; color:#C22A5B; border-color:#F3D2DF}
.aviso-cierre.ok{background:#EAF7EF; color:#1B7A44; border-color:#BFE6CD}
.aviso-cierre.info{background:#EEF2FF; color:#3B4B8A; border-color:#CBD5F5}
.aviso-cierre .ico{width:1.05em; height:1.05em; vertical-align:-.15em; margin-right:.15rem}

/* ---------- Suscripción: selector de plan y frecuencia ---------- */
.planopt{display:block; cursor:pointer; margin:0}
.planopt input{position:absolute; opacity:0; pointer-events:none}
.planopt-body{
  display:flex; flex-direction:column; gap:.25rem;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:.85rem 1rem; background:var(--glass-strong); transition:border-color .15s, box-shadow .15s;
}
.planopt:hover .planopt-body{border-color:var(--purple-300,#d6c3f2)}
.planopt input:checked + .planopt-body{border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,58,237,.14)}
.planopt input:focus-visible + .planopt-body{outline:2px solid var(--purple); outline-offset:2px}
.planopt-body b{font-family:var(--font-display); font-size:1.05rem}
.planopt-precio{font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums}
.planopt-precio .muted{font-size:.8rem; font-weight:500}

.segmento{display:inline-flex; gap:.35rem; background:var(--purple-050); padding:.3rem; border-radius:999px; flex-wrap:wrap}
.segmento .seg{
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; margin:0;
  padding:.4rem .95rem; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--muted); transition:background .15s, color .15s;
}
.segmento .seg input{position:absolute; opacity:0; pointer-events:none}
.segmento .seg.on{background:#fff; color:var(--purple-700); box-shadow:var(--shadow-sm)}
.segmento .seg .muted{font-weight:500}

.acciones-pago{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}
.btn-sm{padding:.34rem .7rem; font-size:.82rem; gap:.3rem}
.btn-sm .ico{width:1em; height:1em}

/* Mi suscripción: igualar la altura de "días restantes" y "Tu plan" y centrar
   verticalmente el contador para que ambos bloques queden al mismo nivel. */
@media(min-width:820px){ .grid-eq{align-items:stretch} }
.sus-dias{display:flex; flex-direction:column; justify-content:center; gap:.05rem}
.sus-ico{
  width:56px; height:56px; border-radius:50%; margin:0 auto .6rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-050); color:var(--purple); border:1px solid var(--line-2);
}
.sus-ico .ico{width:27px; height:27px}
.sus-ico.is-off{background:#FDF0F5; color:#C22A5B; border-color:#F3D2DF}

/* "Cambiar de plan" hace scroll a la sección de pago y la resalta un momento. */
#pago{scroll-margin-top:90px}
#pago:target{animation:pago-flash 1.4s ease}
@keyframes pago-flash{
  0%{box-shadow:0 0 0 0 rgba(124,58,237,0)}
  25%{box-shadow:0 0 0 3px rgba(124,58,237,.38)}
  100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}
}

/* ---------- Panel maestro: dashboard ---------- */
/* KPIs: tarjetas compactas y rectangulares con margen, sin estirarse a full width */
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; margin-bottom:1.5rem}
.kpi{
  background:var(--glass-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem 1rem; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.kpi::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--grad)}
.kpi b{
  display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1; font-weight:700;
  background:linear-gradient(135deg,var(--purple-700),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.kpi span{color:var(--muted); font-size:.78rem; margin-top:.3rem; display:block}

/* ---------- Historial: tarjetas de estadística (valor de texto) ---------- */
.estats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; margin-bottom:1.1rem}
.estat{
  background:var(--glass-strong); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.9rem 1rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.estat::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--grad)}
.estat-label{display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.76rem; font-weight:600}
.estat-label .ico{color:var(--purple); width:1em; height:1em}
.estat-val{
  display:block; font-family:var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.25;
  margin:.35rem 0 .15rem; color:var(--ink);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.estat-count{color:var(--purple-700); font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums}
.estat-chart{
  background:var(--glass-strong); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1rem 1.1rem .5rem; box-shadow:var(--shadow-sm);
}

/* Estadísticas por empresa (bloque dinámico) */
.stats-controls{display:flex; gap:1.1rem; flex-wrap:wrap; align-items:flex-end; margin:1.2rem 0 .3rem}
.stats-controls .field{margin:0}
.stats-controls select{min-width:210px}
.stats-controls input[type=date]{min-width:150px}
.stats-sub{font-size:1rem; font-weight:600; color:var(--ink); margin:.4rem 0 .8rem}

/* Gráfico de barras verticales con número arriba y etiqueta abajo */
.vchart{display:flex; align-items:flex-end; gap:5px; height:180px; padding-top:1.3rem; overflow-x:auto; padding-bottom:.2rem}
.vchart .col{flex:1 0 30px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%}
.vchart.clickable .col{cursor:pointer}
.vchart .cval{font-size:.66rem; font-weight:700; color:var(--purple-700); font-variant-numeric:tabular-nums; line-height:1; min-height:.85em}
.vchart .bar{width:100%; max-width:30px; background:linear-gradient(var(--blue),var(--purple)); border-radius:5px 5px 0 0; min-height:2px; transition:height .25s, filter .15s}
.vchart.clickable .col:hover .bar{filter:brightness(1.12)}
.vchart .col.is-sel .bar{outline:2px solid var(--purple); outline-offset:2px}
.vchart .col.is-sel .cval{color:var(--pink)}
.vchart .lbl{font-size:.62rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1; min-height:.85em}
#stats-hora-scope{font-weight:600}

/* Buscador de empresas */
.buscador-emp{display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.7);
  border:1.5px solid var(--line); border-radius:var(--pill); padding:.15rem .15rem .15rem .8rem; min-width:min(320px,100%)}
.buscador-emp .ico{color:var(--muted); flex:none}
.buscador-emp input{border:none; background:transparent; padding:.5rem .2rem; flex:1; min-width:0; font:inherit}
.buscador-emp input:focus{outline:none; box-shadow:none}

/* Acciones en grilla ordenada (maestro + usuarios): 3 columnas parejas */
.acc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; min-width:250px}
.acc-grid form{margin:0}
.acc-grid .btn{width:100%; padding-left:.5rem; padding-right:.5rem; white-space:nowrap}
@media(max-width:560px){ .acc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Paginacion */
.paginacion{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.2rem}
.pag-info{color:var(--muted); font-size:.9rem}
.btn.is-disabled{opacity:.4; pointer-events:none}
.chart-hours{display:flex; align-items:flex-end; gap:3px; height:130px; padding-top:.4rem}
.chart-hours .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%}
.chart-hours .bar{width:100%; max-width:20px; background:linear-gradient(var(--blue),var(--purple)); border-radius:4px 4px 0 0; transition:height .3s}
.chart-hours .hlabel{font-size:.62rem; color:var(--muted); font-variant-numeric:tabular-nums}
.hbars{display:grid; gap:.65rem}
.hbar{display:grid; grid-template-columns:minmax(90px,140px) 1fr auto; gap:.6rem; align-items:center; font-size:.88rem}
.hbar-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500}
.hbar .track{background:var(--purple-050); border-radius:var(--pill); height:14px; overflow:hidden; border:1px solid var(--line-2)}
.hbar .fill{display:block; height:100%; background:linear-gradient(90deg,var(--purple),var(--blue)); border-radius:var(--pill); min-width:2px}
.hbar-val{font-family:var(--font-display); font-weight:600; color:var(--purple-700); font-variant-numeric:tabular-nums}

/* ---------- Panel DJ: estadisticas ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-bottom:1.4rem}
@media(max-width:560px){ .stats{grid-template-columns:1fr} }
.stat{
  background:var(--glass-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.3rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.stat::after{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--grad)}
.stat b{
  display:block; font-family:var(--font-display); font-size:2.1rem; line-height:1; font-weight:600;
  background:linear-gradient(135deg,var(--purple-700),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{color:var(--muted); font-size:.82rem; margin-top:.25rem; display:block}

/* ---------- Cola ---------- */
.queue{display:grid; gap:.75rem}
.qcard{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.15rem; border-radius:var(--radius-sm);
  background:var(--glass-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden; transition:transform .16s, box-shadow .16s;
}
.qcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad)}
.qcard:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.qcard.is-playing{border-color:rgba(139,69,240,.4); box-shadow:0 0 0 3px rgba(139,69,240,.12), var(--shadow)}
.qcard.is-playing::before{width:5px; box-shadow:0 0 14px rgba(139,69,240,.6)}
.qcard.is-new{animation:pop .55s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{0%{transform:scale(.97); box-shadow:0 0 0 8px rgba(139,69,240,.18)}100%{transform:scale(1)}}
.qorder{font-family:var(--font-display); font-weight:600; color:var(--purple-700); font-size:1.15rem; min-width:2rem; text-align:center; font-variant-numeric:tabular-nums}
.qinfo{flex:1; min-width:0}
.qsong{font-family:var(--font-display); font-weight:600; font-size:1.06rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em}
.qmeta{color:var(--muted); font-size:.86rem; margin-top:.2rem}
.qmeta b{color:var(--ink); font-weight:600}
.qactions{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end}
.qtime{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.82rem; white-space:nowrap}

.empty{text-align:center; color:var(--muted); padding:3.5rem 1rem}
.empty h3{color:var(--ink)}

/* ---------- Badges de estado ---------- */
.badge{display:inline-block; padding:.24rem .65rem; border-radius:var(--pill); font-size:.74rem; font-weight:600; letter-spacing:.01em}
.b-pendiente{background:var(--purple-050); color:var(--purple-700); border:1px solid var(--line-2)}
.b-reproduciendo{background:#E9F4FD; color:#1273B8; border:1px solid #C9E4F8}
.b-cantada{background:#EEF0F4; color:var(--muted); border:1px solid var(--line-2)}
.b-cancelada{background:#FDF0F5; color:#C22A5B; border:1px solid #F3D2DF}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(255,255,255,.5)}
table.data{width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px}
table.data th,table.data td{padding:.75rem .95rem; text-align:left; border-bottom:1px solid var(--line-2)}
table.data th{background:var(--purple-050); color:var(--purple-700); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-display); font-weight:600}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover td{background:rgba(246,241,254,.7)}

.filters{display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1.3rem}
.filters .field{margin-bottom:0}

/* ---------- Footer corporativo (fondo claro, letras de marca) ---------- */
.sitefoot{
  background:transparent; color:var(--muted); margin-top:auto;
  padding:2rem 1.4rem 2.4rem; font-size:.92rem; border-top:1px solid var(--line-2);
}
.sitefoot-links{
  max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:center;
  gap:1rem; flex-wrap:wrap;
}
.sitefoot-links a{color:var(--purple-700)}
.sitefoot-links a:hover{color:var(--purple)}
.sitefoot-brand{color:var(--purple) !important; font-weight:700}
.sitefoot-links .sep{color:var(--line)}

/* ---------- Utilidades ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.tc{text-align:center}
.muted{color:var(--muted)}
hr{border:none; border-top:1px solid var(--line-2)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; background:var(--purple-050); padding:.1em .4em; border-radius:6px; color:var(--purple-700)}
.url-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--purple-050); color:var(--purple-700);
  padding:.8rem .95rem; border-radius:var(--radius-sm); word-break:break-all; border:1px dashed rgba(139,69,240,.4); font-size:.9rem;
}
.spin-dot{width:9px; height:9px; border-radius:50%; background:var(--blue); display:inline-block; box-shadow:0 0 0 0 rgba(16,160,240,.5); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,160,240,.5)}70%{box-shadow:0 0 0 8px rgba(16,160,240,0)}100%{box-shadow:0 0 0 0 rgba(16,160,240,0)}}

/* ---------- Peticion: selector de modo ---------- */
.opt-modos{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.opt-modo{
  display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center;
  padding:1rem .7rem; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:rgba(255,255,255,.7); font:inherit; font-weight:600; font-size:.86rem; line-height:1.3;
  color:var(--ink); cursor:pointer; transition:border-color .16s, background .16s, box-shadow .16s, transform .12s;
}
.opt-modo:hover{border-color:var(--purple); background:var(--purple-050)}
.opt-modo.is-selected{
  border-color:var(--purple); background:var(--purple-050);
  box-shadow:0 0 0 4px rgba(139,69,240,.14); color:var(--purple-700);
}
.opt-ico{line-height:1; color:var(--purple); display:flex; align-items:center; justify-content:center}
.lnk-ico{display:inline-flex; align-items:center; gap:.35rem}
.opt-radio input{position:absolute; opacity:0; pointer-events:none}
.opt-radio{position:relative}

/* ---------- Modal (buscar en YouTube desde el panel del DJ) ---------- */
.modal{
  position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start; justify-content:center;
  background:rgba(20,26,42,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:6vh 1rem 1rem; overflow-y:auto; animation:rise .25s ease both;
}
.modal-box{
  position:relative; width:100%; max-width:520px; background:#fff; border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:1.6rem;
}
.modal-box h2{display:flex; align-items:center; gap:.5rem}
.modal-close{
  position:absolute; top:.7rem; right:.9rem; border:none; background:transparent; cursor:pointer;
  font-size:1.7rem; line-height:1; color:var(--muted); padding:.2rem .4rem; border-radius:8px;
}
.modal-close:hover{background:var(--purple-050); color:var(--purple-700)}

/* ---------- Peticion: buscador de YouTube ---------- */
.yt-buscar{display:flex; gap:.55rem}
.yt-buscar input{flex:1; min-width:0}
.yt-lista{display:grid; gap:.55rem; margin-bottom:1.05rem; max-height:340px; overflow-y:auto; padding-right:.15rem}
.yt-item{
  display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:.55rem; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:rgba(255,255,255,.7); font:inherit; cursor:pointer;
  transition:border-color .16s, background .16s;
}
.yt-item:hover{border-color:var(--purple); background:var(--purple-050)}
.yt-item img{width:88px; height:50px; object-fit:cover; border-radius:8px; flex:none}
.yt-item-info{min-width:0}
.yt-item-info b{display:block; font-size:.88rem; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.yt-item-info small{color:var(--muted); font-size:.76rem}
.yt-sel{
  display:flex; align-items:center; gap:.75rem; padding:.65rem; margin-bottom:1.05rem;
  border:1.5px solid var(--purple); border-radius:var(--radius-sm); background:var(--purple-050);
  box-shadow:0 0 0 4px rgba(139,69,240,.12);
}
.yt-sel img{width:88px; height:50px; object-fit:cover; border-radius:8px; flex:none}
.yt-sel-info{flex:1; min-width:0}
.yt-sel-info b{display:block; font-size:.88rem; line-height:1.3}
.yt-sel-info small{display:block}

/* ---------- Panel DJ: pista de YouTube ---------- */
.btn-yt{background:#fff; border-color:#F2C4C4; color:#C4302B}
.btn-yt:hover{background:#FDF0F0; border-color:#E8A9A9}
.tag-yt{
  display:inline-block; padding:.1rem .5rem; border-radius:var(--pill); font-size:.7rem; font-weight:600;
  background:#FDF0F0; color:#C4302B; border:1px solid #F2C4C4;
}
.qsong a{color:inherit; text-decoration:underline; text-decoration-color:rgba(196,48,43,.45); text-underline-offset:3px}
.qsong a:hover{color:#C4302B}

/* ---------- Gracias: turno en la cola ---------- */
.turno{margin-top:.4rem}
.turno-num{
  font-family:var(--font-display); font-size:3.4rem; font-weight:600; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums; margin:.3rem 0 .15rem;
}
.turno-txt{font-size:1.02rem; margin:.2rem 0}
.turno-ya{font-family:var(--font-display); font-weight:600; color:var(--purple-700); font-size:1.15rem}
.turno-acciones{display:flex; flex-direction:column; gap:1rem; margin-top:1.3rem}
.turno-acciones .btn{margin:0}

/* ---------- QR de la empresa ---------- */
.qr-caja{display:flex; justify-content:center; padding:.6rem 0}
.qr-preview canvas{box-shadow:var(--shadow); border:1px solid var(--line); border-radius:12px}

/* ---------- Landing / Onboarding ---------- */
.lnav{
  display:flex; align-items:center; gap:1.2rem; padding:.8rem 1.5rem; flex-wrap:wrap;
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
.lnav .brand img{height:34px}
.lnav-links{display:flex; gap:.3rem; flex:1}
.lnav-links a{padding:.5rem .9rem; border-radius:var(--pill); color:var(--muted); font-weight:500; font-size:.92rem}
.lnav-links a:hover{background:var(--purple-050); color:var(--purple-700)}
.lnav-cta{display:flex; align-items:center; gap:.55rem}
.lang-switch{border:1px solid var(--line); border-radius:var(--pill); overflow:hidden; display:inline-flex; font-size:.78rem; font-weight:600}
.lang-switch a{padding:.35rem .6rem; color:var(--muted)}
.lang-switch a.is-on{background:var(--purple); color:#fff}

/* Landing: menú hamburguesa en móvil (reusa el botón .nav-toggle) */
@media(min-width:900px){ .lnav-collapse{display:contents} }
@media(max-width:899px){
  .lnav-collapse{display:none; flex-basis:100%; width:100%; flex-direction:column; gap:.6rem; padding:.4rem 0 .2rem}
  .lnav-collapse.open{display:flex; animation:rise .25s ease both}
  .lnav-links{flex-direction:column; gap:.15rem; width:100%; flex:none}
  .lnav-links a{padding:.8rem .95rem; border-radius:12px; font-size:1rem}
  .lnav-cta{width:100%; flex-wrap:wrap; gap:.6rem; padding-top:.5rem; border-top:1px solid var(--line)}
  .lnav-cta .lang-switch{order:3}
  .lnav-cta .btn{flex:1 1 40%; justify-content:center; font-size:.95rem}
}

/* Hero con imagen (más premium que el título con degradado sobre blanco) */
.lhero{
  position:relative; text-align:center; color:#fff;
  padding:clamp(3.6rem,9vw,6.2rem) 1.4rem clamp(3rem,7vw,5rem);
  background:
    linear-gradient(180deg, rgba(13,21,38,.55) 0%, rgba(13,21,38,.82) 100%),
    #0D1526 url('../img/background.png') center 28% / cover no-repeat;
}
.lhero-inner{max-width:760px; margin:0 auto}
.lhero-eyebrow{
  display:inline-block; margin-bottom:1.05rem; padding:.34rem .9rem; border-radius:var(--pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.lhero h1{
  font-size:clamp(2.1rem,5.6vw,3.4rem); line-height:1.05; margin-bottom:.45em; font-weight:700;
  letter-spacing:-.02em; color:#fff; background:none; -webkit-text-fill-color:#fff;
}
.lhero-sub{color:rgba(255,255,255,.86); font-size:clamp(1.02rem,2.3vw,1.2rem); max-width:600px; margin:0 auto 1.9rem; line-height:1.5}
.lhero .hint{margin-top:.9rem; color:rgba(255,255,255,.72)}

.lsec{padding:2.6rem 1.4rem; max-width:1020px; margin:0 auto; width:100%}
.lsec-titulo{text-align:center; font-size:clamp(1.4rem,3.5vw,1.9rem); margin-bottom:.4em}
.lbenef{display:grid; gap:1.1rem; margin-top:1.6rem; align-items:stretch}
@media(min-width:760px){ .lbenef{grid-template-columns:repeat(3,1fr)} }
.lbenef-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.lbenef-ico{
  width:60px; height:60px; margin:0 auto .9rem; border-radius:16px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--purple-050),#fff); border:1px solid var(--purple-100);
  color:var(--purple);
}
/* El titulo reserva 2 lineas para que el parrafo arranque a la misma altura en las 3 tarjetas */
.lbenef-card h3{
  min-height:2.5em; display:flex; align-items:center; justify-content:center; margin-bottom:.5rem;
}
.lbenef-card p{margin:0}

.ptoggles{display:flex; justify-content:center; gap:.8rem; margin:1.6rem 0 1.8rem; flex-wrap:wrap}
.ptoggle{display:inline-flex; border:1.5px solid var(--line); border-radius:var(--pill); overflow:hidden; background:rgba(255,255,255,.7)}
.ptoggle button{
  font:inherit; font-weight:600; font-size:.9rem; border:none; background:transparent; color:var(--muted);
  padding:.55rem 1.1rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;
}
.ptoggle button.is-on{background:var(--purple); color:#fff}
.ptag{font-size:.68rem; background:var(--pink); color:#fff; border-radius:var(--pill); padding:.12rem .5rem; font-weight:700}

.planes{display:grid; gap:1.2rem; max-width:860px; margin:0 auto}
@media(min-width:720px){ .planes{grid-template-columns:1fr 1fr; align-items:start} }
#moneda-nota{margin-top:1.8rem}
.plan-card{position:relative; padding:2rem 1.8rem}
.plan-card h3{font-size:1.3rem}
.plan-sub{min-height:2.6em}
.plan-destacado{border:2px solid var(--purple); box-shadow:0 0 0 5px rgba(139,69,240,.1), var(--shadow-lg)}
.plan-badge{
  position:absolute; top:-0.85rem; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:.3rem .9rem; border-radius:var(--pill); text-transform:uppercase;
}
.plan-precio{margin:1rem 0 .4rem}
.plan-precio b{
  font-family:var(--font-display); font-size:2.3rem; font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--purple-700),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plan-per{color:var(--muted); font-weight:500; margin-left:.25rem}
.plan-cobro{margin:.15rem 0 1.2rem; font-size:.82rem; color:var(--muted)}
.plan-feats{list-style:none; margin:1rem 0 1.4rem; padding:0}
.plan-feats li{padding:.42rem 0 .42rem 1.7rem; position:relative; font-size:.94rem; border-bottom:1px dashed var(--line-2)}
.plan-feats li:last-child{border-bottom:none}
.plan-feats li::before{content:"✓"; position:absolute; left:.2rem; color:var(--blue); font-weight:700}
.plan-feats li.feat-plus{font-weight:600}
.plan-feats li.feat-plus::before{content:"★"; color:var(--pink)}

/* Landing: estética más editorial (sin los bordes "de plantilla") */
.landing .lsec{padding-top:clamp(3rem,6vw,4.2rem); padding-bottom:clamp(2rem,4vw,3rem)}
.landing .lsec-titulo{font-weight:700; letter-spacing:-.01em}
.landing .lbenef{margin-top:2rem; gap:1.6rem}
.landing .lbenef .card{background:transparent; border:none; box-shadow:none; padding:.6rem .5rem; animation:none; margin-top:0}
.landing .lbenef-ico{width:64px; height:64px; border-radius:18px}
.landing .plan-card{background:#fff; border:1px solid var(--line-2); box-shadow:0 16px 48px -24px rgba(13,21,38,.22); margin-top:0}
.landing .plan-destacado{border:1.5px solid var(--purple); box-shadow:0 20px 56px -22px rgba(139,69,240,.32)}

/* Onboarding: video de demostracion */
.lvideo{max-width:900px; margin:0 auto; border-radius:18px; overflow:hidden; background:var(--navy); box-shadow:0 24px 60px -28px rgba(13,21,38,.5)}
.lvideo video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000}
.lvideo-ph{aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; text-align:center; padding:1.6rem; color:#fff; background:var(--grad)}
.lvideo-ph .ico-feat{width:48px; height:48px; opacity:.92}
.lvideo-ph span{font-size:.92rem; max-width:320px; opacity:.92}

/* ¿Cómo funciona? (pasos) */
.pasos{display:grid; gap:1.8rem; margin-top:2.2rem}
@media(min-width:760px){ .pasos{grid-template-columns:repeat(4,1fr)} }
.paso{text-align:center}
.paso-num{
  font-family:var(--font-display); font-size:2.6rem; font-weight:700; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.paso h3{margin:.55rem 0 .3rem; font-size:1.06rem}
.paso p{margin:0; color:var(--muted); font-size:.94rem; line-height:1.5}

/* Preguntas frecuentes (acordeón nativo) */
.faq{max-width:760px; margin:2.2rem auto 0}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none; cursor:pointer; padding:1.05rem .2rem; font-weight:600; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--purple); font-size:1.4rem; font-weight:400; line-height:1; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 .2rem 1.1rem; color:var(--muted); line-height:1.6}

.lfinal{padding-bottom:4rem}

/* ---------- Paginas legales ---------- */
.legal{max-width:760px; margin:0 auto; padding:2.5rem 1.4rem; flex:1}
.legal h1{margin-bottom:.6em}
.legal h2{margin-top:1.6em}
.legal p, .legal li{color:#3C4358; font-size:.96rem}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}