/* =================================================================
   TecTributo — Login Page  |  Bold Fiscal (Direção C)
   Tokens: verde-receita #3ecf8e dark / #0e7c4a light · Manrope + Geist Mono
   Layout: full-screen split — benefícios (esq) + formulário (dir)
   ================================================================= */

/* ─── Keyframes ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @keyframes tt-fade-up {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes tt-card-slide {
        from { opacity: 0; transform: translateX(-12px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes tt-kpi-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes tt-mesh-drift {
        0%   { transform: translate(0, 0); }
        50%  { transform: translate(24px, 18px); }
        100% { transform: translate(0, 0); }
    }
    @keyframes tt-shimmer {
        0%   { background-position: 200% center; }
        100% { background-position: -200% center; }
    }
    @keyframes tt-pulse-amber {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(245,158,11,.5),
                        0 4px 14px rgba(245,158,11,.25);
        }
        60% {
            box-shadow: 0 0 0 8px rgba(245,158,11,0),
                        0 4px 22px rgba(245,158,11,.4);
        }
    }
    @keyframes tt-pulse-amber-light {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(180,83,9,.4),
                        0 4px 14px rgba(180,83,9,.2);
        }
        60% {
            box-shadow: 0 0 0 8px rgba(180,83,9,0),
                        0 4px 22px rgba(180,83,9,.35);
        }
    }
}

/* ─── Design Tokens — dark (padrão) · alinhado ao app do SaaS ────── */
:root {
    --tt-bg:             #13181b;
    --tt-bg-surface:     #1b2225;
    --tt-bg-card:        #1b2225;
    --tt-bg-raised:      #232b2e;
    --tt-fg:             #eef2f1;
    --tt-fg-2:           #ccd4d2;
    --tt-fg-muted:       #9aa6a3;
    --tt-fg-subtle:      #6b7a76;
    --tt-accent:         #3ecf8e;
    --tt-accent-hover:   #5fdba0;
    --tt-accent-dim:     rgba(62,207,142,0.12);
    --tt-accent-border:  rgba(62,207,142,0.30);
    --tt-border:         rgba(228,236,233,0.12);
    --tt-border-mid:     rgba(228,236,233,0.20);
    --tt-cta-bg:         #f59e0b;
    --tt-cta-fg:         #1a0f00;
    --tt-danger:         #ef4444;
    --tt-pulse-name:     tt-pulse-amber;
}

/* ─── Design Tokens — light ───────────────────────────────────────── */
[data-theme="light"] {
    --tt-bg:             #f6f8f6;
    --tt-bg-surface:     #ffffff;
    --tt-bg-card:        #eef2ee;
    --tt-bg-raised:      #e3eae5;
    --tt-fg:             #0a1410;
    --tt-fg-2:           #1a2a22;
    --tt-fg-muted:       #3d5448;
    --tt-fg-subtle:      #5e7569;
    --tt-accent:         #0e7c4a;
    --tt-accent-hover:   #0a6840;
    --tt-accent-dim:     rgba(14,124,74,0.08);
    --tt-accent-border:  rgba(14,124,74,0.25);
    --tt-border:         rgba(10,20,16,0.10);
    --tt-border-mid:     rgba(10,20,16,0.18);
    --tt-cta-bg:         #b45309;
    --tt-cta-fg:         #fff8ee;
    --tt-danger:         #991b1b;
    --tt-pulse-name:     tt-pulse-amber-light;
}

/* ─── Page wrapper — split full-screen ───────────────────────────── */
.tt-login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    background: var(--tt-bg);
    color: var(--tt-fg);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    transition: background .2s, color .2s;
    position: relative;
}

/* ─── Theme toggle ───────────────────────────────────────────────── */
.tt-theme-toggle {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 200;
    background: var(--tt-bg-card);
    border: 1px solid var(--tt-border-mid);
    color: var(--tt-fg-muted);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: border-color .15s, color .15s;
}
.tt-theme-toggle:hover {
    border-color: var(--tt-accent-border);
    color: var(--tt-accent);
}
.tt-theme-toggle svg { width: 16px; height: 16px; }

/* ─── Toggle de partículas — ao lado do toggle de tema ───────────── */
.tt-particles-toggle {
    position: fixed;
    top: 16px;
    right: 64px;
    z-index: 200;
    background: var(--tt-bg-card);
    border: 1px solid var(--tt-border-mid);
    color: var(--tt-fg-muted);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: border-color .15s, color .15s;
}
.tt-particles-toggle:hover {
    border-color: var(--tt-accent-border);
    color: var(--tt-accent);
}
.tt-particles-toggle svg { width: 16px; height: 16px; }

/* Esconde as partículas de fundo quando o usuário desativa */
[data-particles="off"] .tt-particles { display: none; }

/* ════════════════════════════════════════════
   PAINEL ESQUERDO — Benefícios
════════════════════════════════════════════ */
.tt-value-panel {
    position: relative;
    background: var(--tt-bg);
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Mesh gradient animado — glow verde imersivo */
.tt-value-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 0% 0%, rgba(62,207,142,.20), transparent 60%),
        radial-gradient(ellipse 60% 60% at 90% 100%, rgba(62,207,142,.08), transparent);
    pointer-events: none;
    animation: tt-mesh-drift 22s ease-in-out infinite alternate;
}

[data-theme="light"] .tt-value-panel::before {
    background:
        radial-gradient(ellipse 90% 70% at 10% 20%, rgba(14,124,74,.12), transparent),
        radial-gradient(ellipse 60% 60% at 85% 85%, rgba(14,124,74,.05), transparent);
}

/* Grid overlay sutil */
.tt-value-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--tt-fg) 1px, transparent 1px),
        linear-gradient(90deg, var(--tt-fg) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.022;
    pointer-events: none;
}

.tt-value-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

/* Partículas de fundo — presas ao painel, atrás do conteúdo (z-index 1) */
.tt-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Chevron marca-d'água — canto inferior */
.tt-brand-watermark {
    position: absolute;
    right: -70px;
    bottom: -50px;
    width: 380px;
    height: 380px;
    opacity: 0.06;
    z-index: 0;
    pointer-events: none;
}

/* Statement block */
.tt-statement-block {
    max-width: 460px;
    animation: tt-fade-up .4s .09s both;
}

.tt-statement {
    font-size: clamp(28px, 3vw, 46px);
    font-weight: 900;
    letter-spacing: -0.035em;
    text-transform: lowercase;
    line-height: 1.08;
    color: var(--tt-fg);
    margin: 0;
}

/* Selos de compliance — rodapé do painel */
.tt-seals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    animation: tt-fade-up .5s .18s both;
}

/* Logo */
.tt-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 52px;
    animation: tt-fade-up .3s cubic-bezier(.4,0,.2,1) both;
}

.tt-wordmark {
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.04em;
}
.tt-wm-tec     { color: var(--tt-fg); }
.tt-wm-tributo { color: var(--tt-accent); }

/* Eyebrow + Headline */
.tt-value-eyebrow {
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tt-accent);
    margin-bottom: 14px;
    animation: tt-fade-up .35s .06s both;
}

.tt-value-headline {
    font-size: clamp(24px, 2.8vw, 38px);
    font-weight: 900;
    letter-spacing: -0.045em;
    text-transform: lowercase;
    line-height: 1.05;
    color: var(--tt-fg);
    margin-bottom: 12px;
    animation: tt-fade-up .4s .09s both;
}
.tt-hl { color: var(--tt-accent); }

.tt-value-sub {
    font-size: 14px;
    color: var(--tt-fg-muted);
    line-height: 1.65;
    max-width: 380px;
    margin-bottom: 36px;
    animation: tt-fade-up .45s .12s both;
}

/* ════════════════════════════════════════════
   PAINEL DIREITO — Formulário
════════════════════════════════════════════ */
.tt-form-panel {
    background: var(--tt-bg-surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 56px 48px;
    border-left: 1px solid var(--tt-border-mid);
    position: relative;
}

.tt-form-inner {
    width: 100%;
    max-width: 320px;
}

.tt-form-eyebrow {
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tt-accent);
    margin-bottom: 10px;
    animation: tt-fade-up .35s .12s both;
}

.tt-form-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-transform: lowercase;
    color: var(--tt-fg);
    margin: 0 0 8px;
    line-height: 1.1;
    animation: tt-fade-up .4s .14s both;
}

.tt-form-rule {
    width: 24px;
    height: 2px;
    background: var(--tt-accent);
    border-radius: 2px;
    margin-bottom: 20px;
    animation: tt-fade-up .4s .15s both;
}

.tt-subtitle {
    font-size: 13px;
    color: var(--tt-fg-muted);
    margin: 0 0 28px;
    line-height: 1.6;
    animation: tt-fade-up .45s .16s both;
}

/* ─── Form ────────────────────────────────────────────────────────── */
.tt-form { width: 100%; }

.tt-field {
    margin-bottom: 14px;
    animation: tt-fade-up .5s .18s both;
}

.tt-label {
    display: block;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tt-fg-muted);
    margin-bottom: 6px;
}

.tt-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.tt-input {
    width: 100%;
    background: var(--tt-bg-card);
    border: 1px solid var(--tt-border-mid);
    color: var(--tt-fg);
    padding: 12px 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.tt-input::placeholder { color: var(--tt-fg-subtle); }
.tt-input:focus {
    border-color: var(--tt-accent);
    box-shadow: 0 0 0 3px var(--tt-accent-dim);
}

/* Password field — with toggle button */
.tt-field .tt-input-wrap .tt-input {
    padding-right: 44px;
}

.tt-toggle-pw {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    color: var(--tt-fg-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 16px;
    transition: color .15s;
}
.tt-toggle-pw:hover { color: var(--tt-fg-muted); }

/* ─── Error states ────────────────────────────────────────────────── */
.tt-error {
    display: block;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 11px;
    color: var(--tt-danger);
    margin-top: 5px;
    padding-left: 2px;
}

.tt-error-banner {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    color: var(--tt-danger);
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border-radius: 4px;
    animation: tt-fade-up .4s both;
}
.tt-error-banner i { font-size: 16px; flex-shrink: 0; }

/* ─── ENTRAR button — verde sólido (ação primária) ──────────────── */
.tt-btn-login {
    width: 100%;
    background: var(--tt-accent);
    color: var(--tt-bg);
    border: 1px solid var(--tt-accent);
    border-radius: 8px;
    padding: 13px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    margin-top: 4px;
    transition: background .15s, border-color .15s;
    animation: tt-fade-up .5s .2s both;
}
.tt-btn-login:hover:not(:disabled) {
    background: var(--tt-accent-hover);
    border-color: var(--tt-accent-hover);
}
.tt-btn-login:disabled {
    opacity: .5;
    cursor: not-allowed;
}

[data-theme="light"] .tt-btn-login {
    color: #ffffff;
}

/* ─── Divider OR ──────────────────────────────────────────────────── */
.tt-divider-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    animation: tt-fade-up .55s .22s both;
}
.tt-div-line { flex: 1; height: 1px; background: var(--tt-border-mid); }
.tt-div-txt {
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 9px;
    color: var(--tt-fg-subtle);
    letter-spacing: .1em;
}

/* ─── Links ───────────────────────────────────────────────────────── */
.tt-link-text {
    font-size: 12px;
    color: var(--tt-fg-muted);
    text-align: center;
    animation: tt-fade-up .6s .24s both;
}
.tt-link-text a { color: var(--tt-accent); text-decoration: none; font-weight: 600; }
.tt-link-text a:hover { text-decoration: underline; }

/* ─── Compliance badges ───────────────────────────────────────────── */
.tt-compliance {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 28px;
    animation: tt-fade-up .65s .26s both;
}
.tt-cbadge {
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tt-fg-subtle);
    border: 1px solid var(--tt-border);
    padding: 3px 8px;
    border-radius: 2px;
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.tt-form-footer {
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 9px;
    color: var(--tt-fg-subtle);
    text-align: center;
    margin-top: 14px;
    animation: tt-fade-up .7s .28s both;
    letter-spacing: .06em;
}

/* ─── Responsivo ──────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .tt-login-page {
        grid-template-columns: 1fr;
        overflow: auto;
    }
    .tt-value-panel { display: none; }
    .tt-form-panel  { padding: 48px 28px; min-height: 100vh; }
}

/* ─── Manter compatibilidade com Registro ─────────────────────────── */
.tt-registro-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--tt-bg);
}