/* ============================================================================
   GARTH HMS - LOGIN
   Fondo de marca + patrón de llaves + loader orgánico.
   Construido a partir del mockup de Claude Design (ver BRIEF_LOGIN_GARTH.md).
   Ruta destino: wwwroot/css/login/index.css
   ============================================================================ */

/* ========================================
   ESCENARIO (fondo azul oscuro de marca)
   ======================================== */

/* #1A202C es el mismo azul que abre y cierra garth.mx — color de marca
   deliberado, no es parte de la paleta funcional de 1-variables.css porque
   esta pantalla NO debe reaccionar al tema claro/oscuro del sistema. */
.lgn-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A202C;
    padding: 32px 20px;
    overflow: hidden;
}

/* Patrón de llaves de fondo — SVG inline en data-URI, repetido como tapiz.
   Opacidad muy baja a propósito (Sección 3 del Brief): es una textura,
   nunca debe competir con la tarjeta. */
.lgn-pattern {
    position: absolute;
    inset: -10%;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D5A368' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='34' cy='44' r='12'/%3E%3Ccircle cx='34' cy='44' r='4'/%3E%3Cpath d='M46 44 H106'/%3E%3Cpath d='M91 44 V58 M100 44 V55'/%3E%3Cg transform='translate(98 112)'%3E%3Ccircle cx='34' cy='44' r='12'/%3E%3Ccircle cx='34' cy='44' r='4'/%3E%3Cpath d='M46 44 H106'/%3E%3Cpath d='M91 44 V58 M100 44 V55'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.08;
    animation: lgnDrift 70s ease-in-out infinite alternate;
    pointer-events: none;
}

/* ========================================
   TARJETA
   ======================================== */
.lgn-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 404px;
    background: #FFFFFF;
    border-radius: var(--border-radius);
    padding: 48px 42px 30px;
    box-shadow: var(--shadow-xl), 0 4px 14px rgba(0, 0, 0, .18);
    animation: lgnCardIn .42s cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 420px) {
    .lgn-card {
        padding: 38px 26px 24px;
    }
}

.lgn-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
}

.lgn-logo {
    display: block;
    width: auto;
    max-height: 96px;
    height: auto;
}

/* ========================================
   FORMULARIO
   ======================================== */
.lgn-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lgn-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 7px;
}

.lgn-input-wrap {
    position: relative;
}

    .lgn-input-wrap i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa1ab;
        font-size: 14px;
        pointer-events: none;
    }

    .lgn-input-wrap .form-control {
        padding: 13px 14px 13px 40px;
        font-size: 15px;
        border: 1.5px solid #e2e5ea;
        border-radius: var(--border-radius-sm);
    }

        .lgn-input-wrap .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(43, 164, 154, .16);
        }

.lgn-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 14px;
    color: #4a5260;
    font-weight: 500;
    user-select: none;
    margin-top: 2px;
}

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

/* ========================================
   BOTÓN + LOADER ORGÁNICO
   ======================================== */
.lgn-submit {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    margin-top: 6px;
    box-shadow: var(--shadow-primary);
    transition: var(--transition-fast);
}

    .lgn-submit:hover,
    .lgn-submit:focus {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-primary-lg);
    }

    .lgn-submit:disabled {
        cursor: not-allowed;
        opacity: .85;
        transform: none;
    }

.lgn-blob {
    display: inline-block;
    width: 19px;
    height: 19px;
    background: #fff;
    animation: lgnBlob 1.1s ease-in-out infinite;
}

/* ========================================
   FOOTER
   ======================================== */
.lgn-footer {
    margin-top: 24px;
    text-align: center;
}

    .lgn-footer p {
        font-size: 12.5px;
        font-weight: 500;
        color: #aab0b9;
        letter-spacing: .02em;
        margin: 0;
    }

/* ========================================
   ANIMACIONES
   ======================================== */
@keyframes lgnCardIn {
    from {
        transform: translateY(16px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes lgnBlob {
    0% {
        border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
        transform: scale(.78);
    }

    50% {
        border-radius: 60% 40% 45% 55% / 55% 60% 40% 45%;
        transform: scale(1.06);
    }

    100% {
        border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
        transform: scale(.78);
    }
}

@keyframes lgnDrift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-46px, -34px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgn-card,
    .lgn-pattern,
    .lgn-blob {
        animation: none !important;
    }
}

/* ========================================
   NEUTRALIZAR MODO OSCURO — A PROPÓSITO
   ========================================
   El sistema guarda la preferencia de tema en localStorage y la aplica en
   TODAS las páginas, incluido el login (antes de autenticar). Esta pantalla
   está diseñada para verse siempre igual sin importar esa preferencia, así
   que aquí SÍ se fijan colores en hex en vez de var(--text-...) / var(--border-color)
   — esas variables cambian de valor bajo [data-theme="dark"] (ver 7-dark-theme.css)
   y romperían el efecto. Los colores de marca (var(--primary), sombras de
   marca, radios de borde) NO se tocan: esos no cambian con el tema.
   ======================================== */
[data-theme="dark"] .lgn-card {
    background: #FFFFFF !important;
}

[data-theme="dark"] .lgn-field label {
    color: #212529 !important;
}

[data-theme="dark"] .lgn-input-wrap i {
    color: #9aa1ab !important;
}

[data-theme="dark"] .lgn-input-wrap .form-control {
    background: #fff !important;
    color: #212529 !important;
    border-color: #e2e5ea !important;
}

    [data-theme="dark"] .lgn-input-wrap .form-control:focus {
        background: #fff !important;
        border-color: var(--primary) !important;
    }

[data-theme="dark"] .lgn-remember {
    color: #4a5260 !important;
}

[data-theme="dark"] .lgn-footer p {
    color: #aab0b9 !important;
}