/* ===============================
   APP STYLES
   =============================== */
/* General */
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* Clean, modern sans-serif font stack */
    background-color: #ffffff; /* White page background */
    color: #212529; /* Dark gray text color for readability */
    margin: 0; /* Remove browser’s default margin */
}

/* Navbar */
.navbar { /* Main navigation bar container */
    transition: all 0.3s ease; /* Smooth transition for hover or scroll effects */
    background-color: #f8f9fa !important; /* Light institutional color (Bootstrap’s light gray) */
    padding-top: 0.5rem; /* Vertical spacing inside navbar (top) */
    padding-bottom: 0.5rem; /* Vertical spacing inside navbar (bottom) */
}

/* Links */
.nav-link { /* Default appearance of each navigation link */
    color: #212529 !important; /* Dark gray text color */
    font-weight: 500; /* Semi-bold text weight */
    margin-left: 0.5rem; /* Space to the left of each link */
    margin-right: 0.5rem; /* Space to the right of each link */
    border-bottom: 2px solid transparent; /* Invisible underline for hover animation */
    transition: all 0.2s ease; /* Smooth color and border transitions */
}

.nav-link:hover { /* When hovering over a link */
    color: #0d6efd !important; /* Bootstrap primary blue */
    border-bottom: 2px solid #0d6efd; /* Blue underline appears */
}

.nav-link.active { /* Style for the currently active page link */
    color: #0d6efd !important; /* Keep blue text for active state */
    border-bottom: 2px solid #0d6efd; /* Keep blue underline to show active tab */
}

.navbar.shadow-sm { /* Optional Bootstrap class for light shadow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Soft, subtle shadow below navbar */
}

/* Logo */
.navbar img { /* Logo image inside the navbar */
    transition: transform 0.2s ease; /* Smooth hover zoom animation */
}

.navbar img:hover { /* Hover effect for logo */
    transform: scale(1.05); /* Slight zoom-in */
    opacity: 0.9; /* Slight transparency for a softer effect */
}

/* Mobile menu */
@media (max-width: 992px) { /* Rules for tablets and smaller screens */
    .navbar img {
        height: 60px; /* Reduce logo height slightly on small screens */
    }

    .navbar-nav {
        text-align: center; /* Center the navigation links in mobile view */
        margin-top: 1rem; /* Add space between logo and links */
    }

    .nav-link {
        display: block; /* Stack links vertically */
        padding: 0.5rem 0; /* Add comfortable vertical spacing for touch */
        border-bottom: none; /* Remove underline for mobile layout */
    }
}

/* Hide navbar menu (Nav) on mobile, show toggler button */
@media (max-width: 992px) {
    .d-lg-flex {
        display: none !important; /* hide menu */
    }

    .d-lg-none {
        display: block !important; /* show hamburger */
    }
}

/* Optional: style the Offcanvas content */
.offcanvas-body .nav-link {
    font-size: 1rem;
    padding: 0.75rem 0;
}

/* Fix for blue highlight in Offcanvas active link */
.offcanvas-body .nav-link.active,
.offcanvas-body .nav-link:focus,
.offcanvas-body .nav-link:active {
    background-color: transparent !important; /* Remove blue background */
    color: #0d6efd !important; /* Keep readable Bootstrap blue text */
    outline: none !important; /* Remove focus outline */
    box-shadow: none !important; /* Remove Bootstrap’s glow effect */
    border: none !important; /* Remove underline or border if any */
}

/* Smaller icons for narrow screens */
@media (max-width: 992px) {
    .navbar .btn img {
        height: 18px;
    }
}

/* Language buttons base style */
.lang-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.25rem 0.5rem;
    opacity: 0.4; /* idiomas no seleccionados */
    transition: border-bottom 0.2s ease, opacity 0.2s ease;
}

/* Flag hover effect */
.lang-btn:hover {
    opacity: 0.8;
    transform: scale(1.05); /* sutil zoom */
}

/* Active (selected) language */
.active-lang {
    transform: scale(1.1); /* leve énfasis visual */
    opacity: 1 !important;
}