/* WondarCore — código propio, no generado. Se puede modificar libremente. */
/* "Asistente IA" (piloto, 2026-07-27, pedido de Agustin) — ver asistente-ia.js /
   WondarCore.AsistenteIa.cs. Unificación de la IA (2026-07-29): el orbe flotante clickeable se sacó
   del sitio — el único punto de entrada para consultar al asistente ahora es el botón "Wondar IA"
   del header, que abre el modal de consulta de acá abajo (.aic-*) directo. Lo que queda flotando
   solo es la burbuja de sugerencias/tips (aiaMontarBubble), que cuelga como un globo debajo de ese
   mismo botón — mismo anclaje que .qm-ai-tooltip en layout.css (.qm-item--ai ya tiene
   position:relative + overflow:visible). Es migración de funcionalidad, no el diseño final. */
.aia-widget {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: min(280px, calc(100vw - 32px));
  z-index: 70;
  /* El wrapper ocupa espacio real (el alto de la burbuja) incluso cuando no hay mensaje mostrado, y
     por default captura clicks en toda esa área — tapando lo que haya debajo (ej. el breadcrumb)
     aunque la burbuja esté invisible. Se desactiva acá y se reactiva solo en .aia-bubble--visible,
     así solo bloquea mientras hay un mensaje real mostrado. */
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .aic-btn, .aic-btn--esperando { animation: none; }
}

@keyframes aia-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.aia-bubble {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 0.7rem 1rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
  color: #1a1a2e;
  line-height: 1.4;
  position: relative;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-sizing: border-box;
  text-align: left;
}
.aia-bubble--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Colita apuntando hacia el botón de arriba — mismo mecanismo que .qm-ai-tooltip::before. */
.aia-bubble::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #fff;
}

.aia-bubble-text { margin: 0; padding-right: 14px; }

.aia-bubble-close {
  position: absolute;
  top: 2px;
  right: 4px;
  min-height: auto;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 6px;
}
.aia-bubble-close:hover { color: #555; }

/* ── Modal de consulta al Asistente IA (pedido de Agustin, 2026-07-27) ──────────────────────────── */

.aic-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(4, 10, 22, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.aic-overlay--visible { opacity: 1; pointer-events: auto; }

.aic-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 34px 26px 26px;
  color: #fff;
  background:
    radial-gradient(circle at 20% -10%, rgba(56, 189, 248, 0.3), transparent 55%),
    linear-gradient(160deg, #0c2b4a, #0b1f3a 55%, #060f20);
  box-shadow: 0 30px 80px rgba(2, 8, 23, 0.55);
}

.aic-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.aic-watermark img {
  width: 85%;
  max-width: 460px;
  opacity: 0.08;
  filter: blur(2px);
}

.aic-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.aic-close:hover { background: rgba(255, 255, 255, 0.24); }

.aic-title {
  position: relative;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 4px 34px 14px 0;
}

/* Selector inicial (unificación de la IA, 2026-07-29) — 2 botones con el mismo look (pedido de
   Agustin: "que los dos botones sean igual"), cada uno lleva al mismo formulario de abajo con
   distinto flujo por dentro (ver aiaElegirFlujo en asistente-ia.js). Look provisorio, es migración
   de funcionalidad, no el diseño final. */
.aic-chooser {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Mismo degradado que .aic-btn. */
.aic-choice-btn {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9, #1e3a8a);
  background-size: 200% 200%;
  animation: aia-flow 10s ease-in-out infinite;
  /* Despega el texto del degradado en movimiento de abajo — sin esto, en algunos tramos de la
     animación el texto casi se funde con el fondo. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: filter 0.15s;
}
.aic-choice-btn:hover { filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  .aic-choice-btn { animation: none; }
}

.aic-form-area { position: relative; margin-top: 14px; }

/* Pantalla de carga del flujo 'itinerario' — frases rotativas (ver wondar-ia-loading.js), mismo
   mecanismo que tenía el modal blanco retirado, recoloreado para el fondo oscuro de este panel. */
.aic-cargando {
  padding: 1.5rem 1rem;
  text-align: center;
}
.aic-cargando-texto {
  font-size: 0.95rem;
  font-weight: 600;
  background: linear-gradient(90deg, #38bdf8, #7dd3fc, #a78bfa, #38bdf8);
  background-size: 300% 100%;
  animation: aia-flow 3s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .aic-cargando-texto { animation: none; color: #7dd3fc; }
}

.aic-listo h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; color: #fff; }
.aic-listo-nombre { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); font-weight: 600; }

.aic-textarea {
  width: 100%;
  min-height: 100px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.aic-textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.aic-textarea:focus { outline: none; border-color: #38bdf8; }
.aic-textarea:disabled { opacity: 0.6; }

.aic-contador {
  text-align: right;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 2px 0;
}

.aic-error {
  color: #fca5a5;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 12px 0 0;
}

.aic-footer { margin-top: 16px; }

.aic-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9, #1e3a8a);
  /* Un poco de vida en reposo — mismo degradado, pero moviéndose muy despacio (10s, contra los 6s
     del orbe) para que se note sutil y no compita con lo grande que ya es el botón. */
  background-size: 200% 200%;
  animation: aia-flow 10s ease-in-out infinite;
  transition: filter 0.15s, transform 0.15s;
}
.aic-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.aic-btn:disabled { cursor: default; }

/* Estado "esperando respuesta" — mismo degradado de .aic-btn en reposo, pero moviéndose mucho más
   rápido, para que se note claramente que está "pensando". */
.aic-btn--esperando {
  background: linear-gradient(90deg, #38bdf8, #0ea5e9, #1e3a8a, #0ea5e9, #38bdf8);
  background-size: 300% 100%;
  animation: aia-flow 1.4s linear infinite;
}

.aic-respuesta {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 480px) {
  .aic-panel { padding: 30px 20px 20px; }
}