/* =====================================================================
 * MENÚ MODERNO - Colegio de Médicos de Catamarca
 * Se carga al final de encabezado.php y sobrescribe megamenu.css / main.css.
 * Para volver al menú anterior basta con quitar el <link> a este archivo.
 * ===================================================================== */

:root {
    --menu-primary: #0b4f8a;
    --menu-primary-dark: #062f55;
    --menu-accent: #ff851b;
    --menu-text: #13304f;
    --menu-soft: #f3f6fa;
    --menu-border: #e2e8f0;
}

/* --- Barra superior (dirección, teléfono, horario) --- */
#masthead .top_bar { background-color: var(--menu-primary-dark) !important; }
#masthead .top_bar,
#masthead .top_bar a,
#masthead .top_bar_contact_item { color: #fff; }
#masthead .top_bar_icon i,
#masthead .top_bar_icon { color: var(--menu-accent); }
#masthead .top_bar a:hover { color: var(--menu-accent); }

/* --- Íconos dentro del menú (común a escritorio y móvil) --- */
nav.main-menu ul.menu > li > a > i {
    color: var(--menu-accent);
    margin-right: 7px;
    font-size: 15px;
}
nav.main-menu ul.menu ul.mega-submenu li a > i,
nav.main-menu .megamenu-content .title > i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    color: var(--menu-primary);
    font-size: 14px;
    transition: color .2s;
}

/* --- Enlaces de los submenús: texto oscuro y legible --- */
#site-header-menu nav.main-menu ul.menu li ul.mega-submenu li a,
#site-header-menu nav.main-menu ul.menu-col li a {
    color: var(--menu-text);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    display: flex;
    align-items: center;
    transition: background-color .2s, color .2s, padding-left .2s;
}
#site-header-menu nav.main-menu ul.menu li ul.mega-submenu li a:hover,
#site-header-menu nav.main-menu ul.menu li ul.mega-submenu li.active > a,
#site-header-menu nav.main-menu ul.menu-col li a:hover {
    background-color: var(--menu-soft);
    color: var(--menu-primary);
}
#site-header-menu nav.main-menu ul.menu li ul.mega-submenu li a:hover > i { color: var(--menu-accent); }

/* Títulos de columnas (Trámites, Aula Virtual) */
#site-header-menu nav.main-menu .megamenu-content .title {
    color: var(--menu-primary-dark);
    font-weight: 800;
    display: flex;
    align-items: center;
}
#site-header-menu nav.main-menu .megamenu-content .title > i { color: var(--menu-accent); }

/* Botón "Buscador Médico" del encabezado */
#site-header-menu .header_extra .ttm-btn {
    background-color: var(--menu-accent) !important;
    border-color: var(--menu-accent) !important;
    color: #fff !important;
    font-weight: 700;
}
#site-header-menu .header_extra .ttm-btn:hover { background-color: var(--menu-primary) !important; border-color: var(--menu-primary) !important; }
#site-header-menu .header_extra .ttm-btn:after { display: none; }
#site-header-menu .header_extra .ttm-btn i { color: #fff; }


/* =====================================================================
 * ESCRITORIO
 * ===================================================================== */
@media (min-width: 1200px) {
    #site-header-menu nav.main-menu ul.menu > li > a {
        color: var(--menu-text);
        font-size: 15px;
        font-weight: 700;
        padding: 0 14px;
        display: flex;
        align-items: center;
        transition: color .2s;
    }
    #site-header-menu nav.main-menu ul.menu > li:hover > a,
    #site-header-menu nav.main-menu ul.menu > li.active > a { color: var(--menu-primary); }

    /* Subrayado animado en naranja */
    #site-header-menu nav.main-menu ul.menu > li > a:before {
        background-color: var(--menu-accent);
        height: 3px;
        border-radius: 3px;
    }

    /* Panel desplegable */
    #site-header-menu nav.main-menu li ul.mega-submenu {
        width: 290px;
        border-top: 3px solid var(--menu-accent);
        border-radius: 0 0 12px 12px;
        box-shadow: 0 14px 34px rgba(6, 47, 85, .18);
        padding: 6px 0;
    }
    #site-header-menu nav.main-menu li ul.mega-submenu li ul.mega-submenu { border-radius: 0 12px 12px 12px; }
    #site-header-menu nav.main-menu .megamenu-fw ul.mega-submenu { width: auto; padding: 0; }

    #site-header-menu nav.main-menu ul.menu li ul.mega-submenu li a { padding: 12px 20px; }
    #site-header-menu nav.main-menu ul.menu li ul.mega-submenu li a:hover { padding-left: 26px; }
    #site-header-menu nav.main-menu .megamenu-content .title { background: var(--menu-soft); padding: 14px 20px; }

    /* Línea decorativa de la plantilla en submenús: se oculta */
    #site-header-menu nav.main-menu ul.menu > li ul.mega-submenu li:before { display: none; }
}

/* Pantallas medianas: un poco más compacto para que entre todo en una línea */
@media (min-width: 1200px) and (max-width: 1399px) {
    #site-header-menu nav.main-menu ul.menu > li > a { padding: 0 9px; font-size: 14px; }
    nav.main-menu ul.menu > li > a > i { margin-right: 5px; font-size: 13px; }
}


/* =====================================================================
 * MÓVIL / TABLET (menú desplegable con hamburguesa)
 * ===================================================================== */
@media (max-width: 1199px) {
    #site-header-menu nav.main-menu {
        border-top: 3px solid var(--menu-accent);
        border-radius: 0 0 12px 12px;
        box-shadow: 0 14px 34px rgba(6, 47, 85, .18);
    }
    #site-header-menu nav.main-menu ul.menu > li > a {
        color: var(--menu-text);
        font-weight: 700;
        display: flex;
        align-items: center;
    }
    #site-header-menu nav.main-menu ul.menu > li > a.active { color: var(--menu-primary); background: var(--menu-soft); }
    #site-header-menu nav.main-menu li.mega-menu-item a.mega-menu-link:after { margin-left: auto; color: var(--menu-primary); }
    #site-header-menu nav.main-menu ul.menu li ul.mega-submenu li a { padding: 11px 15px; }
    #site-header-menu nav.main-menu .mega-menu-item .megamenu-content .col-menu .title { color: var(--menu-primary-dark); font-weight: 700; }
    #site-header-menu nav.main-menu .mega-menu-item .megamenu-content .col-menu .title:before { margin-left: auto; order: 2; }
}