/* Login do eAtivo ADV, decidido em 03/10/2026 (nota de escopo, seção 8.2; desenho "Opções de login e de logo v06").
   Grafite #1F1F1F na faixa do alto (300 px no computador; a tela toda no celular), cartão branco de 400 px por cima da
   borda da faixa, cantos retos, logo dentro do cartão, campos sublinhados com a linha vermelha de 2 px ao digitar e no
   preenchimento automático, botão vermelho cheio. Só folha de estilo sobre o keycloak.v2: nenhum modelo .ftl alterado.
   Escala 150% (pedido da Ruth, 07/10/2026: a tela de entrada só ficava boa com o navegador em 150%): as medidas abaixo estão no
   tamanho de antes, vezes --ea-escala, como no site (src/Parcerias.UI/wwwroot/parcerias.css); com 1,5, o cartão de 400 px
   fica com 600 px e o botão Entrar de 40 px com 60 px. Para outro tamanho, muda-se só o número, aqui e no site. Os fios de
   1 px e a largura do celular (600 px) não mudam. A textura (js/textura.js) lê o mesmo número. */

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

:root {
    /* A escala de todas as medidas (ver o alto do arquivo). */
    --ea-escala: 1.5;
    --ea-vermelho: #A01B15;
    --ea-vermelho-hover: #7D120E;
    --ea-grafite-fundo: #1F1F1F;
    --ea-grafite: #333333;
    --ea-texto: #484848;
    --ea-cinza: #696969;
    --ea-cinza-claro: #868686;
    --ea-fio: #D7D7D7;
    --ea-linha: #8C8C8C;
    --ea-fundo: #FAFAFA;
    --ea-erro: #CC2921;
    --ea-faixa: calc(300px * var(--ea-escala));
    /* Posição B: a borda de baixo da faixa passa na meia altura do primeiro rótulo do cartão. */
    --ea-topo-do-cartao: calc(188px * var(--ea-escala));
}

/* No celular (tela de até 600 px), a escala volta a 1, como era antes. */
@media (max-width: 600px) { :root { --ea-escala: 1; } }

/* O tamanho de base da página também na escala: o que o PatternFly mede em rem cresce junto. */
html.login-pf { font-size: calc(16px * var(--ea-escala)); }

/* O fundo vai na página inteira (html), para nenhuma margem de dentro empurrar a faixa para baixo. */
html.login-pf { background: linear-gradient(var(--ea-grafite-fundo) 0, var(--ea-grafite-fundo) var(--ea-faixa), var(--ea-fundo) var(--ea-faixa)) no-repeat, var(--ea-fundo) !important; }
html.login-pf body, body#keycloak-bg {
    min-height: 100vh;
    margin: 0;
    background: transparent !important;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    color: var(--ea-grafite);
    --pf-v5-global--FontFamily--text: Roboto, "Segoe UI", Arial, sans-serif;
    --pf-v5-global--FontFamily--heading: Roboto, "Segoe UI", Arial, sans-serif;
    --pf-v5-global--BorderRadius--sm: 0;
    --pf-v5-global--BorderRadius--lg: 0;
    --pf-v5-global--primary-color--100: var(--ea-vermelho);
    --pf-v5-global--primary-color--200: var(--ea-vermelho-hover);
    --pf-v5-global--link--Color: var(--ea-texto);
    --pf-v5-global--link--Color--hover: var(--ea-grafite);
}

/* Rodapé da página */
body#keycloak-bg::after {
    content: "© 2026 eAtivo ADV";
    position: fixed; left: 0; right: 0; bottom: calc(20px * var(--ea-escala));
    text-align: center; font-size: calc(11.5px * var(--ea-escala)); color: var(--ea-cinza);
    pointer-events: none;
}

/* O cabeçalho do keycloak.v2 fica fora do cartão; o logo vai para dentro do cartão (LG2). */
#kc-header { display: none !important; }

.pf-v5-c-login { display: block !important; min-height: 100vh; padding: 0 !important; background: transparent !important; position: relative; z-index: 1; }
.pf-v5-c-login__container { display: block !important; width: calc(400px * var(--ea-escala)); max-width: calc(100% - calc(32px * var(--ea-escala))); margin: 0 auto !important; padding: var(--ea-topo-do-cartao) 0 calc(60px * var(--ea-escala)) !important; grid-template-columns: none !important; }

/* O cartão */
main.pf-v5-c-login__main {
    margin-top: 0 !important;
    padding: calc(36px * var(--ea-escala)) calc(40px * var(--ea-escala)) calc(32px * var(--ea-escala)) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ea-fio);
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
}
main.pf-v5-c-login__main::before {
    content: "";
    display: block;
    height: calc(32px * var(--ea-escala));
    margin: 0 0 calc(30px * var(--ea-escala));
    background: url("../img/eativo-adv.svg") center / contain no-repeat;
}
.pf-v5-c-login__main-header { display: block !important; padding: 0 !important; border-top: 0 !important; margin: 0 !important; }
#kc-page-title { font-size: calc(16px * var(--ea-escala)) !important; font-weight: 500; text-align: center; margin: calc(-14px * var(--ea-escala)) 0 calc(22px * var(--ea-escala)) !important; color: var(--ea-grafite); line-height: 1.3; }
/* No login, sem título: o logo já diz onde a pessoa está. Na troca de senha, "Trocar senha". */
body[data-page-id="login-login"] #kc-page-title { display: none; }
.pf-v5-c-login__main-body { padding: 0 !important; }
.pf-v5-c-login__main-footer { padding: 0 !important; }
.pf-v5-c-login__main-footer:empty { display: none; }

/* Formulário */
.pf-v5-c-form { --pf-v5-c-form--GridGap: calc(16px * var(--ea-escala)); gap: calc(16px * var(--ea-escala)); }
.pf-v5-c-form__group-label { padding-bottom: calc(6px * var(--ea-escala)) !important; }
.pf-v5-c-form__label-text, .pf-v5-c-form__label { font-size: calc(12.5px * var(--ea-escala)) !important; font-weight: 500 !important; color: var(--ea-texto) !important; }
.pf-v5-c-form__label-required { display: none; }

/* Campos sublinhados (C2): a linha de baixo engrossa por borda, e não por sombra */
.pf-v5-c-form-control { background: transparent !important; border-radius: 0 !important; }
.pf-v5-c-form-control::before { border: 0 !important; }
.pf-v5-c-form-control::after { border: 0 !important; }
.pf-v5-c-form-control > input {
    height: calc(38px * var(--ea-escala)); padding: 0 calc(2px * var(--ea-escala)) !important; font-size: calc(14px * var(--ea-escala)) !important; color: var(--ea-grafite) !important;
    background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important;
}
.pf-v5-c-form__group > .pf-v5-c-form-control,
.pf-v5-c-form__group > .pf-v5-c-input-group { border-bottom: 1px solid var(--ea-linha); padding-bottom: 1px; }
.pf-v5-c-form__group > .pf-v5-c-form-control:focus-within,
.pf-v5-c-form__group > .pf-v5-c-input-group:focus-within,
.pf-v5-c-form__group > .pf-v5-c-form-control:has(input:-webkit-autofill),
.pf-v5-c-form__group > .pf-v5-c-input-group:has(input:-webkit-autofill) { border-bottom: calc(2px * var(--ea-escala)) solid var(--ea-vermelho); padding-bottom: 0; }
.pf-v5-c-form__group > .pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form__group > .pf-v5-c-input-group:has(.pf-m-error) { border-bottom: calc(2px * var(--ea-escala)) solid var(--ea-erro); padding-bottom: 0; }
/* Sem o fundo azul que o navegador põe no preenchimento automático */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 calc(1000px * var(--ea-escala)) #FFFFFF inset !important;
    -webkit-text-fill-color: var(--ea-grafite) !important;
    caret-color: var(--ea-grafite);
}
.pf-v5-c-input-group { background: transparent; }
.pf-v5-c-form-control__utilities { display: none; }

/* O olho da senha: pequeno e de contorno */
.pf-v5-c-button.pf-m-control { background: transparent !important; border: 0 !important; width: calc(34px * var(--ea-escala)); height: calc(38px * var(--ea-escala)); padding: 0 !important; color: var(--ea-cinza-claro) !important; }
.pf-v5-c-button.pf-m-control::after { border: 0 !important; }
.pf-v5-c-button.pf-m-control i { font-size: calc(15px * var(--ea-escala)); }
.pf-v5-c-button.pf-m-control:hover { color: var(--ea-texto) !important; }

/* Mensagens de erro */
.pf-v5-c-helper-text__item-text.pf-m-error, .pf-v5-c-helper-text__item.pf-m-error { color: var(--ea-erro) !important; font-size: calc(12px * var(--ea-escala)); }
.pf-v5-c-alert { border-radius: 0 !important; font-size: calc(12.5px * var(--ea-escala)); }

/* Caixa de marcar ("Encerrar a sessão nos outros aparelhos"). TE-04 (Ruth, 05/10/2026, opção 1), como no sistema: caixa cheia,
   branca com a borda vermelha de 2 px; marcada, toda vermelha, com o visto branco. TE-06 (Ruth, 07/10/2026, opção D, em todas
   as caixas do sistema): quadrada, sem arredondar, de 16 px, como no sistema (antes, 18 px e cantos de 5 px), com o visto de
   11 px. TE-07 (provisório): no foco pelo teclado, o contorno de 2 px na cor da marca (era azul). */
.pf-v5-c-check { align-items: center; gap: calc(10px * var(--ea-escala)); }
.pf-v5-c-check__label { font-size: calc(12.5px * var(--ea-escala)); color: var(--ea-texto); }
.pf-v5-c-check__input {
    -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; width: calc(16px * var(--ea-escala)); height: calc(16px * var(--ea-escala)); margin: 0;
    border: calc(2px * var(--ea-escala)) solid var(--ea-vermelho); border-radius: 0; background: #FFFFFF no-repeat center / calc(11px * var(--ea-escala)) calc(11px * var(--ea-escala)); cursor: pointer;
}
.pf-v5-c-check__input:checked {
    background-color: var(--ea-vermelho);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pf-v5-c-check__input:focus-visible { outline: calc(2px * var(--ea-escala)) solid var(--ea-vermelho); outline-offset: calc(2px * var(--ea-escala)); }

/* Botões: Entrar e Salvar vermelhos cheios, com cantos de 4 px e letra 600 (TE-04, opção A "Firme" de 07/10/2026, como os do
   sistema); Cancelar como link, embaixo */
.pf-v5-c-form__actions { margin: calc(8px * var(--ea-escala)) 0 0 !important; display: flex !important; flex-direction: column !important; gap: calc(16px * var(--ea-escala)) !important; }
.pf-v5-c-form__actions > * { margin: 0 !important; }
.pf-v5-c-button.pf-m-primary {
    width: 100%; height: calc(40px * var(--ea-escala)); border-radius: calc(4px * var(--ea-escala)) !important; background: var(--ea-vermelho) !important; color: #FFFFFF !important;
    font-size: calc(14px * var(--ea-escala)) !important; font-weight: 600 !important; border: 0 !important; box-shadow: none !important;
}
.pf-v5-c-button.pf-m-primary::after { border: 0 !important; }
.pf-v5-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:focus { background: var(--ea-vermelho-hover) !important; }
.pf-v5-c-button.pf-m-secondary {
    width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ea-texto) !important;
    font-size: calc(12.5px * var(--ea-escala)) !important; font-weight: 400 !important; padding: 0 !important; height: auto; text-align: center;
}
.pf-v5-c-button.pf-m-secondary::after { border: 0 !important; }
.pf-v5-c-button.pf-m-secondary:hover { text-decoration: underline; }
#kc-form-login a, .pf-v5-c-login__main a { color: var(--ea-texto); font-size: calc(12.5px * var(--ea-escala)); }

/* A textura animada (lançamentos contábeis sendo digitados) fica na faixa grafite, atrás do cartão */
.ea-textura { position: fixed; left: 0; right: 0; top: 0; height: var(--ea-faixa); overflow: hidden; pointer-events: none; z-index: 0;
    --tinta: rgba(255,255,255,.19); --tinta-forte: rgba(255,255,255,.55); --fio-tx: rgba(255,255,255,.08); --cursor: #A01B15; }
.ea-textura.discreta { --tinta: rgba(255,255,255,.075); --tinta-forte: rgba(255,255,255,.19); --fio-tx: rgba(255,255,255,.035); }
.ea-textura .blocos { position: absolute; inset: 0; display: grid; padding: calc(20px * var(--ea-escala)) 0 calc(14px * var(--ea-escala)); }
.ea-textura .bloco { padding: 0 calc(14px * var(--ea-escala)); overflow: hidden; min-width: 0; border-right: 1px solid var(--fio-tx); }
.ea-textura .bloco:last-child { border-right: 0; }
.ea-textura .bl-cab { font-size: calc(10.5px * var(--ea-escala)); letter-spacing: .12em; color: var(--tinta-forte); opacity: .75; margin-bottom: calc(6px * var(--ea-escala)); white-space: nowrap; overflow: hidden; font-family: Roboto, Arial, sans-serif; }
.ea-textura .lin { font: calc(12px * var(--ea-escala))/calc(26px * var(--ea-escala)) Consolas, "Cascadia Mono", "Courier New", monospace; color: var(--tinta); border-bottom: 1px solid var(--fio-tx); white-space: pre; overflow: hidden; height: calc(27px * var(--ea-escala)); }
.ea-textura .lin.atual { color: var(--tinta-forte); }
.ea-textura .cursor { display: inline-block; width: .6em; height: 1.05em; margin-left: 1px; background: var(--cursor); vertical-align: -.18em; animation: ea-piscar 1s steps(1) infinite; }
.ea-textura.pausada .cursor { animation-play-state: paused; }
@keyframes ea-piscar { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ea-textura .cursor { animation: none !important; } }

/* Celular: o grafite na tela toda e o cartão no centro */
@media (max-width: 600px) {
    html.login-pf { background: var(--ea-grafite-fundo) !important; }
    body#keycloak-bg::after { color: rgba(255,255,255,.55); }
    .ea-textura { height: 100%; }
    .pf-v5-c-login__container { min-height: 100vh; display: flex !important; flex-direction: column; justify-content: center; align-items: stretch; padding: calc(24px * var(--ea-escala)) 0 calc(56px * var(--ea-escala)) !important; }
    main.pf-v5-c-login__main { width: 100% !important; margin-top: 0 !important; padding: calc(30px * var(--ea-escala)) calc(24px * var(--ea-escala)) calc(26px * var(--ea-escala)) !important; }
}