/* Parte 2 de 3 de login.css (tarea 4.6, 03/10/2026): casilla, mensajes,
   indicadores, animaciones y estilos del formulario. Se carga después de
   login.css y antes de login-responsive.css; las partes y su orden viven en
   AssetHelper::HOJAS_PARTIDAS. */

/* Iconos de identificación y acceso; los textos mantienen el nombre accesible. */
.login-box .form-label > .app-icon {
    font-size: 16px;
    color: var(--login-azul);
    margin-right: 0.2rem;
}

.login-box .login-submit-icon {
    font-size: 18px;
    margin-right: 0.5rem;
}

#loginForm[aria-busy="true"] .login-submit-icon {
    display: none;
}

/* === Checkbox mejorado con área táctil grande === */
.login-box .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    margin: 0 0 1rem;
    border: 1px solid rgba(30, 58, 138, 0.12);
    border-radius: 12px;
    background: linear-gradient(135deg, #fbfcff 0%, #f4f7fb 100%);
    transition: background var(--login-transition-smooth),
                border-color var(--login-transition-smooth),
                box-shadow var(--login-transition-smooth);
}

.login-box .form-check:hover {
    background: var(--surface);
    border-color: rgba(25, 135, 84, 0.35);
    box-shadow: 0 3px 10px rgba(30, 58, 138, 0.08);
}

.login-box .form-check-input {
    width: 22px;
    height: 22px;
    margin: 1px 0 0 0;
    margin-left: 0; /* Neutraliza offset de Bootstrap */
    float: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #b7c1cd;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--surface) 0%, #f5f7fa 100%);
    transition: border-color var(--login-transition-smooth),
                background var(--login-transition-smooth),
                box-shadow var(--login-transition-smooth);
    flex-shrink: 0;
    box-sizing: border-box;

    /* Shadow sutil */
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

.login-box .form-check-input:hover {
    border-color: var(--login-verde);
    box-shadow:
        0 0 0 3px var(--login-verde-light),
        inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.login-box .form-check-input:checked {
    background-color: var(--login-verde);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='M5 12.5l4.2 4.2L19.5 6.5'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #20a464 0%, var(--state-success-hover) 100%);
    background-size: 82% 82%, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat;
    border-color: var(--login-verde);
    box-shadow:
        0 3px 9px rgba(25, 135, 84, 0.32),
        inset 0 1px 2px rgba(0, 0, 0, 0.1);
    animation: checkboxBounce 0.3s ease-out;
}

@keyframes checkboxBounce {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.login-box .form-check-input:focus {
    outline: none;
    box-shadow:
        0 0 0 4px var(--login-verde-light),
        inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.login-box .form-check-label {
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    color: var(--login-gris);
    margin-bottom: 0;
    transition: color var(--login-transition-smooth);
    line-height: 1.5;
}

.login-box .form-check-input:checked + .form-check-label {
    color: #146c43;
}

/* === Mensajes de validación inline en el label === */
.validation-message {
    font-size: 0.68rem;
    font-weight: 400;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    white-space: nowrap;
    min-height: 1.2em;
}

.validation-message:not(:empty) {
    opacity: 0.9;
}

.validation-message .app-icon {
    font-size: 0.6rem;
    margin-right: 2px;
}

/* Load-bearing las dos: `text-danger` y `text-success` son utilities de
   Bootstrap y en Bootstrap 5 las utilities de color llevan `!important`.

   Cuidado con la de exito: quitarle la bandera NO cambia nada a la vista,
   porque --login-verde vale lo mismo que el verde de Bootstrap (#198754).
   Pero la regla queda INERTE y el color pasa a salir por coincidencia; si
   Bootstrap cambiara su verde, el login lo seguiria en silencio. Medido:
   sin bandera, la de peligro salta de #ba020e a #dc3545. */
.validation-message.text-danger {
    color: var(--login-rojo) !important;
}

.validation-message.text-success {
    color: var(--login-verde) !important;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.85; }
}

/* === Área de errores === */
.error-alert-container {
    /* Sin error no ocupa espacio. El aviso expande su altura suavemente. */
    display: grid;
    grid-template-rows: 0fr;
    margin-bottom: 0;
    transition: grid-template-rows 0.2s ease-out, margin-bottom 0.2s ease-out;
}

.error-alert-container.has-error {
    grid-template-rows: 1fr;
    margin-bottom: 0.75rem;
}

.login-error-content {
    min-height: 0;
    overflow: hidden;
}

.error-alert-container .alert {
    border: none;
    border-left: 4px solid var(--login-rojo);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(186, 2, 14, 0.08) 0%, rgba(186, 2, 14, 0.03) 100%);
    animation: loginErrorFade 0.18s ease-out;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
}

.error-alert-container .alert[hidden] {
    display: none;
}

@keyframes loginErrorFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === Indicador de seguridad === */
.security-indicator {
    margin-top: 1.25rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    color: var(--login-gris);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(25, 135, 84, 0.05);
    border: 1px solid rgba(25, 135, 84, 0.1);
    transition: all var(--login-transition-smooth);
}

.security-indicator .app-icon {
    color: var(--login-verde);
    font-size: 1.05rem;
    animation: securePulse 2.5s ease-in-out infinite;
}

.security-indicator:hover {
    background: rgba(25, 135, 84, 0.1);
    color: var(--login-verde);
    border-color: rgba(25, 135, 84, 0.2);
}

@keyframes securePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

/* === Field hints mejorados === */
.field-hint {
    font-size: 0.78rem;
    color: var(--login-gris);
    margin-top: 0.4rem;
    text-align: left;
    padding: 0.4rem 0.6rem;
    background: rgba(30, 58, 138, 0.03);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2em; /* Altura mínima */
    box-sizing: border-box;
    transition: background var(--login-transition-smooth);
}

.field-hint > .app-icon {
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--login-azul);
    opacity: 0.6;
    flex-shrink: 0;
}

.field-hint:hover {
    background: rgba(30, 58, 138, 0.06);
}

/* === Estilos del formulario (tema único) === */
/* Inputs - Fondo gris claro para mejor contraste */
body .login-box input.form-control,
body .login-box .form-control {
    background-color: var(--surface-2);
    background-image: none;
    border: 2px solid var(--border-strong);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

body .login-box input.form-control::placeholder,
body .login-box .form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Hover - Fondo blanco con borde más oscuro */
body .login-box input.form-control:hover,
body .login-box .form-control:hover {
    background-color: var(--surface);
    border-color: #adb5bd;
}

/* Focus - Borde azul con glow */
body .login-box input.form-control:focus,
body .login-box .form-control:focus {
    background-color: var(--surface);
    border-color: var(--brand-900);
    color: var(--text);
    box-shadow:
        0 0 0 3px rgba(30, 58, 138, 0.15),
        inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

/* Input con valor - Fondo blanco con borde azul */
body .login-box input.form-control:not(:placeholder-shown),
body .login-box .form-control:not(:placeholder-shown) {
    background-color: var(--surface);
    background-image: none;
    border-color: var(--brand-900);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(30, 58, 138, 0.05);
}

/* Toggle password button - Mayor contraste */
body .login-box button.toggle-password,
body .toggle-password {
    background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-4) 100%);
    background-color: var(--surface-3);
    background-image: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-4) 100%);
    border: 2px solid var(--border-strong);
    border-left: 1px solid var(--border-strong);
    color: var(--text-soft);
}

body .login-box button.toggle-password:hover,
body .toggle-password:hover {
    background: linear-gradient(135deg, var(--surface-4) 0%, #ced4da 100%);
    background-color: var(--surface-4);
    color: var(--brand-900);
    border-color: #adb5bd;
}

body .login-box .input-group:focus-within button.toggle-password,
body .login-box .input-group:focus-within .toggle-password {
    border-color: var(--brand-900);
    color: var(--brand-900);
}

/* Labels - Color más oscuro para mejor legibilidad */
body .login-box label.form-label,
body .login-box .form-label,
body .login-box label.form-check-label,
body .login-box .form-check-label {
    color: var(--text);
    font-weight: 600;
}

/* Título */
body .login-title,
body h4.login-title {
    background: linear-gradient(135deg, var(--brand-900) 0%, #172554 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Checkbox - Fondo gris claro con borde definido */
body .login-box input.form-check-input,
body .login-box .form-check-input {
    background-color: var(--surface-2);
    background-image: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
    border: 2px solid #b7c1cd;
}

body .login-box input.form-check-input:hover,
body .login-box .form-check-input:hover {
    background-color: var(--surface);
    border-color: var(--state-success);
}

body .login-box input.form-check-input:checked,
body .login-box .form-check-input:checked {
    background-color: var(--state-success);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='M5 12.5l4.2 4.2L19.5 6.5'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #20a464 0%, var(--state-success-hover) 100%);
    background-size: 82% 82%, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat;
    border-color: var(--state-success);
}

body .login-box input.form-check-input:checked + .form-check-label,
body .login-box .form-check-input:checked + .form-check-label {
    color: #146c43;
}

/* Field hints - Mayor contraste */
body div.field-hint,
body .field-hint {
    background-color: rgba(30, 58, 138, 0.08);
    color: var(--text-soft);
    border: 1px solid rgba(30, 58, 138, 0.15);
    font-weight: 500;
}

body div.field-hint::before,
body .field-hint::before {
    color: var(--brand-900);
    opacity: 0.8;
}

/* Security indicator - Mayor contraste */
body div.security-indicator,
body .security-indicator {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--state-success);
    border: 1px solid rgba(25, 135, 84, 0.2);
    font-weight: 500;
}

body div.security-indicator .app-icon,
body .security-indicator .app-icon {
    color: var(--state-success);
}

/* Required indicator */
.required-indicator {
    color: var(--brand-red);
}

/* Load-bearing: `.text-muted` de Bootstrap es `!important` y tiene la misma
   especificidad, asi que sin bandera gana Bootstrap. Medido: el color pasa
   de #6c757d a rgba(33,37,41,.75), que es el contraste que esta regla
   existe para corregir. */
.text-muted {
    color: var(--text-muted) !important;
}

/* Autocompletado del navegador.

   Las cuatro prioridades son load-bearing, y aqui esta la trampa: NINGUNA
   regla CSS del proyecto ni de Bootstrap compite con ellas — todas las que
   tocan box-shadow o border-color en este input son declaraciones normales.
   Quien pinta el fondo amarillo es el propio Chrome, con estilo interno de
   autofill que no aparece en document.styleSheets y que solo cede ante
   `!important`. El truco del box-shadow inset de 1000px es justamente eso:
   tapar un fondo que no se puede sobrescribir con background-color.

   Es decir: una revision que solo mire las hojas concluira que sobran. No
   sobran. El `transition: background-color 5000s` de abajo es la otra mitad
   del mismo apaño y por eso no lleva bandera. */
body .login-box .form-control:-webkit-autofill,
body .login-box .form-control:-webkit-autofill:hover,
body .login-box .form-control:-webkit-autofill:focus,
body .login-box .form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    border-color: var(--brand-900) !important;
    transition: background-color 5000s ease-in-out 0s;
}