/* ESTILOS DE LA BARRA DE NAVEGACIÓN EN 2 RENGLONES */

.font-menu {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
}

/* TAMAÑO DEL LOGO EN DOS RENGLONES */
.navbar-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

@media (min-width: 1200px) {
    .navbar-logo {
        height: 75px;
        /* Altura ideal para compensar las 2 filas */
    }
}

/* LINKS DE NAVEGACIÓN */
.navbar-nav .nav-link {
    color: #2c3e50 !important;
    padding: 0.35rem 0.65rem !important;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #0088cc !important;
}

/* HIGHLIGHT PREDIAL */
.btn-predial-link {
    color: #0088cc !important;
}

/* SUBMENÚ Y CABECERA AZUL (TESORERÍA) */
.custom-dropdown-menu {
    min-width: 220px;
    border-radius: 8px;
    background-color: #ffffff;
}

.dropdown-header-blue {
    background-color: #0088cc;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* ADAPTACIÓN MÓVIL (< 1200px) */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        background-color: #ffffff;
        max-height: 80vh;
        overflow-y: auto;
        padding: 1rem;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-top: 0.5rem;
    }

    .navbar-nav .nav-item {
        border-bottom: 1px solid #f1f5f9;
    }

    .navbar-nav .nav-link {
        padding: 0.65rem 0.5rem !important;
        font-size: 0.95rem;
    }

    .dropdown-menu {
        background-color: #f8fafc;
        border-left: 3px solid #0088cc !important;
        border-radius: 0 8px 8px 0;
        margin-left: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0.25rem 0;
    }

    .dropdown-item {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    /* Submenú en móvil */
    .dropdown-submenu .custom-dropdown-menu {
        display: block;
        margin-left: 1rem;
        border-left: 2px solid #0088cc !important;
    }
}

/* ESCRITORIO EN 2 RENGLONES (>= 1200px) */
@media (min-width: 1200px) {
    .dropdown-menu {
        border: none;
        border-radius: 8px;
        padding: 0.5rem 0;
        margin-top: 0.25rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    }

    .dropdown-item {
        color: #333333;
        font-size: 0.88rem;
        font-weight: 500;
        padding: 0.45rem 1.2rem;
        transition: all 0.2s ease;
    }

    .dropdown-item:hover {
        background-color: #e0f2fe;
        color: #0088cc;
        padding-left: 1.4rem;
    }

    /* Despliegue del menú principal */
    .navbar-nav .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
        animation: navFadeIn 0.2s ease-in-out forwards;
    }

    /* SUBMENÚ MULTINIVEL (AYUNTAMIENTO -> TESORERÍA) */
    .dropdown-submenu {
        position: relative;
    }

    /* El submenú secundario permanece oculto hasta hacer hover específico en .dropdown-submenu */
    .dropdown-submenu>.custom-dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -0.25rem;
        display: none !important;
    }

    /* Se despliega ÚNICAMENTE cuando se posiciona sobre la opción 'Ayuntamiento' */
    .dropdown-submenu:hover>.custom-dropdown-menu {
        display: block !important;
        animation: fadeInRight 0.2s ease-out forwards;
    }
}

@keyframes navFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* EFECTO HOVER EN TARJETAS SLIDER ENLAZADAS */
.tourist-card-link {
    cursor: pointer;
}

.tourist-card-link .tourist-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.tourist-card-link:hover .tourist-card {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3) !important;
}