/* ==========================================================================
   directorio-claro.css · inc/directorio-claro.php (VL_DIRECTORIO_CLARO) · 29/09/2026, Claude Code del iMac
   El directorio, móvil primero, con todo a la vista. Medido en la web real antes de tocar (el porqué de cada regla, en el PHP).
   Sin !important y sin @layer. Especificidad: body.vl-dir-claro + las clases de Directorist, para ganar a remate-1-1.css,
   diseno-final.css y base.css (medidas sus reglas: hasta 5 clases).
   ========================================================================== */

/* ---------- 3 · Mientras busca: velo suave, no azul ---------- */
html body.vl-dir-claro .directorist-archive-items.atbdp-form-fade::after,
html body.vl-dir-claro .directorist-archive-contents.atbdp-form-fade::after,
html body.vl-dir-claro .atbdp-form-fade::after {
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--vl-radius-lg, 16px);
}
html[data-tema="oscuro"] body.vl-dir-claro .atbdp-form-fade::after { background: rgba(11, 18, 32, 0.55); }
html body.vl-dir-claro .atbdp-form-fade::before {
  top: 96px;                                    /* a la vista aunque la lista sea larga (antes: en el centro de 3.000 px) */
  width: 32px;
  height: 32px;
  border-width: 3px;
  border-color: var(--vl-primary, #d946ef);
  border-top-color: transparent;
}
/* En los campos (sugerencias de localidad) no hay velo: solo el círculo pequeño a la derecha, sin tapar lo que se escribe. */
html body.vl-dir-claro .directorist-search-field.atbdp-form-fade::after,
html body.vl-dir-claro .directorist-search-form__box.atbdp-form-fade::after { background: transparent; }
html body.vl-dir-claro .directorist-search-field.atbdp-form-fade::before,
html body.vl-dir-claro .directorist-search-form__box.atbdp-form-fade::before {
  top: auto;
  bottom: 12px;
  left: auto;
  right: 52px;
  width: 20px;
  height: 20px;
  border-width: 2px;
  transform: none;
}

/* ---------- 7 · «Current Location» (lo escribe el CSS de Directorist) ---------- */
html body.vl-dir-claro .directorist-search-field .directorist-location-js + .address_result ul a.current-location .location-address::before {
  content: "Mi ubicación";
}

/* ---------- 4 · Filtros siempre a la vista: tarjeta encima (móvil/tableta) o columna izquierda (ordenador) ---------- */
html body.vl-dir-claro div.listing-with-sidebar__contents {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--vl-space-lg, 24px);
}
html body.vl-dir-claro div.listing-with-sidebar__contents > section.listing-with-sidebar__listing {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}
/* Directorist la hace flotante (position:fixed, left:-360px, oculta) por debajo de 1367 px: aquí vuelve a su sitio. */
html body.vl-dir-claro div.listing-with-sidebar__contents > aside.listing-with-sidebar__sidebar.left-sidebar-contents {
  position: static;
  left: auto;
  top: auto;
  z-index: auto;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  box-shadow: none;
  transform: none;
  transition: none;
}
/* …y la caja de dentro medía la pantalla entera (height:100svh de Directorist para su panel flotante): 812 px con 2 campos. */
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-search-form__box {
  height: auto;
}
@media (min-width: 1024px) {
  html body.vl-dir-claro div.listing-with-sidebar__contents {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: var(--vl-space-xl, 32px);
  }
  /* En el ordenador la tarjeta de filtros acompaña al bajar, por debajo de la cabecera fija (64 px). */
  html body.vl-dir-claro div.listing-with-sidebar__contents > aside.listing-with-sidebar__sidebar.left-sidebar-contents {
    position: sticky;
    top: calc(var(--wd-admin-bar-h, 0px) + 80px);
  }
}
/* El botón «Filtrar» y la X de cerrar el panel sobran: los filtros ya están a la vista. */
html body.vl-dir-claro.directorist-content-active .directorist-listings-header .directorist-viewas .directorist-archive-sidebar-toggle:not(.vl-x):not(.vl-y),
html body.vl-dir-claro .listing-with-sidebar__header .directorist-archive-sidebar-toggle,
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-advanced-filter__close {
  display: none;
}

/* ---------- 6 · Barra de vistas y «Ordenar por»: con aire, 44 px o más, y sin partirse raro en el móvil ---------- */
html body.vl-dir-claro.directorist-content-active .directorist-header-bar .directorist-listings-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
html body.vl-dir-claro.directorist-content-active .directorist-header-bar .directorist-listings-header__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
html body.vl-dir-claro.directorist-content-active .directorist-listings-header .directorist-viewas .directorist-viewas__item:not(.vl-x) {
  min-height: 44px;
  padding: 0 16px;
  gap: 8px;
}
html body.vl-dir-claro.directorist-content-active .directorist-listings-header .directorist-viewas .directorist-viewas__item--rejilla::after {
  content: "Rejilla";
  position: static;
  transform: none;
  font-size: var(--vl-font-small, 14px);
}
@media (max-width: 767px) {
  html body.vl-dir-claro.directorist-content-active .directorist-header-bar .directorist-listings-header__left,
  html body.vl-dir-claro.directorist-content-active .directorist-header-bar .directorist-listings-header__right {
    flex: 1 1 100%;
  }
  html body.vl-dir-claro.directorist-content-active .directorist-header-bar .directorist-listings-header__right {
    flex-direction: column;
    align-items: stretch;
  }
  html body.vl-dir-claro.directorist-content-active .directorist-listings-header .directorist-viewas {
    display: flex;
    width: 100%;
    gap: 4px;
  }
  html body.vl-dir-claro.directorist-content-active .directorist-listings-header .directorist-viewas .directorist-viewas__item:not(.vl-x) {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 8px;
  }
  html body.vl-dir-claro.directorist-content-active .directorist-listings-header .directorist-sortby-dropdown,
  html body.vl-dir-claro.directorist-content-active .directorist-listings-header .directorist-sortby-dropdown .directorist-dropdown__toggle {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 5 · Fila de pastillas en las páginas de tipo (la misma que en el directorio) ---------- */
html body.vl-dir-claro .vl-dir-pastillas {
  margin-top: var(--vl-space-lg, 24px);
  margin-bottom: var(--vl-space-md, 16px);
}
html body.vl-dir-claro .vl-directorio__cabecera .vl-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body.vl-dir-claro .vl-directorio__cabecera .vl-filtros .vl-chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- 4 bis · La tarjeta de filtros por dentro: aire regular, título en los dos campos, «Borrar filtros» a lo ancho ---------- */
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-advanced-filter__advanced {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 16px;
}
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-advanced-filter__advanced > .directorist-advanced-filter__advanced__element,
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-advanced-filter__advanced .directorist-search-field {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/* El desplegable no traía título («input-has-noLabel»): el mismo que «Localidad», para que se sepa qué es sin abrirlo. */
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-search-field-category::before {
  content: "Tipo de centro";
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--vl-text, #0f172a);
}
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-advanced-filter__action {
  display: flex;
  margin: 0;
  padding: 0;
}
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-advanced-filter__action .directorist-btn-reset-js {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--vl-radius-pill, 999px);
}
/* Los dos títulos iguales (antes «Localidad» fino y gris): en negrita y con el color del texto, que se lee mejor con poca vista. */
html body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-search-field .directorist-search-field__label {
  font-weight: 600;
  color: var(--vl-text, #0f172a);
}
/* Noche: el azul de la marca sobre el fondo oscuro da 3,3 de contraste; el azul claro de los enlaces del modo noche, 10,6. */
html[data-tema="oscuro"] body.vl-dir-claro aside.listing-with-sidebar__sidebar .directorist-advanced-filter__action .directorist-btn-reset-js {
  color: #8ccaf5;
}