/* Aspecto de los menús de PortalLayout (componentes de MudBlazor con los colores del portal) */

/* Barra principal: blanca, con una línea gris abajo. Sin los márgenes laterales de MudBlazor (24 px): el logo y la
   ayuda quedan casi pegados a los bordes, como el menú local */
.portal-barra {
    border-bottom: 1px solid #D3D3D3;
}

    .portal-barra .mud-toolbar {
        padding-left: 4px;
        padding-right: 4px;
    }

/* Menú general (zona): logo y nombre en gris */
.portal-menu-zona {
    color: #999 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

    .portal-menu-zona:hover {
        color: #333 !important;
        background-color: transparent !important;
    }

/* Menú de área: enlaces grises en negrita, el activo subrayado en azul */
.portal-menu-area {
    color: #555 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: none !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent;
}

    .portal-menu-area:hover {
        color: #009cde !important;
        background-color: transparent !important;
    }

    .portal-menu-area.activo {
        border-bottom-color: #009cde;
    }

/* Pantallas angostas: el área es un segundo menú a la par del general ("Proyectos ▾ Directorio ▾") */
.portal-menu-area-actual {
    color: #555 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: none !important;
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Nombre que se corta con puntos suspensivos si no cabe (el menú muestra el nombre completo) */
.portal-texto-corto {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Teléfonos: letra más pequeña y ancho máximo para que los dos menús, la lupa y la ayuda quepan en una línea
   (los nombres más largos hoy son "COLABORADORES" y "Inconformidades") */
@media (max-width: 599.98px) {
    .portal-menu-zona {
        font-size: 14px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

        .portal-menu-zona .portal-texto-corto {
            max-width: 105px;
        }

    .portal-menu-area-actual .portal-texto-corto {
        max-width: 100px;
    }
}

/* Menú local: barra gris con enlaces blancos; el activo en azul y el que tiene el puntero en rojo */
.portal-barra-local {
    background-color: var(--menu_area_fondo);
    min-height: 30px !important;
    height: auto !important;
}

.portal-menu-local {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: none !important;
    border-radius: 0 !important;
    min-height: 30px;
    margin-right: 2px;
}

    .portal-menu-local.activo {
        background-color: #009cde !important;
    }

    .portal-menu-local:hover {
        background-color: #FF0000 !important;
    }

/* Ícono pegado a su texto (MudBlazor deja 8 px, que lo hacía parecer otra opción) */
.portal-menu-local .mud-button-icon-start,
.portal-menu-pagina .mud-button-icon-start {
    margin-inline-end: 3px !important;
    margin-right: 3px !important;
}

    .portal-menu-local .mud-button-icon-start .mud-icon-root,
    .portal-menu-pagina .mud-button-icon-start .mud-icon-root {
        font-size: 16px;
    }

/* Menú de la página: botones verdes redondeados; naranja con el puntero, texto amarillo el activo */
.portal-menu-pagina {
    color: #fff !important;
    background-color: var(--boton_fondo) !important;
    font-size: 9pt !important;
    text-transform: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

    .portal-menu-pagina:hover {
        background-color: var(--boton_hover) !important;
    }

    .portal-menu-pagina.activo {
        color: #FFFF00 !important;
    }