h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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: "Ocurrió un error."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Campos HTML nativos en pantallas interactivas (listas desplegables sin MudSelect, que necesita un proveedor de
   popovers que el layout estático no tiene) y en formularios SSR. Solo variables del tema de MudBlazor. */
.eduvi-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Una lista con opciones largas (p. ej. las unidades de la revisión académica) no se sale de su tarjeta. */
    min-width: 0;
    max-width: 100%;
}

.eduvi-campo select {
    max-width: 100%;
}

.eduvi-campo select,
.eduvi-campo input,
.eduvi-campo textarea {
    padding: 14px 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.eduvi-campo select:focus,
.eduvi-campo input:focus,
.eduvi-campo textarea:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Las opciones de una lista desplegable nativa las dibuja el navegador con sus colores claros, y heredan el texto claro del
   modo oscuro: sin esto no se leen. Valen para todas las listas (campos SSR e interactivos), en los dos modos. El fondo es
   el de la página y no el de las superficies, que en el modo oscuro es translúcido y dejaría ver el blanco del navegador. */
select option,
select optgroup {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* Tablas de datos: la fila bajo el cursor (o la que tiene el foco del teclado en uno de sus botones o enlaces) se resalta
   con el color de la institución y una barra a la izquierda, en todas las tablas y en los dos modos. El resalte propio de
   MudBlazor casi no se notaba, sobre todo en el modo oscuro. */
.mud-simple-table table tbody tr,
.mud-table-root .mud-table-body .mud-table-row {
    transition: background-color 120ms ease-out;
}

.mud-simple-table table tbody tr:hover,
.mud-simple-table table tbody tr:focus-within,
.mud-table-root .mud-table-body .mud-table-row:hover,
.mud-table-root .mud-table-body .mud-table-row:focus-within {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 32%, transparent) !important;
}

.mud-simple-table table tbody tr:hover > td:first-child,
.mud-simple-table table tbody tr:focus-within > td:first-child,
.mud-table-root .mud-table-body .mud-table-row:hover > td:first-child,
.mud-table-root .mud-table-body .mud-table-row:focus-within > td:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}

/* Certificados (M11): al imprimir una página con un certificado sale solo el documento, en hoja carta horizontal, sin la
   barra, los avisos ni los botones. "Guardar como PDF" es una opción de la ventana de impresión del navegador. */
@page certificado {
    size: letter landscape;
    margin: 10mm;
}

/* Preguntas frecuentes (M19): texto plano con sus saltos de línea; cada pregunta se abre sin JavaScript (details). */
.texto-con-saltos {
    white-space: pre-line;
}

.pregunta-frecuente {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0.6rem 0;
}

.pregunta-frecuente summary {
    cursor: pointer;
    font-weight: 600;
}

.pregunta-frecuente p {
    margin: 0.5rem 0 0;
}

@media print {
    body:has(.certificado, .formato-autorizacion, .informe-sere) .mud-appbar,
    body:has(.certificado, .formato-autorizacion, .informe-sere) .panel-lateral,
    body:has(.certificado, .formato-autorizacion) .mud-alert,
    body:has(.certificado, .formato-autorizacion, .informe-sere) .no-imprimir,
    body:has(.certificado, .formato-autorizacion, .informe-sere) #blazor-error-ui {
        display: none !important;
    }

    body:has(.certificado, .formato-autorizacion, .informe-sere) .mud-main-content {
        padding-top: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body:has(.certificado, .formato-autorizacion, .informe-sere) .mud-container {
        max-width: none !important;
        padding: 0 !important;
    }
}

/* Accesibilidad (M26, WCAG 2.1 AA). Texto solo para el lector de pantalla (p. ej. el encabezado de una columna de
   botones o de barras): no se ve, pero se lee. Algunos componentes lo repiten en su CSS; este vale para todos. */
.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* "Saltar al contenido": fuera de la vista hasta que lo alcanza el teclado. */
.saltar-contenido {
    position: absolute;
    left: -10000px;
    top: 0;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 4px;
}

.saltar-contenido:focus {
    left: 1rem;
    top: 1rem;
}

/* El foco del teclado siempre se ve (enlaces, botones, campos propios y de MudBlazor). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.eduvi-campo select:focus-visible,
.eduvi-campo input:focus-visible,
.eduvi-campo textarea:focus-visible,
.campo:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

/* Quien pide menos movimiento en su sistema no ve animaciones ni transiciones. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Señales de espera (decisión 2026-10-01; js/espera.js y BotonProceso): el círculo que gira dentro de un botón, el
   cursor de espera y la barra fina de arriba mientras llega la página. Con movimiento reducido, quedan quietos. */
.eduvi-girando {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.125em;
    animation: eduvi-girar 0.75s linear infinite;
}

@keyframes eduvi-girar {
    to {
        transform: rotate(360deg);
    }
}

.eduvi-procesando {
    pointer-events: none;
    opacity: 0.75;
}

html.eduvi-esperando,
html.eduvi-esperando * {
    cursor: progress !important;
}

html.eduvi-esperando body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--mud-palette-primary), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: eduvi-barra 1.1s ease-in-out infinite;
}

@keyframes eduvi-barra {
    from {
        background-position: -50% 0;
    }

    to {
        background-position: 150% 0;
    }
}

/* El archivo elegido antes de enviar (js/archivos.js y ArchivoElegido): chulo verde, nombre y tamaño. */
.archivo-elegido {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.archivo-elegido svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--mud-palette-success);
}

.archivo-elegido.vacio {
    color: var(--mud-palette-text-secondary);
}

/* Sistema de diseño EDUVI (docs/diseño: el artefacto "Sistema de diseño EDUVI"). Montserrat, la tipografía del manual de
   marca, servida desde el propio servidor (la CSP solo permite fuentes de 'self'). Solo los caracteres latinos: cubren el
   español. Licencia SIL OFL 1.1 en fonts/OFL.txt. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/montserrat-latin.woff2") format("woff2");
}

/* Tokens del sistema que MudBlazor no tiene en su paleta: los fondos suaves de los estados y los radios. Se definen por
   modo sobre el contenedor .eduvi, que lleva data-tema. */
.eduvi {
    --eduvi-radio-control: 8px;
    --eduvi-radio-tarjeta: 12px;
    --eduvi-radio-grande: 16px;
    --eduvi-primario-suave: #e8ebf5;
    --eduvi-exito-suave: #e3f5ea;
    --eduvi-advertencia-suave: #fdf0dc;
    --eduvi-error-suave: #fde8e8;
    --eduvi-info-suave: #e5eefb;
    --eduvi-logro: #f09a3c;
    --eduvi-marino: #212141;
    /* SERE+ en el calendario: verde azulado, distinto del primario, de los estados y de la marca de la institución. */
    --eduvi-sere: #0f766e;
    --eduvi-sere-suave: #d5f2ee;
}

.eduvi[data-tema="oscuro"] {
    --eduvi-primario-suave: #0e2f42;
    --eduvi-exito-suave: #12351f;
    --eduvi-advertencia-suave: #3a2a08;
    --eduvi-error-suave: #3d161b;
    --eduvi-info-suave: #132a4c;
    --eduvi-sere: #2dd4bf;
    --eduvi-sere-suave: #0b3a36;
}

/* Preferencia "Sistema" sin el aviso del navegador (data-sistema): el equipo decide con la consulta de medios, igual que las
   variables de MudBlazor (VariablesModoSistema). Los mismos valores que el modo oscuro de arriba. */
@media (prefers-color-scheme: dark) {
    .eduvi[data-sistema] {
        --eduvi-primario-suave: #0e2f42;
        --eduvi-exito-suave: #12351f;
        --eduvi-advertencia-suave: #3a2a08;
        --eduvi-error-suave: #3d161b;
        --eduvi-info-suave: #132a4c;
        --eduvi-sere: #2dd4bf;
        --eduvi-sere-suave: #0b3a36;
    }
}

/* Tarjetas, paneles y avisos con el radio de tarjeta; botones y campos se quedan con el de control (el del tema). */
.eduvi .mud-main-content .mud-paper:not(.mud-paper-square),
.eduvi .mud-alert,
.eduvi.ingreso .mud-paper {
    border-radius: var(--eduvi-radio-tarjeta);
}

/* Pantalla de ingreso (sistema de diseño EDUVI): la tarjeta centrada en la pantalla sobre un fondo con un brillo suave del
   color de la marca, el logo grande y centrado, y el botón principal más alto. Solo variables del tema: cada institución
   la ve con su marca. */
.eduvi.ingreso {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 480px at 50% -10%, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), transparent 70%),
        var(--mud-palette-background);
}

.eduvi.ingreso > main {
    flex: 1;
    display: flex;
    align-items: center;
}

.eduvi.ingreso .tarjeta-ingreso {
    padding: 40px 36px 32px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.eduvi.ingreso .marca-ingreso {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    text-align: center;
}

/* El título de la tarjeta, debajo del logo. */
.eduvi.ingreso .titulo-ingreso {
    margin-bottom: 20px;
    font-weight: 700;
}

.eduvi.ingreso .tarjeta-ingreso .mud-button-filled-primary {
    min-height: 46px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    .eduvi.ingreso .tarjeta-ingreso {
        padding: 28px 20px 24px;
    }
}

/* Avisos: fondo suave del estado, texto principal y el ícono en el color del estado (el color nunca va solo). */
.eduvi .mud-alert-text-normal,
.eduvi .mud-alert-text-info { background-color: var(--eduvi-info-suave); color: var(--mud-palette-text-primary); }
.eduvi .mud-alert-text-success { background-color: var(--eduvi-exito-suave); color: var(--mud-palette-text-primary); }
.eduvi .mud-alert-text-warning { background-color: var(--eduvi-advertencia-suave); color: var(--mud-palette-text-primary); }
.eduvi .mud-alert-text-error { background-color: var(--eduvi-error-suave); color: var(--mud-palette-text-primary); }
.eduvi .mud-alert-text-info .mud-alert-icon { color: var(--mud-palette-info); }
.eduvi .mud-alert-text-success .mud-alert-icon { color: var(--mud-palette-success); }
.eduvi .mud-alert-text-warning .mud-alert-icon { color: var(--mud-palette-warning); }
.eduvi .mud-alert-text-error .mud-alert-icon { color: var(--mud-palette-error); }

/* Contadores del menú (avisos, pendientes, tickets): pastilla roja con la cifra. */
.contador-menu {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    font-size: 0.75rem;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Cifras que se alinean (indicadores, porcentajes, tablas). */
.cifras-tabulares {
    font-variant-numeric: tabular-nums;
}

/* Tablas del contenido (sistema de diseño, paso 5): esquinas de tarjeta, encabezado de columna en el tono del fondo y
   cifras alineadas. Solo dentro del contenido de las páginas con sesión (no en el certificado imprimible ni en el
   ingreso); las filas con encabezado propio (th scope="row") no cambian. */
.eduvi .mud-main-content .mud-table {
    border-radius: var(--eduvi-radio-tarjeta);
    overflow: hidden;
}

.eduvi .mud-main-content .mud-simple-table table thead th,
.eduvi .mud-main-content .mud-table-head .mud-table-cell {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.eduvi .mud-main-content .mud-simple-table table td,
.eduvi .mud-main-content .mud-table-body .mud-table-cell {
    font-variant-numeric: tabular-nums;
}