/* daezpro.com — 14-ds-components.css
   Componentes del DS para el sitio estático (F1.T6).
   Consume exclusivamente tokens de 00-tokens-base.css (CONTRATO-TOKENS.md).
   Cero hex sueltos: solo var(--…).
   Clases estables (F4.A2): .btn(.--primary/--secondary/--ghost/--invert/--sm),
   .chip(.--ok/--warn/--risk/--theme), .card(.--lift/--theme-top), .pill,
   .kicker, .field, .slider, .metric, .nav, .footer. */

/* ---------------------------------------------------------------- .btn */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2, 6px);
  border:1px solid transparent;
  border-radius:var(--r-md);
  padding:10px 18px;
  font-family:var(--font-ui);
  font-size:var(--fs-title);
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  box-shadow:var(--sh-focus);
}
.btn--primary{
  background:var(--primary);
  color:var(--text-invert);
}
.btn--primary:hover{ background:var(--primary-hover); }
.btn--primary:active{ background:var(--primary-press); }
.btn--secondary{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text-strong);
}
.btn--secondary:hover{ background:var(--bg-canvas); border-color:var(--border-strong); }
.btn--ghost{
  background:transparent;
  color:var(--text-muted);
}
.btn--ghost:hover{ background:var(--bg-canvas); color:var(--text-strong); }
.btn--invert{
  background:var(--surface);
  color:var(--text-strong);
}
.btn--sm{
  padding:8px 14px;
  font-size:var(--fs-body);
  border-radius:var(--r-sm);
}
.btn[disabled], .btn[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
}

/* --------------------------------------------------------------- .chip */
.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2, 6px);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:4px 12px;
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--surface);
  color:var(--text-muted);
}
.chip--ok{ color:var(--success-text); background:var(--success-soft); border-color:var(--success); }
.chip--warn{ color:var(--warning-text); background:var(--warning-soft); border-color:var(--warning); }
.chip--risk{ color:var(--danger-text); background:var(--danger-soft); border-color:var(--danger); }
.chip--theme{
  color:var(--theme-energy-text, var(--text-strong));
  border-color:var(--theme-energy, var(--border));
}
.chip[data-theme-color="mtto"]{ color:var(--theme-mtto-text); border-color:var(--theme-mtto); }
.chip[data-theme-color="admin"]{ color:var(--theme-admin-text); border-color:var(--theme-admin); }
.chip[data-theme-color="money"]{ color:var(--theme-money-text); border-color:var(--theme-money); }

/* --------------------------------------------------------------- .card */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
  padding:24px;
}
.card--lift{ transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.card--lift:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-md);
}
.card--theme-top{ border-top:3px solid var(--theme-energy, var(--primary)); }
.card[data-theme-color="mtto"]{ border-top-color:var(--theme-mtto); }
.card[data-theme-color="admin"]{ border-top-color:var(--theme-admin); }
.card[data-theme-color="money"]{ border-top-color:var(--theme-money); }

/* --------------------------------------------------------------- .pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:8px 16px;
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--text-body);
  background:var(--surface);
  cursor:pointer;
}
.pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--border-strong);
}
.pill:hover{ border-color:var(--text-muted); }
.pill.is-active{
  color:var(--text-strong);
  border-color:var(--theme-energy, var(--primary));
}
.pill.is-active::before{ background:var(--theme-energy, var(--primary)); }
.pill[data-theme-color="mtto"].is-active{ border-color:var(--theme-mtto); }
.pill[data-theme-color="mtto"].is-active::before{ background:var(--theme-mtto); }
.pill[data-theme-color="admin"].is-active{ border-color:var(--theme-admin); }
.pill[data-theme-color="admin"].is-active::before{ background:var(--theme-admin); }
.pill[data-theme-color="money"].is-active{ border-color:var(--theme-money); }
.pill[data-theme-color="money"].is-active::before{ background:var(--theme-money); }

/* ------------------------------------------------------------- .kicker */
.kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-strong);
}

/* -------------------------------------------------------------- .field */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field label{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.field input, .field select, .field textarea{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-strong);
  padding:10px 12px;
  font-family:var(--font-ui);
  font-size:var(--fs-title);
  width:100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--sh-focus);
}
.field .field__error{
  font-size:var(--fs-sm);
  color:var(--danger-text);
}
.field input[aria-invalid="true"]{
  border-color:var(--danger);
}

/* ------------------------------------------------------------- .slider */
.slider{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.slider__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.slider__label{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.slider__value{
  font-family:var(--font-mono);
  font-size:var(--fs-title);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text-strong);
}
.slider input[type="range"]{
  width:100%;
  height:32px;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.slider input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--border);
}
.slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--surface);
  box-shadow:var(--sh-sm);
  margin-top:-7px;
}
.slider input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--border);
}
.slider input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--surface);
  box-shadow:var(--sh-sm);
}
.slider input[type="range"]:focus-visible::-webkit-slider-thumb{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.slider input[type="range"]:focus-visible::-moz-range-thumb{
  outline:3px solid var(--ring);
  outline-offset:2px;
}

/* ------------------------------------------------------------- .metric */
.metric{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:12px 16px;
  box-shadow:var(--sh-xs);
}
.metric__label{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.metric__value{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:var(--fs-h2);
  font-variant-numeric:tabular-nums;
  color:var(--text-strong);
  line-height:1;
}
.metric__unit{
  font-size:var(--fs-sm);
  font-weight:400;
  color:var(--text-muted);
  margin-left:4px;
}
.metric[data-tone="ok"] .metric__value{ color:var(--success-text); }
.metric[data-tone="warn"] .metric__value{ color:var(--warning-text); }
.metric[data-tone="danger"] .metric__value{ color:var(--danger-text); }

/* --------------------------------------------------------------- .nav */
.nav{
  position:sticky;
  top:0;
  z-index:var(--z-sticky, 10);
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  height:68px;
  display:flex;
  align-items:center;
}
.nav__brand{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-strong);
}
.nav__brand::after{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  margin-left:6px;
}
.nav__link{
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--text-body);
  padding:8px 12px;
  border-radius:var(--r-sm);
}
.nav__link:hover{ color:var(--text-strong); background:var(--bg-canvas); }
.nav__link.is-active{ color:var(--primary); }

/* ------------------------------------------------------------ .footer */
.footer{
  border-top:1px solid var(--border);
  background:var(--bg-canvas);
  padding:40px 0;
  font-size:var(--fs-body);
  color:var(--text-body);
}
.footer a{ color:var(--primary); }
.footer a:hover{ text-decoration:underline; }

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .card--lift, .pill, .nav, .footer{
    transition:none;
    transform:none;
  }
}