/*
 * paginas-publicas.css - Shell canonico das paginas AVULSAS do APP DO PACIENTE
 * (privacidade, termos, exclusao de dados).
 *
 * 2026-08-26. Gemeo do arquivo de mesmo nome em profissional/www/css, com UMA
 * diferenca deliberada: aqui o corpo e Inter e o display e Plus Jakarta Sans,
 * que e o que a tela de login do app usa de fato (medido: body do /login em
 * Plus Jakarta Sans; --font-body do app.css em Inter). No app profissional o
 * corpo e IBM Plex Sans. Os dois arquivos sao separados porque sao dois www
 * distintos, servidos por servicos distintos: nao ha caminho comum em disco.
 *
 * Antes desta folha, as paginas legais do app eram Inter sobre cinza chapado,
 * sem gradiente, sem mascote e sem assinatura: nada ligava a pagina ao login de
 * onde o paciente veio.
 */

:root {
    --pp-primary:   #1d5c47;
    --pp-dark:      #123c30;
    --pp-darker:    #0c2a21;
    --pp-pastel:    #87C9B7;
    --pp-tint:      #e8f7f3;
    --pp-bg:        #f3faf8;
    --pp-card:      #ffffff;
    --pp-text:      #0f172a;
    --pp-muted:     #64748b;
    --pp-border:    #e2e8f0;
    --pp-danger:    #dc2626;
    --pp-danger-bg: #fef2f2;
    --pp-danger-br: #fecaca;
    --pp-ring:      0 0 0 3px rgba(29, 92, 71, .20);
    --pp-sombra:    0 26px 64px -26px rgba(12, 42, 33, .45), 0 2px 6px rgba(15, 23, 42, .06);
    --pp-fonte:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pp-display:   'Plus Jakarta Sans', var(--pp-fonte);
}

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

html { -webkit-text-size-adjust: 100%; }

/* Trava de largura para QUALQUER imagem da pagina. Medido em 320px: a
   assinatura do rodape de termos.html tem 400px de largura declarada e
   empurrava a pagina 110px para o lado. Regra global porque a proxima
   imagem colada numa dessas paginas vai ter o mesmo problema. */
img { max-width: 100%; height: auto; }

body {
    font-family: var(--pp-fonte);
    color: var(--pp-text);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 28px 16px 56px;
    /* Mesmo fundo do login (.login-screen). Os dois radiais dao o brilho verde
       nos cantos; sem eles o gradiente linear sozinho fica lavado. */
    background:
        radial-gradient(circle at 18% 16%, rgba(135, 201, 183, .32), transparent 52%),
        radial-gradient(circle at 84% 86%, rgba(29, 92, 71, .20), transparent 55%),
        linear-gradient(135deg, #f3faf8 0%, #e7f4f0 100%);
    background-attachment: fixed;
}

/* ---------------------------------------------------------------- estrutura */

.pp-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
.pp-wrap.pp-largo { max-width: 760px; }

.pp-card {
    background: var(--pp-card);
    border-radius: 24px;
    box-shadow: var(--pp-sombra);
    padding: 30px 26px 28px;
}
.pp-card + .pp-card { margin-top: 16px; }

/* ------------------------------------------------------------------- marca */

.pp-marca { text-align: center; margin-bottom: 22px; }

.pp-mascote {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(47, 74, 66, .22);
}

.pp-logo { display: block; height: 46px; width: auto; margin: 0 auto; }

/* Reserva de espaco: sem isto a assinatura "pula" quando a imagem termina de
   carregar, e o salto acontece bem embaixo do dedo de quem ja foi tocar. */
.pp-logo-slot { min-height: 46px; display: flex; align-items: center; justify-content: center; }

.pp-marca-texto {
    font-family: var(--pp-display);
    font-weight: 800;
    font-size: 21px;
    color: var(--pp-darker);
    letter-spacing: -.02em;
}

.pp-eyebrow {
    display: block;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-dark);
}

/* ------------------------------------------------------------------ titulos */

.pp-titulo {
    font-family: var(--pp-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: center;
    margin-bottom: 4px;
}
.pp-sub { text-align: center; font-size: 13.5px; color: var(--pp-muted); margin-bottom: 20px; }

.pp-h2 {
    font-family: var(--pp-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--pp-darker);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pp-tint);
}

/* h2 SOLTO dentro do cartao herda o estilo de secao. Sem isto, cada pagina
   convertida precisaria receber class="pp-h2" em dezenas de titulos, e o
   primeiro que ficasse de fora sairia sem estilo, calado. */
.pp-card h2 {
    font-family: var(--pp-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--pp-darker);
    margin: 22px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pp-tint);
}
.pp-card h2:first-child { margin-top: 0; }
.pp-card h3 { font-family: var(--pp-display); font-size: 15px; margin: 16px 0 8px; color: var(--pp-darker); }

.pp-card p  { margin: 0 0 12px; font-size: 14.5px; }
.pp-card p:last-child { margin-bottom: 0; }
.pp-card ul { margin: 0 0 12px; padding-left: 20px; font-size: 14.5px; }
.pp-card li { margin-bottom: 8px; }
.pp-card strong { color: var(--pp-darker); }

/* ------------------------------------------------------------- formularios */

.pp-label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }

.pp-campo { position: relative; }

.pp-input {
    width: 100%;
    /* 16px NAO e estetica: abaixo disso o iOS aplica zoom sozinho ao focar o
       campo e desalinha a pagina inteira. */
    font-size: 16px;
    font-family: inherit;
    color: var(--pp-text);
    background: #f8fafc;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 13px 78px 13px 15px;
    min-height: 48px;
}
.pp-input::placeholder { color: #94a3b8; }
.pp-input:focus { outline: none; border-color: var(--pp-primary); box-shadow: var(--pp-ring); }

/* O botao "Ver" e alvo de toque: 44px de altura, dentro do campo de 48px. */
.pp-ver {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-height: 44px;
    min-width: 58px;
    padding: 0 10px;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--pp-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.pp-ver:hover { background: var(--pp-tint); }
.pp-ver:focus-visible { outline: none; box-shadow: var(--pp-ring); }

.pp-btn {
    width: 100%;
    margin-top: 22px;
    min-height: 52px;
    padding: 14px 20px;
    font-family: var(--pp-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--pp-dark), var(--pp-darker));
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: filter .18s, transform .18s;
}
.pp-btn:hover { filter: brightness(1.07); }
.pp-btn:active { transform: translateY(1px); }
.pp-btn:disabled { opacity: .62; cursor: not-allowed; transform: none; }
.pp-btn:focus-visible { outline: none; box-shadow: var(--pp-ring); }

.pp-hint { font-size: 12.5px; color: var(--pp-muted); margin-top: 10px; }

/* --------------------------------------------------------------- mensagens */

.pp-msg { padding: 12px 14px; border-radius: 12px; font-size: 13.5px; margin-bottom: 12px; }
.pp-msg.pp-erro { background: var(--pp-danger-bg); color: #b91c1c; border: 1px solid var(--pp-danger-br); }
.pp-msg.pp-ok   { background: var(--pp-tint); color: var(--pp-dark); border: 1px solid var(--pp-pastel); }

/* ------------------------------------------------------------------- links */

.pp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    color: var(--pp-dark);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 10px;
}
.pp-link:hover { background: var(--pp-tint); text-decoration: underline; }
.pp-link:focus-visible { outline: none; box-shadow: var(--pp-ring); }

.pp-centro { text-align: center; margin-top: 14px; }

.pp-rodape { text-align: center; margin-top: 18px; font-size: 12px; color: var(--pp-muted); }
/* Os links do rodape sao NAVEGACAO, nao link dentro de frase: ganham altura de
   toque de 44px (WCAG 2.5.5). A excecao "inline" da norma vale para o link no
   meio do paragrafo, como o e-mail do DPO, e esses continuam como estao. */
.pp-rodape a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--pp-dark);
    font-weight: 600;
    text-decoration: none;
}
.pp-rodape a:hover { background: var(--pp-tint); text-decoration: underline; }

/* ------------------------------------------------- paginas de conteudo longo */

/* Barra de volta acima do cartao. Fica FORA do cartao de propósito: nas paginas
   legais o usuario chega pelo rodape do login e o caminho de volta precisa ser a
   primeira coisa que ele ve, nao algo escondido no fim de 3000px de texto. */
.pp-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    margin-bottom: 6px;
    color: var(--pp-dark);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-radius: 10px;
}
.pp-voltar:hover { background: var(--pp-tint); }
.pp-voltar:focus-visible { outline: none; box-shadow: var(--pp-ring); }

/* Ancora de topo repetida no fim das paginas longas. */
.pp-fim { text-align: center; margin-top: 18px; }

@media (prefers-color-scheme: dark) {
    .pp-voltar { color: var(--pp-pastel); }
}

/* ----------------------------------------- blocos das paginas de LGPD/pedido */

.pp-destaque {
    background: var(--pp-tint);
    border-left: 4px solid var(--pp-primary);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    margin: 12px 0;
}

.pp-aviso {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    margin: 0 0 12px;
    color: #78350f;
}

/* Tabela de prazos: rola dentro do proprio quadro. O corpo da pagina nunca rola
   para o lado, que e a regra da casa; a tabela e que ganha a barra. */
.pp-tabela-wrap { overflow-x: auto; margin: 0 0 12px; -webkit-overflow-scrolling: touch; }
.pp-tabela { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13.5px; }
.pp-tabela th,
.pp-tabela td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--pp-border); }
.pp-tabela th { background: var(--pp-tint); color: var(--pp-darker); font-weight: 700; }
.pp-tabela tr:last-child td { border-bottom: none; }

.pp-select,
.pp-textarea {
    width: 100%;
    font-size: 16px;
    font-family: inherit;
    color: var(--pp-text);
    background: #f8fafc;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 13px 15px;
    min-height: 48px;
}
.pp-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.pp-select:focus,
.pp-textarea:focus { outline: none; border-color: var(--pp-primary); box-shadow: var(--pp-ring); }

/* Campo simples (sem botao "Ver" dentro): o padding a direita do .pp-input
   reserva 78px para aquele botao e deixaria um vao esquisito aqui. */
.pp-input-simples { padding-right: 15px; }

.pp-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 4px;
    padding: 10px 0;
}
.pp-check input[type="checkbox"] {
    /* 22px de caixa dentro de uma area de toque de 44px: o rotulo inteiro tambem
       aciona, porque o <label for> aponta para o campo. */
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 1px;
    accent-color: var(--pp-primary);
    cursor: pointer;
}
.pp-check label { font-size: 14px; font-weight: 500; cursor: pointer; }

.pp-dica { font-size: 12.5px; color: var(--pp-muted); margin: 6px 0 0; }

.pp-resultado { margin-top: 14px; }
.pp-resultado:empty { display: none; }

/* Numero de protocolo: monoespacado para o usuario conseguir copiar e conferir
   digito a digito sem confundir 0 com O. */
.pp-protocolo {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 700;
    background: var(--pp-tint);
    color: var(--pp-darker);
    padding: 2px 8px;
    border-radius: 6px;
    word-break: break-all;
}

/* Armadilha para robo: fora da tela, mas sem display:none, que alguns
   preenchedores automaticos ignoram. */
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-color-scheme: dark) {
    .pp-aviso { background: #3f2d0a; border-color: #a16207; color: #fde68a; }
    .pp-select, .pp-textarea { background: #0f172a; }
    .pp-tabela th { background: #14352a; color: var(--pp-pastel); }
}

/* ------------------------------------------------------------------ estado */

.pp-estado { text-align: center; padding: 22px 0; }

.pp-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid var(--pp-border);
    border-top-color: var(--pp-primary);
    border-radius: 50%;
    animation: pp-girar .8s linear infinite;
}
@keyframes pp-girar { to { transform: rotate(360deg); } }

/* Quem pediu menos animacao nao recebe o giro; o estado continua legivel pelo
   texto "Validando o link...". */
@media (prefers-reduced-motion: reduce) {
    .pp-spinner { animation: none; border-top-color: var(--pp-primary); }
    .pp-btn { transition: none; }
}

/* -------------------------------------------------------------- responsivo */

@media (max-width: 420px) {
    body { padding: 18px 12px 44px; }
    .pp-card { padding: 24px 18px 22px; border-radius: 20px; }
    .pp-mascote { width: 76px; height: 76px; border-radius: 21px; }
    .pp-titulo { font-size: 20px; }
}

/* Tela baixa (celular deitado, notebook de 620px de altura): a pagina PRECISA
   rolar. Ver o caso do /index do ERP, onde `height:100%` mais `overflow:hidden`
   deixou o botao de entrar inalcancavel. Aqui o body ja rola por padrao; esta
   regra so tira respiro para caber mais conteudo por tela. */
@media (max-height: 640px) {
    body { padding-top: 14px; }
    .pp-marca { margin-bottom: 16px; }
    .pp-mascote { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 10px; }
}

@media (min-width: 768px) {
    body { padding: 44px 24px 72px; }
    .pp-card { padding: 34px 34px 30px; }
    .pp-titulo { font-size: 25px; }
}

/* ------------------------------------------------------------- modo escuro */

@media (prefers-color-scheme: dark) {
    :root {
        --pp-card:   #1e293b;
        --pp-text:   #f1f5f9;
        --pp-muted:  #94a3b8;
        --pp-border: #334155;
        --pp-tint:   #14352a;
        --pp-danger-bg: #3b1212;
        --pp-danger-br: #7f1d1d;
    }
    body {
        background:
            radial-gradient(circle at 18% 16%, rgba(29, 92, 71, .30), transparent 52%),
            radial-gradient(circle at 84% 86%, rgba(12, 42, 33, .20), transparent 55%),
            linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }
    .pp-input { background: #0f172a; }
    .pp-h2, .pp-marca-texto, .pp-card strong { color: var(--pp-pastel); }
    .pp-eyebrow, .pp-link, .pp-rodape a { color: var(--pp-pastel); }
    .pp-msg.pp-ok { color: var(--pp-pastel); }
    .pp-msg.pp-erro { color: #fca5a5; }

    /* 2026-08-29: o bloco escuro trocava --pp-card, --pp-text, --pp-muted,
       --pp-border e --pp-tint, mas NAO --pp-darker, que e a cor dos titulos
       dentro do cartao. Resultado medido nas tres paginas legais (privacidade,
       termos e exclusao de dados), nos tres tamanhos: titulo #3d6041 sobre
       cartao #1e293b = 2,05:1. E o link de e-mail dentro do texto nao tem
       regra nenhuma, entao sai no azul padrao do navegador (#0000EE) sobre o
       mesmo cartao = 1,56:1. `.pp-h2` ja estava tratado logo acima; quem ficou
       de fora foi o `h2`/`h3` SEM classe e o `a` SEM classe, que e justamente
       o que o texto legal usa. */
    .pp-card h2,
    .pp-card h3 { color: var(--pp-pastel); }
    .pp-card a { color: var(--pp-pastel); }
}