/* WondarCore — código propio, no generado. Se puede modificar libremente. */

/* ═══════════════════════════════════════
   CUADRO UNIFICADO DE LA HOME (2026-10-02, pedido de Gonzalo)
   Migrado de Gonzalo/index-buscador-ia.css — medidas, radios, colores y degradés calcados de ahí.
   Solo lo carga Views/Home/Index.cshtml. Todo acotado a .ia-banner / .ia-box / .ia-drop para no
   pisar nada de home.css ni de layout.css. Lógica en home-buscador-ia.js.
═══════════════════════════════════════ */

/* El banner deja de tener alto fijo (400px en home.css): ahora tiene que entrar título + cuadro
   + los dos botones de modo, así que crece con su contenido. */
.home-hero .landscape-banner.ia-banner {
  height: auto;
  min-height: 336px;
  padding: 2.4rem 0 1.9rem;
  box-sizing: border-box;
}

/* Título del mismo ancho que el cuadro (668px). 2.55rem es el tamaño con el que el texto en
   español mide ese ancho; en los otros idiomas el largo cambia, así que home-buscador-ia.js lo
   achica lo justo para que siga entrando en un renglón (nunca lo agranda). En pantallas angostas
   baja solo por el clamp() y puede partir en dos renglones. */
.home-hero .ia-banner .landscape-banner-title {
  box-sizing: border-box;
  width: calc(100% - 2rem);
  max-width: 668px;
  padding: 0;
  margin-bottom: 0.9rem;
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 2.3rem); /* -10% sobre 2.55rem (2026-10-02, pedido de Gonzalo): ya no llega al ancho del cuadro, queda centrado */
  white-space: nowrap;
}

/* ── Cuadro ──
   Borde de 3px con el degradé de marca de Wondar IA (mismo de .home-promo-btn--ai en home.css).
   668px = ancho real que tenía el buscador del banner (.banner-search: 700px menos su padding de
   1rem por lado), para quedar alineado con los botones de modo de abajo. z-index 50, igual que
   .banner-search: por encima de la foto, por debajo del fondo oscuro (.search-focus-overlay, 90). */
.ia-box {
  position: relative;
  z-index: 50;
  box-sizing: border-box;
  width: calc(100% - 2rem);
  max-width: 668px;
  margin: 0 1rem;
  padding: 3px;
  border-radius: 22px;
  background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f, #5fb87e);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ia-box:focus-within {
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
  transform: translateY(-1px);
}
/* Con el desplegable abierto pasa por encima de los botones de modo (.banner-search-modes, 91). */
.ia-box--abierto { z-index: 97; }

/* Blanco fijo también en modo oscuro — mismo criterio que .search-bar (ver layout.css,
   [data-theme="dark"] .search-bar): el cuadro flota sobre una foto, no sobre el fondo del sitio. */
.ia-box-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 5.6rem;
  padding: 1rem 1.2rem 0.4rem;
  border: none;
  outline: none;
  resize: none;
  /* Sin scroll horizontal: el texto siempre parte en renglones, y en iPhone el indicador de scroll
     horizontal aparecía como una raya gris atravesando el cuadro (reportado por Gonzalo, 2026-10-03). */
  overflow-x: hidden;
  overflow-wrap: anywhere;
  border-radius: 19px 19px 0 0;
  background: #ffffff;
  color: #1f2937;
  font-family: inherit;
  font-size: 1.12rem;
  line-height: 1.45;
}
/* Guía + ejemplo: bastante más chicos que lo que se escribe (pedido de Gonzalo). */
.ia-box-input::placeholder {
  color: #9ca3af;
  font-size: 0.88rem;
  line-height: 1.5;
}
.ia-box-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem 0.6rem 1.2rem;
  border-radius: 0 0 19px 19px;
  background: #ffffff;
}

/* ── Botón — dos caras ──
   · Wondar IA (por defecto: "Wondar IA", "Preguntar", "Armar mi viaje"): versión intensa del
     degradé de marca (azul → violeta → rosa → naranja, sin el amarillo/verde claros, donde el texto
     blanco no se lee) + estrella + texto blanco.
   · Búsqueda directa (.ia-box-send--buscar: "Buscar", "Ver destinos de …"): naranja de acento del
     sitio + lupa, porque ahí no interviene Wondar IA. */
.ia-box-send {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0 0.95rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b8def, #9a6bdc, #e2609b, #f08a3c);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.ia-box-send:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ia-box-send--buscar,
.ia-box-send--buscar:hover { background: #f5820c; text-shadow: none; }
.ia-box-send svg { width: 15px; height: 15px; flex-shrink: 0; }
.ia-box-send .ia-send-estrella { width: 13px; height: 13px; }
.ia-box-send .ia-send-lupa,
.ia-box-send .ia-send-flecha { display: none; }
.ia-box-send--buscar .ia-send-estrella { display: none; }
.ia-box-send--buscar .ia-send-lupa { display: block; }

/* Sacudida corta si se aprieta el botón con el cuadro vacío. */
.ia-box--vacio { animation: ia-shake 0.35s ease; }
@keyframes ia-shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ia-box--vacio { animation: none; }
}

/* ── Buscador clásico: invisible mientras vive en el banner ──
   NO se saca del HTML ni se le pone display:none: home.js ("relocación banner↔header") lo sigue
   mudando a .banner-search al cargar y necesita medir su posición para saber cuándo pasarlo al
   header al scrollear — con display:none mediría 0 y lo mandaría al header desde el arranque.
   Queda con alto 0 e invisible; apenas se muda al header (#search-wrap cambia de padre) vuelve a
   verse normal, igual que hoy. */
.ia-banner .banner-search {
  height: 0;
  min-height: 0 !important; /* pisa el min-height inline que le reserva home.js */
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}
.ia-banner .banner-search-modes { margin-top: 0.95rem; }

/* Mismo "redondeo" que el cuadro (pedido de Gonzalo): los botones de modo dejan de ser píldoras.
   12px y no los 22px literales del cuadro: en algo de ~40px de alto, 22px de radio vuelve a ser una
   píldora — 12px es lo que se ve igual de redondeado en proporción. */
.ia-banner .bsm-item { border-radius: 12px; }

/* ── Desplegable ──
   Cuelga del cuadro; adentro van las mismas filas .search-result del buscador del header (ver
   WondarBuscadorUi en layout.js), así que hereda su aspecto y sus colores de modo oscuro. */
.ia-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  box-sizing: border-box;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.3rem 0 0.4rem;
  border: 1px solid var(--color-borde);
  border-radius: 18px;
  background: var(--color-fondo-superficie);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  text-align: left;
}
.ia-drop[hidden] { display: none; }

/* ── Mobile ──
   El cuadro también se muestra en mobile (2026-10-02, decisión de Gonzalo). home.css oculta el
   banner entero en mobile (".landscape-banner { display: none; }", pedido de Agustin del
   2026-08-02, cuando el banner era solo foto + título porque el buscador se quedaba en el header):
   acá se lo vuelve a mostrar SOLO en la home con cuadro (.ia-banner), porque ahora sí tiene
   función. El buscador del header se comporta como en desktop: aparece recién al scrollear (ver
   "Header mobile de la home" al final de este archivo).
   Calcado del mobile de Gonzalo/index-buscador-ia.css. */
@media (max-width: 768px) {
  .home-hero .landscape-banner.ia-banner { display: flex; padding: 1.5rem 0 0.9rem; }
  .home-hero .ia-banner .landscape-banner-title { white-space: normal; }
  /* Leyenda del lugar de la foto: fuera en mobile (pedido de Gonzalo) — con el cuadro y los botones
     encima, la foto casi no se ve, así que el crédito no aporta. !important porque home.js la
     muestra con un style inline cuando la foto de portada tiene un lugar asociado. */
  .ia-banner .landscape-banner-lugar { display: none !important; }
  .ia-box-input { min-height: 6.6rem; font-size: 1rem; padding: 0.85rem 1rem 0.3rem; }
  .ia-box-input::placeholder { font-size: 0.85rem; }
  .ia-box-foot { padding-left: 1rem; }
  /* Botón: solo el círculo con la flecha (degradé = Wondar IA, naranja = buscar), 44px. El rótulo
     sigue en el HTML para lectores de pantalla. */
  .ia-box-send { width: 44px; min-height: 44px; padding: 0; justify-content: center; flex-shrink: 0; }
  .ia-box-send .ia-send-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ia-box-send .ia-send-estrella,
  .ia-box-send .ia-send-lupa,
  .ia-box-send--buscar .ia-send-lupa { display: none; }
  .ia-box-send .ia-send-flecha { display: block; width: 20px; height: 20px; }

  /* ── Cuadro en uso (body.ia-foco, ver abrirFoco en home-buscador-ia.js) — 2026-10-03, pedido de
     Gonzalo: con el teclado abierto, entre el header (2 filas de accesos) y el cuadro de 4 renglones
     no quedaba lugar para ver ni un resultado del desplegable. Mientras el cuadro está en uso:
     · el cuadro baja a 2 renglones (el texto gris pasa a ser solo la guía, ver ponerPlaceholder);
     · se esconde la barra de accesos de abajo (.mnav-bar, mobile-nav.css — desde 2026-10-08 los
       accesos viven ahí, no en el header): en Android queda apoyada arriba del teclado y le
       saca alto a los resultados;
     · se esconde el círculo flotante de Wondar IA (tapaba el botón del cuadro y los resultados).
     Al salir del cuadro (cerrarFoco) todo vuelve a como estaba. */
  body.ia-foco .mnav-bar { display: none; }
  /* 2026-10-09, pedido de Gonzalo (en iPhone, con el teclado abierto, del desplegable se veía
     media fila): mientras el cuadro está en uso
     · el título del banner se esconde y el cuadro sube al borde de arriba del banner (sin tocarlo,
       el título sigue estando; al salir vuelve);
     · el cuadro pasa a un solo renglón con la flecha al costado, en vez de texto arriba y botón
       abajo. Si lo escrito no entra, home-buscador-ia.js (ajustarAlto) lo deja crecer hasta 3
       renglones; el texto gris pasa a ser el título (ver ponerPlaceholder), que entra en uno. */
  body.ia-foco .home-hero .ia-banner .landscape-banner-title { display: none; }
  body.ia-foco .home-hero .landscape-banner.ia-banner { justify-content: flex-start; }
  body.ia-foco .ia-box { display: flex; align-items: stretch; }
  body.ia-foco .ia-box-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 3.4rem;
    min-height: 0;
    padding: 0.95rem 0.5rem 0.95rem 1rem;
    border-radius: 19px 0 0 19px;
  }
  body.ia-foco .ia-box-foot {
    align-items: flex-end;
    padding: 0.3rem 0.35rem 0.3rem 0;
    border-radius: 0 19px 19px 0;
  }
  body.ia-foco .wondar-ia-float { display: none; }
}

/* ── Header mobile de la home con el buscador relocalizado ──
   Desde que el cuadro se muestra en mobile, home.js corre ahí la misma relocación que en desktop
   (ver el corte por "banner oculto" al principio de home.js): arriba de todo el buscador del header
   no se ve (está en el banner, invisible) y recién al scrollear aparece en el header — nunca los
   dos a la vez (pedido de Gonzalo, igual que en Gonzalo/index-buscador-ia.html).
   layout.css solo tenía el layout "buscador activo" de desktop (logo / buscador / acciones en una
   fila de 3 columnas), que con más especificidad le ganaba al grid mobile: acá se lo lleva a las 3
   filas de mobile (logo+acciones / buscador / accesos), calcado del mobile de Gonzalo/index.css.
   Vive en este archivo (solo lo carga la home) para no tocar el header mobile del resto del sitio. */
@media (max-width: 768px) {
  .home-hero .floating-navbar.header-top--search-active {
    grid-template-columns: 1fr auto;
    grid-template-rows: none;
    row-gap: 10px;
  }
  .home-hero .floating-navbar.header-top--search-active .logo { grid-row: 1; grid-column: 1; }
  .home-hero .floating-navbar.header-top--search-active .header-actions { grid-row: 1; grid-column: 2; }
  .home-hero .floating-navbar.header-top--search-active .header-search-slot {
    display: block;
    grid-row: 2;
    grid-column: 1 / -1;
  }
  /* Alto táctil: los 29px que usa en la píldora de desktop quedan chicos para el dedo. */
  .home-hero .floating-navbar .header-search-slot .search-bar { height: 40px; padding: 0 16px; }
}

/* ── Aviso "No encontramos…" del desplegable ──
   Texto que no se reconoció como nada del sitio ni como pedido de viaje. Destacado en rojo (pedido
   de Gonzalo: como etiqueta gris en cursiva pasaba desapercibido) con los tokens de error del sitio,
   que ya cambian solos en modo oscuro. Primera oración en negrita, la indicación debajo. */
.ia-drop-aviso {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.4rem 0.6rem 0.5rem;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--color-error-fuerte);
  border-radius: 10px;
  background: var(--color-error-fondo);
  color: var(--color-error-fuerte);
  font-size: 0.85rem;
  line-height: 1.35;
}
.ia-drop-aviso strong { font-weight: 700; }
.ia-drop-aviso span { font-size: 0.78rem; opacity: 0.9; }

/* Modo "foco" (ver abrirFoco en home-buscador-ia.js): el cuadro queda por encima del fondo oscuro
   (.search-focus-overlay, z-index 90 en home.css) — mismo 95 que usaba .banner-search--focus-boost.
   Con el desplegable abierto ya está en 97 (.ia-box--abierto). */
.ia-box--foco { z-index: 95; }
.ia-box--foco.ia-box--abierto { z-index: 97; }

/* ── Fila de herramienta del sitio en el desplegable ("Comparar destinos", "Ver el ranking…") ──
   Misma fila .search-result que un resultado; la flecha/estrella va en naranja de acento (es un
   acceso directo, no un lugar) y el badge "Sección" en el mismo naranja. La variante --ia ("O
   armalo con Wondar IA") usa el degradé del botón del cuadro. */
.ia-drop-herramienta .search-result-img--empty {
  background: var(--color-acento);
  color: var(--color-texto-sobre-color);
}
.ia-drop-herramienta--ia .search-result-img--empty {
  background: linear-gradient(135deg, #5b8def, #9a6bdc, #e2609b, #f08a3c);
}
.ia-tipo-seccion { background: var(--color-acento); }