/* ============================================================
   search-box.css — Buscador de listados (Destinos y Empleos)
   ============================================================
   Estilo ÚNICO del buscador. Antes vivía inline en el <style> de
   destinos.ejs, y al añadir el buscador de Empleos los dos se separaron:
   distinto alto, distinto sitio para el icono y distinto color de botón.
   Mismo patrón que ya nos costó los 404 de las páginas de país (la lógica
   del slug duplicada en sitemap y ruta): lo duplicado diverge.

   Se carga con:
     <link href="/assets/css/search-box.css" rel="stylesheet">
   desde el bloque `contentFor('css')` de la página que lo use.

   El MARKUP no es idéntico en las dos páginas a propósito:
     · Empleos usa un <form method="GET"> nativo (funciona sin JS, Enter
       envía solo) y conserva región/tipo/sort en campos ocultos.
     · Destinos usa un <div> + jQuery que arma la URL y navega, y al buscar
       descarta el resto de filtros a propósito.
   Aquí solo se unifica el ASPECTO; el comportamiento de cada una es una
   decisión de producto distinta y se mantiene.
   ============================================================ */

.search-box {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.search-box .form-control {
  height: 50px;
  padding-left: 20px;
  font-size: 1rem;
  border: 0;
  border-radius: 8px 0 0 8px;
}

.search-box .form-control:focus {
  box-shadow: none; /* el foco lo marca el contenedor, no el input suelto */
}

.search-box:focus-within {
  box-shadow: 0 0 0 3px rgba(249, 58, 11, 0.15);
}

/* Botón de buscar: color de MARCA (#F93A0B).
   Destinos lo tenía en degradado azul (#007bff → #0056b3), resto del tema
   original: quedaba azul en una web naranja. Unificado al de marca. */
.search-box .btn-buscar {
  height: 50px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 600;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: linear-gradient(135deg, #F93A0B, #d42f08);
  transition: filter 0.2s ease;
}

.search-box .btn-buscar:hover,
.search-box .btn-buscar:focus {
  color: #fff;
  filter: brightness(1.08);
}

/* Botón de limpiar (solo aparece si hay búsqueda activa). */
.search-box .btn-limpiar {
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  color: #fff;
  background: linear-gradient(135deg, #F93A0B, #d42f08);
  transition: filter 0.2s ease;
}

.search-box .btn-limpiar:hover,
.search-box .btn-limpiar:focus {
  color: #fff;
  filter: brightness(1.08);
}

/* Línea de resultados bajo la caja ("N resultados para «…»"). */
.search-resultados {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.5rem;
}