/* =========================================================
   Millennium Music Distribution — components.css
   Piezas reutilizables: header, botones, cards, mockups
   ========================================================= */

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease),
             backdrop-filter var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-stuck{
  background:rgba(7,8,13,.78);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line-dark);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.header-inner{
  display:flex; align-items:center; gap:28px;
  width:100%;
}

/* Marca */
.brand{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand-mark{ display:inline-flex; color:#fff; }
.brand--light .brand-mark{ color:#fff; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{ font-size:15px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.brand-text small{ font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* Navegación */
.nav{ display:flex; align-items:center; gap:26px; margin-inline:auto; }
.nav-link{
  position:relative;
  font-size:14px; font-weight:500;
  color:rgba(255,255,255,.68);
  padding:6px 0;
  transition:color var(--t-fast) var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:50%; bottom:0; translate:-50% 0;
  width:0; height:2px; border-radius:2px; background:var(--blue);
  transition:width var(--t) var(--ease);
}
.nav-link:hover{ color:#fff; }
.nav-link:hover::after{ width:60%; }
.nav-link.is-active{ color:#fff; font-weight:600; }
.nav-link.is-active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nav-mobile-actions{ display:none; }

/* Botón hamburguesa */
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:11px;
  border:1px solid rgba(255,255,255,.16);
  flex-direction:column; align-items:center; justify-content:center; gap:4.5px;
}
.nav-toggle span{ display:block; width:17px; height:1.8px; border-radius:2px; background:#fff; transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }

/* ---------------- Botones ---------------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:transparent;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  border-radius:11px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
             background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ --btn-bg:var(--red); --btn-fg:#fff; box-shadow:0 6px 18px rgba(229,37,47,.26); }
.btn-primary:hover{ --btn-bg:var(--red-600); box-shadow:var(--sh-glow-red); }

.btn-blue{ --btn-bg:var(--blue); box-shadow:0 6px 18px rgba(43,127,255,.26); }
.btn-blue:hover{ --btn-bg:var(--blue-600); box-shadow:var(--sh-glow-blue); }

.btn-ghost{ --btn-bg:rgba(255,255,255,.06); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.16); }
.btn-ghost:hover{ --btn-bg:rgba(255,255,255,.13); --btn-bd:rgba(255,255,255,.30); }

.btn-outline{ --btn-bg:rgba(255,255,255,.04); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.22); }
.btn-outline:hover{ --btn-bg:rgba(255,255,255,.11); --btn-bd:rgba(255,255,255,.4); }

.btn-dark{ --btn-bg:var(--ink); --btn-fg:#fff; }
.btn-dark:hover{ --btn-bg:#000; }

.btn-sm{ padding:9px 16px; font-size:13.5px; border-radius:10px; }
.btn-lg{ padding:14px 26px; font-size:15px; border-radius:12px; }
.btn-block{ width:100%; }

/* ---------------- Badge ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.78);
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.badge svg{ color:var(--blue); }

/* ---------------- Cards ---------------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

/* Icono cuadrado redondeado */
.ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:var(--blue-soft); color:var(--blue);
  transition:transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.ico-red{ background:var(--red-soft); color:var(--red); }

/* ---------------- Check list ---------------- */
.check-list{ display:flex; flex-direction:column; gap:14px; }
.check-list li{
  display:flex; align-items:center; gap:12px;
  font-size:15.5px; font-weight:500; color:var(--ink-2);
}
.check{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--blue); color:#fff;
}
.check-list--sm li{ font-size:14px; gap:10px; color:var(--muted); }
.check-list--sm .check{ width:18px; height:18px; }

/* ---------------- Glows ---------------- */
.glow{
  position:absolute; border-radius:50%;
  filter:blur(90px); pointer-events:none;
  animation:glowDrift 13s ease-in-out infinite;
}
.glow-blue{ background:rgba(43,127,255,.34); width:520px; height:520px; }
.glow-red{ background:rgba(229,37,47,.30); width:520px; height:520px; animation-delay:-6s; }

/* =========================================================
   MOCKUP: aplicación (dashboard)
   ========================================================= */
.app{
  --app-bg:#0d1017; --app-side:#0a0d14; --app-card:#12161f;
  --app-line:rgba(255,255,255,.07);
  --app-fg:#fff; --app-muted:rgba(255,255,255,.42);
  display:grid; grid-template-columns:104px 1fr;
  background:var(--app-bg); color:var(--app-fg);
  height:100%; width:100%;
  font-size:10px; overflow:hidden;
}
.app--light{
  --app-bg:#ffffff; --app-side:#fbfcfd; --app-card:#ffffff;
  --app-line:#eceef3;
  --app-fg:#0b0d12; --app-muted:#8b93a3;
  grid-template-columns:150px 1fr;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  font-size:11px;
  height:auto;
}

.app-side{
  background:var(--app-side);
  border-right:1px solid var(--app-line);
  padding:12px 10px;
  display:flex; flex-direction:column; gap:3px;
}
.app-side-brand{ display:flex; align-items:center; gap:7px; padding:2px 6px 12px; color:currentColor; }
.app-side-brand > svg{ flex:0 0 auto; }
.app-side-brand b{ display:flex; flex-direction:column; font-size:9px; font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.app-side-brand b em{ font-style:normal; font-size:6.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--app-muted); }

.app-nav{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:7px;
  color:var(--app-muted); font-weight:500;
  font-size:9px;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.app-nav i{ width:11px; height:11px; border-radius:3.5px; background:currentColor; opacity:.45; flex:0 0 auto; }
.app-nav.is-active{ background:rgba(43,127,255,.14); color:var(--blue); font-weight:700; }
.app--light .app-nav.is-active{ background:var(--blue-soft); }
.app-nav:hover{ color:var(--app-fg); }

.app-main{ padding:14px; display:flex; flex-direction:column; gap:11px; min-width:0; }
.app-top{ display:flex; align-items:center; justify-content:space-between; }
.app-hello{ font-size:13px; font-weight:800; letter-spacing:-.02em; }
.app--light .app-hello{ font-size:16px; }
.app-dots{ display:flex; gap:5px; }
.app-dots i{ width:7px; height:7px; border-radius:50%; background:var(--app-line); background:rgba(255,255,255,.16); }
.app-tools{ display:flex; gap:6px; color:var(--app-muted); }
.app-tools i{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; border:1px solid var(--app-line); }

.app-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.app-stat{
  background:var(--app-card); border:1px solid var(--app-line);
  border-radius:10px; padding:9px 10px;
  display:flex; flex-direction:column; gap:1px;
}
.app--light .app-stat{ box-shadow:var(--sh-xs); }
.app-stat small{ font-size:7.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--app-muted); }
.app--light .app-stat small{ font-size:8.5px; }
.app-stat strong{ font-size:14px; font-weight:800; letter-spacing:-.03em; }
.app--light .app-stat strong{ font-size:19px; }
.app-stat em{ font-style:normal; font-size:7.5px; font-weight:700; color:var(--green); }
.app--light .app-stat em{ font-size:9px; }

.app-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:9px; flex:1; min-height:0; }
.app-card{
  position:relative;
  background:var(--app-card); border:1px solid var(--app-line);
  border-radius:10px; padding:10px;
  display:flex; flex-direction:column; gap:8px; min-width:0;
}
.app--light .app-card{ box-shadow:var(--sh-xs); padding:14px; }
.app-card-head{ display:flex; align-items:center; justify-content:space-between; }
.app-card-head span{ font-size:8.5px; font-weight:700; letter-spacing:-.01em; }
.app--light .app-card-head span{ font-size:11px; }
.app-card-head .pill{
  font-style:normal; font-size:7px; font-weight:700;
  padding:2px 6px; border-radius:var(--r-pill);
  background:rgba(43,127,255,.16); color:var(--blue);
}
.app--light .app-card-head .pill{ background:var(--blue); color:#fff; font-size:8.5px; padding:3px 8px; }

.spark{ width:100%; height:100%; min-height:52px; flex:1; }
.spark--lg{ min-height:120px; }
.spark-line{ stroke-dasharray:var(--len,800); stroke-dashoffset:var(--len,800); }
.is-visible .spark-line, .app--dark .spark-line{ animation:dashIn 1.9s var(--ease-out) forwards; }
.spark-area{ opacity:0; transition:opacity .9s var(--ease-out) .5s; }
.is-visible .spark-area, .app--dark .spark-area{ opacity:1; }
.spark-dot{ opacity:0; transition:opacity .4s var(--ease) 1.4s; }
.is-visible .spark-dot{ opacity:1; }
.spark-tip{
  position:absolute; right:16%; top:34%;
  background:var(--ink); color:#fff;
  font-size:9px; font-weight:700;
  padding:3px 8px; border-radius:6px;
  box-shadow:var(--sh-sm);
}

.app-list{ display:flex; flex-direction:column; gap:7px; flex:1; }
.app--light .app-list{ gap:10px; }
.app-list li{ display:flex; align-items:center; gap:7px; }
.app-list li > span{ display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1; }
.app-list b{ font-size:8px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-list em{ font-style:normal; font-size:7px; color:var(--app-muted); }
.app-list u{ text-decoration:none; font-size:7.5px; font-weight:600; color:var(--app-muted); white-space:nowrap; }
.app--light .app-list b{ font-size:10.5px; }
.app--light .app-list em{ font-size:9px; }
.app--light .app-list u{ font-size:9.5px; }

.cover{ width:18px; height:18px; border-radius:5px; flex:0 0 auto; display:block; }
.app--light .cover{ width:26px; height:26px; border-radius:7px; }
.c1{ background:linear-gradient(135deg,#2b7fff,#0f3fa8); }
.c2{ background:linear-gradient(135deg,#e5252f,#7a0c12); }
.c3{ background:linear-gradient(135deg,#8b5cf6,#312166); }

.app-btn{
  display:block; text-align:center;
  background:var(--blue); color:#fff;
  font-size:8px; font-weight:700;
  padding:6px; border-radius:7px;
}
.app--light .app-btn{ font-size:10px; padding:9px; border-radius:9px; }

/* ---------------- Laptop ---------------- */
.laptop{ position:relative; width:100%; }
.laptop[data-float]{ animation:floaty 7s ease-in-out infinite; }
.laptop-lid{
  background:linear-gradient(160deg,#20242e,#0d1015);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px 14px 6px 6px;
  padding:9px 9px 12px;
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.laptop-screen{
  position:relative;
  aspect-ratio:16/10;
  border-radius:7px;
  overflow:hidden;
  background:#0d1017;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
/* El dashboard del hero se diseña a tamaño fijo y se escala:
   así se ve idéntico en cualquier ancho de pantalla. */
.laptop-screen .app{
  position:absolute; top:0; left:0;
  width:760px; height:475px;
  transform-origin:0 0;
}
.laptop-foot{
  height:11px;
  background:linear-gradient(180deg,#1a1e26,#0b0d12);
  border-radius:0 0 12px 12px;
  margin:0 -3%;
  position:relative;
  box-shadow:0 16px 30px rgba(0,0,0,.5);
}
.laptop-foot span{
  position:absolute; left:50%; top:0; translate:-50% 0;
  width:12%; height:4px; border-radius:0 0 6px 6px;
  background:rgba(255,255,255,.12);
}

/* ---------------- Plataformas ---------------- */
.platform{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ink);
  font-size:13.5px; font-weight:700; letter-spacing:-.02em; white-space:nowrap;
  opacity:.9;
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.platform b{ font-weight:400; color:var(--muted); }
.platform:hover{ transform:translateY(-3px); opacity:1; }

/* ---------------- Donut ---------------- */
.donut-wrap{ position:relative; width:190px; height:190px; }
.donut{ width:100%; height:100%; transform:rotate(-90deg); }
.donut-seg{
  stroke-dasharray:0 100;
  stroke-linecap:butt;
  transition:stroke-dasharray 1.1s var(--ease-out);
}
.donut-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; letter-spacing:-.03em;
}

/* ---------------- Previews de herramientas ---------------- */
.tool-preview{
  position:relative;
  aspect-ratio:4/3.1;
  border-radius:12px;
  background:linear-gradient(155deg,#161a24,#080a0f);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px rgba(11,13,18,.28) inset, 0 1px 0 rgba(255,255,255,.05) inset;
}
.tool-preview > *{ transition:transform .55s var(--ease-out); }
.tool:hover .tool-preview > *{ transform:scale(1.045); }

/* Smart Link — teléfono */
.phone{
  width:44%; padding:8px 7px; border-radius:9px;
  background:#0f131b; border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:4px;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.phone-top{ width:34%; height:3px; border-radius:3px; background:rgba(255,255,255,.22); margin:0 auto 3px; }
.phone-art{ height:32px; border-radius:6px; background:linear-gradient(135deg,#2b7fff,#8b5cf6); }
.phone-row{ display:flex; align-items:center; gap:5px; }
.phone-row em{ flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,.14); }
.dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.dot.g{ background:#1DB954; } .dot.r{ background:#FF0033; }
.dot.b{ background:#2b7fff; } .dot.o{ background:#FFA200; }

/* Página de lanzamiento */
.release-page{
  width:62%; padding:11px; border-radius:10px;
  background:#0f131b; border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:7px; align-items:center;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.rp-art{ width:100%; height:52px; border-radius:8px; background:linear-gradient(135deg,#e5252f,#5c0a10); }
.rp-line{ height:5px; border-radius:3px; background:rgba(255,255,255,.18); }
.rp-line.w70{ width:70%; } .rp-line.w45{ width:45%; background:rgba(255,255,255,.10); }
.rp-btn{ width:60%; height:12px; border-radius:6px; background:var(--blue); }

/* Promo card */
.promo-card{
  width:74%; padding:10px; border-radius:10px;
  background:#0f131b; border:1px solid rgba(255,255,255,.12);
  display:flex; gap:10px; align-items:center;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.pc-art{ width:52px; height:52px; border-radius:8px; background:linear-gradient(135deg,#8b5cf6,#2b7fff); flex:0 0 auto; }
.pc-body{ display:flex; flex-direction:column; gap:6px; flex:1; }
.pc-body em{ height:5px; border-radius:3px; background:rgba(255,255,255,.16); display:block; }
.pc-body em.w80{ width:80%; } .pc-body em.w55{ width:55%; } .pc-body em.w65{ width:65%; background:rgba(255,255,255,.09); }

/* Social tiles */
.social-grid{
  width:74%;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.sg-tile{ aspect-ratio:1; border-radius:7px; }
.t1{ background:linear-gradient(135deg,#2b7fff,#123a80); }
.t2{ background:linear-gradient(135deg,#e5252f,#6b0d13); }
.t3{ background:linear-gradient(135deg,#8b5cf6,#3a2470); }
.t4{ background:linear-gradient(135deg,#1DB954,#0b4d24); }
.t5{ background:linear-gradient(135deg,#FFA200,#7a4d00); }
.t6{ background:linear-gradient(135deg,#3b4250,#151920); }

/* Presave */
.presave{
  width:60%; padding:12px; border-radius:10px;
  background:#0f131b; border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.ps-art{ width:100%; height:46px; border-radius:8px; background:linear-gradient(135deg,#111827,#2b7fff); }
.ps-bell{ color:var(--red); display:inline-flex; }
.ps-bar{ width:100%; height:6px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.ps-bar i{ display:block; height:100%; width:64%; border-radius:4px; background:var(--red); }

/* ---------------- Tarjeta de perfil (artista) ---------------- */
.profile-card{
  background:#0b0d12;
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r);
  overflow:hidden;
  color:#fff;
  box-shadow:var(--sh-lg);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.profile-card:hover{ transform:translateY(-5px); box-shadow:0 34px 80px rgba(11,13,18,.35); }
.pf-bar{ display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.07); }
.pf-brand{ margin-right:auto; display:inline-flex; color:#fff; }
.pf-bar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); }
.pf-head{ display:flex; align-items:center; gap:11px; padding:14px; }
.pf-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(140deg,#3b4250,#0f131b); border:1px solid rgba(255,255,255,.14); flex:0 0 auto; }
.pf-id{ display:flex; flex-direction:column; gap:1px; line-height:1.25; }
.pf-id b{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:800; letter-spacing:-.02em; }
.pf-id em{ font-style:normal; font-size:10px; color:rgba(255,255,255,.5); }
.pf-id u{ text-decoration:none; font-size:9.5px; color:rgba(255,255,255,.38); }
.pf-list{ padding:0 14px 14px; }
.pf-list-title{ display:block; font-size:10px; font-weight:700; color:rgba(255,255,255,.55); margin-bottom:8px; }
.pf-list ul{ display:flex; flex-direction:column; gap:8px; }
.pf-list li{ display:flex; align-items:center; gap:9px; font-size:10.5px; }
.pf-list li i{ font-style:normal; color:rgba(255,255,255,.35); width:8px; }
.pf-list li b{ font-weight:600; flex:1; }
.pf-list li u{ text-decoration:none; color:rgba(255,255,255,.4); font-size:9.5px; }
.pf-list .cover{ width:20px; height:20px; border-radius:4px; }

/* ---------------- Redes ---------------- */
.socials{ display:flex; gap:10px; }
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);
  transition:transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.socials a:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-3px); }

/* =========================================================
   CONTROLES DE FORMULARIO (calculadora)
   ========================================================= */
.field{ display:flex; flex-direction:column; gap:8px; }
.field > label{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:12.5px; font-weight:700; color:var(--ink);
  letter-spacing:-.01em;
}
.field > label b{ font-size:13px; font-weight:800; color:var(--blue); }
.field .hint{ font-size:11.5px; color:var(--muted); line-height:1.45; }

.input-wrap,
.select-wrap{
  position:relative;
  display:flex; align-items:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:11px;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input-wrap:focus-within,
.select-wrap:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(43,127,255,.14);
}
.input-wrap input{
  flex:1; min-width:0;
  border:0; background:none; outline:none;
  padding:12px 14px;
  font:inherit; font-size:17px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink);
}
.input-wrap .unit{
  padding-right:14px;
  font-size:11.5px; font-weight:600; color:var(--muted-2);
  white-space:nowrap;
}
.select-wrap select{
  flex:1; min-width:0;
  appearance:none; -webkit-appearance:none;
  border:0; background:none; outline:none;
  padding:12px 38px 12px 14px;
  font:inherit; font-size:14px; font-weight:600;
  color:var(--ink);
  cursor:pointer;
}
.select-wrap > svg{
  position:absolute; right:13px; pointer-events:none;
  color:var(--muted-2);
}

/* Atajos de streams */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips button{
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  font-size:11.5px; font-weight:700; color:var(--muted);
  transition:all var(--t-fast) var(--ease);
}
.chips button:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }
.chips button.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Slider de porcentaje */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; margin:6px 0;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--blue) var(--fill,100%), var(--line) var(--fill,100%));
  outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--white); border:2px solid var(--blue);
  box-shadow:0 2px 8px rgba(43,127,255,.35);
  cursor:grab;
  transition:transform var(--t-fast) var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--white); border:2px solid var(--blue);
  box-shadow:0 2px 8px rgba(43,127,255,.35);
  cursor:grab;
}
input[type="range"]::-moz-range-track{ height:6px; border-radius:var(--r-pill); background:transparent; }

/* Etiqueta pequeña de sección */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px;
  border-radius:var(--r-pill);
  border:1px solid #dfe4ee;
  background:var(--white);
  color:var(--muted);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.tag svg{ color:var(--blue); }