/* portalecm · buscador (2026-10-24): la lupa de la cabecera, el cuadro (<dialog>) y la página de resultados.
   Solo se carga si el buscador se ve (inc/buscador-interfaz.php). Mismas fichas de color que base.css; la lupa sigue
   la forma de píldora del selector de idioma, para que las dos piezas de la cabecera se lean como una familia. */

/* La lupa: píldora con el texto «Buscar»; en el móvil, solo el icono (el nombre sigue ahí para el lector de pantalla). */
.lupa{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;min-width:2.75rem;padding:.25rem .85rem .25rem .7rem;font-size:1rem;font-weight:700;color:var(--tinta);text-decoration:none;border:1px solid var(--filete);border-radius:999px}
.lupa svg{flex:none}
@media (hover:hover) and (pointer:fine){ .lupa:hover{background:var(--hoja);color:var(--enlace)} }
@media (max-width:54rem){
  .lupa{justify-content:center;padding-inline:.6rem}
  .lupa-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .js .lupa{order:1} /* Con el idioma, a la vista, antes de «Menú». */
}
/* Entre el menú de móvil y 1024 px, «Buscar» no cabía y se montaba sobre el selector de idioma (visto el 2026-10-24 a
   880 px, en todos los idiomas): ahí la lupa se queda en su icono, como en el móvil. */
@media (min-width:54.01rem) and (max-width:64rem){
  .lupa{justify-content:center;padding-inline:.6rem}
  .lupa-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* En los móviles estrechos no caben marca, lupa, idioma y «Menú» (40 px de más a 375 px): el idioma se queda en su
   bandera. El nombre sigue ahí para el lector de pantalla. Solo con la lupa puesta; sin ella, la cabecera no cambia. */
@media (max-width:27rem){
  .sitio:has(.lupa) .idiomas a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sitio:has(.lupa) .idiomas a{padding-inline:.6rem}
  .sitio:has(.lupa) .idiomas--varios summary{padding-inline:.6rem}
}
@media (max-width:40rem){ .sitio:has(.lupa){gap:.5rem} .sitio:has(.lupa) .menu-boton{padding-inline-start:.25rem} }
/* Por debajo de 360 px ni así caben (ya pasaba sin la lupa, a 320 px): «Menú» se queda en sus tres rayas, con el
   nombre para el lector de pantalla. */
@media (max-width:22.5rem){
  .sitio:has(.lupa) .menu-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sitio:has(.lupa){gap:.35rem}
  .sitio:has(.lupa) .menu-boton{padding-inline:.5rem;min-width:2.75rem;justify-content:center}
}

/* El campo: el del listado de historias (listado.css), con su lupa dibujada. */
.buscador-form{flex:1;min-width:0}
.buscador-form input{width:100%;min-height:3.25rem;padding:.8rem 1.1rem .8rem 3rem;border:1px solid var(--filete);border-radius:999px;background:var(--hoja) no-repeat 1.1rem 50%/1.25rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E564A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");color:var(--tinta);font:inherit;font-size:1.125rem}
@media (prefers-color-scheme:dark){ .buscador-form input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5AB9A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E")} }
.buscador-form input::placeholder{color:var(--suave)}
.buscador-form input:focus-visible{outline:3px solid var(--enlace);outline-offset:2px}
.buscador-form input::-webkit-search-cancel-button{cursor:pointer}

/* El cuadro: centrado y alto en el ordenador; a pantalla completa en el móvil, donde el teclado ocupa media pantalla. */
.buscador{width:min(44rem,calc(100vw - 2 * var(--canal)));max-height:min(46rem,calc(100dvh - 4rem));margin:2rem auto auto;padding:0;color:var(--tinta);background:var(--papel);border:1px solid var(--filete);border-radius:var(--radio-grande);overflow:hidden} /* Elevación, una vez: borde y fondo oscurecido, sin sombra. */
.buscador[open]{display:flex;flex-direction:column}
.buscador::backdrop{background:color-mix(in srgb,var(--noche) 45%,transparent)}
.buscador-cabeza{display:flex;align-items:center;gap:.5rem;padding:1rem 1rem .5rem}
.buscador-cerrar{flex:none;display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;color:var(--tinta);background:transparent;border:0;border-radius:999px;cursor:pointer}
@media (hover:hover) and (pointer:fine){ .buscador-cerrar:hover{background:var(--hoja)} }
.buscador .buscador-estado{margin:0;padding:.25rem 1.5rem;min-height:1.6em;font-size:var(--t-nota);color:var(--suave)}
.buscador .buscador-lista{overflow-y:auto;overscroll-behavior:contain;padding:0 .5rem 1rem}
.buscador .buscador-sugerencias{padding:0 1.5rem 1.5rem}
html:has(.buscador[open]){overflow:hidden}
@media (max-width:40rem){
  .buscador{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}
  .buscador-cabeza{padding:calc(.75rem + env(safe-area-inset-top,0px)) .75rem .5rem}
}

/* Los resultados, agrupados: «Historias», «Estudios», «Para entender»… El mismo HTML en el cuadro y en la página. */
.buscador-grupo + .buscador-grupo{margin-top:1rem}
.buscador-grupo h2{margin:0;padding:.5rem 1rem .25rem;font-size:var(--t-nota);font-weight:700;color:var(--suave)}
.buscador-grupo ul{margin:0;padding:0;list-style:none}
.buscador-res{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;color:var(--tinta);text-decoration:none;border-radius:var(--radio)}
.buscador-res img,.buscador-sin-imagen{flex:none;width:4.5rem;height:3rem;border-radius:.5rem;object-fit:cover;background:var(--hoja)}
.buscador-res-texto{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.buscador-res-titulo{font-size:var(--t-lista);font-weight:700;line-height:1.3}
.buscador-res-detalle{font-size:var(--t-nota);line-height:1.4;color:var(--suave);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.buscador-res mark{background:var(--luz);color:var(--luz-tinta);border-radius:2px;padding-inline:.05em}
.buscador-res:focus-visible{outline-offset:-3px;background:var(--hoja)}
@media (hover:hover) and (pointer:fine){ .buscador-res:hover{background:var(--hoja)} .buscador-res:hover .buscador-res-titulo{color:var(--enlace)} }
.buscador-todos{display:block;margin:.75rem 1rem 0;font-size:var(--t-nota);font-weight:700}

/* Las sugerencias fijas: cuando aún no se ha escrito o no hay resultados. */
.buscador-sugerencias p{margin:0 0 .5rem;font-size:var(--t-nota);color:var(--suave)}
.buscador-sugerencias ul{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.buscador-sugerencias a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.35rem 1rem;border:1px solid var(--filete);border-radius:999px;background:var(--hoja);color:var(--tinta);font-size:1rem;font-weight:700;text-decoration:none}
@media (hover:hover) and (pointer:fine){ .buscador-sugerencias a:hover{border-color:var(--enlace);color:var(--enlace)} }

/* La página de resultados (/buscar/). */
.pagina-buscar{padding-block:2.5rem 4rem;max-width:44rem}
.pagina-buscar h1{font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;margin-bottom:1.25rem}
.pagina-buscar .buscador-form{margin-bottom:1rem}
.pagina-buscar .buscador-estado{margin:0 0 1rem;font-size:var(--t-nota);color:var(--suave)}
.pagina-buscar .buscador-res{padding-inline:.5rem}
.pagina-buscar .buscador-grupo h2{padding-inline:.5rem}
.pagina-buscar .buscador-sugerencias{margin-top:1rem}
.buscador-aviso{margin:0 0 1rem;padding:.75rem 1rem;font-size:var(--t-nota);background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio)}

/* La página 404: el campo, bajo el título y antes de la explicación (que termina en los destinos). */
.error-buscar{max-width:36rem;margin:1.5rem 0 .5rem}
.error-buscar p{margin:0 0 .75rem;font-weight:700}