/* 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 }

@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 (✔ ✘ – ·), 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 do que eu escreveria. 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 }