/* ===========================================================================
   Pantallas de acceso (login, olvidé mi contraseña, nueva contraseña).

   Componente del kit base MMA integrado en el layout público IGCC. Vive acá
   como CSS estático porque el tema servido de esta aplicación son los archivos
   de public/assets/css (ver CLAUDE.md → Styling): el SCSS no se sirve.

   Lo consumen las tres vistas de resources/views/auth/ vía @push('estilos').
   =========================================================================== */

:root {
    --login-primary: #f06548;
    --login-primary-hover: #c14f3d;
    --login-danger: #E63535;
    --login-text: #374151;
    --login-muted: #6B7280;
    --login-label: #4B5563;
    --login-border: #D1D5DB;
}

.auth-section {
    background: #F9FAFB;
    padding: 4rem 1rem 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Crece para llenar el alto restante bajo el navbar; combinado con el
       sticky footer del layout, el footer queda pegado abajo en cualquier pantalla. */
    flex: 1 0 auto;
}

.login-card {
    background: #fff;
    width: 100%;
    max-width: 410px;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 1px 2px rgba(0, 0, 0, .06);
}

.login-card__body {
    padding: 2rem 1.75rem 1.75rem;
}

.login-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.login-logos img {
    display: block;
    width: auto;
}

.login-logos .logo-mma {
    height: 56px;
}

.login-logos .logo-plataforma {
    height: 46px;
}

/* Encabezado de las pantallas de recuperación. El login no lo usa: ahí los
   logos y el botón ya dicen de qué se trata. */
.login-heading {
    margin: 0 0 .4rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #111827;
}

.login-intro {
    margin: 0 0 1.5rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--login-muted);
}

.login-field {
    margin-bottom: 1rem;
}

.login-field label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--login-label);
    margin-bottom: .5rem;
}

.auth-section .login-field input[type="email"],
.auth-section .login-field input[type="password"],
.auth-section .login-field input[type="text"] {
    width: 100%;
    height: 44px;
    padding: .5rem .75rem;
    font-size: .95rem;
    color: #111827;
    background: #fff;
    border: 1px solid var(--login-border);
    border-radius: .375rem;
    transition: border-color .15s, box-shadow .15s;
}

.auth-section .login-field input:focus {
    outline: none;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(240, 101, 72, .20);
}

.login-field input.is-invalid {
    border-color: var(--login-danger);
}

.login-field__error {
    display: block;
    color: var(--login-danger);
    font-size: .8rem;
    margin-top: .35rem;
}

.login-field__hint {
    display: block;
    color: var(--login-muted);
    font-size: .8rem;
    margin-top: .35rem;
}

/* Campo de contraseña con botón mostrar/ocultar. El input reserva espacio a
   la derecha para que el texto nunca quede debajo del botón. */
.login-password {
    position: relative;
}

.auth-section .login-password input {
    padding-right: 2.75rem;
}

.login-password__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.75rem;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: .375rem;
    color: var(--login-muted);
    cursor: pointer;
}

.login-password__toggle:hover {
    color: var(--login-text);
}

.login-password__toggle:focus-visible {
    outline: 2px solid var(--login-primary);
    outline-offset: -2px;
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.login-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .875rem;
    color: var(--login-text);
    cursor: pointer;
    user-select: none;
}

.login-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--login-primary);
    cursor: pointer;
}

.login-link {
    font-size: .875rem;
    color: var(--login-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--login-primary);
}

.login-link:hover {
    color: var(--login-primary-hover);
    border-color: var(--login-primary-hover);
}

.login-link:focus-visible {
    outline: 2px solid var(--login-primary);
    outline-offset: 2px;
}

.login-btn {
    width: 100%;
    padding: .7rem 1rem;
    border: none;
    border-radius: .375rem;
    background: var(--login-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s;
}

.login-btn:hover {
    background: var(--login-primary-hover);
}

.login-btn:focus-visible {
    outline: 2px solid var(--login-primary-hover);
    outline-offset: 2px;
}

.login-alert {
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #067647;
    border-radius: .375rem;
    padding: .65rem .85rem;
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.login-alert--error {
    background: #fef3f2;
    border-color: #fecdc9;
    color: #b42318;
}

/* Pie de la tarjeta: la vuelta al login desde las pantallas de recuperación. */
.login-foot {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .875rem;
    color: var(--login-muted);
}

@media (max-width: 575.98px) {
    .auth-section {
        padding: 2rem 1rem 3rem;
    }

    .login-card__body {
        padding: 1.75rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .auth-section .login-field input,
    .login-btn {
        transition: none;
    }
}