/* ==========================================================================
   Declara Claro — diagnosis.css (Fase 2A)
   Estilos del diagnóstico orientativo paso a paso. Mobile first.
   Reutiliza los tokens de marca de styles.css (mismo <link>). Sin frameworks,
   sin recursos externos, sin apariencia gubernamental (DIAN).
   ========================================================================== */

.dx-main {
  padding: var(--space-6) 0 var(--space-8);
  min-height: 60vh;
}

.dx-app { position: relative; }

/* ---------- Error fatal (JSON no cargó) ---------- */
.dx-fatal {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.dx-fatal p { margin: 0 0 var(--space-4); color: var(--text-muted); }

/* ---------- Introducción ---------- */
.dx-intro,
.dx-step,
.dx-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
@media (min-width: 640px) {
  .dx-intro,
  .dx-step,
  .dx-result { padding: var(--space-6); }
}

.dx-intro__title {
  font-size: var(--fs-700);
  margin: var(--space-3) 0 var(--space-3);
}
.dx-intro__text {
  color: var(--text-muted);
  font-size: var(--fs-400);
  margin: 0 0 var(--space-4);
}
.dx-intro__points {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.dx-intro__points li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--text);
}
.dx-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand);
  font-weight: 700;
  font-size: var(--fs-100);
  margin-top: 2px;
}

/* ---------- Progreso ---------- */
.dx-progress { margin-bottom: var(--space-5); }
.dx-progress__label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  margin: 0 0 var(--space-3);
}
.dx-progress__count {
  font-weight: 700;
  color: var(--brand);
  font-size: var(--fs-200);
}
.dx-progress__name {
  font-family: var(--font-heading);
  font-size: var(--fs-500);
  color: var(--text);
}
.dx-progress__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--gris-limpio, var(--color-gris-limpio));
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.dx-progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand), var(--color-cian-apoyo));
  transition: width var(--transition);
}
.dx-progress__list {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.dx-progress__item { flex: 1 1 auto; }
.dx-progress__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-100);
  font-weight: 700;
}
.dx-progress__item.is-current .dx-progress__dot {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: var(--focus-ring);
}
.dx-progress__item.is-done .dx-progress__dot {
  border-color: var(--color-verde-orientacion);
  background: var(--color-verde-orientacion);
  color: #fff;
}

/* ---------- Bloques y títulos de paso ---------- */
.dx-step__title,
.dx-result__title {
  font-size: var(--fs-600);
  margin: 0 0 var(--space-3);
}
.dx-step__title:focus-visible,
.dx-result__title:focus-visible,
.dx-intro__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.dx-step__intro { color: var(--text-muted); margin: 0 0 var(--space-5); }

/* ---------- Preguntas (fieldset/legend) ---------- */
.dx-q {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  min-width: 0;
}
.dx-q.is-invalid {
  border-color: var(--color-error);
  background: rgba(220, 38, 38, 0.03);
}
.dx-q__legend {
  font-weight: 600;
  color: var(--text);
  padding: 0;
  margin-bottom: var(--space-3);
}

/* ---------- Opciones Sí / No / No estoy seguro ---------- */
.dx-choices {
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 480px) {
  .dx-choices { grid-template-columns: repeat(3, 1fr); }
  .dx-choices--inline { grid-template-columns: repeat(3, auto); justify-content: start; }
}
.dx-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}
.dx-choice:hover { border-color: var(--brand); }
.dx-choice.is-selected {
  border-color: var(--brand);
  background: var(--brand-050);
}
.dx-choice__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.dx-choice__mark {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  position: relative;
}
.dx-choice.is-selected .dx-choice__mark {
  border-color: var(--brand);
}
.dx-choice.is-selected .dx-choice__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--brand);
}
.dx-choice__input:focus-visible + .dx-choice__mark {
  box-shadow: var(--focus-ring);
}
.dx-choice__label { font-size: var(--fs-200); }

/* ---------- Perfil (checkboxes múltiples) ---------- */
.dx-checks {
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 560px) {
  .dx-checks { grid-template-columns: 1fr 1fr; }
}
.dx-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}
.dx-check-item:hover { border-color: var(--brand); }
.dx-check-item.is-selected { border-color: var(--brand); background: var(--brand-050); }
.dx-check-item__input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.dx-check-item__box {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  position: relative;
}
.dx-check-item.is-selected .dx-check-item__box {
  border-color: var(--brand);
  background: var(--brand);
}
.dx-check-item.is-selected .dx-check-item__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.dx-check-item__input:focus-visible + .dx-check-item__box { box-shadow: var(--focus-ring); }
.dx-check-item__label { font-size: var(--fs-200); }

/* ---------- Ayudas y avisos ---------- */
.dx-help {
  font-size: var(--fs-200);
  color: var(--text-muted);
  background: var(--wash-blue);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
}
.dx-help--notice {
  background: var(--wash-cyan);
  border-left-color: var(--color-cian-apoyo);
}

/* ---------- Formulario de contacto ---------- */
.dx-form { display: grid; gap: var(--space-4); }
.dx-field { display: grid; gap: var(--space-2); min-width: 0; }
.dx-field__label { font-weight: 600; font-size: var(--fs-200); }
.dx-field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.dx-field__input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); }
.dx-field.is-invalid .dx-field__input { border-color: var(--color-error); }

/* ---------- Consentimientos ---------- */
.dx-consent {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
.dx-consent--optional { background: var(--surface-2); }
.dx-consent.is-invalid { border-color: var(--color-error); background: rgba(220, 38, 38, 0.03); }
.dx-consent__label {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}
.dx-consent__input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.dx-consent__box {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  position: relative;
  background: var(--surface);
}
.dx-consent__input:checked + .dx-consent__box {
  border-color: var(--brand);
  background: var(--brand);
}
.dx-consent__input:checked + .dx-consent__box::after {
  content: "";
  position: absolute;
  left: 7px; top: 2px;
  width: 7px; height: 13px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.dx-consent__input:focus-visible + .dx-consent__box { box-shadow: var(--focus-ring); }
.dx-consent__text { font-size: var(--fs-200); line-height: var(--lh-snug); }

.dx-link { color: var(--brand); font-weight: 600; text-underline-offset: 2px; }
.dx-link:hover { color: var(--brand-strong); }

/* ---------- Errores ---------- */
.dx-error {
  color: var(--color-error);
  font-size: var(--fs-100);
  font-weight: 600;
  margin: var(--space-2) 0 0;
}
.dx-error-slot { margin: 0; min-height: 0; }

/* ---------- Acciones ---------- */
.dx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-6);
}
.dx-actions .btn { flex: 1 1 auto; justify-content: center; }
.dx-actions--single { justify-content: flex-start; }
@media (min-width: 480px) {
  .dx-actions .btn { flex: 0 1 auto; }
}

/* ---------- Resultado ---------- */
.dx-result__title { font-size: var(--fs-600); }
.dx-result__text { color: var(--text-muted); font-size: var(--fs-400); margin: 0 0 var(--space-5); }
.dx-result__cta {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  background: var(--surface-2);
  margin: 0 0 var(--space-5);
}
.dx-result__cta-title {
  font-family: var(--font-heading);
  font-size: var(--fs-500);
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.dx-result__cta-note { color: var(--text-muted); font-size: var(--fs-200); margin: 0; }
.dx-result__disclaimer {
  background: var(--wash-blue);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--space-4);
}
.dx-result--C .dx-result__cta { border-color: var(--color-verde-orientacion); }

/* ---------- Sin JS ---------- */
.dx-noscript {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.dx-noscript h1 { font-size: var(--fs-600); margin-bottom: var(--space-3); }
.dx-noscript p { color: var(--text-muted); margin: 0 0 var(--space-4); }

/* ---------- Páginas legales preliminares ---------- */
.dx-legal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
@media (min-width: 640px) { .dx-legal { padding: var(--space-6); } }
.dx-legal h1 { font-size: var(--fs-700); margin: var(--space-3) 0 var(--space-4); }
.dx-legal h2 { font-size: var(--fs-500); margin: var(--space-6) 0 var(--space-2); }
.dx-legal p { color: var(--text-muted); margin: 0 0 var(--space-3); }
.dx-legal__lead { color: var(--text); font-size: var(--fs-400); }
.dx-legal__note {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--wash-blue);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
}

/* ==========================================================================
   Fase 2B — componentes adicionales (topes, DIAN, comparador, contacto
   dinámico, resultado enriquecido). Reutiliza tokens de styles.css.
   ========================================================================== */

/* ---------- Notas ---------- */
.dx-note { font-size: var(--fs-200); color: var(--text); margin: 0 0 var(--space-3); }
.dx-note--muted { color: var(--text-muted); }

/* ---------- Resumen de topes ---------- */
.dx-thresholds {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
@media (min-width: 640px) { .dx-thresholds { grid-template-columns: 1fr 1fr; } }
.dx-thresholds--compact { margin: var(--space-3) 0 0; }
.dx-threshold {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface-2);
  min-width: 0;
}
.dx-threshold__name { font-weight: 600; margin: 0 0 var(--space-1); color: var(--text); }
.dx-threshold__value { font-family: var(--font-heading); font-size: var(--fs-400); color: var(--brand-strong); margin: 0 0 var(--space-2); }
.dx-threshold__uvt { font-size: var(--fs-100); color: var(--text-muted); font-family: var(--font-body); font-weight: 500; }
.dx-threshold__exp { font-size: var(--fs-200); color: var(--text-muted); margin: 0 0 var(--space-2); }
.dx-threshold__src { font-size: var(--fs-100); color: var(--text-muted); margin: 0; }
.dx-threshold__date { color: var(--text-muted); }

.dx-link--sm { font-size: var(--fs-100); }

/* ---------- Tarjeta consulta DIAN ---------- */
.dx-dian {
  border: 1.5px solid var(--color-cian-apoyo);
  border-radius: var(--radius-lg);
  background: var(--wash-cyan);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.dx-dian__title { font-family: var(--font-heading); font-size: var(--fs-500); margin: 0 0 var(--space-2); color: var(--text); }
.dx-dian__text { font-size: var(--fs-200); color: var(--text-muted); margin: 0 0 var(--space-2); }
.dx-dian__ext { font-size: var(--fs-100); color: var(--text-muted); margin: 0 0 var(--space-4); }
.dx-dian__btn { margin-bottom: var(--space-4); }
.dx-dian__return { background: var(--surface); }

/* ---------- Grupo de preguntas compactas ---------- */
.dx-qgroup { display: grid; gap: var(--space-3); }

/* ---------- Comparador opcional ---------- */
.dx-comparator { margin-top: var(--space-3); border-top: 1px dashed var(--border-strong); padding-top: var(--space-3); }
.dx-comparator__summary { cursor: pointer; font-size: var(--fs-200); color: var(--brand); font-weight: 600; }
.dx-comparator__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.dx-comparator__inner { padding-top: var(--space-3); }
.dx-comparator__label { display: block; font-size: var(--fs-200); font-weight: 600; margin-bottom: var(--space-2); }
.dx-comparator__out { font-size: var(--fs-200); color: var(--brand-strong); font-weight: 600; margin: var(--space-2) 0 0; min-height: 1em; }
.dx-comparator__note { font-size: var(--fs-100); color: var(--text-muted); margin: var(--space-2) 0 0; }

/* ---------- Choices en columna ---------- */
.dx-choices--stack { grid-template-columns: 1fr; }
@media (min-width: 480px) { .dx-choices--stack { grid-template-columns: 1fr; } }
.dx-checks--stack { grid-template-columns: 1fr; }

/* ---------- Campo dinámico + descripción ---------- */
.dx-field__desc { font-size: var(--fs-100); color: var(--text-muted); margin: 0 0 var(--space-2); }
.dx-dynamic:empty { display: none; }

/* ---------- Segundo medio de contacto ---------- */
.dx-secondary { margin-top: var(--space-2); }
.dx-secondary__summary { cursor: pointer; font-size: var(--fs-200); color: var(--brand); font-weight: 600; }
.dx-secondary__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.dx-secondary__inner { padding-top: var(--space-3); display: grid; gap: var(--space-4); }

/* ---------- Honeypot (oculto accesible, fuera de flujo) ---------- */
.dx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Consentimientos ---------- */
.dx-consents { margin-top: var(--space-5); }
.dx-consents__title { font-size: var(--fs-500); margin: 0 0 var(--space-4); }

/* ---------- Resultado enriquecido ---------- */
.dx-result__method {
  background: var(--wash-blue);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-200);
  color: var(--text);
  margin: 0 0 var(--space-5);
}
.dx-result__section { margin: 0 0 var(--space-5); }
.dx-result__h { font-size: var(--fs-400); margin: 0 0 var(--space-3); }
.dx-result__h3 { font-size: var(--fs-300); margin: var(--space-4) 0 var(--space-2); }
.dx-result__list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.dx-result__list li { color: var(--text); }
.dx-result__next { color: var(--text); margin: 0; }
.dx-result__human {
  border-left: 3px solid var(--color-verde-orientacion);
  background: var(--surface-2);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-200);
  color: var(--text);
  margin: 0 0 var(--space-4);
}

/* ---------- Análisis IA ---------- */
.dx-ai {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface-2);
}
.dx-ai__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.dx-ai__head .dx-result__h { margin: 0; }
.dx-ai__tag { font-size: var(--fs-100); }
.dx-ai__headline { font-family: var(--font-heading); font-size: var(--fs-400); margin: 0 0 var(--space-2); color: var(--text); }
.dx-ai__summary { color: var(--text); margin: 0 0 var(--space-3); }
.dx-ai__why { color: var(--text-muted); font-size: var(--fs-200); margin: var(--space-2) 0 0; }
.dx-ai__clarify { font-size: var(--fs-100); color: var(--text-muted); margin: var(--space-3) 0 0; font-style: italic; }

/* ---------- Estado de registro (CTA) ---------- */
.dx-result__cta-state { font-weight: 600; margin: var(--space-2) 0; }
.dx-result__cta-state.is-ok { color: var(--color-verde-orientacion); }
.dx-result__cta-state.is-fail { color: var(--color-atencion); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .dx-progress__fill,
  .dx-choice,
  .dx-check-item,
  .dx-field__input { transition: none; }
}

/* ==========================================================================
   Launch candidate — asistente guiado (stepper 01/02/03, etapa conversacional,
   pantalla "Analizando…"). Reutiliza tokens de styles.css.
   ========================================================================== */

/* ---------- Stepper numerado ---------- */
.dx-progress__sep { color: var(--text-muted); }
.dx-progress__step-name { display: none; }
.dx-progress__list { align-items: flex-start; }
.dx-progress__dot {
  font-family: var(--font-heading);
  font-size: var(--fs-100);
  letter-spacing: .01em;
}
@media (min-width: 640px) {
  /* En escritorio, stepper horizontal con nombres bajo cada número. */
  .dx-progress__item { text-align: center; }
  .dx-progress__step-name {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-100);
    color: var(--text-muted);
  }
  .dx-progress__item.is-current .dx-progress__step-name { color: var(--brand); font-weight: 600; }
  .dx-progress__item.is-done .dx-progress__step-name { color: var(--text); }
  /* El indicador compacto pasa a segundo plano cuando el stepper muestra nombres. */
  .dx-progress__label { font-size: var(--fs-100); color: var(--text-muted); }
}

/* ---------- Encabezado conversacional de etapa ---------- */
.dx-stage-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-500);
  color: var(--text);
  margin: var(--space-4) 0 var(--space-2);
  line-height: var(--lh-snug);
}

/* ---------- Pantalla "Analizando…" ---------- */
.dx-analyzing {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.dx-analyzing__spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--brand);
  animation: dx-spin 800ms linear infinite;
}
.dx-analyzing__title {
  font-size: var(--fs-500);
  margin: 0;
  color: var(--text);
}
.dx-analyzing__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
@keyframes dx-spin { to { transform: rotate(360deg); } }

/* ---------- Situaciones como selectores grandes tipo chip ---------- */
[data-situations="true"] .dx-check-item {
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .dx-analyzing__spinner { animation: none; }
}