/* ==========================================================================
   AI WIZARD — Análisis Legal Personalizado con IA
   Markup: directory/templates/directory/partials/_ai_wizard_modal.html
   Lógica: static/js/ai-wizard.js

   Todos los selectores cuelgan de #aiWizardModal y llevan clase/elemento extra
   para ganar en especificidad a Bootstrap y al bloque legacy de page-home.css
   (que se carga DESPUÉS de este fichero en home.html).
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES (copiados del diseño)
   -------------------------------------------------------------------------- */
@keyframes al-fade   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }


/* --------------------------------------------------------------------------
   CONTENEDOR
   -------------------------------------------------------------------------- */
#aiWizardModal .aiw-dialog {
  max-width: 720px;
}

#aiWizardModal div.modal-content {
  background: var(--lt-surface, #FFFFFF);
  border: none;
  border-radius: var(--lt-r-2xl, 24px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  color: var(--lt-ink, #16202E);
}

/* --------------------------------------------------------------------------
   CABECERA + BARRA DE PROGRESO DEL WIZARD
   -------------------------------------------------------------------------- */
#aiWizardModal .aiw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px 0 32px;
}

#aiWizardModal h2.aiw-head__title {
  margin: 0;
  font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--lt-ink, #16202E);
}

/* --lt-text-faint -> --lt-text-muted (revision de contraste 2026-08-09):
   el "x" de cerrar es un boton-icono, no texto (aria-label="Cerrar" le da
   el nombre accesible), pero los demas botones-icono "x" del sitio
   (.ps-panel-hours__remove, .ps-dropzone__clear) ya usaban --lt-text-muted
   / --lt-text-2 -- este era el unico que se habia quedado en el gris que
   no pasa ni el minimo de texto ni el de icono (2,5:1 sobre blanco). */
#aiWizardModal button.aiw-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--lt-text-muted, #6A717F);
  font-size: 22px;
  line-height: 1;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#aiWizardModal button.aiw-close:hover {
  background: #F2EFE9;
  color: var(--lt-ink, #16202E);
}#aiWizardModal .modal-body.aiw-body {
  padding: 0;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   PASOS (genérico)
   -------------------------------------------------------------------------- */
#aiWizardModal .aiw-pane {
  display: block;
  padding: 44px 48px 36px 48px;
  animation: al-fade 0.4s ease both;
}#aiWizardModal .aiw-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* CityAutocomplete cuelga su dropdown de input.parentNode (position:absolute;
   top:100%), por eso el input necesita este envoltorio propio. */
#aiWizardModal .aiw-field__ctl {
  position: relative;
  display: flex;
}

#aiWizardModal label.aiw-label {
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lt-ink, #16202E);
  margin: 0;
}
#aiWizardModal .aiw-label__opt {
  font-weight: 500;
  color: #A8AFB9;
}

/* `input.aiw-input` (1,1,1) gana a `#aiWizardModal .form-control` de page-home.css
   y a la clase form-control que CityAutocomplete inyecta en #detected-city. */
#aiWizardModal input.aiw-input {
  width: 100%;
  background: #F7F5F1;
  border: 1px solid var(--lt-border, #E7E2DA);
  border-radius: 11px;
  padding: 13px 15px;
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--lt-ink, #16202E);
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
#aiWizardModal input.aiw-input::placeholder { color: #A8AFB9; }
#aiWizardModal input.aiw-input:focus {
  border-color: var(--lt-primary, #C94F4F);
  background: #FFFFFF;
  box-shadow: none;
}

#aiWizardModal .aiw-hint {
  font-size: 12px;
  color: #A8AFB9;
}

/* Aviso de error inline (showError()/hideError() en ai-wizard.js). Sustituye a
   la antigua pantalla de error dentro del panel oscuro que desaparecía junto
   con #aiw-analyzing: ahora se avisa dentro del propio formulario, sin recarga. */
#aiWizardModal p.aiw-error-inline {
  margin: 18px 0 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FBEAEA;
  border: 1px solid var(--lt-primary-border, #E5C9C9);
  color: var(--lt-primary, #C94F4F);
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   DOCUMENTOS · opcional y deliberadamente secundario
   Antes era un PASO ENTERO del wizard. La mayoría de usuarios no sube nada, así
   que ahora es una tarjeta compacta dentro de la pantalla única: se ve, pero no
   compite con la ubicación (que es lo único obligatorio).
   -------------------------------------------------------------------------- */
#aiWizardModal .aiw-docs { margin-top: 26px; }

#aiWizardModal .aiw-docs__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-ink, #16202E);
}
#aiWizardModal .aiw-docs__optional {
  font-weight: 600;
  font-size: 11.5px;
  color: #A8AFB9;
  background: #F2EFE9;
  border-radius: var(--lt-r-pill, 999px);
  padding: 2px 8px;
}

/* Fila horizontal: icono · texto · botón. Nada de un bloque enorme centrado. */
#aiWizardModal div.file-drop-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed #D8D2C8;
  border-radius: 14px;
  background: #FAF8F4;
  padding: 14px 14px;
  text-align: left;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
#aiWizardModal div.file-drop-area.drag-over {
  border-color: var(--lt-primary, #C94F4F);
  background: #FBF5F3;
}

/* El input ya NO se estira invisible sobre la tarjeta: sólo lo abre #file-pick.
   Aquel apaño se tragaba los clics de todo lo que hubiera debajo, no era
   alcanzable por teclado y podía abrir el diálogo dos veces. */
#aiWizardModal input.aiw-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#aiWizardModal .aiw-drop__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid var(--lt-border, #E7E2DA);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* min-width:0 para que el texto pueda encogerse y no empuje al botón fuera. */
#aiWizardModal .aiw-drop__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
#aiWizardModal .aiw-drop__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-ink, #16202E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#aiWizardModal .aiw-drop__meta {
  font-size: 11.5px;
  color: #A8AFB9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#aiWizardModal button.aiw-drop__btn {
  flex: 0 0 auto;
  border: 1px solid var(--lt-primary-border, #E5C9C9);
  color: var(--lt-primary, #C94F4F);
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
#aiWizardModal button.aiw-drop__btn:hover {
  background: #FBF5F3;
  border-color: var(--lt-primary, #C94F4F);
}
#aiWizardModal button.aiw-drop__btn:focus-visible {
  outline: 2px solid var(--lt-primary, #C94F4F);
  outline-offset: 2px;
}

/* Archivos elegidos (fuera de la zona de drop, para poder pulsar la ✕) */
#aiWizardModal .aiw-files { margin-top: 10px; }
#aiWizardModal .aiw-files__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#aiWizardModal .aiw-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background: #F7F5F1;
  border: 1px solid var(--lt-border, #E7E2DA);
  border-radius: var(--lt-r-pill, 999px);
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 12.5px;
  padding: 6px 8px 6px 12px;
}
#aiWizardModal .aiw-file__name {
  font-weight: 600;
  color: var(--lt-ink, #16202E);
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#aiWizardModal .aiw-file__size {
  color: #A8AFB9;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
#aiWizardModal button.aiw-file__x {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #E7E2DA;
  color: #5C6470;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
#aiWizardModal button.aiw-file__x:hover {
  background: var(--lt-primary, #C94F4F);
  color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   BOTONERA · un único botón
   Antes eran tres: "Anterior" (que nacía deshabilitado y muerto en el paso 1) y
   dos primarios —"Siguiente" y "Analizar caso"— que se intercambiaban según el
   paso. Con una sola pantalla no hay adónde ir: sólo se analiza.
   -------------------------------------------------------------------------- */
#aiWizardModal .aiw-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 48px 36px 48px;
}

#aiWizardModal button.aiw-btn {
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#aiWizardModal button.aiw-btn--primary {
  border: none;
  background: var(--lt-primary, #C94F4F);
  color: #FFFFFF;
  padding: 12px 28px;
}
#aiWizardModal button.aiw-btn--primary:hover {
  background: var(--lt-primary-hover, #B23F3F);
}

/* Sin ubicación concreta no se puede analizar, y el botón lo dice. */
#aiWizardModal button.aiw-btn--primary:disabled {
  background: #E7E2DA;
  color: #A8AFB9;
  cursor: not-allowed;
  opacity: 1;
}

#aiWizardModal button:focus-visible {
  outline: 2px solid var(--lt-primary, #C94F4F);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   MÓVIL — el modal ocupa la pantalla completa (diseño de 390 px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* HOJA INFERIOR, no pantalla completa.
     El modal forzaba 100dvh. Con tres pasos ese alto se llenaba; con una sola
     pantalla —un campo y una tarjeta— dejaba un vacío enorme entre el contenido
     y el botón. Ahora la hoja se ajusta a su contenido y se ancla abajo: el
     botón queda al alcance del pulgar y, al abrirse el teclado, el contenido
     sube con él en vez de quedar flotando en medio de la nada. */
  #aiWizardModal .modal-dialog.aiw-dialog {
    max-width: 100%;
    width: 100%;
    margin: 0;
    min-height: 100%;
    align-items: flex-end;   /* pega la hoja al borde inferior */
  }
  #aiWizardModal div.modal-content {
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 92dvh;       /* si el contenido creciera, scrollea dentro */
  }

  #aiWizardModal .aiw-head { padding: 18px 20px 14px 20px; }
  #aiWizardModal h2.aiw-head__title { font-size: 16px; }
  #aiWizardModal button.aiw-close { background: #F2EFE9; color: #6B7280; border-radius: 9px; }

  #aiWizardModal .modal-body.aiw-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  /* Sin `flex: 1 1 auto`: el panel ya no se estira para rellenar el hueco. */
  #aiWizardModal .aiw-pane { padding: 22px 24px 4px 24px; }

  #aiWizardModal input.aiw-input { border-radius: 12px; padding: 14px 16px; font-size: 15px; }

  /* Adjuntos: en móvil el texto largo no cabe en una fila junto al botón,
     así que la tarjeta se apila y el botón pasa a ancho completo. */
  #aiWizardModal div.file-drop-area {
    flex-wrap: wrap;
    padding: 14px;
    row-gap: 10px;
  }
  #aiWizardModal .aiw-drop__text { flex: 1 1 auto; }
  #aiWizardModal .aiw-drop__title { font-size: 13.5px; white-space: normal; }
  #aiWizardModal .aiw-drop__meta { white-space: normal; }
  #aiWizardModal button.aiw-drop__btn { flex: 1 0 100%; padding: 11px 16px; }
  #aiWizardModal .aiw-file__name { max-width: 150px; }

  /* Botonera móvil: el único botón, a ancho completo. */
  #aiWizardModal .aiw-foot { padding: 12px 24px 24px 24px; }
  #aiWizardModal button.aiw-btn { font-size: 15px; padding: 15px 16px; border-radius: 13px; }
  #aiWizardModal button#wizard-analyze { flex: 1 0 100%; }

  /* --- PASO 3 a 360 px. La aritmetica de la altura esta en
     docs/design/propuestas/paso3-preguntas.md §7: 300 px reservados es la
     pregunta mas alta del catalogo con sus etiquetas envolviendo a dos lineas,
     y deja 69 px de margen sobre los 589 disponibles de la hoja. --- */
  #aiWizardModal section.aiw-quiz { padding: 22px 24px 24px 24px; }
  #aiWizardModal .aiw-quiz,
  .lp-questions { --aiw-stage-h: 300px; }
  #aiWizardModal h3.aiw-q__label, .lp-questions h3.aiw-q__label,
  #aiWizardModal p.aiw-ph__title, .lp-questions p.aiw-ph__title { font-size: 18px; }
  #aiWizardModal button.aiw-q__option, .lp-questions button.aiw-q__option { padding: 13px 14px; }
  #aiWizardModal .aiw-ph__row, .lp-questions .aiw-ph__row { height: 49px; padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD
   -------------------------------------------------------------------------- */

/* ==========================================================================
   PASO 3 · LAS PREGUNTAS DEL TRIAJE
   Diseño: docs/design/propuestas/paso3-preguntas.md (+ paso3-preguntas.html).
   Marcado: la <section id="aiw-quiz"> del partial. Lógica: ai-wizard.js.

   Tres reglas que atan todo el bloque:

   1. Lo que se mueve es `animation`, NUNCA `transition`: el bloque de
      prefers-reduced-motion de este fichero sólo apaga `animation`, y una
      transición se le escaparía entera.
   2. Los retardos del escalonado van por CLASE (.aiw-d1….aiw-d4). Hay CSP sin
      unsafe-inline (directory/middleware/csp.py): un style="animation-delay"
      escrito desde el JS no se aplicaría y el escalonado se perdería en
      silencio. Mismo apaño que .lt-rise--1…4 en legaltica-ds.css.
   3. Elemento + clase en todos los selectores. En el home, page-home.css se
      carga DESPUÉS que este fichero y `#aiWizardModal p` pinta cualquier <p>
      nuevo en gris claro; por eso, además, el enunciado es un <h3>.

   Los valores de la fila de opción y del campo de texto están copiados de
   .ps-claim-option y .ps-rm-input (page-static.css). Se copian y no se enlaza
   la hoja: son 4.109 líneas que ni home.html ni analizar_caso.html cargan.

   DOBLE ÁMBITO: `#aiWizardModal X, .lp-questions X`
   ------------------------------------------------
   De aquí abajo, las clases que pinta `js/triage-questions.js` valen en DOS
   sitios: el modal del asistente y la obra en modo tres (`.lp-questions`, en
   directory/templates/directory/obra.html). El módulo es el mismo, así que el
   vestido tiene que ser el mismo: la alternativa era copiar 130 líneas a
   page-obra.css, que es una segunda copia esperando a quedarse vieja.

   El chasis del modal NO lleva el segundo ámbito y no debe llevarlo:
   `section.aiw-quiz`, `.aiw-pane`, `.aiw-scene`, `.aiw-orbit`,
   `.aiw-scales__beam`. `.lp-questions` es el equivalente de ESE panel en la
   obra, no un hijo suyo, y tiene su propio sitio y su propio margen.

   Sitio natural el día que haya un tercer consumidor: sacar este bloque a su
   propia hoja (`triage-questions.css`) y que las dos pantallas la enlacen.
   ========================================================================== */

/* Altura reservada de la zona de pregunta: es lo que impide el salto entre
   hueco → pregunta → pregunta → cierre. La aritmética a 360 px, en el .md §7. */
#aiWizardModal .aiw-quiz,
.lp-questions { --aiw-stage-h: 250px; }

@keyframes aiw-q-in       { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes aiw-q-out      { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(-6px); } }
@keyframes aiw-done-in    { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aiw-ph-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

#aiWizardModal .aiw-d1, .lp-questions .aiw-d1 { animation-delay: 0ms; }
#aiWizardModal .aiw-d2, .lp-questions .aiw-d2 { animation-delay: 45ms; }
#aiWizardModal .aiw-d3, .lp-questions .aiw-d3 { animation-delay: 90ms; }
#aiWizardModal .aiw-d4, .lp-questions .aiw-d4 { animation-delay: 135ms; }

#aiWizardModal section.aiw-quiz {
  display: flex;
  flex-direction: column;
  padding: 32px 48px 36px 48px;
  animation: aiw-q-in 0.3s ease both;
}
/* El pane escondido lo esconde showPane() con d-none; con display:flex por
   delante hay que decirlo aquí. */
#aiWizardModal section.aiw-quiz.d-none { display: none; }

/* --- la pila de lo ya contestado ------------------------------------------
   Hace de avance, de vuelta atrás y de acuse de recibo con un solo componente.
   Por eso no hay ni puntos, ni barra, ni stepper. */
#aiWizardModal .aiw-quiz__done, .lp-questions .aiw-quiz__done { display: flex; flex-direction: column; }
#aiWizardModal .aiw-quiz__done:not(:empty), .lp-questions .aiw-quiz__done:not(:empty) { margin-bottom: 14px; }

#aiWizardModal button.aiw-done, .lp-questions button.aiw-done {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;              /* área táctil por min-height, no agrandando la letra */
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--lt-divider, #EFEBE5);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
}
#aiWizardModal button.aiw-done:last-child, .lp-questions button.aiw-done:last-child { border-bottom: 0; }
#aiWizardModal button.aiw-done.is-new, .lp-questions button.aiw-done.is-new { animation: aiw-done-in 0.18s ease both; }
#aiWizardModal .aiw-done__dot, .lp-questions .aiw-done__dot {        /* = .lt-diamond--5 (legaltica-ds.css:389) */
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: var(--lt-primary, #C54343);
  transform: rotate(45deg);
}
#aiWizardModal .aiw-done__value, .lp-questions .aiw-done__value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--lt-text-2, #5B6472);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#aiWizardModal .aiw-done__edit, .lp-questions .aiw-done__edit {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lt-text-muted, #666D7A);
}
#aiWizardModal button.aiw-done:hover .aiw-done__edit, .lp-questions button.aiw-done:hover .aiw-done__edit { color: var(--lt-primary, #C54343); }

/* --- la zona de pregunta -------------------------------------------------- */
#aiWizardModal .aiw-quiz__stage, .lp-questions .aiw-quiz__stage { min-height: var(--aiw-stage-h); }

#aiWizardModal .aiw-q, .lp-questions .aiw-q { animation: aiw-q-in 0.22s ease both; }
#aiWizardModal .aiw-q.is-leaving, .lp-questions .aiw-q.is-leaving { animation: aiw-q-out 0.14s ease both; }

#aiWizardModal span.aiw-q__eyebrow, .lp-questions span.aiw-q__eyebrow,
#aiWizardModal span.aiw-ph__eyebrow, .lp-questions span.aiw-ph__eyebrow {   /* = .lt-label (legaltica-ds.css:296-302) */
  display: block;
  font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lt-text-muted, #666D7A);
  margin: 0 0 6px;
}
#aiWizardModal h3.aiw-q__label, .lp-questions h3.aiw-q__label,
#aiWizardModal p.aiw-ph__title, .lp-questions p.aiw-ph__title {
  margin: 0 0 14px;
  font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--lt-ink, #16202E);
  text-wrap: balance;
}
#aiWizardModal p.aiw-ph__title, .lp-questions p.aiw-ph__title { color: var(--lt-text-2, #5B6472); }
/* Recibe el foco al avanzar (tabindex="-1"): sin eso, al desaparecer el botón
   pulsado el foco se cae al <body>. */
#aiWizardModal h3.aiw-q__label:focus, .lp-questions h3.aiw-q__label:focus { outline: none; }

#aiWizardModal .aiw-q__options, .lp-questions .aiw-q__options { display: flex; flex-direction: column; gap: 10px; }

#aiWizardModal button.aiw-q__option, .lp-questions button.aiw-q__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--lt-canvas, #F7F5F1);
  border: 1px solid var(--lt-border, #E7E2DA);
  border-radius: var(--lt-r-ctl, 10px);
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lt-ink, #16202E);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;   /* etiquetas de 40-50 caracteres: envuelven, NO se truncan */
  animation: aiw-q-in 0.22s ease both;
}
#aiWizardModal button.aiw-q__option:hover, .lp-questions button.aiw-q__option:hover {
  border-color: var(--lt-primary, #C54343);
  background: var(--lt-surface, #FFFFFF);
}
#aiWizardModal .aiw-q__option-text, .lp-questions .aiw-q__option-text { flex: 1 1 auto; min-width: 0; }

/* Sin radio ni casilla: una columna de círculos vacíos convierte esto en un
   formulario a primera vista, y el encargo dice que si parece un formulario se
   abandona. La marca aparece SÓLO en la elegida, y significa "tu respuesta",
   no "aquí se elige una". */
#aiWizardModal .aiw-q__mark, .lp-questions .aiw-q__mark {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: transparent;
  border: 1.5px solid transparent;
}
#aiWizardModal button.aiw-q__option.is-chosen, .lp-questions button.aiw-q__option.is-chosen {
  border-color: var(--lt-primary, #C54343);
  background: var(--lt-surface, #FFFFFF);
}
#aiWizardModal button.aiw-q__option.is-chosen .aiw-q__mark, .lp-questions button.aiw-q__option.is-chosen .aiw-q__mark { background: var(--lt-primary, #C54343); }
/* "Otra cosa" = una opción más, con el rombo hueco (.lt-diamond--hollow). */
#aiWizardModal button.aiw-q__option--other .aiw-q__mark, .lp-questions button.aiw-q__option--other .aiw-q__mark { border-color: var(--lt-primary, #C54343); }
#aiWizardModal button.aiw-q__option--other .aiw-q__option-text, .lp-questions button.aiw-q__option--other .aiw-q__option-text { color: var(--lt-text-2, #5B6472); }

/* --- texto libre: un desvío de dos toques, no un carril paralelo -----------
   Las otras opciones se atenúan pero SIGUEN siendo pulsables: se sale de aquí
   eligiendo otra cosa. Y el campo vacío cuenta como no contestar: no hay
   validación en todo el paso 3, nunca se regaña. */
#aiWizardModal .aiw-q__options.is-othering button.aiw-q__option:not(.aiw-q__option--other), .lp-questions .aiw-q__options.is-othering button.aiw-q__option:not(.aiw-q__option--other) { opacity: 0.5; }
#aiWizardModal .aiw-q__other, .lp-questions .aiw-q__other {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  animation: aiw-q-in 0.22s ease both;
}
#aiWizardModal input.aiw-q__other-input, .lp-questions input.aiw-q__other-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  background: var(--lt-canvas, #F7F5F1);
  border: 1px solid var(--lt-border, #E7E2DA);
  border-radius: var(--lt-r-ctl, 10px);
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 16px;      /* page-static.css:1025-1027: por debajo, iOS hace zoom */
  color: var(--lt-ink, #16202E);
  outline: none;
}
#aiWizardModal input.aiw-q__other-input::placeholder, .lp-questions input.aiw-q__other-input::placeholder { color: #A8AFB9; }
#aiWizardModal input.aiw-q__other-input:focus, .lp-questions input.aiw-q__other-input:focus {
  border-color: var(--lt-primary, #C54343);
  background: var(--lt-surface, #FFFFFF);
  /* #C54343 en decimal: no se puede meter un var() dentro de un rgba() sin un
     token --lt-primary-rgb, que hoy no existe. NO es el rgba(201,79,79) jubilado. */
  box-shadow: 0 0 0 3px rgba(197, 67, 67, 0.16);
}
#aiWizardModal button.aiw-q__other-ok, .lp-questions button.aiw-q__other-ok {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 20px;
  border: none;
  border-radius: var(--lt-r-ctl, 10px);
  background: var(--lt-primary, #C54343);
  color: #FFFFFF;
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
#aiWizardModal button.aiw-q__other-ok:hover, .lp-questions button.aiw-q__other-ok:hover { background: var(--lt-primary-hover, #B23F3F); }

/* --- el hueco de carga ----------------------------------------------------
   No es un spinner: un spinner dice "espera" y no dice cuánto ni para qué. Esto
   dice, con la forma, "van a aparecer tres cosas cortas aquí". Y mide lo mismo
   que una pregunta, así que el relevo es un relleno y no un salto. */
#aiWizardModal .aiw-ph, .lp-questions .aiw-ph { animation: aiw-q-in 0.22s ease both; }
#aiWizardModal .aiw-ph__rows, .lp-questions .aiw-ph__rows { display: flex; flex-direction: column; gap: 10px; }
#aiWizardModal .aiw-ph__row, .lp-questions .aiw-ph__row {
  display: flex;
  align-items: center;
  height: 51px;
  padding: 0 16px;
  border: 1px solid var(--lt-border, #E7E2DA);
  border-radius: var(--lt-r-ctl, 10px);
  background: var(--lt-canvas, #F7F5F1);
  animation: aiw-q-in 0.22s ease both, aiw-ph-breathe 1.6s ease-in-out 0.35s infinite;
}
#aiWizardModal .aiw-ph__bar, .lp-questions .aiw-ph__bar {
  height: 9px;
  border-radius: var(--lt-r-pill, 999px);
  background: var(--lt-divider, #EFEBE5);
}
#aiWizardModal .aiw-ph__bar--a, .lp-questions .aiw-ph__bar--a { width: 62%; }
#aiWizardModal .aiw-ph__bar--b, .lp-questions .aiw-ph__bar--b { width: 81%; }
#aiWizardModal .aiw-ph__bar--c, .lp-questions .aiw-ph__bar--c { width: 48%; }

/* --- el cierre. Vive ~400 ms y entonces navega: no es una pantalla en la que
   uno se pueda quedar, y por eso no lleva botón. --- */
#aiWizardModal .aiw-quiz__closing, .lp-questions .aiw-quiz__closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--aiw-stage-h);
  gap: 10px;
  text-align: center;
  animation: aiw-q-in 0.22s ease both;
}
#aiWizardModal .aiw-quiz__closing-dot, .lp-questions .aiw-quiz__closing-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--lt-primary, #C54343);
  transform: rotate(45deg);
  margin-bottom: 6px;
}
#aiWizardModal p.aiw-quiz__closing-h, .lp-questions p.aiw-quiz__closing-h {
  margin: 0;
  font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--lt-ink, #16202E);
}
#aiWizardModal p.aiw-quiz__closing-s, .lp-questions p.aiw-quiz__closing-s {
  margin: 0;
  font-size: 13.5px;
  color: var(--lt-text-muted, #666D7A);
}

/* --- la salida. Enlace de texto, no botón: todo el peso visual —el rojo, el
   borde que reacciona, el área grande— está en las opciones. Pero se puede
   pulsar: 44 px por min-height + flex, no agrandando la letra. --- */
#aiWizardModal button.aiw-quiz__skip, .lp-questions button.aiw-quiz__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 18px;     /* sin filete separador: una línea ahí añade aire de formulario */
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--lt-text-muted, #666D7A);
}
#aiWizardModal button.aiw-quiz__skip:hover, .lp-questions button.aiw-quiz__skip:hover {
  color: var(--lt-ink, #16202E);
  text-decoration: underline;
}

/* OJO: este bloque ENUMERA selectores, no usa comodin. Todo lo que se anime en
   este fichero tiene que aparecer aqui o no queda cubierto.
   Los 260 ms de acuse de recibo del paso 3 son un setTimeout, no una animacion,
   asi que SOBREVIVEN: quien apaga el movimiento sigue viendo su eleccion antes
   de que se vaya, que es justo lo que se queria. */
@media (prefers-reduced-motion: reduce) {
  #aiWizardModal .aiw-pane,
  #aiWizardModal .aiw-scene .al-ring,
  #aiWizardModal .aiw-orbit,
  #aiWizardModal .aiw-scales__beam,
  #aiWizardModal section.aiw-quiz,
  #aiWizardModal .aiw-q, .lp-questions .aiw-q,
  #aiWizardModal .aiw-q.is-leaving, .lp-questions .aiw-q.is-leaving,
  #aiWizardModal button.aiw-q__option, .lp-questions button.aiw-q__option,
  #aiWizardModal button.aiw-done.is-new, .lp-questions button.aiw-done.is-new,
  #aiWizardModal .aiw-ph, .lp-questions .aiw-ph,
  #aiWizardModal .aiw-ph__row, .lp-questions .aiw-ph__row,
  #aiWizardModal .aiw-q__other, .lp-questions .aiw-q__other,
  #aiWizardModal .aiw-quiz__closing, .lp-questions .aiw-quiz__closing {
    animation: none !important;
  }
}