/* Hoja global de la app (no aislada por componente) - para ajustes de estilo que deben aplicar a
   TODA la app, no a una sola pantalla. Cargada despues de MudBlazor.min.css en index.html, asi
   que gana en orden de cascada sin necesitar !important - se deja igualmente por seguridad. */

/* MudTabs pone el texto de cada pestaña en mayusculas y centrado por defecto (.mud-tab, definido
   en MudBlazor.min.css); aqui se pisa para toda la app. */
.mud-tab {
    text-transform: none !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Fondo gris (el mismo que la pantalla de listado, --mud-palette-background) detras del contenido
   de cada pestaña, para que las MudCard blancas de dentro tengan contraste - si no, queda blanco
   sobre blanco. */
.mud-tabs-panels {
    background-color: var(--mud-palette-background);
    padding: 16px;
}

/* El panel activo usa display:contents (para no meter una capa de layout extra), asi que el
   contenido de cada pantalla (ProfileSettings, etc.) pasa a ser un item flex directo del area de
   pestañas (Position=Left es flex en fila) - sin flex-grow se queda al ancho de su contenido en
   vez de ocupar el hueco disponible. */
.mud-tabs-panels > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Pantalla de carga previa al arranque de Blazor (index.html) y StatusScreen.razor (misma
   estructura, "app-loading" + imagen + texto) - nunca tuvo CSS propio porque este fichero no
   existia hasta ahora, el logo SVG se veia a su tamaño natural (enorme) sin ningun limite. */
.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 16px;
    background-color: var(--mud-palette-background, #F5F5F5);
}

.app-loading img {
    width: 64px;
    height: 64px;
}

.app-loading span {
    color: var(--mud-palette-text-secondary, #707070);
    font-family: Arial, sans-serif;
    font-size: 0.875rem;
}