/* ==========================================================================
   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); } }
@keyframes al-sway   { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes al-orbit  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes al-orbitR { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes al-ring   { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 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);
}

#aiWizardModal button.aiw-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--lt-text-faint, #9AA5B4);
  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;
}

/* --------------------------------------------------------------------------
   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;
}


/* --------------------------------------------------------------------------
   PASO 3 · ANALIZANDO (panel oscuro con escena animada)
   -------------------------------------------------------------------------- */
#aiWizardModal section.aiw-analyze {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 52px 48px 56px 48px;
  background: var(--lt-ink, #16202E);
}

#aiWizardModal .aiw-analyze__glow {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 79, 79, 0.18), transparent 68%);
  pointer-events: none;
}

/* --- escena --- */
#aiWizardModal .aiw-scene {
  position: relative;
  width: 280px;
  height: 280px;
  margin-bottom: 22px;
}

#aiWizardModal .aiw-scene .al-ring {
  position: absolute;
  inset: 50px;
  border: 1.5px solid rgba(201, 79, 79, 0.4);
  border-radius: 50%;
  animation: al-ring 3s ease-out infinite;
}
#aiWizardModal .aiw-scene .al-ring--2 { animation-delay: 1.5s; }

#aiWizardModal .aiw-orbit { position: absolute; }
#aiWizardModal .aiw-orbit--out {
  inset: 0;
  animation: al-orbit 18s linear infinite;
}
#aiWizardModal .aiw-orbit--in {
  inset: 28px;
  animation: al-orbitR 22s linear infinite;
}

#aiWizardModal .aiw-dot {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  display: inline-block;
}
#aiWizardModal .aiw-orbit--out .aiw-dot { width: 9px; height: 9px; margin-left: -4px; }
#aiWizardModal .aiw-orbit--in  .aiw-dot { width: 8px; height: 8px; margin-left: -4px; }
#aiWizardModal .aiw-orbit--out .aiw-dot--top    { top: -4px; }
#aiWizardModal .aiw-orbit--out .aiw-dot--bottom { bottom: -4px; }
#aiWizardModal .aiw-orbit--in  .aiw-dot--top    { top: -3.5px; }
#aiWizardModal .aiw-orbit--in  .aiw-dot--bottom { bottom: -3.5px; }

#aiWizardModal .aiw-dot--amber { background: var(--lt-star, #E8A33D); }
#aiWizardModal .aiw-dot--green { background: var(--lt-open-on-dark, #6FBF9A); }
#aiWizardModal .aiw-dot--red   { background: var(--lt-primary, #C94F4F); }
#aiWizardModal .aiw-dot--steel { background: #9AB0C4; }

#aiWizardModal .aiw-scene__core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#aiWizardModal .aiw-scene__core::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: rgba(29, 42, 59, 0.55);
  border: 1px solid var(--lt-dark-border, #2A3A4E);
  border-radius: 50%;
}

#aiWizardModal svg.aiw-scales {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: visible;
}
#aiWizardModal .aiw-scales__beam {
  transform-origin: 50px 24px;
  animation: al-sway 4s ease-in-out infinite;
}

/* --- cuenta atrás --- */
#aiWizardModal p.aiw-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 22px 0;
  position: relative;
}
/* (2,1,0): gana al `#aiWizardModal #countdown-seconds` de page-home.css. */
#aiWizardModal span.aiw-count__num,
#aiWizardModal #countdown-seconds.aiw-count__num {
  font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 48px;
  color: #FFFFFF;
  line-height: 1;
}
#aiWizardModal .aiw-count__unit {
  font-size: 15px;
  color: #8A93A0;
  font-weight: 600;
}

/* --- fases rotativas (.message-item lo maneja ai-wizard.js) --- */
#aiWizardModal .aiw-phases {
  position: relative;
  width: 100%;
  min-height: 86px;
  margin-bottom: 30px;
}
#aiWizardModal .aiw-phases .message-item {
  position: absolute;
  inset: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
#aiWizardModal .aiw-phases .message-item.active {
  opacity: 1;
  transform: translateY(0);
}
#aiWizardModal h3.aiw-phase__title {
  margin: 0 0 8px 0;
  font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
#aiWizardModal p.aiw-phase__sub {
  margin: 0;
  font-size: 14.5px;
  color: var(--lt-on-dark-muted, #9AA5B4);
}

/* --- barra de progreso del análisis --- */
#aiWizardModal .aiw-bar {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--lt-r-bar, 99px);
  overflow: hidden;
}
#aiWizardModal .aiw-bar__fill {
  height: 8px;
  width: 0;
  background: var(--lt-primary, #C94F4F);
  border-radius: var(--lt-r-bar, 99px);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#aiWizardModal p.aiw-analyze__note {
  position: relative;
  margin: 28px 0 0 0;
  font-size: 13px;
  color: var(--lt-on-dark-faint, #7A8698);
  max-width: 480px;
}

/* Estado de error que pinta ai-wizard.js dentro de #step-3 */
#aiWizardModal .aiw-error { color: #FFFFFF; }
#aiWizardModal h3.aiw-error__title {
  font-family: var(--lt-font-head, 'Space Grotesk', sans-serif);
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 8px 0;
}
#aiWizardModal p.aiw-error__msg {
  margin: 0 0 24px 0;
  font-size: 14.5px;
  color: var(--lt-on-dark-muted, #9AA5B4);
}

/* --------------------------------------------------------------------------
   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;
}

/* Mientras analiza, el panel ocupa el modal entero: sin botonera. */
#aiWizardModal.aiw-analyzing .aiw-foot { display: none; }

#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.
     La pantalla de análisis SÍ sigue ocupándolo todo (ver más abajo). */
  #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; }

  /* La pantalla de ANÁLISIS sí ocupa todo: es inmersiva y dura ~60 s. La hoja
     inferior se convierte en pantalla completa justo al empezar a analizar. */
  #aiWizardModal.aiw-analyzing .modal-dialog.aiw-dialog { align-items: stretch; }
  #aiWizardModal.aiw-analyzing div.modal-content {
    border-radius: 0;
    max-height: none;
    min-height: 100vh;
    min-height: 100dvh;
  }
  #aiWizardModal.aiw-analyzing .modal-body.aiw-body { flex: 1 1 auto; }
  #aiWizardModal.aiw-analyzing .aiw-pane { flex: 1 1 auto; padding: 0; }

  #aiWizardModal section.aiw-analyze {
    justify-content: center;
    padding: 24px;
  }
  #aiWizardModal .aiw-scene { width: 260px; height: 260px; margin-bottom: 20px; }
  #aiWizardModal .aiw-scene .al-ring { inset: 44px; }
  #aiWizardModal .aiw-orbit--in { inset: 26px; }
  #aiWizardModal .aiw-scene__core::before { width: 132px; height: 132px; }
  #aiWizardModal svg.aiw-scales { width: 88px; height: 88px; }
  #aiWizardModal span.aiw-count__num,
  #aiWizardModal #countdown-seconds.aiw-count__num { font-size: 46px; }
  /* 18px en vez de los 19px del diseño: con 24px de padding, "Evaluando
     reputación y experiencia…" llega justo al borde a 19px. */
  #aiWizardModal h3.aiw-phase__title { font-size: 18px; }
  #aiWizardModal p.aiw-phase__sub { font-size: 13.5px; }
  #aiWizardModal .aiw-phases { min-height: 92px; margin-bottom: 26px; }
  #aiWizardModal .aiw-bar { max-width: 300px; }
  #aiWizardModal p.aiw-analyze__note { max-width: 300px; font-size: 12.5px; margin-top: 26px; }

  /* 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%; }
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #aiWizardModal .aiw-pane,
  #aiWizardModal .aiw-scene .al-ring,
  #aiWizardModal .aiw-orbit,
  #aiWizardModal .aiw-scales__beam {
    animation: none !important;
  }
}