/* 360MACOM, identidade visual, direção "A Assinatura".
   Arquivo ÚNICO: painel, login e primeiro acesso leem daqui. A paleta em três cópias
   inline era o caminho curto pra uma tela ficar pra trás nas próximas mudanças.

   Contraste medido (WCAG AA exige 4.5 pra texto normal):
     marinho  #12263F sobre pergaminho  13.21  corpo de texto
     cinza    #5A6A7D sobre pergaminho   4.79  texto secundário
     bronze   #9A7430 sobre pergaminho   3.70  SÓ título grande
     dourado  #C6A15B sobre pergaminho   2.10  REPROVADO pra texto
     dourado  #C6A15B sobre marinho      6.90  ok
   Dourado é símbolo, borda e acento. Em fundo claro ele NUNCA carrega letra. */

:root {
  --marinho-p: #0E1E34;   /* fundos escuros */
  --marinho:   #12263F;   /* primária, texto, ícone */
  --bronze:    #9A7430;
  --ouro:      #C6A15B;   /* acento e símbolo, não é cor de texto em fundo claro */
  --ouro-claro:#DABE83;   /* "360" e ícone sobre escuro */
  --pergaminho:#F4EEE1;

  --tinta:  var(--marinho);
  --fraco:  #5A6A7D;
  --linha:  #E0D7C4;
  --fundo:  var(--pergaminho);
  --erro:   #A3231C;
}

* { box-sizing: border-box }

body {
  margin: 0;
  font: 15px/1.6 Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

/* ---------- cabeçalho ---------- */
header {
  background: var(--marinho-p);
  border-bottom: 2px solid var(--ouro);
  padding: 10px 16px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
/* A marca e um LINK pro Painel, e link, por padrao, vem sublinhado e com cor de link.
   Sem o text-decoration abaixo, o wordmark aparece todo branco e riscado. */
header .marca { display: flex; align-items: center; gap: 9px; color: #fff;
                font-weight: 700; letter-spacing: .01em; text-decoration: none }
header .marca img { height: 26px; width: 26px }
.wm { font: 700 17px Sora, system-ui, sans-serif; letter-spacing: .01em; color: #fff }
.wm > span { color: var(--ouro-claro) }   /* "360" em Dourado Claro sobre escuro, como o manual */

/* O nome da Loja sai do topo e vira subtitulo da pagina: quem usa o sistema sabe de quem
   ele e, sem a Loja disputar espaco com a marca do produto em toda tela. */
.loja-sub { margin: -12px 0 18px; font-size: 13px; color: var(--fraco) }
header .eu { color: var(--ouro-claro); font-size: 13px }
header .eu a { color: var(--ouro-claro) }

/* "header nav" e escopo, nao estilo. Duas licoes de contraste moram nesta linha:
   1. sem o ">", a regra alcancava os links DENTRO da gaveta do menu;
   2. sem o "header", ela alcancava QUALQUER <nav> da pagina, e as abas de Receitas/Despesas
      tambem sao um <nav>, num cartao BRANCO.
   Nos dois casos "nav a:hover" (0,2,2) vencia a regra local (0,2,1) e pintava color:#fff
   sobre fundo branco. Texto branco no branco, sem erro nenhum no console.
   Regra de cor com seletor de ELEMENTO generico vaza. Prenda ao lugar onde ela vale. */
header nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 }
header nav > a {
  padding: 6px 11px; border-radius: 6px; text-decoration: none;
  color: #C9D2DE; font-size: 14px;
}
header nav > a.on { background: var(--ouro); color: var(--marinho-p); font-weight: 600 }
header nav > a:hover:not(.on) { background: rgba(255,255,255,.08); color: #fff }

/* ---------- estrutura ---------- */
main { max-width: 1000px; margin: 24px auto; padding: 0 16px }
h1 { font-size: 21px; font-weight: 700; margin: 0 0 18px; letter-spacing: -.01em }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px }

.card {
  background: #fff; border: 1px solid var(--linha); border-radius: 10px;
  padding: 18px; margin-bottom: 16px;
}

table { width: 100%; border-collapse: collapse }
th, td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--linha) }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); font-weight: 600 }
td a { color: var(--marinho); font-weight: 500 }

/* ---------- formulário ---------- */
/* 16px não é estética: abaixo disso o Safari do iPhone dá zoom ao focar o campo. */
input, select, textarea {
  font: 16px Sora, system-ui, sans-serif; padding: 9px 10px;
  border: 1px solid var(--linha); border-radius: 6px; width: 100%;
  background: #fff; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ouro); outline-offset: 1px; border-color: var(--ouro) }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--fraco) }
.lin { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px }

button, .btn {
  font: 500 15px Sora, system-ui, sans-serif; padding: 9px 16px; border-radius: 6px;
  border: 1px solid var(--marinho); background: var(--marinho); color: #fff;
  cursor: pointer; text-decoration: none; display: inline-block; width: auto;
}
button:hover, .btn:hover { background: var(--marinho-p) }
.btn.sec { background: #fff; color: var(--marinho) }
.btn.sec:hover { background: var(--pergaminho) }

/* ---------- avulsos ---------- */
.pill {
  font-size: 12px; padding: 2px 9px; border-radius: 99px;
  background: var(--pergaminho); border: 1px solid var(--linha); white-space: nowrap;
}
.erro { color: var(--erro) }
.fraco { color: var(--fraco) }
.vazio { color: var(--fraco); text-align: center; padding: 36px }

/* ---------- entrar / primeiro acesso ---------- */
body.porta { display: grid; place-items: center; min-height: 100vh; background: var(--marinho-p) }
.porta form { background: #fff; border-radius: 14px; padding: 30px; width: min(370px, 92vw) }
.porta .marca { text-align: center; margin-bottom: 22px }
.porta .marca img { height: 56px; width: 56px }
.porta h1 { font-size: 19px; text-align: center; margin: 12px 0 4px }
.porta p.sub { color: var(--fraco); font-size: 13px; text-align: center; margin: 0 0 22px }
.porta button { width: 100%; padding: 12px; margin-top: 4px }
.porta form a { color: var(--marinho); font-weight: 600 }

@media (max-width: 600px) {
  td, th { padding: 8px 4px; font-size: 14px }
  main { margin: 16px auto }
}

/* ---------- menu por pasta da Loja ---------- */
/* <details> nativo em vez de JS de menu: abre no clique e funciona no toque. O unico JS
   e o que fecha ao clicar fora, que o elemento nao faz sozinho. */
details.pasta { position: relative; display: inline-block }

details.pasta > summary {
  padding: 6px 11px; border-radius: 6px; cursor: pointer;
  color: #C9D2DE; font-size: 14px; list-style: none; user-select: none;
}
/* o triangulo padrao do <summary> tem tres nomes diferentes entre navegadores */
details.pasta > summary::-webkit-details-marker { display: none }
details.pasta > summary::marker { content: '' }
details.pasta > summary::after { content: ' \25BE'; opacity: .6 }

details.pasta > summary:hover { background: rgba(255,255,255,.08); color: #fff }
details.pasta > summary.on { background: var(--ouro); color: var(--marinho-p); font-weight: 600 }

.gaveta {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  background: #fff; border: 1px solid var(--linha); border-radius: 8px;
  padding: 6px; min-width: 190px;
  box-shadow: 0 8px 24px rgba(14,30,52,.18);
  display: flex; flex-direction: column; gap: 2px;
}
.gaveta a {
  padding: 8px 12px; border-radius: 5px; white-space: nowrap;
  color: var(--marinho); font-size: 14px; text-decoration: none;
}
.gaveta a:hover { background: var(--pergaminho); color: var(--marinho) }
.gaveta a.on { background: var(--marinho); color: #fff; font-weight: 600 }

/* No celular a gaveta flutuante escaparia da tela: vira lista aberta abaixo do titulo. */
@media (max-width: 600px) {
  details.pasta { display: block; width: 100% }
  .gaveta { position: static; box-shadow: none; margin: 4px 0 2px 12px; min-width: 0 }
}

/* ---------- Agenda ---------- */

/* A seguir: a resposta pra "o que vem ai", que e o motivo de 9 em 10 aberturas desta tela.
   A grade continua existindo pra planejar o mes, sao duas perguntas, duas leituras. */
.aseguir { list-style: none; margin: 0; padding: 0 }
.aseguir li { display: flex; align-items: center; gap: 12px;
              padding: 9px 0; border-bottom: 1px solid var(--linha) }
.aseguir li:last-child { border-bottom: 0 }
.asg-data { flex: none; width: 44px; text-align: center; line-height: 1.1 }
.asg-data b { display: block; font-size: 19px; font-weight: 700 }
.asg-data span { font-size: 11px; color: var(--fraco); text-transform: uppercase }
.asg-txt { flex: 1; min-width: 0; font-size: 14px }
.asg-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px;
           border-radius: 4px; margin-right: 6px; vertical-align: 1px }
.asg-falta { flex: none; font-size: 12px; white-space: nowrap }

/* Chips: um clique liga ou desliga um tipo. Sem formulario, sem botao de aplicar,
   e a cor do chip ligado e a MESMA da tarja dele no calendario, entao o filtro tambem
   serve de legenda sem ocupar uma legenda. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px }
.chip { font-size: 12px; padding: 4px 11px; border-radius: 99px; text-decoration: none;
        border: 1px solid var(--linha); color: var(--fraco); background: #fff }
.chip:hover { border-color: var(--fraco) }
.chip.on { border-color: transparent; font-weight: 600 }

.cal-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.cal-topo strong { font-size: 18px; flex: 1; text-transform: capitalize }
.cal-nav { padding: 4px 13px; font-size: 17px; line-height: 1.2 }

/* minmax(0, 1fr) e nao 1fr. "1fr" e atalho de "minmax(auto, 1fr)", e esse auto impede
   a coluna de encolher abaixo do conteudo dela, com nomes longos em white-space:nowrap,
   as sete colunas empurram a grade pra fora da tela e as ultimas somem no corte.
   O zero no minimo devolve o controle ao 1fr; quem cuida do texto longo e o ellipsis. */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
       background: var(--linha); border: 1px solid var(--linha); border-radius: 10px;
       overflow: hidden }
.cal-cab { background: var(--pergaminho); padding: 7px 4px; text-align: center;
           font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
           color: var(--fraco); font-weight: 700 }
.cal-cab.fds { background: #EDE5D6 }
/* min-width: 0 pelo mesmo motivo: item de flex/grid tambem nasce com minimo automatico,
   e sem isto a celula se recusa a ficar menor que a maior tarja dentro dela. */
.cal-dia { background: #fff; min-height: 84px; padding: 5px 5px 6px; display: flex;
           flex-direction: column; gap: 3px; min-width: 0 }
.cal-dia.fds { background: #FDFBF7 }
.cal-dia.vazio-dia { background: #FAF7F0 }
/* dia passado muda o FUNDO, nunca a opacidade: opacity desbota a tinta junto e joga o
   contraste do texto pra baixo de 4.5, foi o defeito do "fora do quadro" no Obreiros. */
.cal-dia.passou { background: #FAF8F4 }
.cal-dia.passou .cal-num { color: #8B95A3 }
.cal-hoje { box-shadow: inset 0 0 0 2px var(--ouro) }
.cal-num { font-size: 12px; color: var(--fraco); text-align: right; font-weight: 600 }
.cal-hj { background: var(--ouro); color: var(--marinho-p); font-size: 10px; font-weight: 700;
          padding: 1px 5px; border-radius: 99px; margin-right: 4px; vertical-align: 1px }

/* Contraste medido sobre cada fundo (AA exige 4.5 pra texto normal):
     sessao    #FFFFFF sobre #12263F  15.28
     irmao     #1B4D2B sobre #DCEBE0   7.93
     iniciacao #5C4514 sobre #F2E6CE   7.33
     familiar  #2E3468 sobre #E6E8F2   9.51
     loja      #12263F sobre #C6A15B   6.29
     evento    #2C2C2C sobre #E4E4E7  10.90
   Os fundos claros tem ~1.00 de contraste ENTRE SI: separam-se por matiz, nao por
   luminancia. Por isso cada tarja carrega o rotulo escrito (<b>), quem nao distingue cor
   le o que a coisa e. A cor reforca, nunca informa sozinha. */
/* nada de nowrap+ellipsis aqui: cortar "ISABELLA OLIVEIRA FELICIO DE ALMEIDA" no meio
   transforma a tarja num enigma que so o title do mouse resolve, e no celular nao ha mouse.
   O nome quebra em linha e a celula cresce; com no maximo 3 eventos por dia, cabe. */
.ev { font-size: 11px; line-height: 1.35; padding: 3px 6px; border-radius: 5px;
      min-width: 0; white-space: normal; overflow-wrap: anywhere }
.ev b { font-weight: 700 }
.ev-sessao { background: #12263F; color: #fff }
.ev-irmao  { background: #DCEBE0; color: #1B4D2B }
.ev-inic   { background: #F2E6CE; color: #5C4514 }
.ev-fam    { background: #E6E8F2; color: #2E3468 }
.ev-loja   { background: #C6A15B; color: #12263F }
.ev-evt    { background: #E4E4E7; color: #2C2C2C }

/* No celular a grade de 7 colunas espreme cada dia em ~50px: vira lista dos dias que TEM
   evento, que e o que se olha num telefone. */
@media (max-width: 700px) {
  .cal { grid-template-columns: 1fr; background: transparent; border: 0 }
  .cal-cab, .cal-dia.vazio-dia { display: none }
  .cal-dia, .cal-dia.fds, .cal-dia.passou {
    min-height: 0; background: #fff; border: 1px solid var(--linha); border-radius: 8px;
    margin-bottom: 6px; padding: 8px 10px; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 6px }
  .cal-dia:not(:has(.ev)) { display: none }
  .cal-num { text-align: left; font-size: 14px; color: var(--tinta); min-width: 26px }
  .ev { flex: 1 1 100%; font-size: 13px; padding: 5px 8px }
  .asg-txt { font-size: 13px }
}

/* ---------- foto de perfil ---------- */
/* object-fit:cover recorta pelo centro em vez de esticar: retrato em pe e foto deitada
   viram o mesmo circulo sem deformar o rosto de ninguem. */
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
          background: var(--pergaminho); border: 1px solid var(--linha); flex: none }
.avatar-g { width: 76px; height: 76px }

/* ---------- abas de conteudo (Receitas / Despesas / Tudo) ---------- */
.abas { display: flex; gap: 2px; border-bottom: 2px solid var(--linha); margin-bottom: 16px }
.abas a {
  padding: 9px 16px; text-decoration: none; color: var(--fraco); font-size: 14px;
  font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.abas a:hover { color: var(--marinho); background: var(--pergaminho) }
.abas a.on { color: var(--marinho); border-bottom-color: var(--ouro); font-weight: 700 }

/* Verde entra, vermelho sai, a convencao que todo financeiro usa, e que diz de que lado
   da conta voce esta antes de ler numero nenhum.
   Medidos sobre branco: verde #1B4D2B 9.80 · vermelho #A3231C 7.46. Os dois passam AA.
   A cor nunca vai sozinha: a aba tem o nome escrito e o valor tem o sinal + ou −. */
:root { --entra: #1B4D2B; --sai: #A3231C }
.abas a.fx-receita.on { color: var(--entra); border-bottom-color: var(--entra) }
.abas a.fx-despesa.on { color: var(--sai);   border-bottom-color: var(--sai) }
.abas a.fx-receita:hover { color: var(--entra) }
.abas a.fx-despesa:hover { color: var(--sai) }
.vlr-entra { color: var(--entra); font-weight: 600 }
.vlr-sai   { color: var(--sai);   font-weight: 600 }

/* ---------- barra de arrecadacao ---------- */
/* Decoracao: quem informa e o texto ao lado. Barra sozinha nao diz valor pra leitor de tela,
   e nao distingue 61% de 64% pra ninguem. */
.barra { height: 9px; background: var(--pergaminho); border: 1px solid var(--linha);
         border-radius: 99px; overflow: hidden }
.barra > span { display: block; height: 100%; background: var(--ouro); border-radius: 99px }

/* <details class="card"> precisa do marcador do summary alinhado ao titulo do cartao */
details.card > summary { list-style: none }
details.card > summary::-webkit-details-marker { display: none }
details.card > summary::before { content: '＋ '; color: var(--fraco) }
details.card[open] > summary::before { content: '− ' }

/* ---------- matriz do Diario de Frequencia ---------- */
/* A tabela de resumo responde "como esta o irmao no ano". Esta responde "o que aconteceu
   naquela noite", mesma informacao, outro eixo. */
.rolax { overflow-x: auto; border: 1px solid var(--linha); border-radius: 8px }
.matriz { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100% }
.matriz th, .matriz td { padding: 5px 7px; border-bottom: 1px solid var(--linha);
                         white-space: nowrap; font-size: 13px }
.matriz tr:last-child td { border-bottom: 0 }

/* Primeira coluna presa: rolando 25 colunas pro lado, o nome do irmao sairia da tela e a
   linha viraria uma fileira de simbolos sem dono. */
.matriz .fixa { position: sticky; left: 0; background: #fff; z-index: 2;
                border-right: 1px solid var(--linha); text-align: left; max-width: 230px;
                overflow: hidden; text-overflow: ellipsis }
.matriz th.fixa { background: var(--pergaminho) }
.matriz tr:hover td { background: #FBF8F2 }
.matriz tr:hover td.fixa { background: #FBF8F2 }

/* Data na vertical: 25 colunas com data deitada dariam uma tabela de 3 metros. */
.matriz th.vert { height: 74px; vertical-align: bottom; padding-bottom: 8px;
                  background: var(--pergaminho) }
.matriz th.vert > span { display: block; writing-mode: vertical-rl; transform: rotate(180deg);
                         font-size: 11px; font-weight: 600; color: var(--fraco);
                         letter-spacing: .02em }

/* Contraste sobre branco, e cada marca tem FORMA propria (P F J ·), entao quem nao
   distingue cor le a tabela do mesmo jeito. Cor sozinha nunca informa. */
.mk { font-weight: 700; font-size: 14px; line-height: 1 }
.mk-p { color: #1B6B33 }   /* presente     6.57 */
.mk-a { color: #B3261E }   /* ausente      6.01 */
.mk-j { color: #8A6A1F }   /* justificada  4.62 */
.mk-x { color: #9AA3AE }   /* sem registro 2.47, e um ponto, nao carrega informacao */

/* ---------- data digitada ---------- */
/* O eco por extenso vive colado ao campo: confirmacao tem que estar onde o olho ja esta. */
.dt-eco { display: block; font-size: 12px; margin-top: 3px; min-height: 15px }
.dt-eco.erro { color: var(--erro); font-weight: 600 }
input.dt { font-variant-numeric: tabular-nums }

/* ================= CELULAR ================= */
/* Medido contra 390px de largura, que e o iPhone comum. */
@media (max-width: 700px) {

  /* O cabecalho perde o nome do usuario e vira so marca + menu: em 390px, "MATHEUS LEITE
     TESCHE · sair" comia uma linha inteira pra dizer algo que a pessoa ja sabe. */
  header { padding: 8px 12px; gap: 8px }
  header .eu { font-size: 0 }                       /* some o nome, fica so o "sair" */
  header .eu a { font-size: 13px }
  header .eu::before { content: none }
  .wm { font-size: 15px }
  header .marca img { height: 22px; width: 22px }

  main { padding: 0 12px }
  h1 { font-size: 19px }
  .card { padding: 14px; border-radius: 9px }
  .loja-sub { margin: -10px 0 14px; font-size: 12px }

  /* Tabela larga rola SOZINHA em vez de estourar a pagina. display:block troca o layout de
     tabela por um bloco rolavel, as colunas param de se esticar e o resto da tela para de
     ser empurrado pra fora. */
  .card table { display: block; overflow-x: auto; white-space: nowrap;
                -webkit-overflow-scrolling: touch }
  .card table td, .card table th { white-space: nowrap }
  /* Nome de irmao pode quebrar: e a coluna mais larga e a que menos precisa de uma linha so. */
  .card table td:first-child { white-space: normal; min-width: 140px }

  /* Os cartoes de numero ficam lado a lado em dois, nao empilhados em quatro: quatro
     cartoes de 30px de numero empurrariam o resto da tela pra baixo da dobra. */
  .lin { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 10px }
  .lin > .card { padding: 12px }
  .lin > .card p[style*="font-size:30px"] { font-size: 22px !important }
  .lin > .card p[style*="font-size:24px"] { font-size: 20px !important }

  /* Botao de acao ocupa a largura toda: alvo de toque de 44px e o minimo que um polegar
     acerta sem errar. */
  form > button, form > .btn { width: 100%; margin-bottom: 6px; padding: 12px 16px }
  form > button + .btn, form > .btn + .btn { margin-top: 0 }

  .abas { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch }
  .abas a { padding: 9px 13px }

  /* A seguir: a coluna "em N dias" vai pra baixo do texto em vez de espremer as tres. */
  .aseguir li { flex-wrap: wrap }
  .asg-falta { width: 100%; padding-left: 56px; margin-top: -4px }

  .avatar-g { width: 60px; height: 60px }
  .rolax { max-width: 100% }
}

/* Tela bem estreita (360px e menos): o menu vira uma coluna so. */
@media (max-width: 400px) {
  header nav { width: 100%; gap: 2px }
  header nav > a, details.pasta > summary { font-size: 13px; padding: 5px 9px }
}

/* Wordmark na porta (entrar / primeiro acesso): o "360" em Bronze, que e a cor do manual
   pra fundo CLARO, o Dourado Claro so vale sobre escuro, e aqui o cartao e branco.
   Bronze #9A7430 sobre branco mede 4.27: REPROVA pra texto normal e passa so porque
   26px em negrito conta como texto grande (limite 3:1). Reduzir esta fonte quebra o
   contraste sem avisar, se precisar diminuir, troque a cor junto. */
.wm-porta { font: 700 26px Sora, system-ui, sans-serif; color: var(--marinho); margin: 12px 0 4px }
.wm-porta > span { color: var(--bronze) }

/* ================= IMPRESSAO / PDF ================= */
/* O "Salvar como PDF" do navegador e o gerador: sem biblioteca, sem dependencia, e com um
   resultado melhor que o de um gerador próprio. O que esta folha faz e tirar da pagina tudo que
   e navegacao e deixar so o conteudo. */
@media print {
  header, .chips, .naoimprime, details.card, .cal-nav, form { display: none !important }
  body { background: #fff }
  main { max-width: 100%; margin: 0; padding: 0 }
  .card { border: 0; padding: 0; margin: 0 0 14px; box-shadow: none; break-inside: avoid }
  h1 { font-size: 18px; margin-bottom: 2px }
  .loja-sub { margin: 0 0 14px; color: #444 }

  /* Fundo claro nao sai em impressora econômica: as tarjas ganham borda pra continuar
     distinguiveis no papel, e o rotulo escrito ja carrega o significado. */
  .ev { border: 1px solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .cal { break-inside: avoid }
  .cal-dia { min-height: 74px }
  .cal-cab, .cal-dia, .cal-dia.fds, .cal-dia.passou { background: #fff !important }
  .cal-hoje { box-shadow: inset 0 0 0 2px #000 }

  /* A lista "A seguir" cabe melhor logo abaixo do calendario, sem quebrar no meio. */
  .aseguir li { break-inside: avoid }
  a[href]::after { content: none }   /* sem despejar URL no papel */
}

/* ---------- fluxo do mes ---------- */
/* As duas barras dividem a MESMA escala, definida no PHP. Barra com escala propria mostra
   R$ 100 e R$ 10.000 do mesmo tamanho, pior que nao ter barra nenhuma.
   A barra e decoracao: o valor em numero fica ao lado, e "Sobrou/Faltou" esta escrito.
   Quem nao enxerga a barra le a linha inteira do mesmo jeito. */
.fluxo { width: 100%; border-collapse: collapse }
.fluxo td { padding: 7px 0; border: 0; vertical-align: middle }
.fx-rot { width: 74px; font-size: 13px; color: var(--fraco) }
.fx-val { width: 130px; font-size: 19px; font-weight: 700; padding-right: 14px !important }
.fx-bar { width: auto }
.fx-bar > span { display: block; height: 14px; border-radius: 3px; min-width: 2px }
.b-entra { background: var(--entra) }
.b-sai   { background: var(--sai) }
.fx-res  { border-top: 1px solid var(--linha) }
.fx-res .fx-val { font-size: 22px }

@media (max-width: 700px) {
  .fx-val { width: auto; font-size: 17px }
  .fx-bar { display: none }   /* em 390px a barra vira um risco de 30px que nao compara nada */
}

/* Logotipo da Loja no Perfil. object-fit:contain e nao cover: brasao de Loja e circular ou
   quadrado e nao pode ser recortado, o avatar de pessoa pode, um brasao nao. */
.logo-loja { width: 110px; height: 110px; object-fit: contain; border-radius: 10px;
             background: var(--pergaminho); border: 1px solid var(--linha); flex: none }

/* ---------- faixa sob o cabeçalho (teste grátis, suporte dentro da Loja) ---------- */
/* Texto marinho sobre pergaminho escuro: 11.9 de contraste. A do suporte é dourada pra
   não passar despercebida, quem está ali não é da Loja. */
.faixa { background: #EDE5D6; border-bottom: 1px solid var(--linha); color: var(--marinho);
         font-size: 13px; padding: 7px 16px; text-align: center }
.faixa a { color: var(--marinho); font-weight: 600 }
.faixa-suporte { background: var(--ouro); border-bottom-color: var(--bronze); font-weight: 500 }

/* ---------- porta larga (cadastro) e campo com sufixo (endereço da Loja) ---------- */
body.porta.larga { padding: 24px 0 }
.porta.larga form { width: min(480px, 94vw) }
.porta h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); margin: 18px 0 10px }
.end { display: flex; align-items: center; border: 1px solid var(--linha); border-radius: 6px; background: #fff; margin-top: 2px }
.end input { border: 0; min-width: 0; flex: 1 }
.end input:focus { outline: 0 }
.end:focus-within { outline: 2px solid var(--ouro); outline-offset: 1px; border-color: var(--ouro) }
.end > span { padding: 0 10px 0 2px; color: var(--fraco); font-size: 14px; white-space: nowrap }

/* ================= CADASTRO (porta dividida) ================= */
/* À esquerda o que a Loja ganha, à direita o formulário. Quem decide se cadastrar lê o
   porquê ao lado do campo, não numa página anterior que já fechou.
   Contraste sobre o marinho #0E1E34: branco 16.4 · #C9D2DE 11.3 · ouro claro 9.6 */
body.porta-cad { margin: 0; background: var(--fundo) }
.cad { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); min-height: 100svh }
.cad-lado { background: var(--marinho-p); color: #fff; padding: 40px 44px; display: flex; flex-direction: column }
.cad-marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-bottom: 56px }
.cad-marca img { width: 28px; height: 28px }
.cad-marca b { font: 700 18px Sora, system-ui, sans-serif }
.cad-marca b span { color: var(--ouro-claro) }
.cad-lado h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px }
.cad-lead { color: #C9D2DE; font-size: 15px; line-height: 1.6; margin: 0 0 32px }
.cad-itens { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px }
.cad-itens li { display: flex; gap: 12px }
.cad-itens svg { width: 20px; height: 20px; flex: none; color: var(--ouro-claro); margin-top: 1px }
.cad-itens b { display: block; font-size: 15px }
.cad-itens span { color: #C9D2DE; font-size: 14px; line-height: 1.55 }

.cad-form { display: flex; justify-content: center; padding: 48px 24px }
.cad-form > form { width: min(520px, 100%) }
.cad-form fieldset { border: 0; padding: 0; margin: 0 0 28px }
.cad-form legend { font-size: 15px; font-weight: 600; color: var(--tinta); padding: 0; margin-bottom: 14px }
.cad-form label { font-size: 13px; font-weight: 500 }
.cad-form .dica { display: block; font-size: 12px; font-weight: 400; color: var(--fraco); margin-top: 4px }
.cad-form button { width: 100%; padding: 13px; font-size: 15px; font-weight: 600 }
.cad-pe { text-align: center; font-size: 14px; color: var(--fraco); margin: 16px 0 0 }
.cad-pe a, .cad-form a { color: var(--marinho); font-weight: 600 }
.cad-erro { background: #FDF3F2; border: 1px solid #F0C9C4; color: #8A1E17; border-radius: 8px;
            padding: 12px 14px; font-size: 14px; margin-bottom: 20px }

.cad-ok { text-align: center; padding-top: 48px }
.cad-selo { width: 52px; height: 52px; border-radius: 50%; background: #E4F2E9; color: #1F7A45;
            display: grid; place-items: center; margin: 0 auto 16px }
.cad-selo svg { width: 26px; height: 26px }
.cad-ok h2 { font-size: 24px; margin: 0 0 6px }
.cad-ok p { margin: 0 0 16px; font-size: 15px }
.cad-ok p.fraco { font-size: 14px }
.cad-end { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; margin: 20px 0 }
.cad-end span { display: block; font-size: 12.5px; color: var(--fraco) }
.cad-end b { font-size: 18px; word-break: break-all }

@media (max-width: 860px) {
  .cad { grid-template-columns: minmax(0, 1fr) }
  .cad-lado { padding: 24px 20px 28px }
  .cad-marca { margin-bottom: 24px }
  .cad-lado h1 { font-size: 24px }
  .cad-lead { margin-bottom: 20px }
  .cad-itens { gap: 12px }
  .cad-form { padding: 28px 20px 40px }
  .cad-ok { padding-top: 8px }
}

/* ================= TOPO DA PÁGINA (telas da Loja) ================= */
/* Título, de quem é a Loja e o botão principal na mesma faixa. O botão principal ("Novo
   irmão", "Nova sessão") morava dentro do primeiro cartão e disputava com o conteúdo. */
.pg-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px;
           flex-wrap: wrap; margin-bottom: 20px }
.pg-topo h1 { margin: 0 }
.pg-topo .loja-sub { margin: 4px 0 0 }
.pg-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.trilha { margin: 0 0 4px; font-size: 13px; color: var(--fraco) }
.trilha a { color: var(--fraco); text-decoration: none }
.trilha a:hover { color: var(--marinho); text-decoration: underline }

/* Link no conteúdo: marinho sublinhado, nunca o azul do navegador ("Marcar uma", "ver o
   Diário completo" saíam #0000EE no meio da paleta). Botão (.btn) tem a cor dele. */
main a:not(.btn):not(.chip) { color: var(--marinho); text-underline-offset: 2px; text-decoration-thickness: 1px }
main a:not(.btn):not(.chip):hover { text-decoration-thickness: 2px }

/* Cartão com título e ação na mesma linha ("Menor frequência" · ver o Diário). */
.card-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px }
.card-cab h2 { margin: 0 }
.card-cab a { font-size: 13px }

/* Duas colunas no computador, uma no celular. */
.duas-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 16px; align-items: start }

/* Zona de risco: o que apaga vai por último na página, com borda que avisa. */
.card.risco { border-color: #E8C4BF }
.card.risco h2 { color: var(--erro) }

@media print { .pg-acoes, .trilha { display: none !important } }
@media (max-width: 700px) { .pg-topo { margin-bottom: 14px } .pg-acoes { width: 100% } }

/* Botão de salvar que acompanha a rolagem numa lista longa (chamada da sessão). */
.salvar-fixo { position: sticky; bottom: 0; background: #fff; padding: 12px 0 2px; margin-top: 8px;
               border-top: 1px solid var(--linha); z-index: 2 }
details.card > summary h2 { margin: 0 }

/* ================= MENU NO CELULAR ================= */
.menu-btn { display: none }
@media (max-width: 700px) {
  header { flex-wrap: wrap }
  header .marca { margin-right: auto }
  .menu-btn { display: inline-flex; align-items: center; background: transparent; color: #fff;
              border: 1px solid #2A3C57; padding: 6px 12px; font-size: 14px; order: 2 }
  .menu-btn:hover { background: rgba(255,255,255,.08) }
  header .eu { order: 3 }
  header nav { display: none; order: 4; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0 4px }
  header nav.aberto { display: flex }
  header nav > a, details.pasta > summary { padding: 10px 12px; font-size: 15px }
  details.pasta { width: 100% }
}

/* Lista simples dentro de cartão (nome · valor): continua tabela no celular, sem a rolagem
   lateral das tabelas largas, e o texto quebra em vez de cortar. */
.card table.lista { display: table; white-space: normal }
.card table.lista td { white-space: normal }
.sub-l { display: block; font-size: 13px; color: var(--fraco) }
@media (max-width: 700px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
}

/* ================= POLÍTICAS DE UX (ver UX.md) ================= */

/* Números alinham em coluna (Carbon, Polaris: tabela de valores). */
body { font-feature-settings: "tnum" 1 }

/* WCAG 2.4.7 / 2.4.11: foco sempre visível e no mesmo desenho, em link, botão e resumo de menu. */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 4px }
main:focus { outline: none }   /* o destino do "pular" recebe foco sem desenhar moldura na página */

/* WCAG 2.4.1: pular o menu. Invisível até receber foco pelo teclado. */
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ouro); color: var(--marinho-p);
         font-weight: 600; padding: 10px 14px; border-radius: 6px; text-decoration: none }
.pular:focus { top: 12px }

/* Nielsen nº 1 (estado visível) + WCAG 4.1.3 (mensagem de estado): o "salvo" e o erro têm
   cor, borda e papel (role) próprios. Antes eram um cartão igual a qualquer outro.
   Contraste: #17552F sobre #F1F8F3 9.0 · #8A1E17 sobre #FDF3F2 8.6 */
.aviso { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 1px solid }
.aviso-ok  { background: #F1F8F3; border-color: #C9E3D1; color: #17552F }
.aviso-mal { background: #FDF3F2; border-color: #F0C9C4; color: #8A1E17; font-weight: 500 }
.aviso:focus { outline: 2px solid currentColor; outline-offset: 2px }

/* Mostrar senha (GOV.UK, NN/g): botão dentro do campo, à direita. */
.senha { position: relative; display: block }
.senha input { padding-right: 84px }
.senha-ver { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: transparent;
             color: var(--marinho); border: 0; font-size: 13px; font-weight: 600; padding: 6px 10px; width: auto }
.senha-ver:hover { background: var(--pergaminho) }
.porta .senha-ver, .cad-form .senha-ver { width: auto; margin: 0; padding: 6px 10px }

/* Cabeçalho de tabela em caixa normal (Carbon, Polaris, Atlassian): caixa-alta de 11 px com
   espaçamento se lê como ruído e encolhe a palavra. */
th { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600 }

/* Alvo de toque no celular: 44 px (Apple HIG; WCAG 2.5.8 pede 24, 44 é o confortável). */
@media (max-width: 700px) {
  button, .btn { min-height: 44px }
  .chip { min-height: 32px; display: inline-flex; align-items: center }
  header nav > a, details.pasta > summary, .gaveta a { min-height: 44px; display: flex; align-items: center }
  .senha-ver { min-height: 36px }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important } }

/* Coluna de número alinhada à direita (Carbon, Polaris). */
th.num, td.num { text-align: right; white-space: nowrap }

/* Erro das portas (login, entrar) no mesmo desenho dos avisos; o foco programático (que
   faz o leitor de tela anunciar) usa a borda da própria caixa, não a moldura preta do navegador. */
.porta p.erro[role=alert] { background: #FDF3F2; border: 1px solid #F0C9C4; color: #8A1E17;
                            border-radius: 8px; padding: 10px 12px; font-weight: 500 }
[role=alert]:focus { outline: 2px solid #E0A49C; outline-offset: 1px }