/* ═══════════════════════════════════════════════════════════════════════════
 * Acessibilidade — tamanho do texto, alto contraste e pausar animações.
 *
 * Vale nas DUAS áreas: a externa (login, esqueci a conta, páginas de erro, sessão
 * expirada) e a interna. É tudo do lado do cliente — nenhum bean, nenhum ajax —, e
 * é por isso que funciona igual antes do login, onde não há usuário para guardar
 * preferência no backend.
 *
 * 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 medbolso-controle-de-entradas-web (commit 62811a0e, 2026-09-30), que
 * por sua vez portou de onsaude-gestao-erp. Mesmas adaptações de lá: a escala por
 * variável, o prefixo `body` para vencer o tema, e o body de 14px do tema Maxton
 * (sass/main.css). Aqui mudam só a posição da área interna e os comentários.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────── 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: a área interna parte de uma raiz de 16px com o body fixo
 * em 14px, e as telas externas usam rem. 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); onde o body ja esta em rem nada precisa ser declarado.
 * 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 esqueci-conta, auth-login.css). 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: a cor ou imagem de fundo escolhida pelo usuário
 * em Personalizar Layout é injetada no <head> (UsuarioBean.getCssFundoBody), o tema
 * escuro troca as cores do PrimeFaces, e PrimeFlex e Font Awesome são carregados no
 * FIM DO BODY, 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; }

/* Qualquer camada pintada em body::before (fundo personalizado) some: sobre o
 * preto ela só atrapalharia a leitura. */
html.alto-contraste body::before { display: none !important; }

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

/* Canto inferior ESQUERDO nas telas externas: em template-externo.xhtml o canto
 * direito é do botão do WhatsApp (bottom:40px; right:40px). */
.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: canto inferior DIREITO. À esquerda não dá: lá mora a
 * sidebar, fixa e de altura inteira. Diferente do projeto de origem, aqui a área
 * interna não renderiza o botão do WhatsApp (só o CSS .floating sobrou no
 * template-admin-saudeap.xhtml), então o botão fica na altura normal do canto. As
 * barras flutuantes da grade (carimbo, seleção, desfazer) são centralizadas no
 * rodapé e não disputam este canto. */
.a11y-botao.a11y-interno {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
}

.a11y-painel.a11y-interno {
    left: auto;
    right: 1.5rem;
    bottom: 5rem;
}

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

.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; }
}