/* =====================================================================================================
   Portal do Segurado — o visual dos apps "Nosso RPPS", na web.

   As medidas e cores vêm dos estilos do app (AppPortalBase/src/pages/**/style.ts): o azul do cabeçalho
   (#23437E → #3F79E4), o dos botões (#274472 / #26467D), o cinza de fundo (#F8F8F8), cartões brancos com
   raio 20, a fonte Inter. No celular é a tela do app; do tablet para cima o conteúdo fica centrado numa
   coluna e as folhas que sobem de baixo viram cartões no meio da tela.
   ===================================================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.ttf") format("truetype"); }

:root {
    --pt-azul: #23437E;
    --pt-azul-claro: #3F79E4;
    --pt-botao: #274472;
    --pt-modulo: #26467D;
    --pt-fundo: #F8F8F8;
    --pt-branco: #FFFFFF;
    --pt-texto: #000000;
    --pt-texto-2: #333333;
    --pt-cinza: #888888;
    --pt-cinza-2: #AAAAAA;
    --pt-borda: #EFEFEF;
    --pt-borda-campo: #B0B0B0;
    --pt-perigo: #E74C3C;
    --pt-ok: #1E8E3E;
    --pt-raio: 20px;
    --pt-coluna: 720px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
    background: var(--pt-fundo);
    color: var(--pt-texto);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
/* ⚠️ O reset do MudBlazor põe `display:flex; justify-content:center` em TODO <button>: cada botão daqui
      declara o próprio alinhamento, senão o texto de uma alternativa ou de um cartão vai para o meio. */
button:disabled { cursor: default; }
input { font: inherit; }
ion-icon { display: inline-block; flex: none; }

.pt-app { min-height: 100vh; min-height: 100dvh; }

/* ---------- Botões, campos e recados ---------- */
.pt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 14px 24px; border-radius: 30px; border: 0;
    font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; width: 100%;
    transition: filter .15s, opacity .15s;
}
.pt-btn.cheio { background: var(--pt-botao); color: #fff; }
.pt-btn.cheio.perigo { background: var(--pt-perigo); border-radius: 12px; }
.pt-btn.cinza { background: #C1C1C1; color: #fff; }
.pt-btn.contorno { background: #fff; color: #000; border: 1px solid var(--pt-cinza); border-radius: 12px; }
.pt-btn:hover:not(:disabled) { filter: brightness(1.08); }
.pt-btn:disabled { opacity: .55; }
.pt-btn:focus-visible, .pt-link:focus-visible, .pt-card:focus-visible, .pt-matr-card:focus-visible,
.pt-quiz-opcao:focus-visible, .pt-aceite:focus-visible, .pt-inicio-acao:focus-visible, .pt-mod-btn:focus-visible {
    outline: 3px solid var(--pt-azul-claro); outline-offset: 2px;
}

.pt-par { display: flex; gap: 15px; margin-top: 24px; }
.pt-par .pt-btn { flex: 1; }
.pt-par .pt-btn.largo { flex: 1.5; }

.pt-link {
    background: none; border: 0; padding: 10px; color: var(--pt-botao);
    font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pt-link:disabled { opacity: .4; }
.pt-link-inline { background: none; border: 0; padding: 0; color: var(--pt-botao); font-weight: 600; text-decoration: underline; font-size: inherit; }

.pt-rotulo { display: block; font-size: 14px; color: #414141; margin: 0 0 6px 5px; }
.pt-rotulo.cinza { color: #9E9E9E; font-size: 16px; margin-left: 0; }
.pt-input {
    width: 100%; border: 1px solid var(--pt-borda-campo); border-radius: 12px;
    padding: 14px 15px; font-size: 16px; color: #000; background: #fff; outline: none;
}
.pt-input:focus { border-color: var(--pt-botao); box-shadow: 0 0 0 3px rgba(39, 68, 114, .15); }
.pt-input::placeholder { color: #888; }
.pt-input:disabled { background: #E0E0E0; color: #757575; }

.pt-senha { position: relative; margin-bottom: 20px; }
.pt-senha .pt-input { padding-right: 52px; }
.pt-senha-olho {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border: 0; background: none; color: #666; font-size: 22px;
    display: grid; place-items: center;
}
.pt-dica { margin: -8px 0 16px 4px; font-size: 13px; color: var(--pt-cinza); }

.pt-recado {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
    margin: 0 0 16px; font-size: 14px; line-height: 1.4; text-align: left;
}
.pt-recado ion-icon { font-size: 20px; margin-top: 1px; }
.pt-recado span { flex: 1; }
.pt-recado.erro { background: #FDECEA; color: #A12A1C; }
.pt-recado.ok { background: #E7F5EA; color: #1B6E30; }
.pt-recado-x { background: none; border: 0; padding: 0; color: inherit; font-size: 18px; display: grid; place-items: center; }

.pt-giro-branco { color: #fff !important; }

/* ---------- Folha que sobe de baixo (BottomSheet) ---------- */
.pt-folha-fundo {
    position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, .5);
    display: flex; align-items: flex-end; justify-content: center;
    animation: pt-surge .2s ease-out;
}
.pt-folha {
    width: 100%; max-height: 92dvh; overflow-y: auto; background: #fff;
    border-radius: 24px 24px 0 0; padding: 10px 0 calc(24px + env(safe-area-inset-bottom));
    animation: pt-sobe .28s cubic-bezier(.2, .8, .2, 1);
}
.pt-folha-fundo.alta .pt-folha { height: 85dvh; }
.pt-folha-pegador { width: 40px; height: 5px; border-radius: 3px; background: #D0D0D0; margin: 0 auto 14px; }
@keyframes pt-surge { from { opacity: 0; } }
@keyframes pt-sobe { from { transform: translateY(40px); opacity: .6; } }

.pt-conf { padding: 10px 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pt-conf-anel {
    width: 80px; height: 80px; border-radius: 50%; border: 8px solid var(--pt-azul);
    color: var(--pt-azul); display: grid; place-items: center; font-size: 34px; margin-bottom: 10px;
}
.pt-conf-anel.perigo { border-color: var(--pt-perigo); color: var(--pt-perigo); }
.pt-conf-titulo { font-size: 22px; font-weight: 700; margin: 0; }
.pt-conf-texto { font-size: 14px; color: #666; line-height: 1.45; margin: 0 0 14px; max-width: 420px; }
.pt-conf .pt-btn { border-radius: 12px; }
.pt-conf .pt-btn.cheio:not(.perigo) { background: var(--pt-azul); }

/* ---------- Abertura e boas-vindas ---------- */
.pt-carregando { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 24px; background: #fff; }
.pt-carregando-logo { width: 72px; height: 72px; object-fit: contain; }

.pt-bv {
    min-height: 100dvh; background: #fff; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 30px 40px; text-align: center;
}
.pt-bv-logo { width: 40px; height: 40px; object-fit: contain; }
.pt-bv-progresso { display: flex; gap: 8px; margin: 28px 0 10px; }
.pt-bv-progresso span { width: 50px; height: 4px; border-radius: 2px; background: #E0E0E0; transition: background .3s; }
.pt-bv-progresso span.on { background: var(--pt-modulo); }
.pt-bv-corpo { display: flex; flex-direction: column; align-items: center; animation: pt-entra .5s ease-out; }
.pt-bv-img { width: min(400px, 80vw); height: min(400px, 80vw); object-fit: contain; margin-bottom: 20px; }
.pt-bv-titulo { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.pt-bv-texto { font-size: 15px; color: #666; line-height: 22px; margin: 0 0 40px; max-width: 360px; }
.pt-bv-btn { width: auto; min-width: 220px; background: var(--pt-modulo); padding: 14px 60px; }
.pt-bv-pular { margin-top: 16px; color: #666; font-weight: 600; }
@keyframes pt-entra { from { opacity: 0; transform: translateY(40px); } }

/* ---------- Entrada ---------- */
.pt-entrada { position: relative; min-height: 100dvh; overflow: hidden; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.pt-entrada-foto {
    position: absolute; inset: 0; background: url("../img/login.png") center / cover no-repeat;
    transform: scale(1.1); animation: pt-foto 1.5s ease-out;
}
@keyframes pt-foto { from { transform: scale(1.1) translateY(20px); } }
.pt-entrada-degrade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 650px;
    background: linear-gradient(to bottom, transparent 0%, #3068b8 77%, #3068b8 100%);
}
.pt-entrada-topo { position: relative; padding: 90px 30px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pt-entrada-marca {
    width: 84px; height: 84px; border-radius: 20px; background: #fff; display: grid; place-items: center;
    padding: 10px; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.pt-entrada-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-entrada-titulo { font-size: 30px; font-weight: 700; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.pt-entrada-sub { font-size: 14px; margin: 6px 0 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.pt-entrada-base { position: relative; padding: 0 30px calc(48px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pt-entrada-base .pt-recado { width: min(100%, 420px); }
.pt-entrada-btn {
    background: #fff; color: #3068b8; border: 0; border-radius: 50px; padding: 20px 0;
    width: min(100%, 340px); font-size: 20px; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.pt-entrada-btn:hover { filter: brightness(.97); }
.pt-entrada-suporte { color: #fff; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; opacity: .95; }
.pt-entrada-suporte ion-icon { font-size: 18px; }
.pt-entrada-suporte:hover { text-decoration: underline; }
.pt-entrada-versao { font-size: 13px; opacity: .9; }

.pt-login { padding: 4px 35px 20px; color: #000; }
.pt-login-titulo { font-size: 18px; font-weight: 700; text-align: center; margin: 0; }
.pt-login-sub { font-size: 14px; text-align: center; margin: 4px 0 18px; }
.pt-cpf { position: relative; margin-bottom: 20px; }
.pt-cpf.travado .pt-input { padding-right: 48px; }
.pt-cpf-trocar {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; color: #000;
    display: grid; place-items: center; font-size: 18px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.pt-turnstile { display: flex; justify-content: center; margin: 0 0 16px; min-height: 65px; }
.pt-login-redefinir { display: flex; width: 100%; margin: 0 0 10px; min-height: 44px; }
.pt-login-nota { font-size: 12px; color: var(--pt-cinza); text-align: center; margin: 18px 0 0; line-height: 1.5; }

/* ---------- Fluxo de cadastro (explicação, perguntas, senha nova) ---------- */
.pt-fluxo {
    min-height: 100dvh; background: #fff; padding: 50px 35px 40px; display: flex; flex-direction: column;
    max-width: 560px; margin: 0 auto;
}
.pt-fluxo-cab { margin: 70px 0 40px; }
.pt-fluxo-fino { font-size: 20px; font-weight: 500; }
.pt-fluxo-forte { font-size: 24px; font-weight: 700; margin: 2px 0 0; }
.pt-fluxo-corpo { flex: 1; }
.pt-fluxo-texto { font-size: 20px; line-height: 26px; margin: 0 0 20px; }
.pt-fluxo-logo { width: 50px; height: 50px; object-fit: contain; align-self: center; margin-top: 40px; }

.pt-quiz { flex: 1; margin-top: 60px; }
.pt-quiz-titulo { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.pt-quiz-barra { height: 4px; background: #E5E7EB; border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
.pt-quiz-barra span { display: block; height: 100%; background: var(--pt-botao); transition: width .3s; }
.pt-quiz-pergunta { font-size: 18px; line-height: 24px; margin: 0; }
.pt-quiz-opcoes { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.pt-quiz-opcao {
    display: block; width: 100%; text-align: left; border: 2px solid #E5E7EB; border-radius: 12px; padding: 16px 20px;
    background: #F9FAFB; color: #374151; font-size: 16px; font-weight: 500;
}
.pt-quiz-opcao:hover:not(:disabled) { border-color: #C7D2E3; }
.pt-quiz-opcao.on { border-color: var(--pt-botao); background: #E6F0FA; color: var(--pt-botao); font-weight: 700; }
.pt-quiz-acoes .pt-btn.cinza, .pt-quiz-acoes .pt-btn.cheio { border-radius: 25px; }
.pt-quiz-acoes .pt-btn.cheio { background: var(--pt-modulo); }
.pt-quiz-acoes .pt-btn.largo { flex: 2; }

.pt-senha-nova .pt-fluxo-corpo { margin-top: 20px; }
.pt-senha-nova-titulo { font-size: 24px; font-weight: 700; margin: 0 0 5px; }
.pt-senha-nova-sub { font-size: 20px; line-height: 24px; margin: 0 0 20px; }

.pt-sanfona { border: 1px solid #E5E7EB; border-radius: 20px; margin-bottom: 18px; overflow: hidden; background: #fff; }
.pt-sanfona-cab {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 20px; background: none; border: 0; text-align: left; color: var(--pt-botao); font-size: 16px; font-weight: 700;
}
.pt-sanfona-seta { width: 32px; height: 32px; border-radius: 50%; background: #D4D4D4; display: grid; place-items: center; color: #000; transition: transform .2s; }
.pt-sanfona.aberta .pt-sanfona-seta { transform: rotate(180deg); }
.pt-sanfona-corpo { padding: 15px 22px 22px; border-top: 1px solid #E5E7EB; }
.pt-termo-t1 { font-size: 16px; font-weight: 700; color: var(--pt-botao); line-height: 22px; margin: 0 0 8px; }
.pt-termo-t { font-size: 16px; font-weight: 700; color: var(--pt-botao); line-height: 22px; margin: 16px 0 8px; }
.pt-termo-p { font-size: 14px; color: #808080; line-height: 20px; margin: 0 0 10px; }
.pt-termo-pdf { display: inline-flex; align-items: center; gap: 8px; color: var(--pt-modulo); font-size: 14px; font-weight: 500; margin-top: 10px; }

.pt-aceites { margin: 10px 0 20px; display: flex; flex-direction: column; gap: 6px; }
.pt-aceite { display: flex; align-items: center; justify-content: flex-start; gap: 12px; background: none; border: 0; padding: 8px 4px; text-align: left; }
.pt-aceite-caixa {
    width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--pt-botao);
    display: grid; place-items: center; color: #fff; font-size: 16px; flex: none;
}
.pt-aceite.on .pt-aceite-caixa { background: var(--pt-botao); }
.pt-aceite-texto { font-size: 14px; font-weight: 500; color: #333; }

/* ---------- Seleção de matrícula ---------- */
.pt-matr { min-height: 100dvh; background: #fff; padding: 0 40px 40px; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.pt-matr-cab { display: flex; align-items: center; gap: 16px; padding: 90px 0 28px; }
.pt-matr-cab > div { flex: 1; }
.pt-matr-fino { font-size: 22px; }
.pt-matr-forte { font-size: 28px; font-weight: 700; margin: -2px 0 0; }
.pt-matr-sub { font-size: 14px; color: var(--pt-cinza); margin: 12px 0 0; }
.pt-matr-logo { width: 30px; height: 30px; object-fit: contain; }
.pt-matr-lista { display: flex; flex-direction: column; gap: 16px; }
.pt-matr-card {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; text-align: left;
    background: #fff; border: 1px solid var(--pt-borda); border-radius: 16px; padding: 18px 20px;
    transition: border-color .15s, box-shadow .15s;
}
.pt-matr-card:hover:not(:disabled) { border-color: #D6DCE6; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.pt-matr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-matr-num { font-size: 20px; font-weight: 700; }
.pt-matr-cargo { font-size: 14px; color: var(--pt-cinza); margin-top: 4px; }
.pt-matr-emp { font-size: 13px; color: var(--pt-cinza); margin-top: 2px; }
.pt-matr-seta { color: var(--pt-cinza); font-size: 22px; }
.pt-matr-sair { margin-top: auto; padding-top: 30px; color: var(--pt-cinza); align-self: center; }

/* ---------- Tela inicial ---------- */
.pt-inicio { min-height: 100dvh; background: var(--pt-fundo); }
.pt-inicio-cab {
    background: linear-gradient(160deg, var(--pt-azul) 0%, var(--pt-azul-claro) 140%);
    color: #fff; padding: calc(56px + env(safe-area-inset-top)) 30px 60px;
}
.pt-inicio-cab-conteudo { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-start; gap: 16px; }
.pt-inicio-ola { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-inicio-ola-fino { font-size: 14px; color: rgba(255, 255, 255, .8); }
.pt-inicio-ola-nome { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-inicio-acoes { display: flex; gap: 10px; }
.pt-inicio-acao {
    position: relative; width: 40px; height: 40px; border-radius: 10px; border: 0;
    background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; font-size: 24px;
}
.pt-inicio-acao:hover { background: rgba(255, 255, 255, .3); }
.pt-inicio-badge {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--pt-perigo); color: #fff; font-size: 11px; font-weight: 700;
    display: grid; place-items: center; border: 2px solid var(--pt-azul);
}
.pt-inicio-corpo {
    position: relative; margin-top: -30px; background: var(--pt-fundo); border-top-left-radius: 35px;
    padding: 24px 24px calc(30px + env(safe-area-inset-bottom)); min-height: calc(100dvh - 150px);
}
.pt-inicio-corpo > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

.pt-busca {
    display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 25px;
    padding: 0 18px; height: 48px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); color: var(--pt-cinza-2);
}
.pt-busca input { flex: 1; border: 0; outline: none; background: none; font-size: 14px; color: #333; min-width: 0; }
.pt-busca input::placeholder { color: var(--pt-cinza-2); }
.pt-busca:focus-within { box-shadow: 0 0 0 3px rgba(63, 121, 228, .25), 0 2px 4px rgba(0, 0, 0, .1); }

.pt-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pt-grade-esqueleto { border-radius: 20px !important; }
.pt-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px;
    background: #fff; border: 0; border-radius: var(--pt-raio); padding: 16px; min-height: 120px; text-align: left;
    transition: transform .12s, box-shadow .15s;
}
.pt-card:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(35, 67, 126, .12); transform: translateY(-1px); }
.pt-card:active:not(:disabled) { transform: scale(.98); }
.pt-card:disabled { opacity: .7; }
.pt-card-icone { width: 44px; height: 44px; border-radius: 8px; background: var(--pt-azul); color: #fff; display: grid; place-items: center; font-size: 22px; }
.pt-card-titulo { font-size: 13px; font-weight: 600; color: #333; line-height: 18px; }
.pt-card-ponto { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--pt-perigo); }
.pt-card-fora { position: absolute; bottom: 14px; right: 14px; color: var(--pt-cinza-2); font-size: 16px; }
.pt-grade-vazia { grid-column: 1 / -1; text-align: center; padding: 40px 10px; color: var(--pt-cinza-2); }
.pt-grade-vazia ion-icon { font-size: 40px; color: #ccc; }
.pt-grade-vazia p { font-size: 16px; margin: 10px 0 0; }
.pt-versao { text-align: center; font-size: 13px; color: #6b6b6b; margin-top: 30px; }

/* ---------- Telas internas (mensagens, perfil, senha, termos) ---------- */
.pt-cab {
    display: flex; align-items: center; gap: 14px; padding: calc(24px + env(safe-area-inset-top)) 25px 15px;
    background: inherit; position: sticky; top: 0; z-index: 10;
}
.pt-cab-voltar {
    width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; color: #000;
    display: grid; place-items: center; font-size: 18px; box-shadow: 0 4px 8px rgba(0, 0, 0, .12);
}
.pt-cab-titulo { flex: 1; font-size: 18px; font-weight: 700; margin: 0; }
.pt-interna { min-height: 100dvh; background: var(--pt-fundo); }
.pt-interna > .pt-cab, .pt-perfil > .pt-cab { background: var(--pt-fundo); }
.pt-form { padding: 10px 25px 40px; max-width: var(--pt-coluna); margin: 0 auto; }

.pt-msg { min-height: 100dvh; background: #fff; display: flex; flex-direction: column; }
.pt-msg > .pt-cab { background: #fff; }
.pt-msg-lista { flex: 1; padding: 0 20px 30px; max-width: 820px; width: 100%; margin: 0 auto; }
.pt-msg-esqueleto { border-radius: 16px !important; }
.pt-msg-dia { text-align: center; margin: 20px 0 12px; }
.pt-msg-dia span { display: inline-block; font-size: 14px; color: #999; font-weight: 600; background: #F0F0F0; padding: 4px 12px; border-radius: 10px; }
.pt-msg-item { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 15px; }
.pt-msg-balao {
    background: var(--pt-modulo); color: #fff; padding: 15px 20px; border-radius: 20px 20px 20px 5px;
    max-width: 85%; font-size: 16px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.pt-msg-hora { font-size: 13px; color: #999; margin: 3px 0 0 10px; }
.pt-msg-fim { text-align: center; color: #999; font-size: 13px; padding: 20px 0; margin: 0; }
.pt-msg-novas {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px auto; border: 1px solid #ccc; border-radius: 30px;
    padding: 12px 20px; background: #fff; color: #999; font-size: 13px;
}
.pt-msg-novas span { background: var(--pt-modulo); color: #fff; border-radius: 15px; padding: 4px 10px; font-weight: 600; }
.pt-msg-vazio { text-align: center; padding: 80px 20px; color: #999; }
.pt-msg-vazio ion-icon { font-size: 64px; color: #ccc; }
.pt-msg-vazio p { font-size: 16px; margin: 16px 0 0; }

.pt-perfil { min-height: 100dvh; background: var(--pt-fundo); padding-bottom: 60px; }
.pt-perfil-dados {
    background: #fff; border-radius: 0 0 30px 30px; padding: 0 20px 40px; max-width: var(--pt-coluna); margin: 0 auto;
}
.pt-perfil-secao { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; margin: 0 0 24px 10px; padding-top: 20px; }
.pt-perfil-esqueleto { border-radius: 10px !important; margin-bottom: 15px; }
.pt-perfil-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.pt-dado { border: 1px solid var(--pt-borda); border-radius: 10px; padding: 12px; margin-bottom: 15px; background: #fff; min-width: 0; }
.pt-dado-rotulo { display: block; font-size: 12px; color: var(--pt-cinza); margin-bottom: 4px; }
.pt-dado-valor { display: block; font-size: 16px; color: #333; font-weight: 500; overflow-wrap: anywhere; }
.pt-perfil-config { padding: 20px 20px 0; max-width: var(--pt-coluna); margin: 0 auto; }
.pt-perfil-config-titulo { font-size: 18px; font-weight: 700; margin: 0 0 20px 10px; }
.pt-perfil-item {
    display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px;
    background: #fff; border: 0; border-radius: 20px; padding: 15px 20px; margin-bottom: 15px;
    font-size: 16px; font-weight: 500; color: #000; text-align: left;
}
button.pt-perfil-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.pt-perfil-item ion-icon { color: #8d8d8d; font-size: 20px; }
.pt-perfil-item-valor { color: #8d8d8d; font-weight: 400; }
.pt-perfil-sair {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 30px;
    background: var(--pt-perigo); color: #fff; border: 0; border-radius: 20px; padding: 15px 20px; font-size: 16px; font-weight: 600;
}
.pt-perfil-sair ion-icon { font-size: 22px; }

/* ---------- Módulo no iframe ---------- */
.pt-mod { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; z-index: 5; }
.pt-mod-cab {
    display: flex; align-items: center; gap: 10px; background: var(--pt-modulo); color: #fff;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px; min-height: 60px;
}
.pt-mod-titulo { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; margin: 0 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-mod-btn {
    width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .2); color: #fff;
    display: grid; place-items: center; font-size: 20px; text-decoration: none; flex: none;
}
.pt-mod-btn:hover { background: rgba(255, 255, 255, .3); }
.pt-mod-corpo { position: relative; flex: 1; min-height: 0; }
.pt-mod-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pt-mod-carregando {
    position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; color: #666; font-size: 14px;
}

/* ---------- Holerite, informe de rendimentos, extrato (o protótipo de 08/10/2026) ---------- */
.pt-srv-corpo { padding: 4px 25px 40px; max-width: var(--pt-coluna); margin: 0 auto; }
.pt-srv-sub { font-size: 14px; color: var(--pt-cinza); margin: 0 0 16px; }
.pt-srv-esqueleto { border-radius: 18px !important; }
.pt-srv-ano {
    display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none;
    padding: 16px 4px 8px; font-size: 16px; font-weight: 700; color: var(--pt-botao); text-align: left;
}
.pt-srv-ano small { font-weight: 500; color: var(--pt-cinza); font-size: 13px; margin-left: 8px; }
.pt-srv-chev { transition: transform .2s; color: #555; font-size: 18px; }
.pt-srv-ano[aria-expanded="true"] .pt-srv-chev { transform: rotate(180deg); }
.pt-srv-lista { background: #fff; border-radius: 18px; overflow: hidden; }
.pt-srv-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; border: 0; background: #fff;
    padding: 16px 18px; text-align: left; border-top: 1px solid var(--pt-borda); color: #000; min-height: 56px;
}
.pt-srv-item:first-child { border-top: 0; }
.pt-srv-item:hover:not(:disabled) { background: #F4F7FC; }
.pt-srv-item:disabled { cursor: default; }
.pt-srv-item-t { flex: 1; min-width: 0; }
.pt-srv-item-t b { display: block; font-size: 16px; font-weight: 600; }
.pt-srv-item-t small { display: block; font-size: 13px; color: var(--pt-cinza); margin-top: 2px; }
.pt-srv-item > ion-icon { color: #999; font-size: 18px; }
.pt-srv-anos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pt-srv-anobtn {
    border: 1px solid #E5E7EB; background: #fff; border-radius: 14px; padding: 16px 6px; min-height: 58px;
    font-size: 17px; font-weight: 700; color: var(--pt-botao); display: grid; place-items: center; justify-content: center;
}
.pt-srv-anobtn:hover:not(:disabled) { border-color: #C7D2E3; }
.pt-srv-vazio { text-align: center; padding: 50px 20px; color: #999; }
.pt-srv-vazio ion-icon { font-size: 56px; color: #ccc; }
.pt-srv-vazio p { font-size: 16px; margin: 14px 0 0; line-height: 1.45; }
.pt-srv-folha { padding: 0 6px 6px; }
.pt-app-fim { padding-top: 12vh; text-align: center; }
.pt-app-fim .pt-btn { max-width: 320px; margin: 10px auto 0; }
.pt-srv-folha h2 { margin: 0 0 4px; font-size: 19px; text-align: center; }
.pt-srv-folha p { margin: 0 0 18px; text-align: center; color: #666; font-size: 14px; }
.pt-srv-opcao {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    border: 2px solid #E5E7EB; background: #F9FAFB; border-radius: 12px; padding: 15px 16px; margin-bottom: 10px;
    text-align: left; font-size: 16px; font-weight: 600; color: #374151; min-height: 54px;
}
.pt-srv-opcao:hover:not(:disabled) { border-color: #C7D2E3; }
.pt-srv-opcao ion-icon { color: #999; }

/* O visualizador de PDF: a barra azul dos módulos, o tamanho e o "Baixar PDF"; as páginas sobre o cinza. */
.pt-vis-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #E5E7EB; background: #fff; }
.pt-seg { display: inline-flex; border: 1px solid #D0D5DD; border-radius: 10px; overflow: hidden; }
.pt-seg button { border: 0; background: #fff; padding: 8px 12px; font-size: 13.5px; color: #333; }
.pt-seg button + button { border-left: 1px solid #D0D5DD; }
.pt-seg button[aria-pressed="true"] { background: var(--pt-botao); color: #fff; }
.pt-vis-baixar {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--pt-botao); color: #fff;
    border-radius: 20px; padding: 8px 15px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.pt-mod-carregando .pt-vis-baixar { margin-left: 0; }
.pt-vis-icone { font-size: 48px; color: #bbb; }
.pt-vis-tentar { width: auto; padding: 10px 24px; }
.pt-vis-area { position: absolute; inset: 0; overflow: auto; background: #E3E7EE; padding: 12px; }
.pt-pdf-pagina { width: fit-content; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.pt-vis-area.cem .pt-pdf-pagina { margin: 0; }
.pt-pdf-pagina canvas { display: block; }
.pt-pdf-rodape { text-align: center; font-size: 12px; color: #6b7280; padding: 6px 0 14px; }

/* ---------- Tablet e computador ---------- */
@media (min-width: 640px) {
    .pt-grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .pt-inicio-corpo { padding-left: 40px; padding-right: 40px; }
    .pt-inicio-cab { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 900px) {
    .pt-folha-fundo { align-items: center; }
    .pt-folha { width: min(460px, 92vw); max-height: 88vh; border-radius: 24px; padding-bottom: 24px; }
    .pt-folha-fundo.alta .pt-folha { height: auto; max-height: 88vh; }
    .pt-folha-pegador { display: none; }
    .pt-folha .pt-login, .pt-folha .pt-conf { padding-top: 22px; }

    .pt-entrada-topo { padding-top: 14vh; }
    .pt-entrada-titulo { font-size: 40px; }
    .pt-entrada-sub { font-size: 16px; }

    .pt-fluxo { padding-top: 30px; }
    .pt-fluxo-cab, .pt-quiz { margin-top: 40px; }
    .pt-inicio-cab { padding-top: 40px; }
    .pt-cab { padding-top: 24px; max-width: var(--pt-coluna); margin: 0 auto; }
    .pt-msg > .pt-cab { max-width: 820px; width: 100%; }
    .pt-srv-anos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}