.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: inherit;
}

.mud-list {
    border: 1px solid var(--mud-palette-lines-default)
}

/* ============================================================
   Menu lateral colapsado (DrawerVariant.Mini)
   MudBlazor solo oculta el texto de los MudNavLink que llevan icono.
   Todo lo demas del menu (tarjeta de usuario, contador de sesion,
   cabeceras de seccion) se quedaria visible y recortado a 64px, que es
   justo el aspecto roto que hay que evitar. Va aqui y no en un .razor.css
   porque el bundle de CSS scoped no esta enlazado en index.html.
   ============================================================ */

/* Nada debe asomar por el borde del rail */
.mud-drawer-mini.mud-drawer--closed {
    overflow-x: hidden;
}

/* Fuera las cabeceras de seccion y el contador de sesion.
   La foto del usuario SI se queda: es la referencia de "con que cuenta estoy". */
.mud-drawer-mini.mud-drawer--closed .fsh-nav-section,
.mud-drawer-mini.mud-drawer--closed .fsh-nav-session {
    display: none;
}

/* De la tarjeta de usuario sobrevive solo el avatar, centrado en el rail */
.mud-drawer-mini.mud-drawer--closed .fsh-nav-header .mud-card-header-content {
    display: none;
}

.mud-drawer-mini.mud-drawer--closed .fsh-nav-header .mud-card-header {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    /* MudBlazor separa el avatar del texto con 16px; sin texto, descuadra el centrado */
    .mud-drawer-mini.mud-drawer--closed .fsh-nav-header .mud-card-header-avatar {
        margin-right: 0;
        margin-inline-end: 0;
    }

/* Iconos centrados en el rail, sin el sangrado del modo abierto */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    /* Cinturon y tirantes: la regla de MudBlazor exige que el icono sea el
       primer hijo; esta cubre tambien los enlaces que no cumplan esa forma. */
    .mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-nav-link-text {
        display: none;
    }

/* La flecha de desplegar no cabe y sin texto no significa nada */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-expand-icon {
    display: none;
}

/* Un grupo desplegado dentro de 64px se ve roto: en rail se colapsa */
.mud-drawer-mini.mud-drawer--closed .mud-nav-group > .mud-collapse-container {
    display: none;
}

/* ============================================================
   Encabezado de pagina (PageHeader.razor)
   Titulo y subtitulo en la misma linea: el bloque a dos lineas con
   h2 a 2.75rem gastaba ~125px de alto antes del contenido real, y esa
   cifra crece con la escala de texto del usuario (115/130%).
   Va aqui y no en un PageHeader.razor.css por lo mismo que el bloque
   del drawer: el bundle de CSS scoped no esta enlazado en index.html.
   ============================================================ */
.fsh-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 0;
    padding-bottom: 12px;
}

.fsh-page-header-title {
    font-weight: 500;
}

/* Separador entre titulo y subtitulo; solo tiene sentido en una linea */
.fsh-page-header-sub::before {
    content: "·";
    margin-right: 12px;
}

@media (max-width: 600px) {
    .fsh-page-header {
        flex-direction: column;
    }

    .fsh-page-header-sub::before {
        content: none;
    }
}

/* ============================================================
   EntityTable en modo compacto (parametro Compacta="true")
   Para tablas que viven en media pantalla, como Ingresos y Pagos lado a
   lado en ProyectoDetalles: con el ancho por defecto de MudBlazor las 7
   columnas no caben, sale scroll horizontal y la columna de acciones
   queda cortada. Aqui se fija el layout de la tabla para que respete los
   Width declarados en cada EntityField y que Desc (sin Width) se quede
   con el espacio sobrante, truncando con puntos suspensivos.
   Va aqui y no en un .razor.css porque el bundle de CSS scoped no esta
   enlazado en index.html.
   Todo dentro de min-width:601px: por debajo MudBlazor apila cada fila
   como tarjeta (.mud-xs-table) y los anchos de columna no aplican.
   ============================================================ */
@media (min-width: 601px) {

    .fsh-tabla-compacta .mud-table-root {
        table-layout: fixed;
        width: 100%;
    }

    /* Anula el overflow:auto global que EntityTable.razor pone a todas las tablas */
    .fsh-tabla-compacta .mud-table-container {
        overflow-x: hidden;
    }

    /* El padding por defecto (16px por lado) se come el ancho util */
    .fsh-tabla-compacta td.mud-table-cell,
    .fsh-tabla-compacta th.mud-table-cell {
        padding-left: 6px !important;
        padding-right: 6px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* El "..." tiene que caer en el elemento que contiene el texto: los Template
       envuelven el valor en un <div> dentro del span .fsh-td-value, asi que sin
       esta regla el div desborda y se recorta en seco, sin puntos suspensivos.
       El max-width tambien neutraliza el 55vw que EntityTable.razor aplica a
       los td con data-label. */
    .fsh-tabla-compacta td.mud-table-cell .fsh-td-value,
    .fsh-tabla-compacta td.mud-table-cell .fsh-td-value > div {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Cabecera: titulo e icono de filtro nunca parten en dos lineas */
    .fsh-tabla-compacta th.mud-table-cell .d-flex,
    .fsh-tabla-compacta th.mud-table-cell .mud-table-sort-label {
        white-space: nowrap;
    }

    /* Los botones de icono (filtro en cabecera, checkbox de C, validar,
       acciones) traen mucho padding propio; asi caben en columnas estrechas */
    .fsh-tabla-compacta th.mud-table-cell .mud-icon-button,
    .fsh-tabla-compacta td.mud-table-cell .mud-icon-button {
        padding: 2px;
    }

    .fsh-tabla-compacta td.mud-table-cell .mud-checkbox {
        margin: 0;
    }

    /* Columna de acciones: va hardcodeada en EntityTable.razor (no viene de
       Context.Fields), asi que su ancho se fija aqui por posicion */
    .fsh-tabla-compacta th.mud-table-cell:last-child,
    .fsh-tabla-compacta td.mud-table-cell:last-child {
        width: 104px;
    }

        .fsh-tabla-compacta td.mud-table-cell:last-child .mud-stack {
            gap: 4px !important;
        }
}

@media (max-width: 640.98px) {

    /* el contenedor que posiciona MudScrollToTop */
    .mud-scroll-to-top.fsh-scroll-to-top {
        left: 16px !important;
        right: auto !important;
    }

        /* por si tu versión aplica el posicionamiento a un div interno */
        .mud-scroll-to-top.fsh-scroll-to-top > * {
            left: 16px !important;
            right: auto !important;
        }
}