/** ==========================================================================
 * EL BUSCADOR DE FORMACIONES — cristal sobre la página (Eduardo, 16/09/2026)
 *
 * Al estilo del Spotlight de macOS: un campo grande centrado arriba y, debajo,
 * los resultados. Los dos son láminas de cristal separadas, como en el diseño.
 *
 * EL CRISTAL es el mismo de la cabecera y del popup de Brevo: el filtro SVG
 * #CeiLiquidGlass, que refracta el fondo en los bordes. Solo lo aplican los
 * motores Blink; el resto se queda con blur + saturate, que es el degradado
 * correcto y no una carencia.
 *
 * OJO CON EL VELO Y EL CRISTAL: si el velo llevara backdrop-filter, se
 * convertiría en raíz de fondo para todo lo que tiene dentro y las dos láminas
 * dejarían de ver la página, quedándose en gris. Es el mismo tropiezo que ya
 * está documentado en el popup de Brevo (PLAN.md). Por eso el velo es color
 * plano y el desenfoque vive solo en las láminas.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * El disparador, dentro del submenú de Formaciones
 * -------------------------------------------------------------------------- */

/*
 * Vive DENTRO de la columna «Tipos de formación», debajo de su lista. Estuvo
 * arriba del mega-submenú con `grid-column: 1 / -1`, que no hacía nada porque
 * ese contenedor no es una rejilla: el botón salía estrujado en una columna y
 * el texto en tres líneas (Eduardo, 16/09/2026).
 *
 * Al ocupar el ancho de su columna, `width: 100%` y nada de grid-column.
 */
.MenuNavegacion-buscadorTrigger {
  box-sizing: border-box;
  width: 100%;
  /* Es un <button>: hay que deshacer lo que el navegador le pone de serie
     —su propia tipografia y el texto centrado— o no se parece a la lista de
     encima (Eduardo, 16/09/2026). */
  text-align: left;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--Global-Espacio-TituloContenido);
  padding: 12px 18px;
  border: 1px solid var(--Global-Filete);
  border-radius: var(--Global-Radio-Pastilla);
  background-color: var(--Global-Velo-Blanco-60);
  color: var(--Global-Color-Black);
  font-family: var(--MenuNavegacion-fuente);
  font-size: var(--Font-Size-14);
  text-decoration: none;
  white-space: nowrap; /* que no vuelva a partirse en varias líneas */
  /* Mano, no cursor de escribir (Eduardo, 16/09/2026): parece un campo, pero
     no se escribe en él —abre la capa—, y el cursor tiene que decir lo que
     hace, no a lo que se parece. */
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.MenuNavegacion-buscadorTrigger:hover,
.MenuNavegacion-buscadorTrigger:focus-visible {
  border-color: var(--Global-Color-Black);
  background-color: var(--Global-Velo-Blanco);
}

/*
 * La lupa, mas grande que el rotulo a proposito (Eduardo, 16/09/2026): con la
 * insignia del atajo fuera hay sitio, y un icono grande con etiqueta pequeña es
 * lo que hace que el control se lea como «buscar» de un vistazo, igual que en
 * la propia capa. 29 contra los 14 del texto.
 */
.MenuNavegacion-buscadorLupa {
  font-size: var(--Font-Size-20);
}

/*
 * La insignia «⌘K» salió del botón el 16/09/2026 (Eduardo): en un menú público
 * la lee poca gente y ocupaba un tercio del ancho de la columna. El atajo SIGUE
 * funcionando —⌘K en Mac, Ctrl+K en el resto, ver cei-buscador.js—, solo que ya
 * no se anuncia ahí.
 */
.MenuNavegacion-buscadorTexto {
  flex: 1 1 auto;
  color: var(--Global-Color-Grey-Secondary);
}

/* --------------------------------------------------------------------------
 * La capa
 * -------------------------------------------------------------------------- */

.Buscador {
  position: fixed;
  inset: 0;
  z-index: 10000; /* por encima de la cabecera fija */
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  padding: clamp(60px, 12vh, 160px) 16px 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.Buscador.is-abierto {
  opacity: 1;
}

/*
 * SIN ESTO, EL ATRIBUTO `hidden` NO SIRVE DE NADA (Eduardo, 16/09/2026).
 *
 * `hidden` esconde via `display: none` de la hoja del navegador, y CUALQUIER
 * `display` de autor le gana: el `display: grid` de arriba dejaba la capa
 * siempre puesta. Como es `position: fixed; inset: 0` con z-index 10000, cubria
 * la pagina entera invisible (opacidad 0) y se tragaba todos los clics: los
 * submenus de la cabecera dejaron de abrirse.
 *
 * Va con !important para que no vuelva a pasar si alguien añade otro display.
 */
.Buscador[hidden] {
  display: none !important;
}

/*
 * LA PÁGINA DE DETRÁS SIGUE HACIENDO SCROLL (Eduardo, 16/09/2026).
 *
 * Aquí había un `overflow: hidden` sobre html y body que la dejaba clavada
 * mientras el buscador estaba abierto. Se quita a petición: la capa es `fixed`,
 * así que se queda en su sitio mientras el contenido corre por detrás.
 *
 * Interactuar con la página sigue siendo imposible, y no hace falta nada para
 * conseguirlo: el velo cubre todo y se queda con los clics —de hecho, uno de
 * ellos cierra el buscador—. Pero la rueda del ratón y el gesto táctil SÍ pasan,
 * porque el velo no es un contenedor con scroll propio: el navegador busca el
 * primer ancestro que pueda desplazarse, y ese es la página.
 *
 * La clase se queda aunque ya no traiga declaraciones: es el enganche por el
 * que cualquiera puede saber, desde CSS, que el buscador está abierto.
 */
.cei-buscador-abierto {
  /* sin bloqueo de scroll, a propósito */
}

.Buscador-velo {
  position: absolute;
  inset: 0;
  /*
   * Blanco con alfa y con su propio desenfoque (Eduardo, 16/09/2026). Era
   * oscuro —rgba(20,20,15,.42)— y la capa quedaba como una sombra encima de la
   * web en vez de como un cristal.
   *
   * AQUÍ SÍ SE PUEDE poner backdrop-filter, y en el popup de Brevo no: allí el
   * contenedor ENVOLVÍA a la lámina, y un elemento con backdrop-filter se
   * convierte en raíz de fondo para todo lo que lleva dentro, así que la lámina
   * dejaba de ver la página. El velo es HERMANO del panel, no su padre: no
   * tiene descendientes a los que cegar. El panel sigue viendo lo de detrás
   * —ahora, el velo ya difuminado—, que es justo el efecto que se busca.
   */
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/*
 * EL PANEL ENTRA CRECIENDO (Eduardo, 16/09/2026).
 *
 * La capa entera ya se desvanecía; ahora el panel —el campo y la lista, no el
 * velo— además llega desde el 80% de su tamaño. El velo se queda fuera del
 * efecto a propósito: lleva `backdrop-filter`, y escalar una superficie que
 * está desenfocando lo de detrás hace que el desenfoque se estire con ella y se
 * vea sucio.
 *
 * El origen es arriba y al centro: el panel cuelga de la parte de arriba de la
 * pantalla, así que creciendo desde su borde superior el campo de texto casi no
 * se mueve de sitio y el gesto se lee como que se abre hacia abajo.
 *
 * Un pelín más lento que el fundido de la capa (0,22 frente a 0,18) para que el
 * crecimiento acabe el último y no se corte de golpe.
 */
.Buscador-panel {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  display: grid;
  gap: 14px;
  transform: scale(0.8);
  transform-origin: top center;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.Buscador.is-abierto .Buscador-panel {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .Buscador-panel {
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
 * Las dos láminas: el campo y los resultados
 * -------------------------------------------------------------------------- */

.Buscador-campo,
.Buscador-resultados {
  background-color: var(--Global-Velo-Blanco);
  border: 1px solid var(--Global-Filete);
  border-radius: var(--Global-Radio-Panel);
  backdrop-filter: var(--Global-Vidrio-Blur);
  -webkit-backdrop-filter: var(--Global-Vidrio-Blur);
}

/* El cristal de verdad, donde el navegador lo sabe hacer. */
@supports (backdrop-filter: url(#CeiLiquidGlass)) {
  .Buscador-campo,
  .Buscador-resultados {
    backdrop-filter: url(#CeiLiquidGlass) var(--Global-Vidrio-Blur);
  }
}

.Buscador-campo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px; /* la altura la da el input, así todo queda a su eje */
  border-radius: var(--Global-Radio-Pastilla);
}

/*
 * LA LUPA Y EL ASPA SON SVG, NO CARACTERES (Eduardo, 16/09/2026).
 *
 * Eran «⌕» (U+2315) y «×». Las cajas quedaban centradas —medido, las tres al
 * mismo eje— pero el DIBUJO dentro de cada caja no: son glifos con métricas
 * raras, y el ⌕ ni siquiera está en Inter, así que el navegador caía a otra
 * fuente con su propia línea base y salía descolgado.
 *
 * Con SVG el centrado es geométrico: el viewBox se centra en la caja y no
 * depende de ninguna tipografía. De paso se ven iguales en todos los sistemas.
 */
.Buscador-lupa,
.Buscador-cerrar,
.MenuNavegacion-buscadorLupa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/*
 * EL `fill` VA EN CSS Y NO SOLO EN EL ATRIBUTO (Eduardo, 16/09/2026).
 *
 * El SVG ya lleva fill="none", pero eso es un atributo de presentacion y
 * cualquier regla CSS le gana: el tema pinta los svg con fill de color, asi que
 * el circulo de la lupa salia RELLENO, como una bola negra con mango. Aqui se
 * declara en CSS —tambien en los hijos— y entonces manda esto.
 */
.Buscador-icono {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
}

.Buscador-icono circle,
.Buscador-icono path {
  fill: none;
  stroke: currentColor;
}

.Buscador-lupa {
  font-size: var(--Font-Size-29);
  color: var(--Global-Color-Grey-Secondary);
}

/*
 * `line-height: 1` y relleno simétrico: con el interlineado por defecto del
 * navegador la caja del texto era más alta que la letra y el texto se apoyaba
 * arriba, descentrado respecto a la lupa y al aspa (Eduardo, 16/09/2026).
 */
/*
 * VA CON EL PADRE DELANTE, Y NO ES ADORNO (Eduardo, 16/09/2026).
 *
 * El tema estiliza los campos con un selector enorme —`input[type="date"],
 * input[type="email"], input[type="search"]…`— que pesa (0,1,1): un atributo
 * mas un elemento. `.Buscador-input` a secas pesa (0,1,0), MENOS, asi que
 * perdia en TODO lo que los dos declaran. Medido en staging:
 *
 *   margin-bottom  20px  (del tema; yo no lo declaraba siquiera)
 *   padding        10px  (yo pedia 0)
 *   font-size      15px  (yo pedia 29 -> y de ahi el line-height de 15px)
 *
 * Por eso el texto salia pequeño y descolgado dentro de la pastilla.
 *
 * Con el padre delante son (0,2,0) y gana sin recurrir al id. El `margin: 0`
 * va explicito: el tema lo declara y si aqui no se dice nada, se hereda.
 */
.Buscador-campo .Buscador-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-29);
  line-height: 1;
  color: var(--Global-Color-Black);
}

.Buscador-campo .Buscador-input:focus {
  outline: none; /* el aro va en la lámina, no en el campo desnudo */
}

/*
 * El foco, sin el aro negro de 2px que envolvía la pastilla y se comía el
 * diseño (Eduardo, 16/09/2026). Se marca con el borde de la propia lámina, que
 * pasa de gris a tinta: sigue viéndose quién tiene el foco —hace falta para
 * quien navega con el teclado— sin el cerco.
 */
.Buscador-campo:focus-within {
  border-color: var(--Global-Color-Black);
}

/* La cruz que traen de serie los type="search" sobra: ya hay botón de cerrar. */
.Buscador-campo .Buscador-input::-webkit-search-cancel-button {
  appearance: none;
}

.Buscador-cerrar {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--Global-Radio-Pastilla);
  background: none;
  font-size: var(--Font-Size-20);
  color: var(--Global-Color-Grey-Secondary);
  cursor: pointer;
}

.Buscador-cerrar:hover {
  background-color: var(--Global-Velo-Blanco-60);
  color: var(--Global-Color-Black);
}

/* --------------------------------------------------------------------------
 * Los resultados
 * -------------------------------------------------------------------------- */

.Buscador-resultados {
  margin: 0;
  padding: 8px;
  list-style: none;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain; /* al llegar al final no arrastra la página */
  /*
   * La barra, negra (Eduardo, 16/09/2026). `scrollbar-color` es el estandar y
   * lo entienden Firefox y los Chromium nuevos; el bloque ::-webkit- de abajo
   * cubre Safari y los Chromium viejos, que no lo tienen. Los dos dicen lo
   * mismo, asi que no se pisan.
   */
  scrollbar-color: var(--Global-Color-Black) transparent;
  scrollbar-width: thin;
}

.Buscador-resultados::-webkit-scrollbar {
  width: 8px;
}

.Buscador-resultados::-webkit-scrollbar-track {
  background: transparent;
}

.Buscador-resultados::-webkit-scrollbar-thumb {
  border-radius: var(--Global-Radio-Pastilla);
  background-color: var(--Global-Color-Black);
}

.Buscador-resultados:empty {
  display: none;
}

.Buscador-enlace {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  /* Mas redonda que antes (iba a Radio-Imagen, 8px): la fila es una pastilla
     dentro del panel, no un recorte de foto (Eduardo, 16/09/2026). */
  border-radius: var(--Global-Radio-Tarjeta);
  color: var(--Global-Color-Black);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * DOS SEÑALES DISTINTAS, Y A PROPOSITO (Eduardo, 16/09/2026).
 *
 * · La fila ACTIVA —la que abre el Enter— va en gris. Es una marca de posicion,
 *   no una accion: la mueve el teclado y tiene que verse sin gritar.
 * · La fila bajo el RATON va en naranja, el color de CTA de la casa. Ahi si hay
 *   intencion: el cursor esta encima porque vas a pulsar.
 *
 * Que no compartan color es lo que permite distinguirlas cuando coinciden, que
 * es justo cuando importa.
 */
/*
 * LA FILA ACTIVA (la del teclado): gris con TINTA NEGRA, y gana al hover.
 *
 * Al pasar el raton por encima se daban los dos estados a la vez y el resultado
 * era ilegible: el fondo gris lo ponia esta regla —mas especifica— y la tinta
 * blanca la del hover. Blanco sobre --Global-Color-Grey no se lee.
 *
 * `text-decoration: none` porque el tema subraya todo <a> al pasar por encima y
 * aqui la fila entera ya se destaca con el fondo (Eduardo, 16/09/2026).
 */
.Buscador-item.is-activo .Buscador-enlace,
.Buscador-item.is-activo .Buscador-enlace:hover,
.Buscador-item.is-activo .Buscador-enlace:focus-visible {
  background-color: var(--Global-Color-Grey);
  color: var(--Global-Color-Black);
  text-decoration: none;
}

.Buscador-item.is-activo .Buscador-enlace .Buscador-etiquetas {
  color: var(--Global-Color-Grey-Secondary);
}

/*
 * TINTA BLANCA SOBRE EL NARANJA (Eduardo, 16/09/2026).
 *
 * Estuvo en negro, y por un motivo: medido sobre el #e43713 del sistema, el
 * blanco da 4,33:1 y se queda por debajo del 4,5 que pide AA para texto normal
 * —el título son 20px sin negrita, así que no se le puede aplicar el listón de
 * 3:1 de los textos grandes—; el negro daba 4,85:1 y pasaba.
 *
 * Se sirve en blanco porque así se pidió, y es la misma decisión que en la
 * pastilla de variación del bloque de empleo y en la etiqueta de las tarjetas
 * de evento. Queda anotado aquí para que no parezca un descuido: si algún día
 * se quiere cerrar, basta con oscurecer un punto el --Global-Destacado.
 */
.Buscador-enlace:hover,
.Buscador-enlace:focus-visible {
  background-color: var(--Global-Destacado);
  color: var(--Global-Color-White);
  /* Sin subrayado: la fila entera ya se destaca con el fondo. */
  text-decoration: none;
}

/* Las etiquetas, igual: sobre el naranja cualquier gris del sistema se queda
   más corto todavía. */
.Buscador-enlace:hover .Buscador-etiquetas,
.Buscador-enlace:focus-visible .Buscador-etiquetas {
  color: var(--Global-Color-White);
}

.Buscador-titulo {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-20);
  letter-spacing: var(--Font-Letter-spacing-2);
}

.Buscador-titulo mark {
  background: none;
  color: inherit;
  font-weight: var(--Font-Weight-h2-temporal); /* el trozo que casa, en negrita, no en amarillo */
}

.Buscador-etiquetas {
  font-size: var(--Font-Size-14);
  color: var(--Global-Color-Grey-Secondary);
}

/* Con la fila en gris, las etiquetas se quedan con su gris de siempre: no hay
   que invertir nada. */

.Buscador-vacio {
  padding: 16px;
  color: var(--Global-Color-Grey-Secondary);
  font-size: var(--Font-Size-19);
}

/* --------------------------------------------------------------------------
 * El pie
 * -------------------------------------------------------------------------- */


@media (max-width: 767.98px) {
  .Buscador {
    padding-top: 24px;
  }

  .Buscador-campo .Buscador-input,
  .Buscador-lupa {
    font-size: var(--Font-Size-20);
  }

}

@media (prefers-reduced-motion: reduce) {
  .Buscador {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
 * EN ORDENADOR, SU COLUMNA VALE POR DOS (Eduardo, 16/09/2026)
 *
 * El mega-submenú es un flexbox con las columnas a `flex: 1 0 auto`, no una
 * rejilla: un hijo NO puede abarcar columnas hermanas, así que «que ocupe dos
 * columnas» no se puede pedir desde el botón. Lo que sí se puede es que la
 * columna que lo contiene reparta doble, y como el botón va a `width: 100%`,
 * se ensancha con ella.
 *
 * Se busca con `:has()` para no tocar el marcado ni inventarse una clase: la
 * columna es «la que lleva el buscador dentro», que es justo lo que se quiere
 * decir. Si algún día se mueve el botón, la regla se mueve sola con él.
 *
 * Solo de 1200 para arriba: por debajo el submenú se apila en un nivel y las
 * columnas ya ocupan todo el ancho, así que no hay nada que duplicar.
 * -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .MenuNavegacion-submenuCol:has(.MenuNavegacion-buscadorTrigger) {
    flex: 2 0 auto;
  }
}

/* --------------------------------------------------------------------------
 * EN MÓVIL NO SALE (Eduardo, 16/09/2026)
 *
 * De 768 para arriba sí —incluida la tableta, donde el menú ya es hamburguesa
 * pero hay sitio de sobra para la capa—. Por debajo se esconde: el panel del
 * buscador ocupa casi toda la pantalla, y en un teléfono el propio menú ya es
 * una lista vertical que se recorre con el pulgar, así que el buscador compite
 * con lo que ya hay en vez de ayudar.
 *
 * Es 767.98 y no 768 porque es el corte que usa todo el sistema (cei-tokens).
 *
 * Se esconde el BOTÓN, no la capa: el atajo de teclado sigue existiendo, que en
 * una tableta con teclado acoplado tiene todo el sentido.
 * -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .MenuNavegacion-buscadorTrigger {
    display: none;
  }
}