/* ============================================================
   plantilla-listado.css · VisionLovers · camino B (25/09/2026, Claude Code)
   Viste lo que pintan las plantillas nuevas de directorist/archive/*.php: la tarjeta del
   listado (rejilla y lista), con foto y sin foto. La base de la tarjeta (borde, sombra,
   columnas) ya la ponen remate-1-1.css y reparo-a.css: este fichero SOLO añade lo que
   faltaba —el texto de repuesto cuando no hay dirección, y el marcador cuando no hay foto—
   para que una ficha con muy pocos datos (la mayoría de las 2.477 de OpenStreetMap) se vea
   bien igual, sin huecos ni "undefined".
   Tokens --vl-* de tokens.css · cero !important · móvil primero · sin scroll horizontal a
   375 px · contraste AA · 44 px lo que se toca (la gente que entra aquí ve mal).
   Se carga solo en páginas con directorio (vl_plantilla_listado_encolar_css, en
   inc/plantilla-listado.php).
   ============================================================ */

/* ---- -1 · La tarjeta de rejilla SIN foto es una columna flex (remate-1-1.css, regla 2.2:
   .directorist-listing-card { display:flex; flex-direction:column; ... }) con las esquinas
   estiradas por defecto (align-items: stretch). El botón «Ver ficha» ya llevaba el arreglo
   (remate-1-1.css: «.directorist-listing-card .vl-btn { align-self:flex-start }»); las
   etiquetas «Verificado» / «Sin verificar» / «Destacado» / la oferta cuelgan del mismo sitio
   (directorist_loop_grid_info_before_header, hijas directas de la tarjeta) y necesitan el
   mismo arreglo, o se estirarían a todo el ancho en vez de quedarse como una píldora. ---- */
.directorist-listing-card > .vl-verificado,
.directorist-listing-card > .vl-sinverificar,
.directorist-listing-card > .vl-destacado,
.directorist-listing-card > .vl-oferta {
  align-self: flex-start;
}

/* ---- 0 · Etiqueta «Destacado» (plan Destacada, 149 €/año): mismo patrón visual que
   «Verificado» (fichas.css) pero en el color de marca, para que destaque de verdad.
   --vl-primary-dark, NO --vl-primary: el rosa vivo solo da 3,46:1 con blanco encima
   (nota del propio tokens.css) y no llega al 4,5:1 que pide un texto de 14 px. ---- */
.vl-destacado {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 12px;
  border-radius: var(--vl-radius-pill, 999px);
  background: var(--vl-primary-dark, #a91b6f);
  color: var(--vl-on-color, #ffffff);
  font-family: var(--font-cuerpo, system-ui, sans-serif);
  font-size: var(--vl-font-caption, 14px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--vl-space-sm, 8px);
  margin-right: 6px;
}

/* ---- 1 · Dirección no facilitada: mismo tamaño y forma que una dirección real, solo el
   color cambia (nunca cursiva: a alguien que ve mal la letra inclinada le cuesta más). ---- */
.vl-listado-dato--vacio {
  color: var(--vl-text-muted, #475569);
}

/* ---- 2 · La foto de la tarjeta (rejilla y lista CON foto) y su marcador de repuesto. ---- */
.vl-listado-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.vl-listado-foto--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: var(--vl-bg-gray, #f5f7fb);
  border: 1px dashed var(--vl-border, #dce1e7);
  border-radius: inherit;
  color: var(--vl-text-muted, #475569);
}
.vl-listado-foto--vacia svg {
  width: 40px;
  height: 40px;
}

/* La miniatura de la vista de lista es más pequeña: el marcador se ajusta con ella. */
.directorist-listing-list .vl-listado-foto--vacia {
  min-height: 88px;
}
.directorist-listing-list .vl-listado-foto--vacia svg {
  width: 28px;
  height: 28px;
}

/* ---- 3 · El botón "Ver ficha": que nunca se salga de la tarjeta ni se pegue al texto. ---- */
.directorist-listing-card > .vl-btn,
.directorist-listing-single__action .vl-btn {
  max-width: 100%;
}

/* En rejilla sin foto, algo de aire entre la lista de datos y el botón (ya llevan gap las
   tarjetas con foto por ser flex; la de sin-foto no, porque no es hija directa del flex). */
.directorist-listing-no-thumb.directorist-listing-card > .vl-btn {
  margin-top: var(--vl-space-sm, 8px);
  margin-bottom: var(--vl-space-sm, 8px);
}

/* ---- 4 · Móvil: la fila de lista con foto no debe desbordar a 375 px. ---- */
@media (max-width: 480px) {
  .directorist-listing-single.directorist-listing-list .directorist-listing-single__thumb {
    max-width: 96px;
  }
  .directorist-listing-single__info__right {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vl-listado-foto,
  .vl-listado-foto--vacia {
    transition: none;
  }
}

/* ---------- F3 (26/09/2026, Claude Code en la nube): dos fallos medidos a 1200 (Playwright, directorio 11333) ----------
   1) Directorist convierte la barra lateral de filtros en un cajón fuera de pantalla (position: fixed; left: -360px) hasta 1367 px
      (all-listings.css:11887), pero la rejilla del tema (remate-1-1.css:309) seguía reservándole una columna de 280 px desde 1024:
      el listado caía en esa columna y las tarjetas salían de 130 px. Entre 1024 y 1367 la rejilla es de una sola columna. */
@media (min-width: 1024px) and (max-width: 1367px) {
	html body.directorist-content-active .listing-with-sidebar__contents { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- F3/F10 (26/09/2026, Claude Code en la nube) · C3 #15: el buscador del directorio, en la primera pantalla a 375 ----------
   Medido con Playwright a 375: el botón «Buscar» quedaba a 753 px (el párrafo del hero mide 190 px), fuera de la pantalla de
   un móvil normal (≈ 660 px útiles). Hasta 480 px el formulario de búsqueda sube por encima del párrafo (orden visual, el HTML
   no cambia: los lectores de pantalla siguen leyendo título → texto → buscador) y el botón mide 48 px, no 42. */
@media (max-width: 480px) {
	html body.page-id-11333 .vl-hero__content { display: flex; flex-direction: column; }
	html body.page-id-11333 .vl-hero__content .vl-hero__brand { order: 1; }
	html body.page-id-11333 .vl-hero__content .vl-hero__title { order: 2; }
	html body.page-id-11333 .vl-hero__content .vl-hero__ctas { order: 3; margin-top: var(--vl-space-md); }
	html body.page-id-11333 .vl-hero__content .vl-hero__text { order: 4; }
	html body.page-id-11333 .vl-hero__content .vl-hero__meta { order: 5; }
	html body.page-id-11333 .vl-buscador .vl-btn { min-height: var(--vl-touch, 48px); }
}