.page div.sidebar {
	background-image: linear-gradient(180deg, rgb(139 179 255) 0%, #1e793a 70%);
}

body button {
	width: auto;
	height: auto;
	box-shadow: none;
}

.materias-primas-main-content table thead th,
.materias-primas-main-content table tbody td,
.materias-primas-main-content table tfoot td {
    font-size: 1.4rem;
    padding: 1rem 1rem;
}

/* 1. Contenedor principal del layout. */
.materias-primas-main-content {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* 2. Componente MudTabs (el padre flex). */
.fill-height-tabs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Previene problemas de desbordamiento. */
}

/* 3. Barra de herramientas de las pestañas (los títulos). */
.fill-height-tabs .mud-tabs-tabbar {
    flex-shrink: 0; /* Asegura que la barra de herramientas no se encoja. */
}

/* 4. Contenedor de los paneles de contenido. */
.fill-height-tabs .mud-tabs-panels {
    flex-grow: 1; /* Ocupa todo el espacio restante. */
    /* --- LA CLAVE ESTÁ AQUÍ --- */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 5. Panel de contenido individual. */
.fill-height-tabs .mud-tab-panel {
    flex-grow: 1; /* Hace que el panel activo crezca para llenar el contenedor. */
    /*overflow-y: auto;*/ /* Añade scroll solo al contenido si es necesario. */
}

/*------------MudBlazor-------------*/

.mud-button-root,
.mud-popover-provider button {
    width: auto;
    height: auto;
    box-shadow: none;
    background: inherit;
}

.loading-overlay-z {
    z-index: 30; /* Asegura que esté por encima de todo */
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.loading-initial-circle, .loading-initial-text {
    color: #f2f513;
}
/*----------------------------------*/