/* Animaciones */
.card-hover { transition: all .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.cat-card { transition: all .2s ease; }
.cat-card:hover { transform: scale(1.04); }
.fade-in { animation: fadeIn .5s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.search-glow:focus-within { box-shadow: 0 0 0 3px rgba(59,130,246,.3); }

/* ─────────────────────────────────────────────────────────────
   Detalle de vehículo (detalle.html)
   ───────────────────────────────────────────────────────────── */

/* Proporción de las fotos de vehículos (16:9). Tiene que coincidir con
   FOTO_RATIO_W / FOTO_RATIO_H de includes/config.php: la ficha (detalle.php) y
   el recortador (recortador-4x3.js) la pisan con esos valores; en las páginas
   estáticas (inicio, búsqueda, mis publicaciones) rige este. */
:root { --foto-ratio: 16 / 9; }
.foto-ratio { aspect-ratio: var(--foto-ratio); }

/* Foto principal: con la misma proporción con que se recortan las fotos al
   subirlas (así cover no corta nada), a ancho completo de su columna, centrada.
   Sin fondo gris, sin franjas. La pantalla completa muestra la foto entera.
   width explícito: sin él, un tope de alto se trasladaba al ancho por el
   aspect-ratio y el recuadro quedaba más angosto que la columna. */
.galeria-principal {
    width: 100%;
    aspect-ratio: var(--foto-ratio);
    background: #dbeafe;
}

/* Tope de seguridad para pantallas bajas: foto + miniaturas nunca pasan el
   alto de la pantalla (misma solución que todorodados). Alto del bloque ≈
   0,675 × ancho (foto 16:9 + fila de 5 miniaturas 16:9); 130px = header (65) +
   margen de arriba (24) + aire. A 1366×700 el tope (≈844px) es mayor que la
   columna 3/5 (≈723px): la foto usa todo el ancho. */
@media (min-width: 1024px) {
    .galeria-bloque {
        max-width: calc((100vh - 130px) / 0.675);
        margin-inline: auto;
    }
}

/* Miniaturas con la misma proporción, en cover: fila de 3 (mobile) o 5 (desde 640px); si hay
   más, scroll horizontal. Activa con borde azul de la marca, el resto al 70 %.
   El contenedor va posicionado porque detalle.js centra la activa con offsetLeft. */
.thumbs-galeria {
    position: relative;
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.thumbs-galeria.hidden { display: none; }
.thumbs-galeria .thumb-btn {
    flex: 0 0 calc((100% - 16px) / 3);
    aspect-ratio: var(--foto-ratio);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #dbeafe;
    opacity: .7;
    transition: opacity .15s ease, border-color .15s ease;
}
@media (min-width: 640px) {
    .thumbs-galeria .thumb-btn { flex-basis: calc((100% - 32px) / 5); }
}
.thumbs-galeria .thumb-btn:hover { opacity: 1; }
.thumbs-galeria .thumb-btn.is-activa { opacity: 1; border-color: #1d4fd7; }

/* Miniatura de video: primer cuadro en cover sobre fondo oscuro y un play
   centrado. El <video> no recibe clicks: los toma el botón. */
.thumb-btn.thumb-video { position: relative; background: #111521; }
.thumb-video-cuadro {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.thumb-play svg {
    width: 34px;
    height: 34px;
    padding: 8px 7px 8px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* Flechas (galería y pantalla completa): centradas con su propio transform,
   no con -translate-y-1/2 de Tailwind, para que ninguna regla de :active las
   mueva y el click termine en la foto. */
.galeria-flecha { top: 50%; transform: translateY(-50%); }
.galeria-flecha:active { transform: translateY(calc(-50% + 1px)); }

/* Columna de información sticky debajo del header. Si es más alta que la
   pantalla, detalle.js le pone un top negativo (--sticky-top) para que se
   pegue por abajo: se ve entera al bajar, sin scroll interno. */
@media (min-width: 1024px) {
    .sidebar-sticky {
        position: sticky;
        top: var(--sticky-top, 80px);
    }
}

/* Lightbox abierto: sin scroll de fondo */
html.lightbox-abierto { overflow: hidden; }

/* WhatsApp de la ficha: oculto desde el HTML hasta que detalle.js confirma un número válido.
   Va acá y no con la clase "hidden" porque Tailwind (CDN) la genera recién al cargar. */
[data-wa-oculto] { display: none !important; }

/* Barra de contacto fija en mobile: el contenido no queda tapado */
@media (max-width: 1023.98px) {
    #barraContactoMobile { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
    body:has(#barraContactoMobile:not(.hidden)) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}