/* daezpro.com — 15-ds-learn-components.css
   Componentes F1 ola 3 para el sitio estático (RadioGroup, NumberField,
   StreakIndicator, LessonNode, PathMap, CertificateSheet).
   Consume exclusivamente tokens de 00-tokens-base.css (CONTRATO-TOKENS.md).
   Cero hex sueltos: solo var(--…).
   Clases estables (F4.A2): .ds-field, .ds-radio, .ds-streak, .ds-lesson-node,
   .ds-path-map, .ds-certificate. */

/* -------------------------------------------------------- .ds-field */
.ds-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.ds-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);
}
.ds-field__control{
  position:relative;
}
.ds-field input{
  height:44px;
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-strong);
  padding:0 12px;
  font-family:var(--font-mono);
  font-size:var(--fs-title);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.ds-field input:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--sh-focus);
}
.ds-field__unit{
  position:absolute;
  inset:0 12px 0 auto;
  display:flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--text-muted);
  pointer-events:none;
}
.ds-field__hint, .ds-field__error{
  font-size:var(--fs-sm);
}
.ds-field__hint{ color:var(--text-muted); }
.ds-field__error{ color:var(--danger-text); }
.ds-field input[aria-invalid="true"]{
  border-color:var(--danger);
}

/* ------------------------------------------------------- .ds-radio */
.ds-radio{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ds-radio__label{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ds-radio button{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-strong);
  padding:0 12px;
  text-align:left;
  font-size:var(--fs-title);
  font-weight:500;
}
.ds-radio button:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--sh-focus);
}
.ds-radio button[aria-checked="true"]{
  border-color:var(--primary);
  background:var(--primary-soft);
}
.ds-radio button:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.ds-radio__dot{
  width:20px;
  height:20px;
  border:2px solid var(--border-strong);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.ds-radio button[aria-checked="true"] .ds-radio__dot{
  border-color:var(--primary);
}
.ds-radio__dot::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--primary);
  opacity:0;
}
.ds-radio button[aria-checked="true"] .ds-radio__dot::after{
  opacity:1;
}

/* ------------------------------------------------------ .ds-streak */
.ds-streak{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  padding:6px 14px;
}
.ds-streak__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
}
.ds-streak[data-status="at_risk"] .ds-streak__dot{ background:var(--warning); }
.ds-streak[data-status="lost"] .ds-streak__dot{ background:var(--text-muted); }
.ds-streak__days{
  font-family:var(--font-mono);
  font-size:var(--fs-title);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text-strong);
}
.ds-streak__status{
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-muted);
}

/* ------------------------------------------------- .ds-lesson-node */
.ds-lesson-node{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-strong);
  padding:0 12px;
  text-align:left;
  font-size:var(--fs-title);
  font-weight:500;
  width:100%;
}
.ds-lesson-node:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--sh-focus);
}
.ds-lesson-node[aria-disabled="true"]{
  background:var(--surface-2);
  color:var(--text-muted);
  opacity:.6;
  cursor:not-allowed;
}
.ds-lesson-node--in-progress{
  border-color:var(--primary);
  background:var(--primary-soft);
}
.ds-lesson-node--completed{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.ds-lesson-node--current{
  border-width:2px;
  border-color:var(--primary);
}
.ds-lesson-node__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--border-strong);
  flex:0 0 auto;
}
.ds-lesson-node--in-progress .ds-lesson-node__dot{ background:var(--primary); }
.ds-lesson-node--completed .ds-lesson-node__dot{
  width:20px;
  height:20px;
  background:var(--accent);
  color:var(--text-invert);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-2xs);
  font-weight:700;
}
.ds-lesson-node__status{
  margin-left:auto;
  font-size:var(--fs-sm);
}

/* ------------------------------------------------------ .ds-path-map */
.ds-path-map{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.ds-path-map__unit{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ds-path-map__unit > header{
  border-left:4px solid var(--primary);
  padding-left:12px;
}
.ds-path-map__unit h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--text-strong);
}
.ds-path-map__unit .ds-path-map__goal{
  font-size:var(--fs-body);
  color:var(--text-muted);
}
.ds-path-map__nodes{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}
.ds-path-map[data-theme-color="energy"] .ds-lesson-node--completed{ border-color:var(--theme-energy); }
.ds-path-map[data-theme-color="energy"] .ds-lesson-node--completed .ds-lesson-node__dot{ background:var(--theme-energy); }
.ds-path-map[data-theme-color="mtto"] .ds-lesson-node--completed{ border-color:var(--theme-mtto); }
.ds-path-map[data-theme-color="mtto"] .ds-lesson-node--completed .ds-lesson-node__dot{ background:var(--theme-mtto); }
.ds-path-map[data-theme-color="admin"] .ds-lesson-node--completed{ border-color:var(--theme-admin); }
.ds-path-map[data-theme-color="admin"] .ds-lesson-node--completed .ds-lesson-node__dot{ background:var(--theme-admin); }
.ds-path-map[data-theme-color="money"] .ds-lesson-node--completed{ border-color:var(--theme-money); }
.ds-path-map[data-theme-color="money"] .ds-lesson-node--completed .ds-lesson-node__dot{ background:var(--theme-money); }

/* -------------------------------------------------- .ds-certificate */
.ds-certificate{
  width:100%;
  max-width:210mm;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:32px;
  box-shadow:var(--sh-sm);
}
.ds-certificate__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  border-bottom:1px solid var(--border);
  padding-bottom:24px;
}
.ds-certificate__kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.ds-certificate__title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:700;
  color:var(--text-strong);
  margin-top:4px;
}
.ds-certificate__stamp{
  display:flex;
  width:80px;
  height:80px;
  align-items:center;
  justify-content:center;
  border:2px solid var(--primary);
  border-radius:50%;
  transform:rotate(-6deg);
  text-align:center;
}
.ds-certificate__stamp span{
  font-family:var(--font-display);
  font-size:var(--fs-title);
  font-weight:700;
  text-transform:uppercase;
  color:var(--primary);
  line-height:1.1;
}
.ds-certificate__body{
  padding:32px 0;
}
.ds-certificate__muted{
  font-size:var(--fs-body);
  color:var(--text-muted);
}
.ds-certificate__name{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:700;
  color:var(--text-strong);
  margin-top:4px;
}
.ds-certificate__path{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--text-strong);
  margin-top:4px;
}
.ds-certificate__date{
  margin-top:24px;
}
.ds-certificate__foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:16px;
  border-top:1px solid var(--border);
  padding-top:24px;
}
.ds-certificate__code{
  font-family:var(--font-mono);
  font-size:var(--fs-title);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text-strong);
  margin-top:4px;
}

/* ------------------------------------------------------------- print */
@media print{
  .nav, .footer, [data-ds-theme-toggle]{
    display:none;
  }
  .ds-certificate{
    max-width:none;
    border-radius:0;
    box-shadow:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .ds-certificate__stamp{ transform:none; }
}