/* AWOOLOVE — estilos compartidos */

:root{
  --ink:#0A0A0A;
  --panel:#141312;
  --panel-2:#1C1A18;
  --line:#2A2724;
  --bone:#F3F0EA;
  --mute:#8C867C;
  --awoo:#FF2D16;
  --love:#FFC93C;
  --lado:var(--awoo);
  --lado-ink:#0A0A0A;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0}

body{
  background:var(--ink);
  color:var(--bone);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

body[data-lado="LOVE"]{--lado:var(--love)}

.display{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.92;
}

.mono{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

.wrap{max-width:560px;margin:0 auto;padding:0 18px 120px}

/* ---------- marca ---------- */

.marca{display:flex;align-items:baseline;gap:.12em;font-size:clamp(30px,9vw,44px)}
.marca .a{color:var(--awoo)}
.marca .l{color:var(--love)}
.marca .slash{color:var(--line);font-size:.8em}

.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);font-weight:600;
}

/* ---------- botones ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:17px 20px;border:0;border-radius:2px;
  background:var(--lado);color:var(--lado-ink);
  font-family:Anton,sans-serif;font-size:19px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;
  transition:transform .12s ease,opacity .15s ease;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line);font-size:15px}

:focus-visible{outline:2px solid var(--lado);outline-offset:3px}

/* ---------- formulario ---------- */

.campo{margin-bottom:16px}
.campo label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:7px;font-weight:600}
.campo input{
  width:100%;padding:15px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:2px;
  color:var(--bone);font-size:16px;font-family:inherit;
}
.campo input:focus{border-color:var(--lado);outline:none}

.check{display:flex;gap:12px;align-items:flex-start;margin:22px 0;cursor:pointer}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--awoo)}
.check span{font-size:12.5px;color:var(--mute);line-height:1.5}

/* ---------- switch de lado ---------- */

.lados{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line)}
.lados button{
  background:var(--ink);border:0;padding:15px 8px;cursor:pointer;
  font-family:Anton,sans-serif;font-size:22px;letter-spacing:.08em;
  color:var(--mute);text-transform:uppercase;transition:background .18s,color .18s;
}
.lados button[data-on="1"][data-k="AWOO"]{background:var(--awoo);color:#0A0A0A}
.lados button[data-on="1"][data-k="LOVE"]{background:var(--love);color:#0A0A0A}

/* ---------- track ---------- */

.track{padding:17px 0;border-bottom:1px solid var(--line)}
.track.lider .track-nom{color:var(--lado)}
.track.sonando{position:relative}
.track.sonando::before{
  content:"";position:absolute;left:-18px;top:16px;bottom:16px;width:3px;background:var(--lado);
}

.track-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.track-nom{flex:1;min-width:0}
.track-nom{font-size:21px}
.track-pct{font-size:17px;font-weight:600;color:var(--lado)}
.badge{
  display:inline-block;margin-left:9px;padding:2px 7px;border-radius:2px;
  background:var(--lado);color:#0A0A0A;font-size:9px;letter-spacing:.16em;
  font-weight:700;text-transform:uppercase;vertical-align:middle;
}

/* medidor de 5 segmentos — el gesto principal */
.medidor{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.medidor button{
  height:44px;border:1px solid var(--line);background:var(--panel);
  cursor:pointer;padding:0;position:relative;border-radius:1px;
  transition:background .12s,border-color .12s;
}
.medidor button::after{
  content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;
  font-family:ui-monospace,monospace;font-size:12px;color:var(--mute);transition:color .12s;
}
.medidor button[data-on="1"]{background:var(--lado);border-color:var(--lado)}
.medidor button[data-on="1"]::after{color:#0A0A0A;font-weight:700}

.barra{height:4px;background:var(--panel-2);margin-top:12px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--lado);width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}

.escala{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:9px}

/* ---------- barra inferior ---------- */

.pie{
  position:fixed;left:0;right:0;bottom:0;background:var(--panel);
  border-top:1px solid var(--line);padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  z-index:20;
}
.pie-in{max-width:560px;margin:0 auto}

.aviso{
  font-size:12px;color:var(--mute);text-align:center;
  padding:12px;border:1px dashed var(--line);margin:18px 0;
}

.oculto{display:none !important}