/* ═══════════════════════════════════════════════════════════════════
   login.css — Tela de acesso · Convertia
   Identidade visual "Quietude" · Sage teal sobre fundo creme
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --c-brand:        #4A8B8E;
    --c-brand-600:    #3E767A;
    --c-brand-700:    #2F5F62;
    --c-brand-50:     #EEF6F6;
    --c-bg:           #F7F5F0;
    --c-surface:      #FFFFFF;
    --c-border:       #E5DFD0;
    --c-border-strong:#D2C9B5;
    --c-text:         #2A2D33;
    --c-text-muted:   #6E6F76;
    --c-text-dim:     #9A9BA0;
    --c-danger:       #C26F65;
    --c-danger-50:    #F8EFEC;
    --c-danger-100:   #F1DCD7;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--c-text);
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(74,139,142,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(201,150,80,.08), transparent 60%),
        var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
    padding: 24px;
}

.login-box {
    width: 100%;
    max-width: 400px;
}

/* ── Logo / monograma ─────────────────────────────────────────── */
.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo .ico {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-600) 100%);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(74,139,142,.32),
                inset 0 1px 0 rgba(255,255,255,.18);
}
.login-logo .ico svg {
    width: 36px;
    height: 36px;
}

.login-logo strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.login-logo span {
    display: block;
    font-size: 11px;
    color: var(--c-text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Card ─────────────────────────────────────────────────────── */
.login-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 32px;
    box-shadow:
        0 1px 2px rgba(42,45,51,.04),
        0 12px 40px rgba(42,45,51,.08);
}

.login-card-titulo {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 6px;
    letter-spacing: -0.015em;
}
.login-card-sub {
    font-size: 13px;
    color: var(--c-text-muted);
    margin: 0 0 24px;
    line-height: 1.5;
}

/* ── Formulário ────────────────────────────────────────────────── */
.form-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    display: block;
}

.form-control {
    width: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text);
    font-size: 13.5px;
    padding: 10px 14px;
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-family: inherit;
}
.form-control::placeholder { color: var(--c-text-dim); }
.form-control:focus {
    outline: 0;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(74,139,142,.18);
    background: var(--c-surface);
    color: var(--c-text);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-check-input {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    width: 16px; height: 16px;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--c-brand);
    border-color: var(--c-brand);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(74,139,142,.18);
    border-color: var(--c-brand);
}
.form-check-label {
    color: var(--c-text-muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.btn-entrar {
    width: 100%;
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-600) 100%);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    margin-top: 12px;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(74,139,142,.30);
    font-family: inherit;
}
.btn-entrar:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(74,139,142,.40);
}
.btn-entrar:active { transform: translateY(0); }

/* ── Alerta de erro ───────────────────────────────────────────── */
.alerta {
    background: var(--c-danger-50);
    border: 1px solid var(--c-danger-100);
    color: #8B463E;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alerta i { color: var(--c-danger); font-size: 15px; }

/* ── Rodapé discreto ──────────────────────────────────────────── */
.login-rodape {
    text-align: center;
    margin-top: 24px;
    font-size: 11.5px;
    color: var(--c-text-dim);
    letter-spacing: 0.02em;
}
.login-rodape strong { color: var(--c-text-muted); font-weight: 600; }