/* Aspecto de los menús de PortalLayout (componentes de MudBlazor con los colores del portal). Los colores salen de la
   paleta del tema activo (var(--mud-palette-*)), definida en PortalLayout: así funcionan en modo claro y oscuro */

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

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

/* Menú general (zona): logo y nombre en el gris de la barra, más claro */
.portal-menu-zona {
    color: color-mix(in srgb, var(--mud-palette-appbar-text) 60%, transparent) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

    .portal-menu-zona:hover {
        color: var(--mud-palette-text-primary) !important;
        background-color: transparent !important;
    }

/* Menú de área: enlaces en negrita, el activo subrayado en azul */
.portal-menu-area {
    color: var(--mud-palette-appbar-text) !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: var(--mud-palette-secondary) !important;
        background-color: transparent !important;
    }

    .portal-menu-area.activo {
        border-bottom-color: var(--mud-palette-secondary);
    }

/* Pantallas angostas: el área es un menú a la par del ícono de aplicaciones ("⠿ Directorio ▾") */
.portal-menu-area-actual {
    color: var(--mud-palette-appbar-text) !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: ancho máximo del área para que el ícono de aplicaciones, el área, la lupa, la ayuda y la foto quepan en
   una línea (el nombre más largo hoy es "Inconformidades") */
@media (max-width: 599.98px) {
    .portal-menu-area-actual .portal-texto-corto {
        max-width: 140px;
    }
}

/* Foto del usuario (activador de su menú): solo el círculo, sin el ancho mínimo de un botón */
.portal-boton-usuario {
    min-width: 0 !important;
    padding: 4px !important;
    border-radius: 50% !important;
}

/* Encabezado de los menús de la barra (logo de la corporativa; foto y nombre del usuario) */
.portal-menu-encabezado {
    padding: 8px 16px;
}

/* Panel de la campana: ancho de un teléfono como máximo y los títulos en varias líneas; los no leídos en negrita */
.portal-menu-avisos {
    min-width: 280px;
    max-width: min(360px, 100vw - 16px);
    max-height: 70vh;
    overflow-y: auto;
}

    .portal-menu-avisos .mud-menu-item-text {
        white-space: normal;
    }

.portal-aviso-sin-leer {
    font-weight: bold;
}

/* Cantidad de avisos sin leer sobre la campana. Con Overlap, MudBlazor la deja 8 px por encima del botón: como la barra
   está pegada al borde superior de la página, se cortaba. Se baja para que quede dentro de la barra (arriba a la
   derecha de la campana) */
.mud-badge.mud-badge-top.right.mud-badge-overlap.portal-campana-cantidad {
    inset: auto auto calc(100% - 26px) calc(100% - 22px);
}

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

.portal-menu-local {
    color: var(--mud-palette-dark-text) !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 {
        color: var(--mud-palette-secondary-text) !important;
        background-color: var(--mud-palette-secondary) !important;
    }

    .portal-menu-local:hover {
        color: var(--mud-palette-error-text) !important;
        background-color: var(--mud-palette-error) !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: var(--mud-palette-primary-text) !important;
    background-color: var(--mud-palette-primary) !important;
    font-size: 9pt !important;
    text-transform: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

    .portal-menu-pagina:hover {
        color: var(--mud-palette-tertiary-text) !important;
        background-color: var(--mud-palette-tertiary) !important;
    }

    /* La paleta no tiene un amarillo: se lee igual sobre el verde en los dos modos */
    .portal-menu-pagina.activo {
        color: #FFFF00 !important;
    }