/* =====================================================================
   Ricos — folha única, mobile first
   Local: /var/www/ricos/public_html/_css/estilo.css
   Versão: V05 (10/11/2026) — faixa vermelha de avisos (do Fé na Vida); cartela com acertos e sorteadas.
           V04 (10/11/2026) — cartela de dezenas, conferência do bilhete, foto na lista de usuários.
           V03 (10/11/2026) — caixinha: valores e réguas das metas.
           V02 (10/11/2026) — menu do perfil (Olá, Nome! + avatar).
           V01 (10/11/2026) — a partir do estilo.css do Fé na Vida, só com o que o
           Ricos usa (sem paciente, jornada, exames, documentos, ajuda e demonstrações).

   Paleta padrão: azul. Cada usuário terá a sua em "Minha conta"; o topo.php
   escreve <html data-paleta="codigo">.
   Cabeçalho ≈ 20% da altura da tela; rodapé cinza ≈ 12%.
   ===================================================================== */

/* --- Cores ------------------------------------------------------------- */
[data-paleta="rosa"] {
  --cor-forte: #c2185b;         /* botões, links, destaques            */
  --cor-media: #ec6f8f;         /* início do degradê do cabeçalho      */
  --cor-clara: #f7a8b8;         /* fim do degradê                      */
  --cor-suave: #fde4ea;         /* fundos de destaque                  */
  --cor-fundo: #fff7f9;         /* fundo da página                     */
  --cor-texto-topo: #ffffff;
  --cor-faixa: #fbd3dc;         /* faixa de referência nos gráficos    */
}
[data-paleta="vermelho"] {
  --cor-forte: #c62828; --cor-media: #ef6461; --cor-clara: #f8a5a0;
  --cor-suave: #fde3e1; --cor-fundo: #fff8f7; --cor-texto-topo: #ffffff; --cor-faixa: #fbd2cf;
}
[data-paleta="laranja"] {
  --cor-forte: #c24e00; --cor-media: #f2863c; --cor-clara: #f9b98a;
  --cor-suave: #fde9da; --cor-fundo: #fffaf5; --cor-texto-topo: #ffffff; --cor-faixa: #fcdcc3;
}
[data-paleta="amarelo"] {
  --cor-forte: #8a6100; --cor-media: #f2c230; --cor-clara: #f8dd86;
  --cor-suave: #fdf3cf; --cor-fundo: #fffdf4; --cor-texto-topo: #3a2c00; --cor-faixa: #f8e9b0;
}
[data-paleta="verde"] {
  --cor-forte: #2e7d32; --cor-media: #5fb56a; --cor-clara: #a5d9a9;
  --cor-suave: #e3f3e4; --cor-fundo: #f7fcf7; --cor-texto-topo: #ffffff; --cor-faixa: #cdeacf;
}
:root,
[data-paleta="azul"] {
  --cor-forte: #1565c0; --cor-media: #4f94dd; --cor-clara: #9cc6f0;
  --cor-suave: #e1eefb; --cor-fundo: #f6faff; --cor-texto-topo: #ffffff; --cor-faixa: #cfe2f7;
}

:root {
  --superficie: #ffffff;
  --superficie-2: #f4f4f5;
  --tinta: #1f2328;
  --tinta-2: #4a4f57;
  --tinta-3: #6e747c;
  --linha: #e3e4e8;
  --ok: #2f7a4d;       --ok-suave: #e3f1e8;
  --andamento: #1f5f8b; --andamento-suave: #e2edf6;
  --alerta: #b3261e;   --alerta-suave: #fde7e5;
  --aviso: #8a5300;    --aviso-suave: #fdf0dc;
  --neutro: #5f656d;   --neutro-suave: #eceef0;
  --cinza-rodape-1: #eceef1;
  --cinza-rodape-2: #d5d9de;
  --cinza-rodape-texto: #4b5360;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(40, 20, 30, .06), 0 4px 14px rgba(40, 20, 30, .05);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largura-menu: min(300px, 86vw);
  color-scheme: light;
}

/* --- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--tinta);
  font: 16px/1.5 var(--fonte);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.menu-aberto { overflow: hidden; }
a { color: var(--cor-forte); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.45rem, 4.5vw, 1.9rem); }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 2px; }
.texto-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.nota { color: var(--tinta-3); font-size: .9rem; }
.numero { font-variant-numeric: tabular-nums; }
td.numero, th.numero { text-align: right; white-space: nowrap; }

/* --- Cabeçalho (≈20% da altura) ---------------------------------------- */
.topo {
  min-height: 20vh;
  min-height: 20dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px clamp(14px, 4vw, 32px) 0;
  background: linear-gradient(120deg, var(--cor-media), var(--cor-clara));
  color: var(--cor-texto-topo);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.topo-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1.1rem, 3.6vw, 1.45rem);
  letter-spacing: .01em;
  margin-right: auto;
}
.marca-trevo { fill: currentColor; }
.marca-trevo-haste { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.topo-usuario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.topo-ajuda {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  color: inherit; text-decoration: none; font-weight: 700; font-size: 1.1rem;
}
.topo-ajuda:hover, .topo-ajuda:focus-visible { background: rgba(255, 255, 255, .2); }
.topo-usuario .avatar { width: 42px; height: 42px; border: 2px solid rgba(255, 255, 255, .85); }
.topo-paciente {
  max-width: 1120px; width: 100%; margin: 0 auto;
  font-size: clamp(1.1rem, 3.5vw, 1.35rem); font-weight: 700;
}

/* Botão hambúrguer */
.botao-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, .18);
  flex: none;
}
.botao-menu:hover { background: rgba(255, 255, 255, .3); }
.hamburguer { display: grid; gap: 5px; width: 22px; }
.hamburguer i { display: block; height: 2.5px; border-radius: 2px; background: currentColor; }

.topo { padding-bottom: 14px; justify-content: center; }

/* --- Menu lateral (gaveta) --------------------------------------------- */
.menu-alternador { position: absolute; opacity: 0; pointer-events: none; }
.menu-lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--largura-menu);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  transform: translateX(-105%);
  transition: transform .22s ease;
  overflow-y: auto;
  visibility: hidden;
}
.menu-alternador:checked ~ .menu-lateral { transform: none; visibility: visible; }
.menu-fundo {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(20, 10, 15, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.menu-alternador:checked ~ .menu-fundo { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .menu-lateral, .menu-fundo { transition: none; }
}
.menu-lateral-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  background: linear-gradient(120deg, var(--cor-media), var(--cor-clara));
  color: var(--cor-texto-topo);
}
.menu-lateral-topo > div { display: grid; min-width: 0; flex: 1; }
.menu-lateral-topo .nota { color: inherit; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-lateral-topo .avatar { width: 48px; height: 48px; border: 2px solid rgba(255, 255, 255, .85); }
.menu-fechar {
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
}
.menu-fechar:hover { background: rgba(255, 255, 255, .25); }
.menu-grupo {
  margin: 16px 18px 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.menu-lateral ul { list-style: none; margin: 0; padding: 0 8px; }
.menu-lateral li a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 500;
}
.menu-lateral li a:hover { background: var(--cor-suave); }
.menu-lateral li a[aria-current] { background: var(--cor-suave); color: var(--cor-forte); font-weight: 700; }
.menu-sair {
  margin: auto 16px 20px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  text-align: center;
  color: var(--alerta);
  text-decoration: none;
  font-weight: 600;
}
.menu-sair:hover { background: var(--alerta-suave); }

/* --- Conteúdo ---------------------------------------------------------- */
.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) clamp(12px, 4vw, 32px) 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.secao { display: flex; flex-direction: column; gap: 12px; }
.linha-titulo, .cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}
.trilha { font-size: .9rem; color: var(--tinta-3); }
.trilha a { text-decoration: none; }
.link-voltar { margin-top: 6px; }
.link-voltar a { text-decoration: none; font-weight: 600; }

/* --- Cartões ----------------------------------------------------------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: clamp(14px, 3vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
a.cartao { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.cartao:hover { border-color: var(--cor-media); transform: translateY(-1px); }
.cartao-pagina { gap: 14px; }
.cartao-pagina > .cartao { box-shadow: none; background: var(--superficie-2); }
.cartao-formulario { width: 100%; max-width: 440px; margin: 4vh auto 0; }
.grade-2 { display: grid; gap: 18px; grid-template-columns: 1fr; }
.grade-conta { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .grade-2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .grade-conta { grid-template-columns: 1fr 1fr; align-items: start; }
  .cartao-largo { grid-column: 1 / -1; }
}

/* --- Botões ------------------------------------------------------------ */
.botao, button:not(.menu-fechar) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--cor-forte);
  border-radius: 10px;
  background: var(--cor-forte);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
[data-paleta="amarelo"] .botao:not(.secundario):not(.perigo),
[data-paleta="amarelo"] button:not(.secundario):not(.perigo) { color: #fff; }
.botao:hover, button:hover { filter: brightness(1.08); }
.botao.secundario, button.secundario { background: var(--superficie); color: var(--cor-forte); }
.botao.secundario:hover { background: var(--cor-suave); filter: none; }
.botao.perigo, button.perigo { background: var(--superficie); color: var(--alerta); border-color: #e9b4ae; }
.botao.perigo:hover { background: var(--alerta-suave); filter: none; }
.botao.pequeno, button.pequeno { min-height: 32px; padding: 4px 12px; font-size: .88rem; border-radius: 8px; }
.icone-editar {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  text-decoration: none; font-size: 1.05rem;
  color: var(--cor-forte); background: var(--cor-suave);
}
.icone-editar:hover { filter: brightness(.96); }
.acoes-linha, .acoes-situacao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acoes-linha { justify-content: flex-end; }
.acoes-formulario { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.formulario-inline { display: inline; margin: 0; }

/* --- Formulários ------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: 8px; }
.formulario label, .filtros label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .92rem; color: var(--tinta-2); }
.formulario > label + input, .formulario > label + select, .formulario > label + textarea { margin-bottom: 6px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d3d5da;
  border-radius: 10px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-weight: 400;
}
input[type="file"] { padding: 7px; background: var(--superficie-2); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-forte); box-shadow: 0 0 0 3px var(--cor-suave); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--cor-forte); flex: none; }
.formulario .rotulo-caixa, .filtros .rotulo-caixa, .rotulo-caixa {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-weight: 500; color: var(--tinta);
}
.formulario-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.formulario-grade .campo-inteiro { grid-column: 1 / -1; }
@media (min-width: 640px) { .formulario-grade .campo-largo { grid-column: span 2; } }
.formulario-linha, .filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.formulario-linha label, .filtros label:not(.rotulo-caixa) { flex: 1 1 180px; }
.filtros .rotulo-caixa { min-height: 42px; }
.formulario-cadastro { max-width: 560px; }
.campo-com-botao { display: flex; gap: 8px; align-items: stretch; }
.campo-com-botao input { flex: 1; }
.campo-motivo { max-width: 220px; min-height: 32px !important; padding: 4px 8px !important; font-size: .88rem !important; }
fieldset { border: 0; padding: 0; margin: 0; }

/* Painéis que abrem (+ Novo ...) */
details.editor {
  border: 1px dashed var(--cor-clara);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  padding: 0 16px;
}
details.editor[open] { padding-bottom: 16px; border-style: solid; }
details.editor > summary {
  cursor: pointer; list-style: none;
  padding: 12px 0; font-weight: 700; color: var(--cor-forte);
}
details.editor > summary::-webkit-details-marker { display: none; }
details.editor > form, details.editor > .mensagem { margin-top: 4px; }
details.editor > .formulario-inline { display: block; margin-top: 12px; }

/* --- Mensagens e selos ------------------------------------------------- */
.mensagem { padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; font-weight: 500; }
.mensagem-sucesso { background: var(--ok-suave); color: var(--ok); border-color: #bfdcc9; }
.mensagem-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: #f0d3a6; }
.mensagem-erro { background: var(--alerta-suave); color: var(--alerta); border-color: #f1bfba; }
.selo {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.selo-ok { background: var(--ok-suave); color: var(--ok); }
.selo-andamento { background: var(--andamento-suave); color: var(--andamento); }
.selo-alerta { background: var(--alerta-suave); color: var(--alerta); }
.selo-neutro { background: var(--neutro-suave); color: var(--neutro); }
.selo-previsto { background: var(--cor-suave); color: var(--cor-forte); }

/* --- Tabelas ----------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela thead th { background: var(--cor-suave); color: var(--tinta-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela-listrada tbody tr:nth-child(even) { background: #fafafb; }
.paginacao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* --- Avatar e Minha conta ---------------------------------------------- */
.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cor-suave);
}
.avatar-iniciais {
  display: inline-grid; place-items: center;
  color: var(--cor-forte); font-weight: 700; font-size: .95rem;
  background: #fff;
}
.avatar-grande { width: 96px; height: 96px; font-size: 1.8rem; border: 3px solid var(--superficie); box-shadow: var(--sombra); }
.cabecalho-conta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cabecalho-conta > div { display: grid; gap: 4px; min-width: 0; }
.escolha-paleta { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.escolha-paleta legend { margin-bottom: 8px; }
.opcao-paleta {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer;
  color: var(--tinta) !important;
}
.opcao-paleta:has(input:checked) { border-color: var(--cor-forte); box-shadow: 0 0 0 2px var(--cor-suave); }
.amostra { display: inline-flex; border-radius: 6px; overflow: hidden; }
.amostra i { display: block; width: 12px; height: 22px; }
[data-paleta-amostra="rosa"] .amostra i:nth-child(1) { background: #c2185b; }
[data-paleta-amostra="rosa"] .amostra i:nth-child(2) { background: #ec6f8f; }
[data-paleta-amostra="rosa"] .amostra i:nth-child(3) { background: #f7a8b8; }
[data-paleta-amostra="vermelho"] .amostra i:nth-child(1) { background: #c62828; }
[data-paleta-amostra="vermelho"] .amostra i:nth-child(2) { background: #ef6461; }
[data-paleta-amostra="vermelho"] .amostra i:nth-child(3) { background: #f8a5a0; }
[data-paleta-amostra="laranja"] .amostra i:nth-child(1) { background: #c24e00; }
[data-paleta-amostra="laranja"] .amostra i:nth-child(2) { background: #f2863c; }
[data-paleta-amostra="laranja"] .amostra i:nth-child(3) { background: #f9b98a; }
[data-paleta-amostra="amarelo"] .amostra i:nth-child(1) { background: #8a6100; }
[data-paleta-amostra="amarelo"] .amostra i:nth-child(2) { background: #f2c230; }
[data-paleta-amostra="amarelo"] .amostra i:nth-child(3) { background: #f8dd86; }
[data-paleta-amostra="verde"] .amostra i:nth-child(1) { background: #2e7d32; }
[data-paleta-amostra="verde"] .amostra i:nth-child(2) { background: #5fb56a; }
[data-paleta-amostra="verde"] .amostra i:nth-child(3) { background: #a5d9a9; }
[data-paleta-amostra="azul"] .amostra i:nth-child(1) { background: #1565c0; }
[data-paleta-amostra="azul"] .amostra i:nth-child(2) { background: #4f94dd; }
[data-paleta-amostra="azul"] .amostra i:nth-child(3) { background: #9cc6f0; }

/* --- Rodapé cinza (≈12% da altura) ------------------------------------- */
.rodape {
  min-height: 12vh;
  min-height: 12dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 16px clamp(14px, 4vw, 32px);
  background: linear-gradient(180deg, var(--cinza-rodape-1), var(--cinza-rodape-2));
  border-top: 1px solid #c9ced4;
  color: var(--cinza-rodape-texto);
  font-size: .85rem;
  text-align: center;
}
.rodape strong { color: #373d46; }

/* --- Impressão --------------------------------------------------------- */
@media print {
  .ajuda-indice, .ajuda .alternador-coleta, .ajuda .trilha, .topo-ajuda,
  .topo, .rodape, .menu-lateral, .menu-fundo, .abas, .botao, button, details.editor, .filtros { display: none !important; }
  body { background: #fff; }
  .cartao { box-shadow: none; break-inside: avoid; }
}

[hidden] { display: none !important; }

/* Fogos de artifício (desenhados pelo _js/app.js; não bloqueiam cliques) */
.camada-fogos { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1000; }

/* --- Enviar documento: três barras por arquivo -------------------------- */
.area-arquivos {
  display: grid; gap: 10px; place-items: center; text-align: center;
  border: 2px dashed var(--cor-clara); border-radius: var(--raio); padding: 22px 16px;
  background: var(--cor-suave); cursor: pointer;
}
.area-arquivos:hover { border-color: var(--cor-forte); }
.area-arquivos input[type="file"] { max-width: 100%; }
.lista-envios { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.envio { border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; background: var(--superficie); display: grid; gap: 8px; }
.envio-nome { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.envio-conferir { justify-self: start; }
.etapa-envio { display: grid; grid-template-columns: minmax(150px, 190px) 1fr minmax(120px, 34%); gap: 10px; align-items: center; }
.etapa-nome { font-size: .92rem; font-weight: 600; color: var(--tinta-2); }
.etapa-frase { font-size: .85rem; color: var(--tinta-3); overflow-wrap: anywhere; }
.etapa-envio progress { width: 100%; height: 14px; appearance: none; border: 0; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.etapa-envio progress::-webkit-progress-bar { background: var(--superficie-2); border-radius: 999px; }
.etapa-envio progress::-webkit-progress-value { background: var(--cor-forte); border-radius: 999px; transition: width .4s ease; }
.etapa-envio progress::-moz-progress-bar { background: var(--cor-forte); border-radius: 999px; }
.etapa-feita progress::-webkit-progress-value { background: var(--ok); }
.etapa-feita progress::-moz-progress-bar { background: var(--ok); }
.etapa-feita .etapa-frase { color: var(--ok); font-weight: 600; }
.etapa-erro progress::-webkit-progress-value { background: var(--alerta); }
.etapa-erro progress::-moz-progress-bar { background: var(--alerta); }
.etapa-erro .etapa-frase { color: var(--alerta); font-weight: 600; }
@media (max-width: 560px) {
  .etapa-envio { grid-template-columns: 1fr; gap: 4px; }
}

/* Aviso do topo para Suporte e Desenvolvedor (ex.: pendrive dos documentos desmontado) */
.faixa-sistema { background: #fff3cd; color: #6b4e00; border: 2px solid #e0b400; border-radius: var(--raio); padding: 12px 16px; margin: 0 0 16px; }
.faixa-sistema a { color: inherit; font-weight: 700; }

/* --- Menu lateral em submenus (Pacientes ▾ · Sistema ▾ · Ajuda ▾) ------ */
.menu-submenu > summary {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 8px 2px; padding: 8px 10px; border-radius: 10px; cursor: pointer; list-style: none;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.menu-submenu > summary::-webkit-details-marker { display: none; }
.menu-submenu > summary::after { content: '▾'; font-size: .9rem; transition: transform .2s ease; }
.menu-submenu[open] > summary::after { transform: rotate(180deg); }
.menu-submenu > summary:hover { background: var(--cor-suave); color: var(--tinta-2); }
@media (prefers-reduced-motion: reduce) { .menu-submenu > summary::after { transition: none; } }

/* --- Acréscimos do Ricos ------------------------------------------------ */
/* nome vindo do Google em minúsculas: "osvaldo teodoro" → "Osvaldo Teodoro" na tela */
.nome-pessoa { text-transform: capitalize; }

/* Botão "Entrar com Google" */
.botao-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 20px; border: 1px solid #dadce0; border-radius: 10px;
  background: #fff; color: #3c4043; font-weight: 600; text-decoration: none;
}
.botao-google:hover { background: #f8f9fa; border-color: #c6c9ce; }

/* Escolha de perfis na ativação */
.lista-perfis { display: grid; gap: 8px; }
.lista-perfis .rotulo-caixa { align-items: flex-start; }
.lista-perfis small { display: block; color: var(--tinta-3); font-weight: 400; }

/* Filtros em pílulas (Pendentes · Ativos · Todos) */
.filtro-situacao { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-situacao a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--linha); text-decoration: none; font-size: .88rem; color: var(--tinta-2); background: var(--superficie); }
.filtro-situacao a[aria-current] { background: var(--cor-forte); border-color: var(--cor-forte); color: #fff; }

/* Páginas de texto (termos, privacidade) */
.texto-longo { display: grid; gap: 10px; max-width: 75ch; }
.texto-longo h2 { margin-top: 8px; color: var(--cor-forte); }


/* Menu do perfil no topo: "Olá, Nome!" + avatar abrem as opções */
.menu-perfil { position: relative; }
.menu-perfil > summary {
  list-style: none; cursor: pointer;
  padding: 4px 4px 4px 12px; border-radius: 999px;
}
.menu-perfil > summary::-webkit-details-marker { display: none; }
.menu-perfil > summary:hover, .menu-perfil[open] > summary { background: rgba(255, 255, 255, .18); }
.menu-perfil-opcoes {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  display: grid; min-width: 230px; padding: 6px;
  background: var(--superficie); color: var(--tinta);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.menu-perfil-opcoes a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--tinta); text-decoration: none; font-weight: 500;
}
.menu-perfil-opcoes a:hover, .menu-perfil-opcoes a:focus-visible { background: var(--cor-suave); color: var(--cor-forte); }
@media (max-width: 380px) { .topo-usuario-nome { display: none; } }

/* --- Caixinha: valores e réguas das metas ---------------------------------- */
.valor-grande { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--cor-forte); }
.valor-destaque { font-weight: 700; font-variant-numeric: tabular-nums; }
.valor-entrada { color: var(--ok); }
.valor-saida { color: var(--alerta); }
.regua-meta { display: grid; gap: 8px; }
progress.regua {
  width: 100%; height: 18px; appearance: none; border: 0; border-radius: 999px;
  background: var(--cor-suave); overflow: hidden;
}
progress.regua::-webkit-progress-bar { background: var(--cor-suave); border-radius: 999px; }
progress.regua::-webkit-progress-value { background: var(--cor-forte); border-radius: 999px; transition: width .4s ease; }
progress.regua::-moz-progress-bar { background: var(--cor-forte); border-radius: 999px; }
.regua-atingida progress.regua::-webkit-progress-value { background: var(--ok); }
.regua-atingida progress.regua::-moz-progress-bar { background: var(--ok); }
.regua-atingida .valor-destaque { color: var(--ok); }
.grade-cartoes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* --- Apostas: cartela 1–25 ------------------------------------------------ */
.cartela { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.cartela .dezena { position: relative; display: block; cursor: pointer; }
.cartela .dezena input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cartela .dezena span, .cartela-pequena .dezena {
  display: grid; place-items: center; min-height: 46px; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--superficie);
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
.cartela .dezena input:checked + span { background: var(--cor-forte); border-color: var(--cor-forte); color: #fff; }
.cartela .dezena input:focus-visible + span { outline: 3px solid var(--cor-forte); outline-offset: 2px; }
.cartela-pequena { gap: 4px; max-width: 240px; }
.cartela-pequena .dezena { min-height: 30px; font-size: .8rem; border-radius: 7px; }
.cartela-pequena .dezena-marcada { background: var(--cor-forte); border-color: var(--cor-forte); color: #fff; }
.cartela-errada .cartela .dezena input:checked + span { background: var(--alerta); border-color: var(--alerta); }

/* --- Conferir: documento de um lado, dados do outro (do Fé na Vida) ------- */
.conferencia { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .conferencia { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.conferencia-documento { margin: 0; display: grid; gap: 6px; position: sticky; top: 10px; }
.conferencia-documento img { width: 100%; height: auto; border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.conferencia-documento iframe { width: 100%; height: min(80vh, 900px); border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
@media (max-width: 959px) { .conferencia-documento { position: static; } .conferencia-documento iframe { height: 60vh; } }
/* o que o sistema não leu: amarelo */
.formulario .campo-nao-lido input:not([type="checkbox"]):not([type="radio"]),
.formulario .campo-nao-lido select, .formulario label.campo-nao-lido input, .formulario label.campo-nao-lido select { background: #fff5c2 !important; border-color: #e0b400 !important; }
fieldset.campo-nao-lido { background: #fff8d6; border-radius: 10px; padding: 8px; }

/* Usuários: coluna da foto */
.coluna-avatar { width: 56px; }
.coluna-avatar .avatar { width: 36px; height: 36px; font-size: .8rem; }

/* Botão desligado (ex.: Confirmar com a cartela incompleta) */
button:disabled, .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }

/* --- Faixa vermelha de avisos (painel) ----------------------------------
   Vermelho fixo, independente da paleta escolhida: não pode se confundir com o
   resto da tela. Pulsa até a pessoa responder; parado com "reduzir movimento". */
.faixa-avisos {
  --vermelho-aviso: #c4161c;
  --vermelho-aviso-escuro: #8e0f13;
  background: var(--vermelho-aviso);
  color: #fff;
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 0 0 0 rgba(196, 22, 28, .55), var(--sombra);
  animation: pulsoAviso 1.6s ease-out infinite;
  scroll-margin-top: 12px;
}
.faixa-avisos h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.lista-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aviso { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; padding: 12px 14px; }
.aviso-confirmar { background: var(--vermelho-aviso-escuro); border-color: #fff; border-width: 2px; }
.aviso-titulo { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.aviso-detalhe { margin: 4px 0 0; opacity: .92; }
.aviso-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: flex-start; }
.faixa-avisos .botao-aviso,
.faixa-avisos button.botao-aviso {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 10px 20px; border-radius: 12px;
  border: 2px solid #fff; background: transparent; color: #fff;
  font: inherit; font-size: 1.05rem; font-weight: 700; text-decoration: none; cursor: pointer;
  list-style: none;
}
.faixa-avisos .botao-aviso::-webkit-details-marker { display: none; }
.faixa-avisos .botao-aviso-sim,
.faixa-avisos button.botao-aviso-sim { background: #fff; color: var(--vermelho-aviso-escuro); }
.faixa-avisos .botao-aviso:hover { filter: none; background: rgba(255, 255, 255, .2); }
.faixa-avisos .botao-aviso-sim:hover { background: #ffe9ea; }
.faixa-avisos .botao-aviso:focus-visible { outline: 3px solid #ffd54f; outline-offset: 2px; }
.aviso-formulario { flex: 0 1 auto; }
.aviso-formulario[open] { flex-basis: 100%; }
.aviso-formulario[open] > summary { margin-bottom: 10px; }
.faixa-avisos summary.botao-aviso { text-align: center; }
.aviso-formulario .formulario { background: #fff; color: var(--tinta); border-radius: 12px; padding: 14px; display: grid; gap: 10px; max-width: 460px; }
.aviso-formulario fieldset { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; margin: 0; }
.aviso-formulario .campo-curto { width: 5em; min-height: 36px; display: inline-block; }
@keyframes pulsoAviso {
  0%   { box-shadow: 0 0 0 0 rgba(196, 22, 28, .55), var(--sombra); }
  70%  { box-shadow: 0 0 0 14px rgba(196, 22, 28, 0), var(--sombra); }
  100% { box-shadow: 0 0 0 0 rgba(196, 22, 28, 0), var(--sombra); }
}
@media (max-width: 560px) {
  .aviso-acoes > * { flex: 1 1 100%; }
  .faixa-avisos .botao-aviso, .aviso-acoes .formulario-inline button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-avisos { animation: none; }
}

/* --- Resultado: acertos e sorteadas na cartela ------------------------------ */
.cartela-pequena .dezena-acerto, .cartela-resultado .dezena-acerto { background: var(--ok); border-color: var(--ok); color: #fff; }
.cartela-pequena .dezena-sorteada, .cartela-resultado .dezena-sorteada { border: 2px solid var(--ok); color: var(--ok); }
.cartela-resultado { gap: 6px; max-width: 360px; }
.cartela-resultado .dezena {
  display: grid; place-items: center; min-height: 46px; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--superficie);
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
.cartela-resultado .dezena-marcada { background: var(--cor-forte); border-color: var(--cor-forte); color: #fff; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--tinta-3); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.legenda .legenda-acerto { background: var(--ok); }
.legenda .legenda-jogada { background: var(--cor-forte); }
.legenda .legenda-sorteada { border: 2px solid var(--ok); }
.tabela tr.linha-premiada td { background: var(--ok-suave); font-weight: 600; }