/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   BODY
   ========================================================= */

body {
    font-family: Arial, Helvetica, sans-serif;

    background: #f3f5fa;
    color: #1f2937;
}


/* =========================================================
   PAGE
   ========================================================= */

.login-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.login-card {
    width: 100%;
    max-width: 430px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    padding: 36px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   HEADER
   ========================================================= */

.login-header {
    text-align: center;

    margin-bottom: 30px;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    margin-bottom: 30px;
}

.brand h1 {
    color: #111827;

    font-size: 24px;

    letter-spacing: -0.4px;

    margin-bottom: 4px;
}

.brand span {
    color: #6b7280;

    font-size: 13px;
}


/* =========================================================
   TITLE
   ========================================================= */

.login-header h2 {
    color: #111827;

    font-size: 22px;

    letter-spacing: -0.3px;

    margin-bottom: 7px;
}

.login-header p {
    color: #6b7280;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   FORM
   ========================================================= */

.login-form {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.form-group label {
    color: #374151;

    font-size: 13px;
    font-weight: 600;
}

.form-group input {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid #d1d5db;
    border-radius: 10px;

    background: #ffffff;
    color: #111827;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.form-group input::placeholder {
    color: #9ca3af;
}

.form-group input:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* =========================================================
   MESSAGE
   ========================================================= */

.login-message {
    padding: 12px 14px;

    border-radius: 8px;

    font-size: 13px;

    line-height: 1.4;
}

.login-message.error {
    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #991b1b;
}

.login-message.success {
    background: #f0fdf4;

    border: 1px solid #bbf7d0;

    color: #166534;
}


/* =========================================================
   BUTTON
   ========================================================= */

.login-button {
    width: 100%;

    padding: 12px 16px;

    border: none;
    border-radius: 10px;

    background: #2563eb;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.15s,
        box-shadow 0.2s;
}

.login-button:hover {
    background: #1d4ed8;

    transform: translateY(-1px);

    box-shadow:
        0 6px 14px rgba(37, 99, 235, 0.3);
}

.login-button:disabled {
    opacity: 0.7;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 5px;

    margin-top: 24px;

    color: #6b7280;

    font-size: 13px;
}

.login-footer a {
    color: #2563eb;

    font-weight: 600;

    text-decoration: none;
}

.login-footer a:hover {
    color: #1d4ed8;

    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 500px) {

    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 28px 22px;
    }

    .login-footer {
        flex-direction: column;
    }
}
/* Acesso por teclado e navegação rápida — WCAG 2.2. */
.privacy-skip-link { position: fixed; left: 12px; top: -100px; z-index: 3000; padding: 12px 16px; background: #153ba0; color: white; font-weight: 700; border-radius: 8px; }
.privacy-skip-link:focus { top: 12px; }

.auth-contact-footer { margin: 18px auto; width: min(96%, 650px); }
.auth-contact-footer .techlegacy-contact-links { justify-content: center; gap: 4px; }
.auth-contact-footer a { font-size: .8rem; }
.login-page { flex-direction: column; gap: 10px; }