/* ============================================================
   directorio.css · MOTORCASIÓN · directorio, ficha del profesional y mapa (inc/directorio/ · MC_DIRECTORIO)
   03/10/2026 · F4. Solo tokens --mc-*, sin !important, sin @layer. Móvil primero; 640 · 1025 px.
   Se carga solo en estas pantallas (el CSS de Directorist se quita ahí). Prefijo .mc-pagina: gana a Woodmart con un selector más.
   ============================================================ */

/* ---- Tarjeta de profesional ---- */
.mc-pagina .mc-pro { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; }
.mc-pagina .mc-pro__media { position: relative; min-height: 104px; background: var(--mc-fondo-2); display: grid; place-items: center; border-bottom: 1px solid var(--mc-borde); }
.mc-pagina .mc-pro__foto { width: 100%; aspect-ratio: 4 / 3;   /* encargo 6: 4:3, como la tarjeta del coche (antes 16:9) */ height: auto; object-fit: cover; display: block; }
/* Sin foto (ficha gratis o sin fotos): una banda baja con el icono del servicio, no un hueco gris de 16:9 */
.mc-pagina .mc-pro__icono { background: repeating-linear-gradient(-78deg, transparent 0 18px, var(--mc-borde) 18px 19px); width: 100%; min-height: 104px; display: grid; place-items: center; color: var(--mc-texto-2); }
.mc-pagina .mc-pro .mc-pro__icono .mc-icono { width: 40px; height: 40px; stroke-width: 1.5; }
.mc-pagina .mc-pro__sello { position: absolute; top: var(--mc-e-3); left: var(--mc-e-3); }
.mc-pagina .mc-pro__cuerpo { display: flex; flex-direction: column; gap: var(--mc-e-2); padding: var(--mc-e-4) var(--mc-e-5) var(--mc-e-5); flex: 1; }
.mc-pagina .mc-pro__servicio { margin: 0; font-family: var(--mc-letra-titulos); font-size: var(--mc-t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mc-rojo-texto); }
.mc-pagina .mc-pro .mc-tarjeta__titulo { margin: 0; line-height: var(--mc-lh-titulo); }
.mc-pagina .mc-pro .mc-tarjeta__meta { margin: 0; align-items: center; }
.mc-pagina .mc-pro .mc-tarjeta__meta span { display: inline-flex; align-items: center; gap: 0.3em; }
.mc-pagina .mc-pro .mc-icono { width: 1.1em; height: 1.1em; }
.mc-pagina .mc-pro__verificada { color: var(--mc-exito); font-weight: var(--mc-peso-fuerte); }
.mc-pagina .mc-pro__resumen { margin: 0; font-size: var(--mc-t-s); color: var(--mc-texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mc-pagina .mc-pro__pie { margin: auto 0 0; padding-top: var(--mc-e-2); display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e-3); flex-wrap: wrap; }
/* «Llamar» por encima del enlace que cubre la tarjeta (.mc-tarjeta__titulo a::after): si no, el toque abriría la ficha. */
.mc-pagina .mc-pro .mc-pro__llamar { position: relative; z-index: 1; min-height: 44px; padding: 0.5rem 1rem; font-size: var(--mc-t-s); }
.mc-pagina .mc-pro .mc-pro__llamar .mc-icono { width: 18px; height: 18px; }
.mc-pagina .mc-pro__ver { margin: 0; display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--mc-letra-titulos); font-weight: 700; color: var(--mc-texto); }
.mc-pagina .mc-pro:hover .mc-pro__ver { color: var(--mc-rojo-texto); }
.mc-pagina .mc-pro:focus-within { box-shadow: var(--mc-foco-anillo); }
.mc-pagina .mc-pro .mc-tarjeta__titulo a:focus-visible { outline: none; }
/* Pro Plus: el filo rojo inclinado de la casa en la tarjeta (lo promete el plan: «Primero y destacado») */
.mc-pagina .mc-pro--destacado { border: 2px solid var(--mc-texto); }
.mc-pagina .mc-pro--destacado .mc-pro__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--mc-firma-alto); background: var(--mc-rojo-logo); }

/* ---- Directorio ---- */
.mc-pagina .mc-dir__cabecera { margin-bottom: var(--mc-e-6); }
.mc-pagina .mc-dir__cabecera .mc-h1 { margin: 0 0 var(--mc-e-3); }
.mc-pagina .mc-dir__filtros { display: grid; gap: var(--mc-e-3); padding: var(--mc-e-5); background: var(--mc-fondo-2); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-l); margin-bottom: var(--mc-e-4); }
.mc-pagina .mc-dir__filtros .mc-campo { margin: 0; }
.mc-pagina .mc-dir__buscar { align-self: end; }
.mc-pagina .mc-dir__cuenta { margin: 0 0 var(--mc-e-4); font-weight: var(--mc-peso-fuerte); color: var(--mc-texto); min-height: 1.6em; }
.mc-pagina .mc-dir__cuerpo { display: grid; gap: var(--mc-e-8); }
.mc-pagina .mc-dir__rejilla { display: grid; gap: var(--mc-e-5); grid-template-columns: 1fr; }
.mc-pagina .mc-dir__mapa .mc-h4 { margin: 0 0 var(--mc-e-3); }
.mc-pagina .mc-dir__pro { display: grid; gap: var(--mc-e-4); align-items: center; margin-top: var(--mc-seccion); padding: var(--mc-e-6); border-radius: var(--mc-r-l); background: var(--mc-negro); color: var(--mc-sobre-negro); position: relative; overflow: hidden; }
.mc-pagina .mc-dir__pro::before { content: ""; position: absolute; top: 0; left: var(--mc-e-6); width: var(--mc-firma-ancho); height: var(--mc-firma-alto); background: var(--mc-rojo-logo); transform: skewX(var(--mc-inclinacion)); }
.mc-pagina .mc-dir__pro p { margin: 0; color: #C9CDD3; }
.mc-pagina .mc-dir__pro .mc-dir__pro-t { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-h3); font-weight: 700; color: var(--mc-sobre-negro); margin-bottom: var(--mc-e-2); line-height: var(--mc-lh-titulo); }
.mc-pagina .mc-dir__pro-botones { display: flex; flex-wrap: wrap; gap: var(--mc-e-3); align-items: center; }
.mc-pagina .mc-dir__pro .mc-boton--secundario { color: var(--mc-sobre-negro); border-color: var(--mc-sobre-negro); }
.mc-pagina .mc-dir__pro .mc-boton--secundario:hover { background: var(--mc-sobre-negro); color: var(--mc-negro); }
.mc-pagina .mc-dir__pro .mc-boton--texto { color: #9CC0FF; }

/* ---- Ficha ---- */
.mc-pagina .mc-ficha__cabecera { display: flex; gap: var(--mc-e-4); align-items: flex-start; margin-bottom: var(--mc-e-6); }
.mc-pagina .mc-ficha__logo { width: 72px; height: 72px; flex: none; border-radius: var(--mc-r-l); object-fit: cover; border: 1px solid var(--mc-borde); background: var(--mc-fondo-2); }
.mc-pagina .mc-ficha__logo--icono { display: grid; place-items: center; color: var(--mc-texto-2); }
.mc-pagina .mc-ficha__logo--icono .mc-icono { width: 40px; height: 40px; stroke-width: 1.5; }
.mc-pagina .mc-ficha__titulos { min-width: 0; }
.mc-pagina .mc-ficha__sellos { display: flex; flex-wrap: wrap; gap: var(--mc-e-2); margin: 0 0 var(--mc-e-2); }
.mc-pagina .mc-ficha__nombre { margin: 0 0 var(--mc-e-3); overflow-wrap: anywhere; }
.mc-pagina .mc-ficha__meta { display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-3); align-items: center; margin: 0; }
.mc-pagina .mc-ficha__zona { display: inline-flex; align-items: center; gap: 0.35em; color: var(--mc-texto-2); font-weight: var(--mc-peso-fuerte); }
.mc-pagina .mc-ficha__zona .mc-icono { width: 1.15em; height: 1.15em; }
.mc-pagina .mc-ficha__rejilla { display: grid; gap: var(--mc-e-6); }
.mc-pagina .mc-ficha__lateral { order: -1; } /* móvil: contactar antes que el texto y el mapa */
.mc-pagina .mc-ficha__lateral { display: grid; gap: var(--mc-e-4); align-content: start; }
.mc-pagina .mc-ficha__contacto { display: grid; gap: var(--mc-e-3); }
.mc-pagina .mc-ficha__contacto .mc-h4 { margin: 0; }
.mc-pagina .mc-ficha__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mc-e-2); }
.mc-pagina .mc-ficha__datos li { margin: 0; display: flex; gap: var(--mc-e-2); align-items: center; min-height: 32px; overflow-wrap: anywhere; }
.mc-pagina .mc-ficha__datos .mc-icono { width: 1.2em; height: 1.2em; flex: none; color: var(--mc-texto-3); }
.mc-pagina .mc-ficha__nota { margin: 0; font-size: var(--mc-t-s); color: var(--mc-texto-2); }
.mc-pagina .mc-ficha__derecho { display: flex; gap: var(--mc-e-2); align-items: flex-start; margin: 0; padding: var(--mc-e-3) var(--mc-e-4); border-radius: var(--mc-r-m); background: var(--mc-azul-suave); font-size: var(--mc-t-s); color: var(--mc-texto); }
.mc-pagina .mc-ficha__derecho .mc-icono { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.15em; color: var(--mc-azul); }
.mc-pagina .mc-ficha__dueno { padding: var(--mc-e-5); border: 2px dashed var(--mc-borde-fuerte); border-radius: var(--mc-r-l); font-size: var(--mc-t-s); }
.mc-pagina .mc-ficha__dueno p { margin: 0 0 var(--mc-e-2); }
.mc-pagina .mc-ficha__dueno .mc-ficha__dueno-t { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-h4); font-weight: 700; color: var(--mc-texto); }
.mc-pagina .mc-ficha__dueno .mc-boton--texto { padding-inline: 0; min-height: var(--mc-tactil); } /* 03/10: era 40 px; «Reclama tu ficha» medía 42 (objetivo táctil de 44) */
.mc-pagina .mc-ficha__bloque { padding-bottom: var(--mc-e-6); margin-bottom: var(--mc-e-6); border-bottom: 1px solid var(--mc-borde); }
.mc-pagina .mc-ficha__bloque:last-child { border-bottom: 0; margin-bottom: 0; }
.mc-pagina .mc-ficha__bloque .mc-h3 { margin: 0 0 var(--mc-e-3); }
.mc-pagina .mc-ficha__bloque .mc-h4 { margin: var(--mc-e-5) 0 var(--mc-e-2); }
.mc-pagina .mc-ficha__texto { max-width: var(--mc-medida); }
.mc-pagina .mc-ficha__texto p { margin: 0 0 var(--mc-e-3); }
.mc-pagina .mc-ficha__servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mc-e-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mc-pagina .mc-ficha__servicios li { margin: 0; display: flex; gap: var(--mc-e-2); align-items: flex-start; }
.mc-pagina .mc-ficha__servicios .mc-icono { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.2em; color: var(--mc-exito); }
.mc-pagina .mc-ficha__cobertura { margin: var(--mc-e-4) 0 0; }
.mc-pagina .mc-ficha__direccion { display: flex; gap: var(--mc-e-2); align-items: flex-start; margin: 0 0 var(--mc-e-3); color: var(--mc-texto); font-weight: var(--mc-peso-fuerte); }
.mc-pagina .mc-ficha__direccion .mc-icono { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.2em; color: var(--mc-rojo-texto); }
.mc-pagina .mc-ficha__fotos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mc-e-2); grid-template-columns: repeat(2, 1fr); }
.mc-pagina .mc-ficha__fotos li { margin: 0; }
.mc-pagina .mc-ficha__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mc-r-m); display: block; }
.mc-pagina .mc-ficha__presupuesto { margin-top: var(--mc-seccion); max-width: 820px; }
.mc-pagina--ficha .mc-bloque .mc-h2 { margin-bottom: var(--mc-e-5); }

/* ---- Mapa (partes/mapa.php + assets/js/mapa.js) ---- */
.mc-pagina .mc-mapa { margin: 0 0 var(--mc-e-4); }
.mc-pagina .mc-mapa__lienzo { position: relative; height: var(--mc-mapa-alto, 320px); border-radius: var(--mc-r-l); overflow: hidden; border: 1px solid var(--mc-borde); background: var(--mc-fondo-2); z-index: 0; }
.mc-pagina .mc-mapa__lienzo:focus-visible { outline: none; box-shadow: var(--mc-foco-anillo); }
.mc-pagina .mc-mapa__cargando { position: absolute; inset: 0; display: flex; gap: var(--mc-e-2); align-items: center; justify-content: center; margin: 0; color: var(--mc-texto-3); font-size: var(--mc-t-s); }
.mc-pagina .mc-mapa__lienzo--listo .mc-mapa__cargando { display: none; }
.mc-pagina .mc-mapa__cargando .mc-icono { width: 1.3em; height: 1.3em; }
.mc-pagina .mc-mapa__atribucion { margin: var(--mc-e-1) 0 0; font-size: var(--mc-t-xs); color: var(--mc-texto-3); text-align: right; }
.mc-pagina .mc-mapa__atribucion a { color: inherit; }
.mc-pagina .mc-mapa__vacio { margin: var(--mc-e-2) 0 0; color: var(--mc-texto-2); }
.mc-pagina .mc-mapa__plegable { margin-top: var(--mc-e-3); border: 1px solid var(--mc-borde); border-radius: var(--mc-r-m); background: var(--mc-superficie); }
.mc-pagina .mc-mapa__plegable > summary { cursor: pointer; padding: var(--mc-e-3) var(--mc-e-4); min-height: var(--mc-tactil); display: flex; align-items: center; gap: 0.35em; /* el flex se comía el espacio de «en lista (4)» (03/10) */ font-weight: var(--mc-peso-fuerte); color: var(--mc-texto); }
.mc-pagina .mc-mapa__lista { list-style: none; margin: 0; padding: 0 var(--mc-e-4) var(--mc-e-3); display: grid; gap: var(--mc-e-2); max-height: 420px; overflow-y: auto; }
.mc-pagina .mc-mapa__item { margin: 0; display: flex; gap: var(--mc-e-3); padding: var(--mc-e-3) 0; border-top: 1px solid var(--mc-borde); }
.mc-pagina .mc-mapa__item--activo { background: var(--mc-fondo-2); }
.mc-pagina .mc-mapa__num { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--mc-texto); color: var(--mc-fondo); font-weight: 700; font-size: var(--mc-t-s); border: 0; padding: 0; }
.mc-pagina .mc-mapa__num--boton { cursor: pointer; }
.mc-pagina .mc-mapa__num--boton:hover { background: var(--mc-rojo); color: var(--mc-sobre-rojo); }
.mc-pagina .mc-mapa__item-cuerpo { min-width: 0; display: grid; gap: var(--mc-e-1); }
.mc-pagina .mc-mapa__item-cuerpo p { margin: 0; }
.mc-pagina .mc-mapa__item-nombre { font-weight: var(--mc-peso-fuerte); display: flex; flex-wrap: wrap; gap: var(--mc-e-2); align-items: center; }
.mc-pagina .mc-mapa__item-direccion { font-size: var(--mc-t-s); color: var(--mc-texto-3); }
.mc-pagina .mc-llegar { display: flex; flex-wrap: wrap; gap: var(--mc-e-2) var(--mc-e-3); align-items: center; }
.mc-pagina .mc-llegar__otras { font-size: var(--mc-t-s); color: var(--mc-texto-2); }
.mc-pagina .mc-llegar .mc-icono { width: 1.15em; height: 1.15em; }
/* Marcador: la caja roja inclinada del logo, con su punta. Pro Plus, más grande y con filo blanco. */
.mc-marcador { background: none; border: 0; }
.mc-marcador__caja { position: absolute; left: 50%; top: 0; width: 70%; height: 70%; translate: -50% 0; background: var(--mc-rojo); border: 2px solid #FFFFFF; border-radius: 4px; transform: skewX(var(--mc-inclinacion)); box-shadow: 0 2px 6px rgba(11, 12, 14, 0.35); }
.mc-marcador__caja::after { content: ""; position: absolute; left: 50%; bottom: -9px; translate: -50% 0; border: 6px solid transparent; border-top-color: #FFFFFF; transform: skewX(calc(-1 * var(--mc-inclinacion))); }
.mc-marcador--n0 .mc-marcador__caja { background: var(--mc-texto-2); }
.mc-marcador--n3 .mc-marcador__caja { background: var(--mc-rojo-logo); border-width: 3px; }
.mc-marcador:focus-visible { outline: 3px solid var(--mc-foco); outline-offset: 2px; }
.mc-popup-marco .leaflet-popup-content-wrapper { border-radius: var(--mc-r-m); box-shadow: var(--mc-sombra-3); background: var(--mc-superficie); color: var(--mc-texto); }
.mc-popup-marco .leaflet-popup-tip { background: var(--mc-superficie); }
.mc-popup-marco .leaflet-popup-content { margin: var(--mc-e-4); font-family: var(--mc-letra-texto); font-size: var(--mc-t-s); line-height: 1.45; }
.mc-popup { display: grid; gap: var(--mc-e-2); justify-items: start; }
.mc-popup p { margin: 0; }
.mc-popup__nombre { font-family: var(--mc-letra-titulos); font-size: var(--mc-t-m); font-weight: 700; }
.mc-popup__nombre a { color: var(--mc-texto); }
.mc-popup__direccion { color: var(--mc-texto-2); }
.mc-popup .mc-boton { color: var(--mc-sobre-rojo); }
.leaflet-container .mc-popup a.mc-boton { color: var(--mc-sobre-rojo); }
.leaflet-container a.leaflet-popup-close-button { width: 32px; height: 32px; font-size: 22px; line-height: 30px; color: var(--mc-texto-2); }

/* ---- Modo oscuro: las teselas de OSM son claras; se oscurecen un poco para no deslumbrar (el texto del mapa no se toca) ---- */
html[data-tema="oscuro"] .mc-pagina .mc-mapa__lienzo .leaflet-tile-pane { filter: brightness(0.82) contrast(1.05); }
html[data-tema="oscuro"] .mc-pagina .mc-dir__pro { background: var(--mc-superficie-2); border: 1px solid var(--mc-borde); }

/* ---- 640 px: dos columnas ---- */
@media (min-width: 640px) {
	.mc-pagina .mc-dir__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc-pagina .mc-dir__filtros { grid-template-columns: 1fr 1fr; }
	.mc-pagina .mc-ficha__fotos { grid-template-columns: repeat(3, 1fr); }
	.mc-pagina .mc-dir__pro { grid-template-columns: 1fr auto; }
}
/* ---- 1025 px: filtros en una fila; ficha con lateral fijo; mapa al lado del listado ---- */
@media (min-width: 1025px) {
	.mc-pagina .mc-dir__filtros { grid-template-columns: 1.2fr 1fr 1fr auto; align-items: end; }
	.mc-pagina .mc-dir__cuerpo { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
	.mc-pagina .mc-dir__mapa { position: sticky; top: var(--mc-e-6); }
	.mc-pagina .mc-ficha__rejilla { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
	.mc-pagina .mc-ficha__lateral { position: sticky; top: var(--mc-e-6); order: 0; }
	.mc-pagina .mc-ficha__logo { width: 96px; height: 96px; }
}
@media (min-width: 1300px) {
	.mc-pagina .mc-dir__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 03/10 (06:21, axe en modo oscuro): la atribución del mapa («Leaflet | © colaboradores de OpenStreetMap») va SIEMPRE sobre una tira
   clara, encima de las teselas; en oscuro sus enlaces tomaban el azul claro de los tokens y se quedaban sin contraste (axe: color-contrast).
   Por eso aquí los colores son fijos, los mismos en claro y en oscuro: texto #1B1D21 y enlace #111214 subrayado (opción 1 de los botones, 03/10 11:26). */
.mc-mapa__lienzo .leaflet-control-attribution,
html[data-tema="oscuro"] .mc-mapa__lienzo .leaflet-control-attribution { background: rgba(255, 255, 255, .94); color: #1B1D21; }
.mc-mapa__lienzo .leaflet-control-attribution a,
html[data-tema="oscuro"] .mc-mapa__lienzo .leaflet-control-attribution a { color: #111214; text-decoration: underline; }
/* 03/10 (revisión visual del iMac, leves): los nombres de la lista del mapa, 44 px de alto para el dedo. */
.mc-pagina .mc-mapa__item-nombre a { display: inline-flex; align-items: center; min-height: 44px; }