/* Portal do Cliente — mesmo padrão da Plataforma Data Soft (padrão de aplicativos v2, versão B, lista compacta),
   pedido do Alex em 06/11/2026. As seções abaixo de "base" são cópia de ~/claude/plataforma-datasoft/app/static/estilo.css
   (mudou lá, copiar de novo); o que é só do portal fica no fim. Regras: ~/claude/conhecimento/programacao/padrao-aplicativos.md.
   Marca: preto, dourado #c9a14a / claro #e6c77a / escuro #7a5a30. O dourado é a ÚNICA cor de destaque. */
:root {
  --fundo: #0e0d0b; --sup: #171512; --sup2: #211e19; --sup3: #2a2620; --borda: #302b23;
  --txt: #f3efe6; --txt2: #aaa294; --txt3: #8c8578;
  --ouro: #c9a14a; --ouro-cl: #e6c77a; --ouro-esc: #7a5a30; --ouro-fundo: #2a2214; --sobre-ouro: #0e0d0b;
  --ok: #4cc98a; --aviso: #f2a33a; --erro: #f2635f;
  --ok-f: #12291c; --aviso-f: #33240d; --erro-f: #3a1514;
  --r: 12px; --r-peq: 10px;
  --fonte: system-ui, -apple-system, "Segoe UI", "DejaVu Sans", sans-serif;
  --curva: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--txt); font: 1rem/1.55 var(--fonte); -webkit-text-size-adjust: 100%; }
::selection { background: var(--ouro); color: var(--sobre-ouro); }
* { scrollbar-color: var(--sup3) var(--fundo); }
a { color: var(--ouro-cl); text-underline-offset: 3px; }
a:hover { color: var(--txt); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.n, td.n, th.n { font-variant-numeric: tabular-nums; }
.ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.peq { width: 18px; height: 18px; }
.ic.grande { width: 44px; height: 44px; stroke-width: 1.4; }
.ocultar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
        padding: 8px max(12px, env(safe-area-inset-left)); background: #000; border-bottom: 1px solid var(--borda); min-height: 60px; }
.topo .logo img { height: 34px; display: block; }
.topo .dir { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.btn-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--txt);
          background: none; border: 0; cursor: pointer; position: relative; text-decoration: none; }
.btn-ic:hover { background: var(--sup2); color: var(--txt); }
.btn-ic .cont { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
                background: var(--erro); color: #fff; font: 700 .75rem/18px var(--fonte); text-align: center; }
.perfil { position: relative; }
.perfil > summary { list-style: none; display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 6px; border-radius: 10px; min-height: 44px; }
.perfil > summary::-webkit-details-marker { display: none; }
.perfil > summary:hover { background: var(--sup2); }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--sup3); color: var(--ouro-cl); display: grid; place-items: center; font-weight: 700; font-size: .875rem; }
.perfil .caixa { position: fixed; top: 60px; right: max(12px, env(safe-area-inset-right)); width: min(280px, calc(100vw - 24px));
                 background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r); padding: 8px; z-index: 30;
                 animation: surge .18s var(--curva); }
.perfil .caixa .quem { padding: 8px 12px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; }
.perfil .caixa .quem b { display: block; }
.perfil .caixa .quem span { color: var(--txt2); font-size: .875rem; }
.item-menu { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px;
             color: var(--txt); background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.item-menu:hover { background: var(--sup2); color: var(--txt); }

/* ---------- menu lateral (gaveta no celular, fixo no PC) ---------- */
.lay { display: flex; align-items: flex-start; }
.lateral { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); background: var(--sup); border-right: 1px solid var(--borda);
           padding: 12px max(12px, env(safe-area-inset-left)) 24px; z-index: 40; transform: translateX(-102%);
           transition: transform .22s var(--curva); overflow-y: auto; }
.lateral .cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lateral .cab img { height: 30px; }
.lateral a { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--txt);
             text-decoration: none; margin-bottom: 2px; }
.lateral a:hover { background: var(--sup2); color: var(--txt); }
.lateral a.ativo { background: var(--ouro-fundo); color: var(--ouro-cl); box-shadow: inset 3px 0 var(--ouro); font-weight: 600; }
.lateral a .pilula { margin-left: auto; background: var(--ouro); color: var(--sobre-ouro); border-radius: 9px; padding: 0 7px; font-size: .75rem; font-weight: 700; }
.lateral .grupo { color: var(--txt3); font-size: .8125rem; margin: 16px 12px 6px; }
.lateral .pausado { color: var(--txt3); }
.vela { position: fixed; inset: 0; background: rgb(0 0 0 / .6); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
body.menu-aberto .lateral { transform: none; }
body.menu-aberto .vela { opacity: 1; pointer-events: auto; }

main { flex: 1; min-width: 0; max-width: 1100px; margin: 0 auto;
       padding: 20px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
@media (max-width: 359px) { main { padding-left: 12px; padding-right: 12px; } }
.so-pc, .so-pc-bloco { display: none !important; }
@media (min-width: 900px) {
  .so-pc { display: inline-flex !important; }
  .so-pc-bloco { display: flex !important; }
  .so-cel { display: none !important; }
  .lateral { position: sticky; top: 60px; transform: none; transition: none; width: 248px; height: calc(100vh - 60px); z-index: 1; flex: none; }
  .lateral .cab { display: none; }
  .vela { display: none; }
  main { padding: 28px 32px 48px; }
}

/* ---------- textos ---------- */
.contexto { display: flex; align-items: center; gap: 8px; color: var(--txt2); font-weight: 600; margin: 0 0 8px; font-size: .9375rem; }
.contexto a { color: var(--txt2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.contexto a:hover { color: var(--txt); }
h1 { font-size: 1.625rem; line-height: 1.25; margin: 0 0 4px; }
.sub, h1 + .sub { color: var(--txt2); margin: 0 0 20px; max-width: 70ch; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 28px 0 12px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 1rem; margin: 0 0 4px; }
.vazio { color: var(--txt2); }
.nota { color: var(--txt2); font-size: .875rem; max-width: 75ch; }
code { background: var(--sup3); padding: 1px 6px; border-radius: 6px; font-size: .9375rem; }

/* situação: sempre símbolo + texto, nunca só cor */
.st { color: var(--txt2); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.ok { color: var(--ok); } .at { color: var(--aviso); } .pr { color: var(--erro); } .ouro { color: var(--ouro-cl); }
.estado { font-weight: 700; font-size: .9375rem; display: flex; align-items: center; gap: 6px; }

/* linha de totais */
.resumo { display: flex; gap: 2px 20px; flex-wrap: wrap; margin: 0 0 8px; font-variant-numeric: tabular-nums; color: var(--txt2); }
.resumo b { font-size: 1.25rem; color: var(--txt); margin-right: 4px; }
.resumo b.at { color: var(--aviso); } .resumo b.pr { color: var(--erro); } .resumo b.ok { color: var(--ok); }

/* ---------- lista compacta (versão B) ---------- */
.lista { border: 1px solid var(--borda); border-radius: var(--r); background: var(--sup); margin: 0 0 20px; padding: 0; list-style: none; overflow: hidden; }
.linha { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; color: var(--txt); text-decoration: none; }
.linha + .linha { border-top: 1px solid var(--borda); }
a.linha:hover { background: var(--sup2); color: var(--txt); }
.linha > .ic:first-child { color: var(--txt2); }
.linha .meio { flex: 1; min-width: 0; }
.linha .nome { font-weight: 650; overflow-wrap: anywhere; }
.linha .nome.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha > .ic:last-child { color: var(--txt3); }
.linha.bloco { display: block; }
.linha .acoes { margin-top: 12px; }
.lista.precisa .linha { align-items: flex-start; }

/* vazio com ícone, frase e próxima ação */
.vazio-grande { text-align: center; padding: 28px 16px; color: var(--txt2); }
.vazio-grande .ic { color: var(--ok); margin-bottom: 8px; }
.vazio-grande b { display: block; color: var(--txt); font-size: 1.0625rem; margin-bottom: 4px; }

/* ---------- avisos ---------- */
.aviso, .flash, .falha { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-peq); margin: 0 0 16px; border: 1px solid; }
.aviso { background: var(--aviso-f); border-color: #5a3f14; }
.aviso .ic { color: var(--aviso); }
.falha { background: var(--erro-f); border-color: #5c2220; }
.falha .ic { color: var(--erro); }
.flash { background: var(--ok-f); border-color: #1f4a32; position: sticky; top: 68px; z-index: 10; animation: surge .2s var(--curva); }
.flash .ic { color: var(--ok); }
.flash.some { animation: some .2s ease-in forwards; }

/* ---------- botões ---------- */
.botao, button.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
         border-radius: 12px; border: 1px solid transparent; background: var(--ouro); color: var(--sobre-ouro); font: 700 1rem/1.2 var(--fonte);
         cursor: pointer; text-decoration: none; transition: background-color .15s, opacity .15s; }
.botao:hover { background: var(--ouro-cl); color: var(--sobre-ouro); }
.botao:active { transform: translateY(1px); }
.botao.sec { background: transparent; border-color: var(--borda); color: var(--txt); min-height: 44px; }
.botao.sec:hover { background: var(--sup2); color: var(--txt); }
.botao.perigo { background: transparent; border-color: #5c2220; color: var(--erro); min-height: 44px; }
.botao.perigo:hover { background: var(--erro-f); }
.botao[disabled], .botao.enviando { opacity: .55; cursor: progress; pointer-events: none; }
.botao.enviando::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
.botao.largo { width: 100%; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rodape-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));
               background: linear-gradient(transparent, var(--fundo) 35%); }
.rodape-fixo .botao { width: 100%; }
@media (min-width: 900px) { .rodape-fixo { display: none; } }

/* ---------- formulários ---------- */
.form { border: 1px solid var(--borda); border-radius: var(--r); background: var(--sup); padding: 16px; margin: 0 0 20px;
        display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: end; }
.form .inteiro { grid-column: 1 / -1; }
label { display: block; font-size: .875rem; color: var(--txt2); margin-bottom: 6px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--r-peq);
         font: inherit; background: var(--sup2); color: var(--txt); }
input[type=file] { padding: 9px 12px; }
input[type=file]::file-selector-button { background: var(--sup3); color: var(--txt); border: 0; border-radius: 8px; padding: 6px 12px; margin-right: 10px; font: inherit; cursor: pointer; }
input:hover, select:hover, textarea:hover { border-color: #4a4336; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ouro); outline-offset: 0; border-color: var(--ouro); }
input:user-invalid { border-color: var(--erro); }
textarea { min-height: 96px; }
.ajuda { color: var(--txt3); font-size: .8125rem; margin-top: 4px; }
.busca { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.busca .campo { flex: 1 1 220px; position: relative; }
.busca .campo .ic { position: absolute; left: 12px; top: 13px; color: var(--txt3); pointer-events: none; }
.busca .campo input { padding-left: 42px; }
.busca select { flex: 0 1 180px; width: auto; }

/* ---------- carregando: esqueleto ---------- */
.esqueleto { display: none; }
body.carregando .esqueleto { display: block; }
body.carregando .some-carregando { display: none; }
.esqueleto i { display: block; height: 18px; border-radius: 6px; background: var(--sup3); margin: 12px 0; animation: pulsa 1.2s ease-in-out infinite; }
.esqueleto i:nth-child(2) { width: 80%; } .esqueleto i:nth-child(3) { width: 60%; }

/* ---------- entrar ---------- */
.entrar { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: #000; padding: 16px; }
.entrar form { background: var(--sup); border: 1px solid var(--borda); border-radius: 16px; padding: 28px 24px; width: min(400px, 100%); display: grid; gap: 4px; }
.entrar img { width: 100%; max-width: 280px; display: block; margin: 0 auto 12px; }
.entrar h1 { font-size: 1.25rem; text-align: center; margin-bottom: 16px; }
.entrar input { margin-bottom: 12px; }
.entrar .botao { width: 100%; margin-top: 8px; }

/* ---------- movimento ---------- */
@keyframes surge { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes some { to { opacity: 0; transform: translateY(-4px); } }
@keyframes pulsa { 50% { opacity: .45; } }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .botao:active { transform: none; }
}


/* ---------- só do portal ---------- */
[hidden] { display: none !important; }
.topo .nome-portal { color: var(--ouro-cl); font-weight: 600; font-size: .9375rem; margin-left: 4px; }
@media (max-width: 420px) { .topo .nome-portal { display: none; } }
/* sem login: sem cabeçalho e menu, cartão no centro sobre o preto (como a tela de entrar da Plataforma) */
body.sem-login { background: #000; }
body.sem-login .topo, body.sem-login .lateral, body.sem-login .vela, body.sem-login .rodape-fixo { display: none !important; }
body.sem-login .lay { display: block; }
body.sem-login main { max-width: none; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
                      align-items: center; justify-content: center; padding: 24px 16px; }
.entrar { min-height: 0; padding: 0; width: min(400px, 100%); display: block; background: none; }
.entrar form, .entrar .caixa-entrar { background: var(--sup); border: 1px solid var(--borda); border-radius: 16px; padding: 28px 24px;
                                      width: 100%; display: grid; gap: 4px; }
.entrar .caixa-entrar form { background: none; border: 0; padding: 0; }
.entrar h1 { margin-bottom: 4px; }
.entrar .sub { text-align: center; margin: 0 0 16px; }
.entrar .botao.sec { width: 100%; margin-top: 4px; }
#qr-2fa { display: block; margin: 8px auto 12px; width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: var(--r-peq); }
#chave-2fa { overflow-wrap: anywhere; }
/* aviso da tela: vazio some; com texto vira faixa (ok) ou caixa de erro */
#mensagem { width: min(400px, 100%); margin: 16px auto 0; }
#mensagem:empty { display: none; }
#mensagem:not(:empty) { display: flex; padding: 12px 14px; border-radius: var(--r-peq); border: 1px solid #3a3428; background: var(--sup2); color: var(--txt); }
#mensagem.erro { background: var(--erro-f); border-color: #5c2220; }
body:not(.sem-login) #mensagem { width: auto; margin: 0 0 16px; }
/* documentos */
.busca select { flex: 1 1 160px; }
.grupo h2 { color: var(--ouro-cl); font-size: 1rem; margin: 20px 0 8px; }
.grupo:first-child h2 { margin-top: 4px; }
.doc .st .vence { color: var(--aviso); font-weight: 600; }
.doc .botao { flex: none; }
.doc .botoes { display: flex; gap: 8px; flex: none; }
.historico .meio > span { display: block; }
.historico .st { margin-top: 2px; }
.historico .quando { color: var(--txt2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 479px) {
  .doc .botoes { width: 100%; }
  .doc .botoes .botao { width: auto; flex: 1 1 0; white-space: nowrap; }
  .doc .botoes .ver { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
  .guia .botoes { order: 4; flex: 1 1 100%; }
  .historico { flex-wrap: wrap; }
  .historico .meio { flex-basis: calc(100% - 36px); }
  .historico .quando { flex-basis: 100%; padding-left: 36px; }
}
@media (max-width: 479px) {
  .doc { flex-wrap: wrap; }
  .doc > .ic:first-child { display: none; }
  .doc .meio { flex-basis: 100%; }
  .doc .botao { width: 100%; }
}
.rodape-nota { color: var(--txt3); font-size: .8125rem; margin: 24px 0 0; max-width: 75ch; }
body.sem-login .rodape-nota { text-align: center; width: min(400px, 100%); }
.lateral .rodape-lateral { color: var(--txt3); font-size: .8125rem; margin: 20px 12px 0; }
.doc .meio > span { display: block; }
.doc .st { margin-top: 2px; }
.busca select { min-width: 0; max-width: 100%; }
.lateral .rodape-lateral { overflow-wrap: normal; }
.resumo { align-items: baseline; margin-top: 4px; }
/* impostos: guias com valor e prazo; vencidas destacadas */
.barra-empresa select { flex: 1 1 260px; }
.barra-empresa select:only-child { max-width: 560px; }
#vista-impostos h2, #vista-docs .grupo h2 { color: var(--ouro-cl); }
.guia .prazo { font-weight: 650; }
.guia .prazo:not(.pr):not(.at) { color: var(--ok); }
.guia.vencido { box-shadow: inset 3px 0 var(--erro); }
.guia .valor { font-size: 1.0625rem; margin-left: auto; }
#bloco-vencidos .nota { margin: -6px 0 10px; }
#todos-vencidos { margin: -8px 0 20px; }
@media (max-width: 479px) {
  .guia .valor { order: 3; flex: 1; margin: 0; }
  .guia .botao { order: 4; width: auto; flex: 1 1 140px; }
}
/* documentos como um drive: trilha (Todos › 2026 › Outubro) e pastas */
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 8px; color: var(--txt2); }
.trilha button { background: none; border: 0; color: var(--ouro-cl); font: inherit; cursor: pointer; min-height: 44px; padding: 0 4px;
                 text-decoration: underline; text-underline-offset: 3px; }
.trilha button:hover { color: var(--txt); }
.trilha .sep { color: var(--txt3); }
.trilha .atual { color: var(--txt); font-weight: 650; padding: 0 4px; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
button.linha.pasta { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
button.linha.pasta:hover { background: var(--sup2); }
button.linha.pasta:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.pasta > .ic:first-child { color: var(--ouro); }
.pasta .meio > span { display: block; }

/* ---------- configurações (só a equipe) ---------- */
#tela-docs.sem-empresa .barra-empresa { display: none; }
.cab-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }
.cab-secao h2 { margin: 0; }
.cartao { border: 1px solid var(--ouro-esc); border-radius: var(--r); background: var(--sup); padding: 16px; margin: 0 0 16px; animation: surge .18s var(--curva); }
.cartao h3 { margin-bottom: 12px; }
.grade { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grade .toda { grid-column: 1 / -1; }
.grade input, .grade textarea { margin-bottom: 12px; }
.marcar { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--txt); font-weight: 500; font-size: 1rem; margin: 0 0 8px; cursor: pointer; }
.marcar input, .escolha input[type=checkbox] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--ouro); flex: 0 0 auto; }
.escolha { border: 1px solid var(--borda); border-radius: var(--r-peq); padding: 8px 12px 4px; margin: 0 0 12px; min-width: 0; }
.escolha legend { color: var(--txt2); font-size: .875rem; font-weight: 600; padding: 0 6px; }
.escolha .nota { margin: 0 0 6px; }
.empresa-escolha { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 6px 0; }
.empresa-escolha + .empresa-escolha { border-top: 1px solid var(--borda); }
.empresa-escolha .marcar { flex: 1 1 220px; margin: 0; }
.empresa-escolha .folha { flex: 0 0 auto; color: var(--txt2); }
.cartao .acoes { margin-top: 8px; }
.linha .rotulo { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 9px; background: var(--sup3); color: var(--txt2); margin-left: 6px; }
.linha .rotulo.pr { background: var(--erro-f); color: var(--erro); }
.linha .rotulo.ouro { background: var(--ouro-fundo); color: var(--ouro-cl); }
.erro-form { color: var(--erro); background: var(--erro-f); border: 1px solid #5c2220; border-radius: var(--r-peq); padding: 10px 12px; margin: 4px 0 8px; }
.empresa-cfg .meio > .nome, .usuario-cfg .meio > .nome, .empresa-cfg .meio > .st, .usuario-cfg .meio > .st { display: block; }
.empresa-cfg .st, .usuario-cfg .st { margin-top: 2px; }
body.em-config .rodape-fixo { display: none; }
label .dica { font-weight: 400; color: var(--txt2); }

/* ---------- tema claro (off-white), igual ao da Plataforma Data Soft: o preto é o padrão e cada cliente escolhe o claro; a escolha fica no aparelho (tema.js) ---------- */
:root[data-tema="claro"] {
  --fundo: #f5f2ea; --sup: #fcfaf5; --sup2: #efebe0; --sup3: #e4dfd1; --borda: #d8d2c2;
  --txt: #1f1c16; --txt2: #5a5448; --txt3: #5f5848;
  --ouro: #85610f; --ouro-cl: #7a5a14; --ouro-esc: #7a5a30; --ouro-fundo: #f3e8c9; --sobre-ouro: #ffffff;
  --ok: #17794b; --aviso: #9a5b00; --erro: #b3261e;
  --ok-f: #dff1e6; --aviso-f: #f9ebd0; --erro-f: #f8dedc;
  color-scheme: light;
}
:root[data-tema="claro"] .aviso { border-color: #e0c58c; }
:root[data-tema="claro"] .falha, :root[data-tema="claro"] .erro-form, :root[data-tema="claro"] #mensagem.erro { border-color: #e3aaa6; }
:root[data-tema="claro"] .flash { border-color: #a9d2b9; }
:root[data-tema="claro"] #mensagem:not(:empty) { border-color: var(--borda); }
:root[data-tema="claro"] .botao.perigo { border-color: #e3aaa6; }
:root[data-tema="claro"] input:hover, :root[data-tema="claro"] select:hover, :root[data-tema="claro"] textarea:hover { border-color: #b8b09c; }
:root[data-tema="claro"] .perfil .caixa, :root[data-tema="claro"] .lateral { box-shadow: 0 8px 24px rgb(60 50 30 / .12); }
/* cabeçalho segue preto (a logo é feita para fundo preto); na tela de entrada a logo vira um selo preto de cantos arredondados */
:root[data-tema="claro"] .topo .btn-ic, :root[data-tema="claro"] .topo .btn-ic:hover { color: #f3efe6; }
:root[data-tema="claro"] .topo .btn-ic:hover { background: #211e19; }
:root[data-tema="claro"] .topo .av { background: #2a2620; color: #e6c77a; }
:root[data-tema="claro"] .topo .perfil > summary { color: #f3efe6; }
:root[data-tema="claro"] .topo .perfil > summary:hover { background: #211e19; }
:root[data-tema="claro"] body.sem-login { background: var(--fundo); }
:root[data-tema="claro"] .entrar img { border-radius: 12px; }
/* botão de tema (sol/lua): no escuro mostra o sol, no claro a lua; no cabeçalho ao lado da conta, na tela de entrar no canto superior */
.btn-tema { width: 44px; height: 44px; }
.topo .btn-tema { margin-left: auto; }
.topo .btn-tema + .dir { margin-left: 0; }
.btn-tema .ic:last-child { display: none; }
:root[data-tema="claro"] .btn-tema .ic:first-child { display: none; }
:root[data-tema="claro"] .btn-tema .ic:last-child { display: block; }
.btn-tema.so-login { display: none; position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 30; }
body.sem-login .btn-tema.so-login { display: inline-grid; }
:root[data-tema="claro"] body.sem-login .btn-tema.so-login { color: var(--txt); }
:root:not([data-tema="claro"]) body.sem-login .btn-tema.so-login { color: #f3efe6; }

/* página de privacidade */
.privacidade { max-width: 70ch; margin: 0 auto; padding: 24px 16px 48px; }
.privacidade h2 { font-size: 1.0625rem; margin: 24px 0 4px; }
.privacidade p { line-height: 1.55; margin: 0 0 8px; }