/* ==========================================================================
   login_escola.css — tela de login repaginada (layout split: marca + form)
   As cores vêm do tema da escola: o <body> injeta --lg-primary (cor_primaria)
   e --lg-accent (cor_secundaria); as variações são derivadas via color-mix.
   ========================================================================== */
:root {
    /* Cores da escola (o template sobrescreve no <body>); fallback = padrão do sistema */
    --lg-primary: #0f172a;   /* cor_primaria — painel de marca */
    --lg-accent:  #3b82f6;   /* cor_secundaria — botões / ação */

    /* Variações derivadas (fallback fixo primeiro, color-mix moderno depois) */
    --lg-primary-dark: #0b1120;
    --lg-primary-dark: color-mix(in srgb, var(--lg-primary) 72%, #000);
    --lg-primary-darker: #05070f;
    --lg-primary-darker: color-mix(in srgb, var(--lg-primary) 48%, #000);
    --lg-accent-dark: #2563eb;
    --lg-accent-dark: color-mix(in srgb, var(--lg-accent) 78%, #000);

    --lg-bg: #f1f5f9;

    /* ⚠️ O PAINEL DO FORMULÁRIO É BRANCO, E ISSO NÃO É GOSTO.
       A `--cor-secundaria-tinta` (o token que corrige a cor da marca para
       texto) é calibrada contra `_fundo_suave`, que é quase branco. Varridas
       216 marcas: sobre `#f1f5f9` ela reprova em 11 delas (pior caso 4,32:1);
       sobre branco, em NENHUMA (pior caso 4,73:1). Pintar o painel de cinza
       fazia a garantia de 4,5:1 deixar de valer para 5% das escolas.
       Travado por `usuarios/tests_login_contraste.py`. */
    --lg-form-bg: #ffffff;

    --lg-text: #0f172a;

    /* Era `#64748b`, que mede 4,76:1 sobre BRANCO e 4,34:1 sobre `#f1f5f9` —
       o comentário antigo citava o primeiro número e a tela usava o segundo
       fundo. `#5b6777` dá 5,75:1 sobre branco e 5,25:1 sobre `#f1f5f9`, ou
       seja, passa mesmo que alguém restaure o fundo antigo. */
    --lg-muted: #5b6777;
    --lg-border: #e2e8f0;
    --lg-danger: #dc2626;
}

* { box-sizing: border-box; }

body.lg-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--fonte, 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif);
    color: var(--lg-text);
    background: var(--lg-bg);
}

.lg-page { min-height: 100vh; display: flex; }

/* ── Painel de marca (esquerda) — usa a cor primária da escola ───────────── */
.lg-brand {
    flex: 0 0 45%;
    max-width: 45%;
    background: linear-gradient(160deg, var(--lg-primary) 0%, var(--lg-primary-dark) 55%, var(--lg-primary-darker) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--esp-8, 48px);
    position: relative;
    overflow: hidden;
}
.lg-brand::before,
.lg-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.lg-brand::before { width: 420px; height: 420px; top: -120px; right: -120px; }
.lg-brand::after  { width: 300px; height: 300px; bottom: -100px; left: -80px; }

.lg-brand-inner { position: relative; z-index: 1; text-align: center; max-width: 360px; }
.lg-brand-badge {
    width: 84px; height: 84px; border-radius: 22px;
    background: rgba(255, 255, 255, .15);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-10, 2.5rem); font-weight: 800; margin: 0 auto var(--esp-6, 24px);
    border: 1px solid rgba(255, 255, 255, .25);
}
/* Logomarca da escola: moldura branca garante legibilidade sobre o painel escuro */
.lg-brand-logo-box {
    background: #fff; border-radius: 16px; padding: var(--esp-4, 16px) var(--esp-5, 20px);
    margin: 0 auto var(--esp-6, 24px); display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .4);
}
.lg-brand-logo { max-width: 190px; max-height: 72px; display: block; }
.lg-brand-name { font-size: var(--fs-8, 1.5rem); font-weight: 700; margin: 0 0 var(--esp-2, 8px); line-height: 1.2; }
.lg-brand-tagline { font-size: var(--fs-4, .9rem); opacity: .85; line-height: 1.55; margin: 0; }
.lg-brand-foot {
    position: absolute; bottom: 2rem; left: 0; right: 0;
    text-align: center; font-size: var(--fs-2, .75rem); opacity: .6; z-index: 1;
}

/* ── Painel do formulário (direita) ─────────────────────────────────────── */
.lg-form-panel {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: var(--esp-7, 32px);
    background: var(--lg-form-bg);
}
.lg-card { width: 100%; max-width: 380px; }

.lg-mobile-brand { display: none; }

.lg-welcome { font-size: var(--fs-8, 1.5rem); font-weight: 700; margin: 0 0 var(--esp-1, 4px); }
.lg-sub { color: var(--lg-muted); font-size: var(--fs-4, .9rem); margin: 0 0 var(--esp-6, 24px); }

.lg-alert {
    background: #fef2f2; color: var(--lg-danger);
    border: 1px solid #fecaca; border-radius: 10px;
    padding: var(--esp-3, 12px) var(--esp-4, 16px); font-size: var(--fs-3, .82rem); margin-bottom: var(--esp-5, 20px);
    display: flex; align-items: center; gap: var(--esp-2, 8px);
}

.lg-field { margin-bottom: var(--esp-5, 20px); }
.lg-label { display: block; font-size: var(--fs-3, .82rem); font-weight: 600; color: #334155; margin-bottom: var(--esp-2, 8px); }
.lg-input-wrap { position: relative; display: flex; align-items: center; }
.lg-input-icon { position: absolute; left: .9rem; color: var(--lg-muted); font-size: .9rem; pointer-events: none; }
.lg-input {
    width: 100%; padding: var(--esp-3, 12px) var(--esp-4, 16px) var(--esp-3, 12px) var(--esp-7, 32px);
    border: 1.5px solid var(--lg-border); border-radius: 10px;
    font-size: var(--fs-4, .9rem); color: var(--lg-text); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
/* O anel colorido é o desenho; o `:focus-visible` abaixo é a garantia. Zerar
   o outline sem repor deixa quem navega por teclado sem saber onde está. */
.lg-input:focus {
    outline: none; border-color: var(--lg-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 18%, transparent);
}
.lg-input:focus-visible,
.lg-toggle:focus-visible,
.lg-submit:focus-visible,
.lg-forgot:focus-visible,
.lg-foot--legal a:focus-visible {
    outline: 3px solid var(--cor-secundaria-tinta, #334155);
    outline-offset: 2px;
}
/* ⚠️ O alvo cresce por `min-width`/`min-height`, NÃO por padding: o botão é `position: absolute` dentro do campo, e mais padding empurraria o ícone para fora dele. 44px é o mínimo recomendado para toque. */ .lg-toggle { position: absolute; right: .6rem; background: none; border: none;
    color: var(--lg-muted); cursor: pointer; border-radius: 6px; font-size: var(--fs-4, .9rem);
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
.lg-toggle:hover { color: var(--lg-accent); }

/* ── Botão de acesso — usa a cor secundária (ação) ──────────────────────── */
/* ⚠️ SEM GRADIENTE, E SEM BRANCO FIXO — os dois juntos eram o pior contraste
   da tela: 1,43:1 no satreinamentos e 3,98:1 no colegiosantaafra.
   O gradiente varria da marca até 78% dela, e `texto_contraste` escolhe UMA
   cor de texto para UM fundo. Varridas 216 marcas: com gradiente, 57 não têm
   nenhuma cor que passe nas duas pontas; chapado, sobram 6 (pior 4,26:1).
   `--cor-secundaria-texto` é `texto_contraste(cor_secundaria)` — branco ou
   navy, o que medir mais. Travado por `usuarios/tests_login_contraste.py`. */
.lg-submit {
    width: 100%; padding: var(--esp-3, 12px); margin-top: var(--esp-2, 8px);
    background: var(--lg-accent);
    color: var(--cor-secundaria-texto, #0f172a); font-weight: 700; font-size: var(--fs-4, .9rem);
    border: none; border-radius: 10px; cursor: pointer;
    transition: transform .1s, box-shadow .2s, opacity .2s;
    box-shadow: 0 8px 20px -6px rgba(59, 130, 246, .5);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--lg-accent) 50%, transparent);
    display: flex; align-items: center; justify-content: center; gap: var(--esp-2, 8px);
}
.lg-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.lg-submit:active { transform: translateY(0); }
.lg-submit:disabled { opacity: .7; cursor: default; transform: none; }

.lg-forgot-wrap { text-align: center; margin-top: var(--esp-4, 16px); }
/* ⚠️ NUNCA `var(--lg-accent)` AQUI. Aquele token é a cor secundária da escola
   CRUA; num verde-claro ela mede 1,3:1 sobre o painel — o link some. A tinta
   é a mesma cor corrigida por contraste (`_tinta`, em
   `configuracoes/context_processors.py`), que escurece até 4,5:1 MEDIDOS.
   O sublinhado fica: sem ele, a cor seria o único sinal de que é um link
   (WCAG 1.4.1), e "Esqueci minha senha" é justamente o que mais gera chamado. */
.lg-forgot {
    color: var(--cor-secundaria-tinta, #334155);
    font-size: var(--fs-3, .82rem);
    text-decoration: underline;
}
.lg-forgot:hover { color: var(--cor-primaria, #0f172a); }

.lg-foot { text-align: center; margin-top: var(--esp-6, 24px); font-size: var(--fs-2, .75rem); color: var(--lg-muted); }
.lg-foot i { color: #16a34a; }
/* Linha do documento legal, logo abaixo do selo de conexão segura: margem
   menor (dois `.lg-foot` empilhados abririam quase 3rem entre as linhas) e
   link explícito — sem regra própria ele herdaria o azul padrão do navegador,
   que briga com a cor da escola. #64748b sobre branco mede 4,76:1. */
.lg-foot--legal { margin-top: var(--esp-2, 8px); }
.lg-foot--legal a { color: var(--lg-muted); text-decoration: underline; }
.lg-foot--legal a:hover { color: var(--cor-primaria, #0f172a); }

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .lg-brand { display: none; }
    .lg-form-panel { padding: var(--esp-6, 24px); }
    .lg-mobile-brand {
        display: flex; flex-direction: column; align-items: center;
        text-align: center; margin-bottom: var(--esp-6, 24px);
    }
    .lg-mobile-badge {
        width: 60px; height: 60px; border-radius: 16px;
        background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-dark));
        color: #fff; display: flex; align-items: center; justify-content: center;
        font-size: var(--fs-8, 1.5rem); font-weight: 800; margin-bottom: var(--esp-3, 12px);
    }
    .lg-mobile-name { font-weight: 700; font-size: var(--fs-6, 1.15rem); }
    .lg-mobile-logo { max-width: 170px; max-height: 58px; margin: 0 auto var(--esp-3, 12px); display: block; }
}

/* ── Entrar pelo celular ──────────────────────────────────────────────────
   Bloco ADITIVO da tela de login: nasce escondido e só aparece com JS (ver
   login_celular.js). Sem script, a tela é exatamente a de antes. */
.lg-cel-wrap { margin-top: var(--esp-4, 16px); text-align: center; }
.lg-cel-abrir {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2, 8px);
    width: 100%;
    justify-content: center;
    padding: var(--esp-3, 12px) var(--esp-4, 16px);
    /* Contorno, não preenchido: entrar com senha continua sendo a ação
       primária desta tela, e dois botões cheios disputariam o clique — o
       defeito já medido no wizard de portfólios. */
    background: transparent;
    border: 1px solid var(--lg-border, #cbd5e1);
    border-radius: 10px;
    color: var(--cor-primaria, #0f172a);
    font-size: var(--fs-4, .9rem);
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}
.lg-cel-abrir:hover { border-color: var(--cor-secundaria, #3b82f6); }

/* ── Entrar com a conta da rede (Painel V2) ─────────────────────────────
   Mesmo contorno do "entrar pelo celular": a senha da escola segue sendo a
   ação primária. Só aparece em escola habilitada (paineis_login). */
.lg-rede-wrap { margin-top: var(--esp-3, 12px); text-align: center; }
.lg-rede-abrir { text-decoration: none; }
.lg-rede-dica { margin: var(--esp-2, 8px) 0 0; color: var(--txt-3, #5b6777); font-size: var(--fs-2, .75rem); }

.lg-cel {
    margin-top: var(--esp-4, 16px);
    border: 1px solid var(--lg-border, #cbd5e1);
    border-radius: 12px;
    padding: var(--esp-4, 16px);
    background: #fff;
}
.lg-cel__topo { display: flex; align-items: center; justify-content: space-between; }
.lg-cel__tit { font-weight: 700; color: var(--cor-primaria, #0f172a); }
.lg-cel__fechar {
    background: none; border: 0; cursor: pointer;
    color: var(--lg-muted, #64748b);
    width: 32px; height: 32px; border-radius: 8px;
}
.lg-cel__fechar:hover { background: #f1f5f9; }

.lg-cel__abas { display: flex; gap: var(--esp-2, 8px); margin: var(--esp-3, 12px) 0; }
.lg-cel__aba {
    flex: 1;
    padding: var(--esp-2, 8px) var(--esp-2, 8px);
    border: 1px solid var(--lg-border, #cbd5e1);
    border-radius: 999px;
    background: #fff;
    font-size: var(--fs-3, .82rem);
    font-weight: 600;
    color: var(--lg-muted, #64748b);
    cursor: pointer;
    min-height: 40px;
}
.lg-cel__aba--on {
    border-color: var(--cor-secundaria, #3b82f6);
    background: var(--cor-secundaria-suave, #eff6ff);
    color: var(--cor-secundaria-tinta, #2563eb);
}

/* O QR precisa de fundo branco e margem próprios: câmera lê mal código
   colado na borda ou sobre cor. A `border` do `qrcode` já dá a zona quieta;
   isto garante que nada do tema encoste nela. */
.lg-cel__qr {
    display: grid;
    place-items: center;
    min-height: 232px;
    padding: var(--esp-2, 8px);
    background: #fff;
    border-radius: 10px;
}
.lg-cel__qr img { width: 208px; height: 208px; image-rendering: pixelated; }
.lg-cel__carregando { font-size: var(--fs-3, .82rem); color: var(--lg-muted, #64748b); }

.lg-cel__passos { margin: var(--esp-3, 12px) 0 0; font-size: var(--fs-3, .82rem); color: var(--lg-muted, #64748b); }
.lg-cel__enviar {
    width: 100%;
    margin-top: var(--esp-3, 12px);
    padding: var(--esp-3, 12px) var(--esp-4, 16px);
    border: 0;
    border-radius: 10px;
    background: var(--cor-primaria, #0f172a);
    color: var(--cor-primaria-texto, #fff);
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}
.lg-cel__enviar:disabled { opacity: .6; cursor: default; }

.lg-cel__estado { margin: var(--esp-3, 12px) 0 0; font-size: var(--fs-3, .82rem); min-height: 1.2em; }
.lg-cel__estado--aguardando { color: var(--lg-muted, #64748b); }
.lg-cel__estado--ok { color: #15803d; font-weight: 600; }
/* Âmbar para "expirou" (é só refazer) e vermelho para "recusado" — este
   último pode significar que alguém tentou entrar como você. */
.lg-cel__estado--aviso { color: #92400e; }
.lg-cel__estado--erro { color: #b91c1c; font-weight: 600; }