html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--mud-palette-background, #F5F5F5);
}

/* Cambio de claro/oscuro suave en toda la app (peticion expresa), no solo en el panel de pestañas
   donde se noto primero. Una transicion nunca se dispara en el primer pintado de un elemento (solo
   anima cambios sobre algo ya existente), asi que esto no choca con el mecanismo anti-parpadeo de
   arranque de index.html/ThemeService - ese fija los colores antes de pintar nada, esto solo entra
   en juego despues, al darle a ToggleAsync. */
*, *::before, *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--mud-palette-background, #F5F5F5);
}

    .app-loading img {
        height: 56px;
        width: auto;
        animation: app-loading-pulse 1.4s ease-in-out infinite;
    }

    .app-loading span {
        font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 0.9rem;
        color: var(--mud-palette-text-secondary, #707070);
    }

@keyframes app-loading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

code {
    color: #c02d76;
}

/* Fila etiqueta/valor en las pestañas de solo lectura de Ajustes (Perfil, Suscripción) */
.settings-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

/* MudTabs centra el texto de cada pestaña por defecto (.mud-tab, definido en MudBlazor.min.css) -
   se pisa para toda la app. Tiene que ir en una hoja global, no en un .razor.css aislado: el
   atributo de scope de Blazor no llega hasta el DOM real de MudTabs a traves de un componente
   intermedio (ResponsiveTabs) salvo que este haga splatting de atributos, que no hace. */
.mud-tab {
    text-transform: none !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* MudTabs deja cada pestaña con width:100% dentro de un contenedor max-content: todas acaban tan anchas como
   la mas ancha (y con hueco al final de las cortas). En horizontal cada pestaña se ajusta a su texto; en
   vertical (Position.Left) se mantiene el ancho uniforme. */
.mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tab {
    width: auto;
}

/* Fondo gris (el mismo que el resto de la app, --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 de MudTabs usa display:contents (no mete una capa de layout extra), asi que su
   contenido pasa a ser un item flex directo de .mud-tabs-panels (Position.Left es flex en fila) -
   sin flex-grow se queda al ancho de su contenido en vez de ocupar el hueco disponible.
   !important porque MudForm ya trae su propio ".mud-form { flex: 0 1 auto }" con la misma
   especificidad (una clase) - sin esto, cuando el contenido de una pestaña empieza directamente
   por un MudForm (como ConfiguracionEmpresa), gana el de MudBlazor y se pierde ancho y scroll. */
.mud-tabs-panels > * {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow-y: auto !important;
}

/* Evita que el texto del menu lateral haga wrap mientras el drawer Mini anima su ancho */
.mud-drawer .mud-nav-link,
.mud-drawer .mud-nav-link .mud-nav-link-text {
    white-space: nowrap;
}

/* MudDivider vertical dentro de un MudAppBar/MudToolBar: el contenedor fuerza align-items:stretch,
   asi que sin altura explicita el divisor ocupa todo el alto de la barra en vez de un tamano
   compacto acorde al texto/iconos de al lado. */
.appbar-divider {
    height: 24px;
    align-self: center;
}

/* Todos los MudDialog de la app abren centrados con MaxWidth fijo (Small/Medium/Large) sin
   distincion por breakpoint - en movil eso deja una caja flotante con margenes en vez de
   aprovechar la pantalla. En vez de tocar el DialogOptions de cada ShowAsync (son mas de 10
   sitios), se fuerza aqui en global: por debajo de 600px, cualquier dialogo pasa a fullscreen. */
@media (max-width: 600px) {
    .mud-dialog-container {
        padding: 0 !important;
    }

    .mud-dialog-container .mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* El listado del selector de empresa va a un alto fijo (320px) en escritorio para no estirar
       el dialogo de mas con muchas empresas, pero en movil (dialogo a pantalla completa) eso deja
       un hueco gris debajo - aqui se deja crecer con flex para ocupar todo el alto disponible. */
    .empresa-select-list {
        max-height: none !important;
    }
}

/* Lista del selector de empresa: alto fijo en escritorio (no crecer sin limite con muchas
   empresas); en movil la sobreescribe la regla de arriba para que llegue hasta abajo del dialogo. */
.empresa-select-list {
    max-height: 320px;
}

/* Todos los dialogos de la app con cabecera blanca y cuerpo gris, con un borde en el cambio de color
   (mismo tono que el de las MudCard Outlined del resto de la app) - asi no hace falta repetir
   ContentClass en cada MudDialog, es el aspecto por defecto de cualquier dialogo nuevo. */
.mud-dialog-content {
    background-color: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 8px;
}

/* El footer de acciones (Cancelar/Guardar...) sigue al contenido, mismo gris para que no quede un
   corte blanco debajo - el borde ya esta puesto arriba, entre la cabecera y el contenido. */
.mud-dialog-actions {
    background-color: var(--mud-palette-background-gray);
}

/* Footer siempre al fondo del viewport (patron sticky footer con flexbox) */
.page-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--mud-appbar-height, 64px));
}

.page-content-wrapper > .mud-container {
    flex: 1 0 auto;
}

/* MudTabs pone el texto de las pestanas en mayusculas por defecto; se quiere en minuscula normal,
   como la demo de referencia. */
.mud-tab {
    text-transform: none;
}
.partner-card-link {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-card-link:hover {
    transform: translateY(-4px);
    background-color: #FFFFFF !important;
}