/* Página /plantas-vtv */

/* Buscador */
.plantas-buscador {
    border-radius: 1rem;
    background-color: var(--brand-gris-claro);
    border-top: 4px solid var(--brand-celeste) !important;
}

.plantas-buscador .form-control:focus {
    border-color: var(--brand-celeste);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-celeste-rgb), .25);
}

.plantas-buscador .input-group-text .bi { color: var(--brand-azul); }

/* El botón se muestra por JS solo si el navegador soporta geolocalización */
.plantas-cerca:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.plantas-zonas .btn:hover .badge { color: var(--brand-azul) !important; }

/* Tarjeta de planta */
.planta-card {
    border-radius: 1rem;
    border-left: 4px solid var(--brand-celeste) !important;
    box-shadow: 0 .25rem 1rem rgba(var(--brand-azul-rgb), .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.planta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.75rem rgba(var(--brand-azul-rgb), .14);
}

.planta-card__titulo { color: var(--brand-azul); }

.planta-card__badge {
    background-color: color-mix(in srgb, var(--brand-violeta) 12%, #fff);
    color: var(--brand-violeta);
    font-weight: 600;
}

.planta-card__distancia:not(:empty) {
    margin-left: .35rem;
    font-weight: 700;
    color: var(--brand-verde);
}

.planta-card__datos li {
    display: flex;
    gap: .55rem;
    align-items: baseline;
}

.planta-card__datos li + li { margin-top: .5rem; }

.planta-card__datos .bi {
    flex-shrink: 0;
    color: var(--brand-celeste);
    transform: translateY(.1em);
}

.planta-card__mapa {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
}

.planta-card__mapa:hover { text-decoration: underline; }

/* Resaltado al llegar desde "Cerca mío" */
.planta-card:target,
.planta-card.is-destacada {
    box-shadow: 0 0 0 3px var(--brand-celeste), 0 .75rem 1.75rem rgba(var(--brand-azul-rgb), .14);
}

@media (prefers-reduced-motion: reduce) {
    .planta-card { transition: none; }
    .planta-card:hover { transform: none; }
}

/* Toda la tarjeta enlaza a la página de la planta (stretched-link en el título);
   "Cómo llegar" queda por encima para seguir siendo clickeable. */
.planta-card__titulo a { color: inherit; text-decoration: none; }
.planta-card:hover .planta-card__titulo a { text-decoration: underline; }
.planta-card__mapa { position: relative; z-index: 2; }