/* navbar2.css renombrado a navbar.css */
/* ===========================
   NAVBAR - Escritorio (sin cambios)
   =========================== */
.navbar-custom {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
}

.navbar-brand img {
    block-size: 90px;
}

/* Links nav (escritorio igual que antes) */
.navbar-nav .nav-link {
    color: #333 !important;
    font-weight: 600;
    font-size: large;
    margin: 0 15px;
    padding: 8px 0 !important;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #007bff !important;
}

/* Emergency pill (escritorio) */
.emergency-section {
    background-color: #f8f9fa;
    padding: 8px 20px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.emergency-section i {
    color: #28a745;
    margin-inline-end: 8px;
}

.emergency-text {
    margin-inline-end: 10px;
    font-weight: 500;
    color: #333;
}

.emergency-number {
    font-weight: bold;
    color: #333;
}

/* ===========================
   MÓVIL - Estilos específicos (<= 991px)
   =========================== */
@media (max-width: 991px) {

    /* MOBILE ROW: contenedor principal centrado y con gap */
    .mobile-row {
        gap: 12px;
        padding: 6px 0 0;
        flex-wrap: wrap; /* permite que el toggler baje a la siguiente línea */
        justify-content: center;
    }

    /* Logo primero y centrado en móvil */
    .mobile-logo {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 8px;
    }
    .mobile-logo img {
        block-size: 66px; /* tamaño móvil del logo (ajusta si deseas) */
    }

    /* Grupo de botones (justo después del logo) */
    .mobile-buttons {
        order: 2;
        gap: 8px;
        margin-inline-start: 4px;
        margin-inline-end: 4px;
        align-items: stretch; /* asegura que el separador pueda usar la altura máxima */
    }

    /* Separador vertical real entre las dos píldoras */
    .mobile-divider {
        inline-size: 1px;
        background: rgba(0,0,0,0.12);
        border-radius: 1px;
        align-self: stretch;     /* toma la altura del contenedor (el mayor de los dos botones) */
        transform: scaleY(.78);  /* recorta ópticamente y mantiene el centro alineado */
        transform-origin: center;
        margin: 0 8px;           /* solo espacio horizontal */
    }

    .mobile-pill {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 13px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        white-space: nowrap;
    }

    .emergency-pill {
        background: #f7fdf7;
        color: #333;
        border: 1px solid rgba(40,167,69,0.08);
    }
    .emergency-pill i {
        color: #28a745;
        margin-inline-end: 8px;
        font-size: 14px;
    }
    .mobile-em-text {
        margin-inline-end: 6px;
        font-weight: 500;
    }
    .mobile-em-number {
        font-weight: 700;
    }

    .branches-pill {
        background:#000 ;
        color: #ffffff;
    }

    /* Toggler (después de botones), centrado visualmente */
    .mobile-toggler {
        order: 3;
        flex-basis: 100%; /* ocupa toda la fila para quedar centrado debajo */
        margin-inline-start: auto;
        margin-inline-end: auto;
        margin-block-start: 8px;
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,0.08);
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
    }
    .mobile-toggler .navbar-toggler-icon {
        inline-size: 28px;
        block-size: 20px;
        background-size: 20px 14px;
    }

    /* Ajustes del collapse (links verticales centrados) */
    .navbar-nav {
        text-align: center;
        margin-block-start: 14px;
        display: block;
    }
    .navbar-nav .nav-item {
        margin: 8px 0;
    }
    .navbar-nav .nav-link {
        display: inline-block;
        padding: 10px 12px !important;
        font-size: 16px;
        text-decoration: underline; /* enlaces subrayados como en el diseño */
        transform: translateY(-8px);
        opacity: 0;
        transition: transform .28s ease, opacity .28s ease;
    }

    /* Cuando el menú está abierto, hacemos aparecer los links con pequeño delay (stagger) */
    .navbar-collapse.show .navbar-nav .nav-item:nth-child(1) .nav-link { transition-delay: .04s; transform: translateY(0); opacity: 1; }
    .navbar-collapse.show .navbar-nav .nav-item:nth-child(2) .nav-link { transition-delay: .08s; transform: translateY(0); opacity: 1; }
    .navbar-collapse.show .navbar-nav .nav-item:nth-child(3) .nav-link { transition-delay: .12s; transform: translateY(0); opacity: 1; }
    .navbar-collapse.show .navbar-nav .nav-item:nth-child(4) .nav-link { transition-delay: .16s; transform: translateY(0); opacity: 1; }
    .navbar-collapse.show .navbar-nav .nav-item:nth-child(5) .nav-link { transition-delay: .20s; transform: translateY(0); opacity: 1; }
    .navbar-collapse.show .navbar-nav .nav-item:nth-child(6) .nav-link { transition-delay: .24s; transform: translateY(0); opacity: 1; }

    /* Animación de colapso más suave (bootstrap usa clases collapsing / collapse / show) */
    .collapsing {
        transition: height .38s ease;
    }
    .navbar-collapse.collapse {
        transition: none;
    }

    /* Evitar que la emergency-section de desktop se muestre en móvil */
    .emergency-section.d-none.d-lg-flex {
        display: none !important;
    }
}

/* ===========================
   Notas extra visuales (opcional)
   =========================== */
/* Pequeño ajuste para el icono de bootstrap toggler si quieres más contraste */
.navbar-toggler {
    background: transparent;
}

/* ===========================
   DROPDOWN - Animations and responsive behavior
   =========================== */
/* Base dropdown styles (desktop) */
.navbar-nav .dropdown-menu {
    display: block; /* allow transition without layout shifts (absolute on desktop) */
    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
    transition: transform .28s ease, opacity .28s ease, visibility .28s ease;
    margin-top: .5rem;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.navbar-nav .dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.navbar-nav .dropdown-item {
    font-weight: 600;
}

/* Mobile: inline expansion with height animation */
@media (max-width: 991px) {
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        inline-size: 100%;
        margin: 6px 0 0;
        box-shadow: none;
        border: 0;
        padding: 0;
        transform: none;
        visibility: visible; /* manage with height/opacity so it doesn't reserve space when closed */
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .32s ease, opacity .24s ease;
        background: transparent;
        text-align: center; /* center inline-block items */
    }
    .navbar-nav .dropdown-menu.show {
        max-height: 240px; /* enough for a few items */
        opacity: 1;
    }
    .navbar-nav .dropdown-item {
        padding: 10px 12px;
        font-size: 16px;
        text-decoration: underline;
        display: inline-block; /* shrink to content so it can be centered */
        background: transparent; /* match top-level links appearance */
        margin: 8px 0; /* match spacing of top-level nav items */
    }
}