html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#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;
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #E65100; /* naranja oscuro: el mismo Primary del tema (AppTheme.cs) */
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Cargando");
    }

/* ---- Login ---- */

/*
 * Fondo a pantalla completa (100% de alto y de ancho) con la imagen SIEMPRE entera: nunca se recorta ("la
 * mujer entra completa"). La imagen (16:9) se ajusta a la pantalla; si la pantalla tiene otra proporción, el
 * sobrante (laterales o arriba/abajo) se rellena con la propia imagen reflejada, que continúa sin costura los
 * bordes y se desvanece hacia el blanco.
 */
.login-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem 0;
    background-color: #F7F7F8;
}

.login-page > .login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F7F7F8;
}

/* Caja con la proporción exacta de la imagen (16:9), lo más grande que entra en la pantalla. */
.login-bg__stage {
    position: relative;
    flex: none;
    width: min(100vw, calc(100vh * 16 / 9));
    width: min(100vw, calc(100dvh * 16 / 9));
    aspect-ratio: 16 / 9;
    background: url("../images/fondo.png") center center / 100% 100% no-repeat;
}

/* Copias reflejadas pegadas a cada borde: rellenan el sobrante de la pantalla. */
.login-bg__stage > i {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../images/fondo.png") center center / 100% 100% no-repeat;
}

/* Las máscaras están en el sistema de coordenadas de cada copia (antes de reflejarla): 0% = borde pegado a la imagen. */
.login-bg__stage > .l { right: 100%; top: 0; transform: scaleX(-1); mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); }
.login-bg__stage > .r { left: 100%; top: 0; transform: scaleX(-1); mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); }
.login-bg__stage > .t { bottom: 100%; left: 0; transform: scaleY(-1); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); }
.login-bg__stage > .b { top: 100%; left: 0; transform: scaleY(-1); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.85) 6%, transparent 17%); }

.login-page > .mud-container {
    position: relative;
    z-index: 1;
}

.login-card {
    /* Acento naranja de la marca solo dentro del login (foco de los campos, casilla). */
    --mud-palette-primary: #E65100;
    --mud-palette-primary-darken: #BF360C;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(2px);
}

/* Botón naranja oscuro; deshabilitado (procesando) conserva el color, atenuado. */
.btn-login.mud-button-root {
    background-color: #E65100 !important;
    color: #FFFFFF !important;
}

.btn-login.mud-button-root:hover:not(.mud-button-disabled) {
    background-color: #BF360C !important;
}

.btn-login.mud-button-root.mud-button-disabled {
    background-color: #E65100 !important;
    color: #FFFFFF !important;
    opacity: 0.7;
}

.btn-login .mud-progress-circular {
    color: #FFFFFF;
}

/* Citas: calendario mensual y vista diaria. */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.month-cell {
    min-height: 116px;
    padding: 4px 6px;
    cursor: pointer;
    overflow: hidden;
}

.month-cell:hover,
.month-cell:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.month-cell--compact {
    min-height: 56px;
    padding: 2px 4px;
}

.month-cell--other {
    opacity: 0.6;
}

.month-cell--disabled {
    background-color: var(--mud-palette-action-disabled-background);
    opacity: 0.55;
}

.month-cell--today {
    border: 2px solid var(--mud-palette-primary);
}

.month-appt {
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-slot-row {
    padding: 8px 12px;
    margin-bottom: 4px;
}

.day-slot-row--clickable {
    cursor: pointer;
}

.day-slot-row--clickable:hover,
.day-slot-row--clickable:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    outline: none;
}

.day-slot-row--muted {
    opacity: 0.55;
}