/* =====================================================================================
   mpu-acceso.css — PANTALLA DE ACCESO (tanda Acceso, 03-oct-2026)

   Login, ForgotPassword, ResetPassword, Lockout, AccessDenied y el resto de paginas ANONIMAS
   de /Account, dibujadas por Components/Account/Shared/AccesoLayout.razor (sin el marco).
   Reemplaza al estilo viejo morado de site.css (.login-page, ~400 lineas con clases Bootstrap
   que la app no carga).

   Reglas:
   - Solo clases propias mpu-acceso-*; NINGUNA regla sobre .dxbl-* de DevExpress.
   - Colores de mpu-base.css (azul #0A1B3D / #122D5E, dorado #D4A01E). Sin degradados.
   - Las paginas son SSR estaticas con EditForm por POST: los editores interactivos de
     DevExpress no funcionan sin circuito, asi que se estilizan InputText/InputCheckbox nativos.
   - !important solo donde site.css ya pone !important sobre clases globales (.alert-danger,
     .validation-message) que comparten estos elementos.
   (ojo: nunca escribir asterisco seguido de barra dentro de un comentario, lo cierra)
   ===================================================================================== */

/* site.css fija html/body a 100% con overflow oculto (para el marco); la pantalla de acceso
   ocupa ese alto y se desplaza por dentro si la ventana es baja. */
.mpu-acceso {
    flex: 1 1 auto;
    min-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--mpu-azul-900, #0A1B3D);
    border-top: 3px solid var(--mpu-dorado, #D4A01E);
    color: var(--mpu-texto, #16191D);
    font-size: var(--mpu-texto-base, 13px);
}

.mpu-acceso-cabecera {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 16px;
    min-height: 44px;
    box-sizing: border-box;
}

.mpu-acceso-centro {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px;
}

/* ---------- Marca: escudo blanco + nombre de la entidad, sobre el azul ---------- */
.mpu-acceso-marca {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #FFFFFF;
}

.mpu-acceso-escudo {
    width: 52px;
    height: auto;
    flex: 0 0 auto;
}

.mpu-acceso-marca-textos {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mpu-acceso-marca-entidad {
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
}

.mpu-acceso-marca-sistema {
    font-size: 13px;
    color: #C9D3E3;
}

/* ---------- Tarjeta blanca sobria ---------- */
.mpu-acceso-tarjeta {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    background: var(--mpu-superficie, #FFFFFF);
    border-radius: var(--mpu-radio-grande, 4px);
    padding: 24px 28px 22px;
    box-shadow: 0 6px 20px rgba(10, 27, 61, .22);
}

.mpu-acceso-titulo {
    margin: 0 0 4px;
    font-size: var(--mpu-titulo-pagina, 18px);
    font-weight: 600;
    line-height: 24px;
    color: var(--mpu-texto, #16191D);
}

.mpu-acceso-subtitulo {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--mpu-apagado, #6B7580);
}

.mpu-acceso-texto {
    margin: 0 0 14px;
    line-height: 19px;
    color: var(--mpu-secundario, #414A54);
}

/* ---------- Formulario ---------- */
.mpu-acceso-formulario {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.mpu-acceso-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Etiqueta de campo de la guia: 11/700 en mayusculas, gris apagado */
.mpu-acceso-etiqueta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mpu-apagado, #6B7580);
}

.mpu-acceso-entrada {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    color: var(--mpu-texto, #16191D);
    background: var(--mpu-superficie, #FFFFFF);
    border: 1px solid var(--mpu-borde-control, #C9D0D8);
    border-radius: var(--mpu-radio, 3px);
    outline: none;
}

    .mpu-acceso-entrada:hover {
        border-color: var(--mpu-secundario, #414A54);
    }

    .mpu-acceso-entrada:focus {
        border-color: var(--mpu-azul-700, #122D5E);
        box-shadow: 0 0 0 1px var(--mpu-azul-700, #122D5E);
    }

    .mpu-acceso-entrada::placeholder {
        color: #9AA3AD;
    }

    /* Blazor marca .invalid al campo con error; site.css le pone un contorno rojo global. */
    .mpu-acceso-entrada.invalid {
        outline: none;
        border-color: var(--mpu-peligro, #B42318);
    }

.mpu-acceso-casilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--mpu-secundario, #414A54);
    user-select: none;
}

    .mpu-acceso-casilla input[type=checkbox] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--mpu-azul-700, #122D5E);
        cursor: pointer;
    }

/* ---------- Boton principal: azul institucional, sin degradado ---------- */
.mpu-acceso-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    margin-top: 4px;
    padding: 0 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--mpu-azul-700, #122D5E);
    border: 1px solid var(--mpu-azul-700, #122D5E);
    border-radius: var(--mpu-radio, 3px);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

    .mpu-acceso-boton:hover {
        background: var(--mpu-azul-900, #0A1B3D);
        border-color: var(--mpu-azul-900, #0A1B3D);
        color: #FFFFFF;
    }

    .mpu-acceso-boton:focus-visible {
        outline: 2px solid var(--mpu-dorado, #D4A01E);
        outline-offset: 2px;
    }

/* ---------- Mensajes ---------- */
.mpu-acceso .mpu-acceso-error,
.mpu-acceso .validation-message {
    color: var(--mpu-peligro, #B42318) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Resumen de validacion (ValidationSummary con class propia): lista sin vinetas. */
.mpu-acceso-resumen {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .mpu-acceso-resumen:empty {
        display: none;
    }

/* StatusMessage (compartido con /Account/Manage) trae las clases alert-*, que site.css pinta
   con !important; aqui se pinta con el chip de Error/OK de la guia. */
.mpu-acceso .mpu-acceso-mensaje {
    margin: 0 0 14px !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 18px;
    border-radius: var(--mpu-radio, 3px) !important;
}

.mpu-acceso .mpu-acceso-mensaje-danger {
    color: #A94436 !important;
    background: #FBEAE7 !important;
    border: 1px solid #F0C9C2 !important;
}

.mpu-acceso .mpu-acceso-mensaje-success {
    color: #0F6B4C !important;
    background: #E3F4EC !important;
    border: 1px solid #BFE3D2 !important;
}

/* Aviso informativo propio (confirmaciones, bloqueo, acceso denegado) */
.mpu-acceso-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: var(--mpu-radio, 3px);
    line-height: 18px;
    color: var(--mpu-azul-700, #122D5E);
    background: var(--mpu-info-fondo, #E8EDF6);
}

    .mpu-acceso-aviso i {
        margin-top: 2px;
    }

.mpu-acceso-aviso-ok {
    color: #0F6B4C;
    background: #E3F4EC;
}

.mpu-acceso-aviso-error {
    color: #A94436;
    background: #FBEAE7;
}

/* ---------- Enlaces al pie de la tarjeta ---------- */
.mpu-acceso-enlaces {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #E7EAEE;
}

    .mpu-acceso-enlaces a {
        color: var(--mpu-azul-700, #122D5E);
        font-weight: 500;
        text-decoration: none;
    }

        .mpu-acceso-enlaces a:hover {
            text-decoration: underline;
        }

.mpu-acceso-pie {
    padding: 12px 16px 16px;
    text-align: center;
    font-size: 11.5px;
    color: #8E9BB3;
}

/* En pantallas estrechas la tarjeta ocupa el ancho con 16 px de margen. */
@media (max-width: 480px) {
    .mpu-acceso-tarjeta {
        padding: 20px 18px;
    }

    .mpu-acceso-marca-entidad {
        font-size: 15px;
    }
}