/* Tela de login — página própria (casca em etapas, 28/09/2026).
   Extraída do style.css: variáveis de tema + regras .login-*. Única CSS servida sem sessão. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* Transitions */
    --transition-speed: 0.3s;
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Global Brand Colors (Constant across themes) */
    --brand-red: #d11a2a;
    --brand-red-hover: #b01421;
    --brand-red-alpha: rgba(209, 26, 42, 0.1);
    --brand-black: #111111;

    /* Campo em edição. O vermelho da marca marca AÇÃO e ERRO no painel inteiro (botão
       primário, aviso, saldo negativo); num campo focado ele lia como "deu problema aqui".
       O azul é neutro, e é o mesmo tom que a grade de Diluição usa para o percentual
       lançado. Token único: todo :focus de campo aponta para cá, e trocar a cor é trocar
       esta linha, não as vinte regras espalhadas pela folha. */
    --foco-campo: #2563eb;
    --foco-campo-alpha: rgba(37, 99, 235, 0.14);
    /* Fundo de campo obrigatório ainda vazio: rosa bem claro, para o vermelho da borda ler
       como PENDÊNCIA e não como erro de digitação. */
    --campo-pendente-fundo: #fef2f2;
}

/* Light Theme Variables */
[data-theme="light"] {
    --bg-primary: #f5f7fb;
    --bg-secondary: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-input: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    --sidebar-shadow: 4px 0 25px rgba(0, 0, 0, 0.02);

    --badge-bg-pending: rgba(245, 158, 11, 0.1);
    --badge-text-pending: #d97706;
    --badge-bg-success: rgba(16, 185, 129, 0.1);
    --badge-text-success: #059669;
    --badge-bg-error: rgba(239, 68, 68, 0.1);
    --badge-text-error: #dc2626;

    /* Séries do gráfico de tributação (paleta categórica, ordem fixa: uma cor por tributo, a
       mesma ordem da tabela de alíquotas e do empilhamento). Validadas contra a superfície do
       cartão (#ffffff) para separação sob daltonismo. */
    --trib-serie-irpj: #2a78d6;
    --trib-serie-csll: #eb6834;
    --trib-serie-pis: #1baf7a;
    --trib-serie-cofins: #eda100;
    --trib-serie-iss: #e87ba4;
    /* Encargos da folha: roxo e petróleo, fora da faixa quente/fria dos cinco tributos sobre
       faturamento — a diferença de origem tem de se ver na pilha sem precisar da legenda. */
    --trib-serie-inss: #7c5cd6;
    --trib-serie-fgts: #0f8f9e;
    /* Linha do faturamento acumulado em 12 meses: verde mais escuro que o PIS, e linha em vez
       de coluna — a forma já separa as duas séries. */
    --trib-linha-fat12m: #00c853;
    /* Azul da coluna VERIFICAÇÃO: divergência para baixo (pago a menos). */
    --trib-verif-azul: #2a78d6;
    /* Locação (Tributação › Faturamentos › Prestadas): azul, para não competir com o verde
       de ativa nem com o vermelho de cancelada. */
    --badge-bg-locacao: rgba(59, 130, 246, 0.12);
    --badge-text-locacao: #2563eb;

    --sidebar-active-bg: rgba(209, 26, 42, 0.08);
    --sidebar-active-text: var(--brand-red);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    /* Azul mais claro no escuro, pelo mesmo motivo dos percentuais da grade: #2563eb
       some contra o #121824 dos cartões. */
    --foco-campo: #60a5fa;
    --campo-pendente-fundo: rgba(209, 26, 42, 0.16);
    --foco-campo-alpha: rgba(96, 165, 250, 0.18);

    --bg-primary: #0b0f17;
    --bg-secondary: #121824;
    --bg-sidebar: #0f1420;
    --bg-input: #1b2336;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #1e293b;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --sidebar-shadow: 4px 0 25px rgba(0, 0, 0, 0.2);

    --badge-bg-pending: rgba(245, 158, 11, 0.15);
    --badge-text-pending: #fbbf24;
    --badge-bg-success: rgba(16, 185, 129, 0.15);
    --badge-text-success: #34d399;
    --badge-bg-error: rgba(239, 68, 68, 0.15);
    --badge-text-error: #f87171;

    /* Mesmos cinco matizes, com o passo próprio do tema escuro (medido contra #121824). */
    --trib-serie-irpj: #3987e5;
    --trib-serie-csll: #d95926;
    --trib-serie-pis: #199e70;
    --trib-serie-cofins: #c98500;
    --trib-serie-iss: #d55181;
    --trib-serie-inss: #8f72e0;
    --trib-serie-fgts: #17a3b3;
    --trib-linha-fat12m: #2ee66b;
    --trib-verif-azul: #3987e5;
    --badge-bg-locacao: rgba(59, 130, 246, 0.2);
    --badge-text-locacao: #7cb0ff;

    --sidebar-active-bg: rgba(209, 26, 42, 0.18);
    --sidebar-active-text: #ff4a5a;
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    overflow: hidden;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Logo por tema: claro no tema claro, "LOGO DARAUJO ESCURO" no tema escuro */
:root:not([data-theme="dark"]) .logo-escuro {
    display: none !important;
}

[data-theme="dark"] .logo-claro {
    display: none !important;
}

.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 25000;
    display: flex;
    
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(209, 26, 42, 0.12), transparent 60%),
        var(--bg-primary);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 32px 30px;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.login-brand img {
    max-width: 190px;
    width: 100%;
    height: auto;
}

.login-brand-sub {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.login-step {
    display: none;
    flex-direction: column;
}

.login-step.active {
    display: flex;
}

.login-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.login-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 20px;
    line-height: 1.5;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.login-field>span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.login-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.login-field input:focus {
    border-color: var(--foco-campo);
    box-shadow: 0 0 0 3px var(--foco-campo-alpha);
}

.login-senha-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-senha-wrap input {
    padding-right: 44px;
}

.login-eye {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    opacity: 0.6;
    padding: 6px;
}

.login-eye:hover {
    opacity: 1;
}

.login-codigo-input {
    letter-spacing: 0.28em;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.25rem !important;
    font-weight: 700;
}

/* O placeholder não deve herdar o tamanho/espaçamento do código digitado */
.login-codigo-input::placeholder {
    font-size: 0.9rem;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 400;
}

.login-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 18px;
    cursor: pointer;
}

.login-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-red);
}

.login-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--brand-red);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

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

.login-btn:active {
    transform: translateY(1px);
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.login-btn-confirmar {
    margin-top: 10px;
}

.login-link {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--brand-red);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 0 0;
    text-align: center;
}

.login-link:hover {
    text-decoration: underline;
}

.login-inline-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.login-alert {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    margin-bottom: 18px;
    line-height: 1.4;
}

.login-alert.erro {
    background: var(--badge-bg-error);
    color: var(--badge-text-error);
}

.login-alert.ok {
    background: var(--badge-bg-success);
    color: var(--badge-text-success);
}

.login-alert.info {
    background: var(--brand-red-alpha);
    color: var(--brand-red);
}

.senha-policy {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 6px;
}

.senha-policy li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    transition: color .15s;
}

.senha-policy li .pol-icon {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.senha-policy li.ok {
    color: var(--badge-text-success);
}

.senha-policy li.ok .pol-icon::before {
    content: "✔";
}

.senha-policy li.ok .pol-icon {
    font-size: 0;
}

.senha-policy li.ok .pol-icon::before {
    font-size: 0.9rem;
}


body { overflow: auto; }