/* ==========================================================================
   Autocompletado en los buscadores de cabecera y portada.

   Va en un fichero aparte a propósito: el grueso de los estilos del buscador
   está al final de app.css, pero Felipe está editando app.css ahora mismo y no
   quiero pisarle el trabajo. Fusionable con app.css cuando convenga.

   Aquí solo lo imprescindible para que la lista de sugerencias se coloque bien
   en los dos formularios que viven fuera de las páginas del buscador.
   ========================================================================== */

/* La lista se posiciona respecto al formulario, así que este manda. */
.header-search,
.hero__search { position: relative; }

/* En la cabecera el formulario es estrecho: la lista se ensancha para que los
   apellidos largos no se partan, sin salirse de la pantalla en móvil. */
.header-search .sugerencias {
    min-width: 18rem;
    max-width: min(24rem, calc(100vw - 2rem));
    font-size: .95rem;
}

/* El botón de la cabecera es un icono cuadrado: la lista debe cubrir todo el
   ancho del formulario, no solo el del campo de texto. */
.header-search .sugerencias,
.hero__search .sugerencias { left: 0; right: 0; }

/* En la portada el campo es grande; que las sugerencias acompañen. */
.hero__search .sugerencias { font-size: 1.02rem; }

/* Fondo sólido pase lo que pase: la cabecera es borgoña y el hero lleva foto. */
.header-search .sugerencias,
.hero__search .sugerencias { background: #fff; color: var(--ink, #24201d); }

/* ------------------------------------------------------------------
   Formulario de «escudo no encontrado»: campo libre de observaciones.
   Va aquí y no en app.css porque ese fichero lo edita Felipe en paralelo.
   ------------------------------------------------------------------ */
.campo textarea {
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid #c9b79a;
  border-radius: 6px;
  background: #fffdf8;
  color: inherit;
  resize: vertical;
  min-height: 6rem;
}
.campo textarea:focus {
  outline: 2px solid #b08d35;
  outline-offset: 1px;
  border-color: #b08d35;
}
.campo__opcional { font-weight: 400; color: #6b5b46; font-size: .9em; }