/* ============================================================================
   AURA DISCOVERY™ — style.css
   Tokens, reset, layout base y componentes.
   Aura Estudio · Sprint 1
   ----------------------------------------------------------------------------
   Índice
   01. Tokens de diseño
   02. Reset y base
   03. Utilidades y accesibilidad
   04. Shell de la aplicación
   05. Marca y contador de paso
   06. Barra de progreso
   07. Escenario y pantallas
   08. PRISMA (asistente)
   09. Tipografía de pantalla
   10. Campos de formulario
   11. Tarjetas de selección
   12. Mensajes de error
   13. Botones
   14. Pie de navegación
   15. Pantalla de bienvenida y final
   ========================================================================== */


/* ============================================================================
   01. TOKENS DE DISEÑO
   Única fuente de verdad: cambiar aquí cambia toda la aplicación.
   Paleta cerrada — negro, blanco, gris y dorado. Nada más.
   ========================================================================== */
:root {
  /* --- Color base ------------------------------------------------------- */
  --color-black:  #111111;
  --color-white:  #FFFFFF;
  --color-gray:   #F5F5F5;
  --color-gold:   #C7A45F;

  /* --- Derivados (mismos colores, distinta opacidad) -------------------- */
  /* Contraste verificado contra blanco, gris y tarjeta seleccionada:
     soft  ≥ 5.4:1 · muted ≥ 4.8:1 → ambos cumplen WCAG AA como texto.
     faint 2.6:1 → NUNCA transporta información: sólo placeholders,
     separadores y contadores redundantes. */
  --color-text:          var(--color-black);
  --color-text-soft:     rgba(17, 17, 17, 0.64);
  --color-text-muted:    rgba(17, 17, 17, 0.60);
  --color-text-faint:    rgba(17, 17, 17, 0.40);
  --color-line:          rgba(17, 17, 17, 0.12);
  --color-line-strong:   rgba(17, 17, 17, 0.24);
  --color-gold-soft:     rgba(199, 164, 95, 0.14);
  --color-gold-line:     rgba(199, 164, 95, 0.45);

  /* --- Superficies (se invierten en modo noche) ------------------------- */
  --color-canvas:        var(--color-white);   /* fondo de la página */
  --color-surface:       var(--color-white);   /* tarjetas */
  --color-surface-alt:   var(--color-gray);    /* bloques destacados */
  --color-surface-solid: var(--color-black);   /* avatar PRISMA, skip-link */
  --color-on-solid:      var(--color-white);
  --color-overlay:       rgba(255, 255, 255, 0.84);  /* cabecera y pie */

  /* --- Botón principal --------------------------------------------------- */
  --color-btn-bg:        var(--color-black);
  --color-btn-fg:        var(--color-white);

  --shadow-alpha:        0.07;

  /* --- Tipografía ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Escala tipográfica — mobile first (responsive.css la amplía) */
  --size-eyebrow: 0.6875rem;  /* 11px */
  --size-micro:   0.75rem;    /* 12px */
  --size-small:   0.875rem;   /* 14px */
  --size-body:    1rem;       /* 16px */
  --size-lead:    1.0625rem;  /* 17px */
  --size-title:   1.75rem;    /* 28px */
  --size-display: 2.25rem;    /* 36px */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --tracking-wide:  0.14em;
  --tracking-tight: -0.02em;

  /* --- Espaciado (escala de 4) ----------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;

  /* --- Formas ----------------------------------------------------------- */
  --radius:       16px;
  --radius-sm:    10px;
  --radius-pill:  999px;

  /* --- Sombras (muy suaves, nunca exageradas) --------------------------- */
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, calc(var(--shadow-alpha) * 0.6));
  --shadow-md: 0 8px 24px rgba(17, 17, 17, var(--shadow-alpha));
  --shadow-gold: 0 8px 24px rgba(199, 164, 95, 0.18);

  /* --- Movimiento ------------------------------------------------------- */
  --duration:      300ms;
  --duration-fast: 180ms;
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition:    var(--duration) var(--ease);

  /* --- Medidas ---------------------------------------------------------- */
  --measure:      42rem;   /* ancho de lectura cómodo */
  --header-h:     4rem;
  --progress-h:   2px;
}


/* ============================================================================
   02. RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, blockquote, fieldset, legend {
  margin: 0;
  padding: 0;
}

fieldset { border: 0; min-width: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

textarea { resize: vertical; }

/* Foco visible y consistente en toda la aplicación (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }


/* ============================================================================
   03. UTILIDADES Y ACCESIBILIDAD
   ========================================================================== */

/* Texto sólo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace de salto — aparece sólo al tabular */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-solid);
  color: var(--color-on-solid);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform var(--transition);
}
.skip-link:focus-visible { transform: translateY(0); }


/* ============================================================================
   04. SHELL DE LA APLICACIÓN
   Cabecera y pie fijos; el escenario ocupa el espacio restante y hace scroll.
   ========================================================================== */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app__header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
  padding: 0 var(--space-5);
  background: var(--color-overlay);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}


/* ============================================================================
   05. MARCA Y CONTADOR DE PASO
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
}

.brand__mark {
  width: 26px;
  height: 26px;
  transition: transform var(--transition);
}
.brand:hover .brand__mark { transform: translateY(-1px) scale(1.04); }

.brand__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  line-height: 1;
}

.brand__name {
  font-size: var(--size-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.brand__product {
  font-size: var(--size-micro);
  font-weight: var(--weight-regular);
  color: var(--color-text-soft);
  letter-spacing: 0.04em;
}
.brand__product sup { font-size: 0.6em; }

.step-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
}
.step-counter__current { color: var(--color-text); }
.step-counter__sep     { color: var(--color-text-faint); }
/* En la bienvenida y en el cierre el contador no aporta nada */
.step-counter[hidden]  { display: none; }


/* ============================================================================
   06. BARRA DE PROGRESO
   Siempre visible bajo la cabecera. Se anima con transform (barato en GPU).
   ========================================================================== */
.progress {
  position: sticky;
  top: var(--header-h);
  z-index: 19;
  height: var(--progress-h);
  background: var(--color-line);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-black), var(--color-gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--ease);
}


/* ============================================================================
   07. ESCENARIO Y PANTALLAS
   ========================================================================== */
.stage {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding: var(--space-7) var(--space-5) var(--space-9);
}
.stage:focus { outline: none; }

.screen {
  width: 100%;
  max-width: var(--measure);
}

/* Bloques internos de una pantalla, separados con aire generoso */
.screen__head   { margin-bottom: var(--space-7); }
.screen__body   { display: flex; flex-direction: column; gap: var(--space-6); }


/* ============================================================================
   08. PRISMA — el asistente que acompaña todo el diagnóstico
   ========================================================================== */
.prisma {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.prisma__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-solid);
  color: var(--color-gold);
}
.prisma__avatar svg { width: 15px; height: 15px; }

.prisma__bubble {
  padding-top: 0.3rem;
  min-width: 0;
}

.prisma__name {
  display: block;
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.prisma__message {
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--color-text-soft);
  max-width: 34rem;
}


/* ============================================================================
   09. TIPOGRAFÍA DE PANTALLA
   ========================================================================== */
.eyebrow {
  display: block;
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
/* El dorado no alcanza contraste AA como texto: se acompaña siempre de un
   título en negro y nunca transporta información única. */

.screen__title {
  font-size: var(--size-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.screen__subtitle {
  margin-top: var(--space-3);
  font-size: var(--size-lead);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  color: var(--color-text-soft);
  max-width: 34rem;
}


/* ============================================================================
   10. CAMPOS DE FORMULARIO
   Minimalistas: sólo línea inferior, foco dorado.
   ========================================================================== */
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.field__optional {
  margin-left: var(--space-2);
  font-size: var(--size-micro);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.field__control {
  position: relative;
}

.input,
.textarea {
  width: 100%;
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line-strong);
  border-radius: 0;
  font-size: var(--size-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.textarea {
  min-height: 7.5rem;
  line-height: var(--leading-body);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-faint);
  font-weight: var(--weight-light);
}

.input:hover,
.textarea:hover { border-bottom-color: var(--color-line-strong); }

/* Línea dorada que crece desde la izquierda al enfocar */
.field__control::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
  pointer-events: none;
}
.field__control:focus-within::after { transform: scaleX(1); }

/* El foco del navegador se sustituye por la línea dorada + anillo accesible */
.input:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--color-gold);
}
/* Anillo real para navegación por teclado sin ratón */
.field__control:focus-within {
  outline: 2px solid transparent;
}

.field__hint {
  font-size: var(--size-micro);
  color: var(--color-text-muted);
}

.field__counter {
  align-self: flex-end;
  font-size: var(--size-micro);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-faint);
  transition: color var(--transition);
}
.field__counter.is-near { color: var(--color-text-soft); }

/* Estado de error */
.field.is-invalid .input,
.field.is-invalid .textarea { border-bottom-color: var(--color-black); }
.field.is-invalid .field__label { font-weight: var(--weight-semibold); }


/* ============================================================================
   11. TARJETAS DE SELECCIÓN
   Sustituyen a los checkboxes tradicionales. El input real existe pero está
   oculto visualmente: se conserva la semántica y la navegación por teclado.
   ========================================================================== */
.choices {
  display: grid;
  gap: var(--space-3);
}
.choices--grid { grid-template-columns: 1fr; }

.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}

.card__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.card__body { flex: 1 1 auto; min-width: 0; }

.card__label {
  display: block;
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.card__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-small);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--color-text-soft);
}

/* Indicador de selección */
.card__check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-black);
  background: transparent;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}
.card__check svg {
  width: 11px;
  height: 11px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}

/* Hover — elevación mínima, nunca teatral */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    border-color: var(--color-gold-line);
    box-shadow: var(--shadow-md);
  }
  .card:hover .card__check { border-color: var(--color-gold-line); }
}

.card:active { transform: translateY(0) scale(0.995); }

/* Foco por teclado sobre la tarjeta completa.
   Se usa :has() donde exista y la clase .is-focus (que aplica ui.js) como
   respaldo en navegadores que aún no lo soportan. */
.card:has(.card__input:focus-visible),
.card.is-focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Seleccionada — borde dorado y marca rellena */
.card.is-selected {
  border-color: var(--color-gold);
  background: var(--color-gold-soft);
  box-shadow: var(--shadow-gold);
}
.card.is-selected .card__check {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-black);
}
.card.is-selected .card__check svg { opacity: 1; transform: scale(1); }

/* Tarjeta bloqueada al alcanzar el máximo de selecciones */
.card.is-locked {
  opacity: 0.42;
  cursor: not-allowed;
}
.card.is-locked:hover {
  transform: none;
  border-color: var(--color-line);
  box-shadow: var(--shadow-xs);
}

/* Contador "3 de 5 seleccionadas" */
.choices__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--size-micro);
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}

/* Campo "Otro" que se revela al elegir esa tarjeta */
.other-field {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--transition), opacity var(--transition),
              margin-top var(--transition);
}
.other-field.is-open {
  max-height: 12rem;
  opacity: 1;
  margin-top: var(--space-2);
}


/* ============================================================================
   12. MENSAJES DE ERROR
   Elegantes: una línea, sin iconografía alarmista, sin rojo.
   ========================================================================== */
.error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.2em;
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.error:empty { display: none; }
.error::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-gold);
}


/* ============================================================================
   13. BOTONES
   Negros por defecto, dorados al pasar el cursor, transición de 300 ms.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;                    /* objetivo táctil cómodo */
  padding: var(--space-3) var(--space-6);
  background: var(--color-btn-bg);
  color: var(--color-btn-fg);
  border: 1px solid var(--color-btn-bg);
  border-radius: var(--radius-pill);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.btn__icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform var(--transition);
}

@media (hover: hover) {
  .btn--primary:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-black);          /* AA: 7.4:1 sobre dorado */
    box-shadow: var(--shadow-gold);
  }
  .btn--primary:hover .btn__icon { transform: translateX(2px); }
}
.btn--primary:active { transform: scale(0.98); }

/* Secundario / atrás — sin peso visual, no compite con la acción principal */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-soft);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (hover: hover) {
  .btn--ghost:hover { color: var(--color-text); background: var(--color-surface-alt); }
  .btn--ghost:hover .btn__icon { transform: translateX(-2px); }
}

/* Grande — bienvenida y cierre */
.btn--lg {
  min-height: 56px;
  padding: var(--space-4) var(--space-8);
  font-size: var(--size-body);
}

.btn[hidden] { display: none; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }


/* ============================================================================
   14. PIE DE NAVEGACIÓN
   ========================================================================== */
.app__footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--color-overlay);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--color-line);
  padding: var(--space-4) var(--space-5);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.app__footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

/* El pie desaparece en bienvenida y cierre: esas pantallas tienen su propio CTA */
.app__footer[hidden] { display: none; }

.autosave {
  display: none;                       /* visible desde tablet — responsive.css */
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-micro);
  color: var(--color-text-muted);
}
.autosave__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}


/* ============================================================================
   15. PANTALLA DE BIENVENIDA Y FINAL
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-8);
}

.hero__logo {
  width: 56px;
  height: 56px;
}

.hero__title {
  font-size: var(--size-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.hero__lead {
  font-size: var(--size-lead);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  color: var(--color-text-soft);
  max-width: 32rem;
}

/* Lista de expectativas: qué va a pasar, cuánto dura, qué se necesita */
.hero__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.hero__fact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-small);
  color: var(--color-text-soft);
}
.hero__fact::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--color-gold);
  flex: 0 0 auto;
}

.hero__note {
  font-size: var(--size-micro);
  color: var(--color-text-muted);
}

/* Aviso de sesión recuperada desde localStorage */
.resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-alt);
  border-radius: var(--radius);
  font-size: var(--size-small);
  color: var(--color-text-soft);
}
.resume__link {
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 1px;
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  transition: color var(--transition);
}

/* Sello final */
.seal {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--color-gold-line);
  background: var(--color-gold-soft);
  color: var(--color-black);
}
.seal svg { width: 26px; height: 26px; }

/* Resumen de próximos pasos en la pantalla de cierre */
.next-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface-alt);
  border-radius: var(--radius);
}
.next-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.next-step__num {
  flex: 0 0 auto;
  font-size: var(--size-micro);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  padding-top: 0.15rem;
}
.next-step__text {
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--color-text-soft);
}
.next-step__text strong {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}


/* ============================================================================
   16. MODO NOCHE
   La paleta no crece: siguen siendo negro, blanco, gris y dorado. Lo que
   cambia es qué papel juega cada uno. El dorado es el único que permanece
   idéntico — es la constante de la marca en ambos temas.
   ----------------------------------------------------------------------------
   Contraste verificado sobre fondo #111111 y sobre tarjeta:
   texto 18.9:1 · soft 8.9–9.5:1 · muted 7.3–7.7:1 · dorado 7.2–8.0:1
   ========================================================================== */
:root { color-scheme: light; }

[data-theme="dark"] {
  color-scheme: dark;

  --color-text:          var(--color-white);
  --color-text-soft:     rgba(255, 255, 255, 0.70);
  --color-text-muted:    rgba(255, 255, 255, 0.62);
  --color-text-faint:    rgba(255, 255, 255, 0.45);

  --color-line:          rgba(255, 255, 255, 0.14);
  --color-line-strong:   rgba(255, 255, 255, 0.28);

  /* El dorado necesita algo más de cuerpo sobre fondo oscuro para leerse
     igual de presente que en modo día. */
  --color-gold-soft:     rgba(199, 164, 95, 0.16);
  --color-gold-line:     rgba(199, 164, 95, 0.55);

  --color-canvas:        var(--color-black);
  --color-surface:       rgba(255, 255, 255, 0.045);
  --color-surface-alt:   rgba(255, 255, 255, 0.055);
  --color-surface-solid: var(--color-white);
  --color-on-solid:      var(--color-black);
  --color-overlay:       rgba(17, 17, 17, 0.84);

  /* Un botón negro sobre fondo negro no existe: el principal se invierte.
     El hover sigue siendo dorado, como manda la identidad. */
  --color-btn-bg:        var(--color-white);
  --color-btn-fg:        var(--color-black);

  /* Sombras más profundas: sobre oscuro, una sombra suave no se percibe */
  --shadow-alpha:        0.5;
  --shadow-gold:         0 8px 24px rgba(199, 164, 95, 0.14);
}

/* El avatar de PRISMA invierte con el tema, pero el icono se mantiene dorado */
[data-theme="dark"] .prisma__avatar { color: var(--color-gold); }

/* La barra de progreso va de dorado a blanco: en modo noche, el negro del
   degradado original desaparecería contra el fondo. */
[data-theme="dark"] .progress__fill {
  background: linear-gradient(90deg, var(--color-gold-line), var(--color-gold));
}

/* El isotipo tiene dos versiones originales, no una invertida por CSS:
   el trazo negro para modo día y el cromado para modo noche. Invertir el
   negro daría un blanco plano y perdería el acabado metálico de la marca.
   Se cargan ambas y se cruza la opacidad al cambiar de tema. */
.logo {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--transition);
}
.logo__dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}
[data-theme="dark"] .logo__light { opacity: 0; }
[data-theme="dark"] .logo__dark  { opacity: 1; }


/* ============================================================================
   17. INTERRUPTOR DE TEMA
   Un único botón con dos iconos que se cruzan. Nunca desaparece del todo:
   el usuario siempre ve a qué modo va a cambiar.
   ========================================================================== */
.header__tools {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-text-soft);
  cursor: pointer;
  transition:
    border-color var(--transition),
    color var(--transition),
    background-color var(--transition);
}

@media (hover: hover) {
  .theme-toggle:hover {
    color: var(--color-text);
    border-color: var(--color-gold-line);
    background: var(--color-gold-soft);
  }
}

.theme-toggle svg {
  position: absolute;
  width: 16px;
  height: 16px;
  transition: opacity var(--transition), transform var(--transition);
}

/* En modo día se ve la luna (lo que vas a activar); en noche, el sol */
.theme-toggle__moon { opacity: 1; transform: rotate(0deg)   scale(1); }
.theme-toggle__sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }

[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme="dark"] .theme-toggle__sun  { opacity: 1; transform: rotate(0deg)  scale(1); }


/* ============================================================================
   18. ENVÍO Y EXPORTACIÓN
   ========================================================================== */

/* Estado de envío en el pie */
.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn__icon { display: none; }

.spinner {
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Aviso de fallo de envío en la pantalla final */
.notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border-left: 2px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-size: var(--size-small);
  color: var(--color-text-soft);
}
.notice__title {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.notice__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Referencia del diagnóstico enviado */
.reference {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold-line);
  border-radius: var(--radius-pill);
  font-size: var(--size-micro);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* Botón secundario con borde — descargas */
.btn--outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line-strong);
}
@media (hover: hover) {
  .btn--outline:hover {
    border-color: var(--color-gold);
    background: var(--color-gold-soft);
  }
}

/* El informe imprimible sólo existe en el DOM durante la impresión.
   Su maquetación completa está en css/print.css. */
.report { display: none; }