/* ==========================================================
   BuscandoA — Estilos propios
   ========================================================== */

/* ==========================================================
   Marca y tema (navy + verde) — reemplaza los acentos por
   defecto de Bootstrap tanto en modo claro como oscuro.
   ========================================================== */
:root {
    /* Colores de marca (constantes) */
    --ba-navy: #15304F;
    --ba-green: #7CB342;
    --ba-green-d: #5f9331;

    /* Acentos propios (cambian según el tema) */
    --ba-primary: var(--ba-navy);
    --ba-accent: var(--ba-green);

    /* Bootstrap: primario y enlaces en navy + verde (modo claro) */
    --bs-body-bg: #f8f9fa;
    --bs-primary: #15304F;
    --bs-primary-rgb: 21, 48, 79;
    --bs-link-color: #15304F;
    --bs-link-color-rgb: 21, 48, 79;
    --bs-link-hover-color: #5f9331;
    --bs-link-hover-color-rgb: 95, 147, 49;
}

[data-bs-theme="dark"] {
    /* Fondo navy profundo + acentos verdes (modo oscuro) */
    --bs-body-bg: #0e2136;
    --bs-body-color: #dfe8f0;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: #14304c;
    --bs-secondary-bg-rgb: 20, 48, 76;
    --bs-tertiary-bg: #10283f;
    --bs-border-color: #244a6e;
    --bs-primary: #7CB342;
    --bs-primary-rgb: 124, 179, 66;
    --bs-link-color: #9fd15a;
    --bs-link-color-rgb: 159, 209, 90;
    --bs-link-hover-color: #bfe088;
    --bs-link-hover-color-rgb: 191, 224, 136;

    /* Acentos propios en verde para que contrasten sobre el navy */
    --ba-primary: #7CB342;
    --ba-accent: #7CB342;
}

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bs-body-bg);
}
main {
    flex: 1 0 auto;
}

/* La navbar siempre en navy de marca (ambos temas) */
.navbar.bg-dark {
    background-color: var(--ba-navy) !important;
}

/* Botón de marca (verde) para el llamado a la acción principal */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ba-green);
    --bs-btn-border-color: var(--ba-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ba-green-d);
    --bs-btn-hover-border-color: var(--ba-green-d);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ba-green-d);
    --bs-btn-active-border-color: var(--ba-green-d);
    --bs-btn-focus-shadow-rgb: 124, 179, 66;
}

/* Marca en la navbar (logo + wordmark) */
.navbar-brand img {
    height: 34px;
    width: auto;
    display: block;
}
.brand-wordmark {
    font-weight: 700;
    letter-spacing: -.3px;
    color: #fff;
}
.brand-wordmark .a {
    color: var(--ba-green);
}

/* --- Hero --- */
.hero {
    background: linear-gradient(135deg, #e9f2fb 0%, #eaf6e0 100%);
    border: 1px solid rgba(0, 0, 0, .05);
}

/* ==========================================================
   Ajustes de modo oscuro para elementos propios
   ========================================================== */
[data-bs-theme="dark"] .hero {
    background: linear-gradient(135deg, #123049 0%, #163a26 100%);
    border-color: rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"] footer.bg-light {
    background-color: #0b1b2c !important;
}
[data-bs-theme="dark"] .card.bg-light,
[data-bs-theme="dark"] .card-body.bg-light {
    background-color: #14304c !important;
}
[data-bs-theme="dark"] .tarjeta-foto,
[data-bs-theme="dark"] .mapa-box {
    background: #1b3a5a;
}

/* --- Tarjetas de mascotas --- */
.tarjeta-mascota {
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
    overflow: hidden;
}
.tarjeta-mascota:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
}
.tarjeta-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #eee;
    overflow: hidden;
}
.tarjeta-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tarjeta-badges {
    position: absolute;
    top: .5rem;
    left: .5rem;
}

/* --- Foto de detalle --- */
.detalle-foto {
    max-height: 460px;
    object-fit: cover;
    cursor: zoom-in;
}

/* --- Galería: miniaturas --- */
.galeria-miniatura {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 3px solid transparent;
    opacity: .7;
    transition: opacity .12s ease, border-color .12s ease;
}
.galeria-miniatura:hover {
    opacity: 1;
}
.galeria-miniatura.activa {
    opacity: 1;
    border-color: var(--ba-primary);
}

/* --- Mapas --- */
.mapa-box {
    width: 100%;
    height: 320px;
    background: #e9ecef;
    z-index: 0;
}
.mapa-grande {
    height: 70vh;
    min-height: 420px;
}

/* Leaflet debe quedar por debajo de la navbar sticky */
.leaflet-container {
    z-index: 0;
}

/* --- Pines de leyenda --- */
.pin-leyenda {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    vertical-align: middle;
    margin-right: 3px;
}
.pin-busco { background: #dc3545; }
.pin-encontrado { background: #198754; }

/* Marcadores de color (Leaflet divIcon) */
.marcador-pin {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.marcador-busco { background: #dc3545; }
.marcador-encontrado { background: #198754; }
.marcador-resuelto { background: #0d6efd; }

/* Popup del mapa */
.popup-mapa img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}
.popup-mapa a { text-decoration: none; }