/* ═══════════════════════════════════════════════════════════════════════════
 * Acessibilidade — tamanho do texto, alto contraste e pausar animações.
 *
 * Vale nas DUAS áreas: a externa (login, recuperar senha, senha pública, totem)
 * e a interna. É tudo do lado do cliente — nenhum bean, nenhum ajax —, e é por
 * isso que funciona igual na tela pública, onde não há usuário logado.
 *
 * As preferências vivem no <html>, aplicadas por resources/js/acessibilidade.js
 * e pelo script de bootstrap que cada template roda no <head>:
 *     --a11y-escala   multiplicador do tamanho do texto (0.875 a 1.5)
 *     .alto-contraste
 *     .sem-animacao
 *
 * PORTADO de onsaude-gestao-erp (src/styles.css), com três adaptações que este
 * projeto exige e que estão comentadas onde acontecem: a escala por variável, o
 * prefixo `body` para vencer o tema saga/vela, e o body de 14px do tema Maxton.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────── tamanho do texto */

/* Por que variável e não `font-size` direto no <html>, como no projeto de origem:
 * lá o site inteiro é rem-based e a origem simplesmente escreve `font-size: 125%`
 * no elemento. AQUI não: telas-standalone.css fixa `html{font-size:14px}` para as
 * páginas de senha e totem, e a área interna parte de 16px. Cada contexto declara
 * a sua base e o JavaScript mexe só no multiplicador — assim escala 1 é exatamente
 * a aparência de hoje em todo lugar, em vez de um valor servir a um contexto e
 * quebrar o outro. */
html {
    font-size: calc(var(--a11y-base, 16px) * var(--a11y-escala, 1));
}

/* Alguns contextos fixam o `body` em px e ele nao acompanharia a raiz — o caso do
 * tema Maxton (`sass/main.css`, body 14px), que e CSS compilado e nao se edita a mao.
 * A razao NAO pode ser a mesma em todo lugar: na area interna o body e 14px sobre uma
 * raiz de 16px (0.875rem), nas telas de senha e 14px sobre uma raiz de 14px (1rem).
 * Por isso cada contexto declara a sua em --a11y-body.
 *
 * Sem `var(--a11y-body)` declarado a regra fica invalida no tempo de computacao e,
 * como `font-size` e herdada, o body simplesmente acompanha a raiz — que e o certo
 * onde o body ja esta em rem (login e recuperar-senha, que usam 1rem). Por isso a
 * variavel nao tem valor padrao: a ausencia dela E o comportamento desejado. */
html[data-a11y-escala] body {
    font-size: var(--a11y-body);
}

/* ─────────────────────────────────────────────────────── pausar animações */

html.sem-animacao,
html.sem-animacao * {
    scroll-behavior: auto !important;
}

html.sem-animacao *,
html.sem-animacao *::before,
html.sem-animacao *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

/* Respeitar a preferência do SISTEMA, e não só o botão. Nenhum CSS deste webapp
 * fazia isso antes: quem pediu "reduzir movimento" no sistema operacional via as
 * animações do mesmo jeito. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    body *,
    body *::before,
    body *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ────────────────────────────────────────────────────────── alto contraste */

/* Fundo preto, texto branco, links amarelos sublinhados. Imagens ficam intactas.
 *
 * O `!important` não é preguiça: o fundo do estabelecimento é injetado com
 * `!important` no <body> (UsuarioSessaoBean.getCssFundoBody), a tela de senha
 * pública sobrescreve o fundo de novo, e a PrimeFlex 3 é carregada no FIM DO BODY
 * em todos os cinco contextos, vencendo qualquer folha do <head> por ordem. */
html.alto-contraste body,
html.alto-contraste body *:not(img):not(video):not(iframe):not(svg):not(svg *) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.alto-contraste a,
html.alto-contraste a * {
    color: #ff0 !important;
    text-decoration: underline !important;
}

html.alto-contraste button,
html.alto-contraste input,
html.alto-contraste textarea,
html.alto-contraste select,
html.alto-contraste body .ui-inputfield,
html.alto-contraste body .ui-button {
    border: 2px solid #fff !important;
}

html.alto-contraste svg { color: #fff; }
html.alto-contraste img { opacity: 1 !important; filter: none !important; }

html.alto-contraste *:focus-visible {
    outline: 3px solid #ff0 !important;
    outline-offset: 2px !important;
}

html.alto-contraste ::placeholder { color: #ccc !important; }

/* O scrim que escurece o fundo personalizado (brand-tokens.css) some: sem fundo,
 * não há o que escurecer, e ele só acrescentaria uma camada sobre o preto. */
html.alto-contraste body::before { display: none !important; }

/* ─────────────────────────────────────────────────── o botão e o painel */

/* Canto inferior ESQUERDO, e isso não é gosto: o canto direito já está ocupado —
 * o botão do WhatsApp na área interna (bottom:40px; right:40px) e o logo fixo das
 * telas públicas de senha (bottom:0; right:0.5rem). */
.a11y-botao {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1200;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d47a1;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.a11y-botao:hover { background: #1565c0; }

.a11y-botao:focus-visible {
    outline: 3px solid #ffd54f;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .a11y-botao { left: 1.5rem; bottom: 1.5rem; }
}

.a11y-painel {
    position: fixed;
    left: 1rem;
    bottom: 4.5rem;
    z-index: 1201;
    width: 16rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e293b;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    font-size: 0.85rem;
}

@media (min-width: 768px) {
    .a11y-painel { left: 1.5rem; bottom: 5rem; }
}

.a11y-painel[hidden] { display: none; }

/* Variante da ÁREA INTERNA: à direita, empilhado acima do botão do WhatsApp
 * (que fica em bottom:40px/right:40px, 60px de altura). À esquerda não dá: lá
 * moram a sidebar de 260px, fixa e de altura inteira, e o rodapé sticky. */
.a11y-botao.a11y-interno {
    left: auto;
    right: 40px;
    bottom: 112px;
}

.a11y-painel.a11y-interno {
    left: auto;
    right: 40px;
    bottom: 172px;
}

@media (min-width: 768px) {
    .a11y-botao.a11y-interno { left: auto; right: 40px; bottom: 112px; }
    .a11y-painel.a11y-interno { left: auto; right: 40px; bottom: 172px; }
}

.a11y-painel h2 {
    margin: 0 0 .75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0d47a1;
}

.a11y-grupo { margin-bottom: .9rem; }

.a11y-rotulo {
    display: block;
    margin-bottom: .4rem;
    font-weight: 600;
}

.a11y-tamanhos {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.a11y-tamanhos button {
    height: 2.4rem;
    min-width: 2.4rem;
    padding: 0 .5rem;
    border: 2px solid #0d47a1;
    border-radius: 8px;
    background: #fff;
    color: #0d47a1;
    font-weight: 700;
    cursor: pointer;
}

.a11y-tamanhos button:hover:not(:disabled) { background: #e3f2fd; }

.a11y-tamanhos button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.a11y-percentual {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: #475569;
}

.a11y-opcao {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
    cursor: pointer;
}

.a11y-opcao input { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.a11y-restaurar {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: none;
    background: none;
    color: #0d47a1;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}

.a11y-restaurar[hidden] { display: none; }

/* Dentro do alto contraste o painel segue a mesma regra do resto (preto e branco);
 * só o realce dos botões precisa voltar, senão some tudo na borda branca. */
html.alto-contraste .a11y-tamanhos button:not(:disabled) {
    color: #ff0 !important;
}

/* Impressão: o widget é interface, não conteúdo. */
@media print {
    .a11y-botao,
    .a11y-painel { display: none !important; }
}