/* Buscador público del directorio (schools#index). Sub-barra de búsqueda,
   filtros, franja, lista y mapa. Portado de Resultados.html a los tokens de
   base.css (--ink, --ink-soft, --line, --cream, --maroon, acentos de marca). */

.dir { max-width: 1360px; margin: 0 auto; width: 100%; }

/* --- Sub-barra: búsqueda + filtros --- */
.dir-bar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start;
  padding: 18px 34px 14px;
}
.dir-search { position: relative; flex: 0 1 260px; min-width: 190px; }
.dir-search__box {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; color: var(--greige);
}
.dir-search__box input {
  border: none; outline: none; font: inherit; font-size: .85rem; color: var(--ink);
  background: transparent; width: 100%;
}

.dir-ac {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(45, 42, 38, .5);
  overflow: hidden; z-index: 60; list-style: none; margin: 0; padding: 0;
}
.dir-ac__row {
  padding: 11px 18px; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
/* is-active = la fila marcada con las flechas; mismo aspecto que el hover. */
.dir-ac__row:hover,
.dir-ac__row.is-active { background: var(--cream); }
.dir-ac__row--empty { color: var(--greige); cursor: default; }
.dir-ac__row--empty:hover { background: transparent; }
.dir-ac__name { font-weight: 600; }
.dir-ac__rg { color: var(--greige); font-size: .85rem; white-space: nowrap; }
/* "Usar mi ubicación actual": fila de acción, icono + texto a la izquierda. */
.dir-ac__row--geo { justify-content: flex-start; align-items: center; gap: 10px; }
.dir-ac__geo-icon { display: inline-flex; color: var(--maroon); }
.dir-ac .is-dimmed { opacity: .4; }
.dir-ac__row--geo.is-locating .dir-ac__name { font-weight: 400; color: var(--greige); }

.dir-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
  font-size: .85rem; font-weight: 600; color: var(--ink); background: var(--paper);
  white-space: nowrap; cursor: pointer;
}
.dir-pill.is-active { border-color: var(--ink); background: var(--cream); }
.dir-pill__lbl {
  font-size: .68rem; letter-spacing: .06em; color: var(--greige); font-weight: 700;
  text-transform: uppercase;
}
.dir-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(45, 42, 38, .5); padding: 8px; z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
}
.dir-menu label {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 8px; font-weight: 500; cursor: pointer;
}
.dir-menu label:hover { background: var(--cream); }

/* --- Separador bajo la barra de búsqueda --- */
.dir-sep { height: 1px; width: 100%; background: var(--line); }

/* --- Cabecera de resultados + banners --- */
.dir-stage { padding: 26px 34px 60px; }
.dir-headline { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.dir-meta { color: var(--ink-soft); font-size: .95rem; margin: 8px 0 0; }
.dir-banner {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--cream); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 20px; margin: 18px 0 6px; color: var(--ink);
}

/* --- Lista + mapa --- */
.dir-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px;
  margin-top: 16px; align-items: start;
}
.dir-list { max-height: 640px; overflow: auto; padding-right: 6px; container-type: inline-size; }

/* El atributo `hidden` (lo pone el filtro, ver directory_controller#applyFilters)
   solo trae display:none de la hoja del navegador, y CUALQUIER `display` de autor
   le gana. Sin esta regla, filtrar marcaba las filas como ocultas y seguían
   viéndose. Esta gana al display:grid de abajo por especificidad (clase +
   atributo), no por el orden. */
.dir-row[hidden] { display: none; }

/* Aviso de "el filtro no deja nada", dentro de la lista. Mismo `hidden` y misma
   trampa que las filas: cualquier display de autor le ganaría, así que se
   declara aquí (ver .dir-row[hidden] arriba). */
.dir-none { color: var(--ink-soft); font-size: .95rem; padding: 18px 4px; margin: 0; }
.dir-none[hidden] { display: none; }

.dir-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: center;
  padding: 16px 14px; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit; border-radius: 10px;
  transition: background .15s;
}
.dir-row:hover, .dir-row.hovered { background: var(--cream); }
.dir-row__thumb {
  width: 110px; height: 80px; border-radius: 12px; overflow: hidden;
  background: var(--cream-2); display: block;
}
.dir-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dir-row__ph { display: block; width: 100%; height: 100%; background: var(--cream-2); }
.dir-row__body { min-width: 0; }
.dir-row__name { display: block; font-size: 1.1rem; line-height: 1.1; margin: 0 0 3px; }
.dir-row__meta { display: block; color: var(--ink-soft); font-size: .92rem; }
.dir-row__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.dir-tag {
  font-size: .72rem; letter-spacing: .04em; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
  white-space: nowrap;
}
.dir-row__cta {
  white-space: nowrap; font-weight: 600; font-size: .88rem; color: var(--ink-soft);
  border-bottom: 2px solid var(--line); padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
/* El subrayado reacciona al pasar por la FILA entera, no solo por el propio
   "Ver ficha": la fila es lo que se resalta, así que el CTA tiene que
   acompañarla. `.hovered` es la misma clase que pone el hover del pin en el
   mapa, así que también se enciende al señalar la escuela desde allí. */
.dir-row:hover .dir-row__cta,
.dir-row.hovered .dir-row__cta {
  color: var(--ink); border-bottom-color: var(--greige);
}

/* Cuando la columna de la lista se estrecha (mapa al lado en pantallas medias),
   las 3 columnas de la fila se pisan: la meta larga se cuela bajo el CTA. Aquí
   la fila pasa a 2 columnas y el "Ver ficha" baja debajo del cuerpo. */
@container (max-width: 440px) {
  .dir-row { grid-template-columns: 88px 1fr; align-items: start; }
  .dir-row__thumb { grid-row: 1 / span 2; width: 88px; height: 66px; }
  .dir-row__cta { grid-column: 2; justify-self: start; margin-top: 12px; }
}

.dir-map-wrap {
  position: sticky; top: 24px; height: 640px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
}
.dir-map { position: absolute; inset: 0; }
.dir-fit {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink);
  cursor: pointer; box-shadow: 0 6px 16px -6px rgba(45, 42, 38, .3);
}

/* Pin de la ciudad buscada: punto oscuro, distinto del marcador de escuela. */
.mw-marker--center {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 2px 6px rgba(45, 42, 38, .4);
}

/* --- Estado vacío --- */
.dir-empty {
  max-width: 34rem; margin: 60px auto 0; text-align: center; padding: 34px 34px 90px;
}
.dir-empty h1 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 12px; }
.dir-empty p { color: var(--ink-soft); max-width: 28em; margin: 0 auto; }

@media (max-width: 860px) {
  .dir-grid { grid-template-columns: 1fr; }
  /* Sin `order: -1`: en móvil manda la LISTA. Con el mapa delante ocupaba de
     los 350px a los 770px de una pantalla de 812, así que la primera escuela
     caía justo en el pliegue —y por debajo en un móvil pequeño—: llegabas a un
     mapa, no a un directorio. En escritorio sigue al lado, que ahí no compite. */
  .dir-map-wrap { position: relative; top: 0; height: 420px; }
  /* En una columna, el max-height de la lista deja de tener sentido: la caja de
     640px se convierte en un scroll dentro del scroll de la página, y con
     decenas de escuelas se recorre el directorio entero por una ventanita.
     Arriba sí lo tiene, porque ahí la lista va al lado de un mapa sticky. */
  .dir-list { max-height: none; overflow: visible; }
}