/* Carrusel «Autoescuelas cerca» de la ficha (App\Helpers\CercanasFicha + inc/js/ficha-cercanas.js). */
.ap-cerca {
    --ap-cerca-ancho: 248px;
    margin: 26px 0 22px; padding: 18px 0 14px;
    background: linear-gradient(180deg, var(--ap-superficie, #fff), var(--ap-superficie-2, #f3f6fb));
    border: 1px solid var(--ap-borde, #e1e7ef); border-radius: 18px;
    box-shadow: var(--ap-sombra, 0 2px 6px rgba(15, 27, 45, .05));
    overflow: hidden;
}
.ap-cerca-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 20px 12px; }
.ap .ap-cerca h2 { margin: 0 0 3px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ap-marca, #0b2545); }
.ap-cerca-intro { margin: 0; font-size: 13px; color: var(--ap-texto-3, #7a889c); }
.ap-cerca-mandos { display: flex; gap: 6px; flex: none; }
.ap-cerca-boton {
    width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0;
    border: 1px solid var(--ap-borde, #e1e7ef); border-radius: 50%; background: var(--ap-superficie, #fff);
    color: var(--ap-marca, #0b2545); cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.ap-cerca-boton:hover { background: var(--ap-acento-suave, #e9f1ff); border-color: var(--ap-acento, #1f6feb); }
.ap-cerca-boton:active { transform: scale(.94); }
.ap-cerca-boton:focus-visible { outline: 2px solid var(--ap-acento, #1f6feb); outline-offset: 2px; }
.ap-cerca-boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ap-cerca-boton[data-accion=pausa] svg { fill: currentColor; stroke: none; }
.ap-cerca-boton .ap-i-play, .ap-cerca-boton[aria-pressed=true] .ap-i-pausa { display: none; }
.ap-cerca-boton[aria-pressed=true] .ap-i-play { display: inline; }

.ap-cerca-pista {
    list-style: none; margin: 0; padding: 4px 20px 10px;
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent);
}
.ap-cerca-pista::-webkit-scrollbar { display: none; }
.ap-cerca-pista:focus-visible { outline: 2px solid var(--ap-acento, #1f6feb); outline-offset: -2px; }
.ap-cerca-tarjeta { flex: 0 0 var(--ap-cerca-ancho); display: flex; margin: 0; scroll-snap-align: start; }
.ap-cerca-tarjeta > a {
    flex: 1 1 auto; box-sizing: border-box; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 4px;
    padding: 14px 14px 12px; border-radius: 14px; background: var(--ap-superficie, #fff);
    border: 1px solid var(--ap-borde-suave, #eef2f7); box-shadow: 0 1px 2px rgba(15, 27, 45, .05);
    color: var(--ap-texto, #0f1b2d); text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ap-cerca-tarjeta > a:hover, .ap-cerca-tarjeta > a:focus-visible {
    transform: translateY(-3px); border-color: var(--ap-acento, #1f6feb);
    box-shadow: var(--ap-sombra-alta, 0 12px 32px -8px rgba(15, 27, 45, .18)); outline: none;
}
.ap-cerca-avatar {
    grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    font: 800 15px/1 var(--ap-letra-titulos, system-ui); color: #fff; letter-spacing: .02em;
    background: linear-gradient(135deg, var(--c, #1f6feb), color-mix(in srgb, var(--c, #1f6feb) 62%, #0b2545));
}
.ap-cerca-nombre {
    font: 700 15px/1.25 var(--ap-letra-titulos, system-ui); color: var(--ap-marca, #0b2545);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
}
.ap-cerca-tarjeta > a:hover .ap-cerca-nombre { color: var(--ap-acento, #1f6feb); }
.ap-cerca-lugar { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--ap-texto-3, #7a889c); }
.ap-cerca-lugar svg { flex: none; width: 13px; height: 13px; }
.ap-cerca-lugar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-cerca-pct { grid-column: 1 / -1; align-self: end; margin-top: 8px; font-size: 12.5px; color: var(--ap-texto-2, #4a5a70); --p: var(--ap-acento, #1f6feb); }
.ap-cerca-pct strong { font-size: 15px; color: var(--p); margin-right: 2px; }
.ap-cerca-pct-bien { --p: var(--ap-verde, #17a34a); }
.ap-cerca-pct-mal { --p: #e5484d; }
.ap-cerca-pct-nd { color: var(--ap-texto-3, #7a889c); font-style: italic; }
.ap-cerca-barra { display: block; height: 5px; margin-bottom: 7px; border-radius: 99px; background: var(--ap-borde-suave, #eef2f7); overflow: hidden; }
.ap-cerca-barra i { display: block; height: 100%; border-radius: inherit; background: var(--p); }

.ap-cerca-progreso { height: 3px; margin: 2px 20px 0; border-radius: 99px; background: var(--ap-borde-suave, #eef2f7); overflow: hidden; }
.ap-cerca-progreso i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ap-acento, #1f6feb); transition: width .4s ease, margin-left .4s ease; }

/* Entrada de las tarjetas cuando el carrusel se ve por primera vez (lo activa el JS). */
.ap-cerca.ap-cerca-js .ap-cerca-tarjeta { opacity: 0; transform: translateX(18px); transition: opacity .5s ease, transform .5s ease; }
.ap-cerca.ap-cerca-visto .ap-cerca-tarjeta { opacity: 1; transform: none; }

@media (max-width: 600px) {
    .ap-cerca { --ap-cerca-ancho: 74vw; margin-left: -4px; margin-right: -4px; border-radius: 14px; }
    .ap-cerca-cab { padding: 0 16px 10px; }
    .ap-cerca-pista { padding: 4px 16px 10px; scroll-padding: 0 16px; gap: 12px; }
    .ap-cerca-mandos [data-accion=anterior], .ap-cerca-mandos [data-accion=siguiente] { display: none; }
    .ap-cerca-progreso { margin: 2px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ap-cerca-tarjeta > a, .ap-cerca-progreso i, .ap-cerca.ap-cerca-js .ap-cerca-tarjeta { transition: none; }
    .ap-cerca-tarjeta > a:hover, .ap-cerca-tarjeta > a:focus-visible { transform: none; }
    .ap-cerca.ap-cerca-js .ap-cerca-tarjeta { opacity: 1; transform: none; }
}