/* Portal da contabilidade. Sem fonte nem imagem de fora; claro e escuro seguem o sistema. Visual de vidro sobre
   fundo de luz (desenho de 08/out/2026): superfícies translúcidas, cantos largos, verde e âmbar para a situação. */
:root {
  --papel: #eef1f7;
  --cartao: rgba(255, 255, 255, .66);
  --cartao-forte: rgba(255, 255, 255, .86);
  --tinta: #1d1d1f;
  --suave: rgba(29, 29, 31, .72);
  --linha: rgba(0, 0, 0, .08);
  --acento: #0060df;
  --botao: #1d1d1f;
  --sobre-botao: #f5f5f7;
  --verde: #34c759;
  --ambar: #ff9f0a;
  --ok: #0a5c22;
  --ok-fundo: rgba(52, 199, 89, .14);
  --manual: #8a4f00;
  --manual-fundo: rgba(255, 159, 10, .15);
  --alerta: #b3261e;
  --alerta-fundo: rgba(255, 69, 58, .12);
  --neutra: #4a4f5a;
  --neutra-fundo: rgba(0, 0, 0, .06);
  --foco: #0a84ff;
  --luz-1: #8ec5ff;
  --luz-2: #c7b8ff;
  --luz-3: #9ff0d1;
  --luz-4: #ffd6a5;
  --luz: .42;
  --tinge: 11%;
  --raio: 26px;
  --sombra: 0 1px 1px rgba(0, 0, 0, .03), 0 12px 40px -12px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(0, 0, 0, .06);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #05060a;
    --cartao: rgba(40, 42, 54, .56);
    --cartao-forte: rgba(48, 50, 64, .72);
    --tinta: #f5f5f7;
    --suave: rgba(245, 245, 247, .68);
    --linha: rgba(255, 255, 255, .1);
    --acento: #6cb6ff;
    --botao: #f5f5f7;
    --sobre-botao: #05060a;
    --verde: #30d158;
    --ambar: #ffb340;
    --ok: #5df087;
    --ok-fundo: rgba(48, 209, 88, .18);
    --manual: #ffc46b;
    --manual-fundo: rgba(255, 179, 64, .18);
    --alerta: #ff9d8f;
    --alerta-fundo: rgba(255, 69, 58, .2);
    --neutra: #c3c7d1;
    --neutra-fundo: rgba(255, 255, 255, .08);
    --foco: #8ab8ff;
    --luz-1: #1f4fa8;
    --luz-2: #4b2f8f;
    --luz-3: #0f6b55;
    --luz-4: #7a4a12;
    --luz: .5;
    --tinge: 14%;
    --sombra: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 50px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .07);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

/* Fundo: quatro manchas de luz desfocadas, paradas atrás de tudo. É só enfeite (aria-hidden no HTML). */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: var(--luz); }
.aurora i:nth-child(1) { width: 52vw; height: 52vw; left: -12vw; top: -18vw; background: var(--luz-1); }
.aurora i:nth-child(2) { width: 44vw; height: 44vw; right: -10vw; top: -6vw; background: var(--luz-2); }
.aurora i:nth-child(3) { width: 46vw; height: 46vw; left: 18vw; bottom: -22vw; background: var(--luz-3); }
.aurora i:nth-child(4) { width: 30vw; height: 30vw; right: 8vw; bottom: 4vw; background: var(--luz-4); opacity: calc(var(--luz) * .55); }

/* Vidro: toda superfície (cabeçalho, cartão, total, painel) é translúcida, com o fundo desfocado atrás. */
.topo, .cartao, .total, .dia.com, .segmentado, .seguradoras-do-mes tr {
  background: var(--cartao);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--sombra);
}
h1 { font-size: 1.75rem; line-height: 1.15; margin: 0 0 4px; letter-spacing: -.03em; font-weight: 700; }
h2 { font-size: 1.05rem; margin: 0 0 12px; letter-spacing: -.015em; }
p { margin: 0 0 12px; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 8px; }
.suave { color: var(--suave); }
.nota { color: var(--suave); font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fora-da-tela { position: absolute; left: -9999px; top: 0; }
/* `hidden` vale sempre, mesmo em quem tem display próprio (a busca esconde cartões; sem JS nada é escondido). */
[hidden] { display: none !important; }

/* Cabeçalho */
.topo {
  position: sticky; top: 12px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  max-width: 1040px; margin: 12px auto 0; padding: 8px 10px 8px 20px; border-radius: 28px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tinta); text-decoration: none; letter-spacing: -.015em; }
.marca::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.abas { display: flex; gap: 2px; flex: 1; }
.abas a { padding: 6px 14px; border-radius: 999px; color: var(--suave); text-decoration: none; font-size: .9rem; font-weight: 600; }
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { background: var(--cartao-forte); color: var(--tinta); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--linha); }
.conta { display: flex; align-items: center; gap: 12px; font-size: .85rem; }
.conta a { color: var(--suave); }
.conta a[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.conta form { margin: 0; }
.quem { color: var(--suave); }

/* Corpo */
.conteudo { max-width: 1040px; margin: 0 auto; padding: 28px 24px 56px; }
.conteudo.estreito { max-width: 420px; min-height: 100vh; display: grid; align-content: center; padding-block: 24px; }
.cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
/* Tela Mês: o nome do mês em letra grande, entre as setas de mês anterior e seguinte. */
.cabeca.do-mes { align-items: center; }
.cabeca.do-mes h1 { font-size: clamp(1.9rem, 6vw, 3.25rem); line-height: 1; letter-spacing: -.035em; margin-bottom: 8px; }
.troca-mes { display: flex; align-items: center; gap: 12px; }
.seta {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cartao); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; font-size: 1.4rem; line-height: 1;
}
.seta:hover { background: var(--cartao-forte); }
span.seta { opacity: .35; }
.cabeca p { margin: 0; }
.selos { display: flex; flex-wrap: wrap; gap: 8px; }
.voltar { display: inline-block; margin-bottom: 10px; font-size: .9rem; }
.rodape { margin-top: 20px; font-size: .85rem; }
.cartao { border-radius: var(--raio); padding: 22px; margin-bottom: 20px; }

/* Três totais do mês */
.totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-bottom: 20px; }
.total { border-radius: 22px; padding: 14px 18px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.total .rotulo, .rotulo { color: var(--suave); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.total .valor { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
/* Total com anel de progresso (notas liberadas, notas recebidas): o anel fica no canto de cima, fora do fluxo, para
   o valor em reais ter a largura toda do cartão e nunca ser cortado. Só o rótulo desvia dele. */
.total.com-anel { position: relative; }
.total.com-anel .rotulo { padding-right: 30px; }
.anel { position: absolute; top: 9px; right: 12px; width: 22px; height: 22px; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 5; stroke: var(--linha); }
.anel .parte { stroke: var(--verde); stroke-linecap: round; }
.anel.azul .parte { stroke: var(--foco); }

/* Filtro da tela Mês: controle segmentado (só aparece com JS; sem ele a lista vem inteira). */
.segmentado { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; }
.segmentado button {
  padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--suave);
  font: 600 .82rem/1.2 inherit; font-family: inherit; white-space: nowrap; cursor: pointer;
}
.segmentado button b { font-weight: 500; font-variant-numeric: tabular-nums; }
.segmentado button[aria-pressed="true"] { background: var(--cartao-forte); color: var(--tinta); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--linha); }

/* Tela Mês: cada seguradora é um cartão de vidro tingido pela situação (verde = conferida, âmbar = a conferir),
   com um filete luminoso à esquerda. É a mesma tabela do HTML; aqui cada linha vira cartão em qualquer largura. */
.seguradoras-do-mes { margin-bottom: 20px; }
.seguradoras-do-mes .tabela thead { display: none; }
.seguradoras-do-mes .tabela, .seguradoras-do-mes tbody { display: block; }
.seguradoras-do-mes tr {
  --st: var(--ambar); --st-tinta: var(--manual);
  position: relative; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(10.25rem, max-content) minmax(10.25rem, max-content) minmax(11.5rem, 1fr) minmax(7.5rem, .9fr);
  gap: 8px 20px; align-items: start; margin-bottom: 12px; padding: 18px 22px 18px 26px; border-radius: var(--raio);
  background: linear-gradient(100deg, color-mix(in srgb, var(--st) var(--tinge), transparent) 0%, color-mix(in srgb, var(--st) 3%, transparent) 38%, transparent 62%), var(--cartao);
}
.seguradoras-do-mes tr.st-conferido { --st: var(--verde); --st-tinta: var(--ok); }
.seguradoras-do-mes tr::after {
  content: ""; position: absolute; left: 8px; top: 18px; bottom: 18px; width: 4px; border-radius: 4px;
  background: var(--st); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--st) 35%, transparent);
}
.seguradoras-do-mes .tabela th, .seguradoras-do-mes .tabela td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
.seguradoras-do-mes .tabela tbody th {
  align-self: center; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em;
}
.seguradoras-do-mes th .logo { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; padding: 4px; border-radius: 14px; }
.seguradoras-do-mes th .logo.iniciais { padding: 0; font-size: .95rem; }
.seguradoras-do-mes th > a:not(.atalho) { color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.seguradoras-do-mes th > a:not(.atalho):hover { text-decoration: underline; }
.seguradoras-do-mes th .atalho { grid-column: 2; margin-top: 4px; flex-wrap: wrap; white-space: normal; border-radius: 12px; }
.seguradoras-do-mes td::before {
  content: attr(data-rotulo); display: block; margin-bottom: 2px; white-space: normal;
  color: var(--suave); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.seguradoras-do-mes td.num { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.seguradoras-do-mes td.num, .seguradoras-do-mes td.num::before { text-align: right; }
.seguradoras-do-mes .pilula { white-space: normal; border-radius: 14px; }
.seguradoras-do-mes td .nota { display: inline-block; white-space: nowrap; }
.seguradoras-do-mes .sub { display: block; margin-top: 5px; font-size: .78rem; color: var(--st-tinta); }
.nada-no-filtro { text-align: center; color: var(--suave); padding: 28px 0; }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela thead th { color: var(--suave); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela .sub { display: block; margin-top: 4px; font-size: .78rem; font-weight: 400; color: var(--suave); }
.tabela td.acoes { white-space: nowrap; }
a.botao { text-decoration: none; }
/* O título da coluna de valor pode quebrar; o valor em dinheiro, nunca. */
.tabela thead th.num { white-space: normal; }
.tabela tbody th { font-weight: 600; }
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tfoot th, .tabela tfoot td { border-top: 2px solid var(--linha); border-bottom: 0; font-weight: 700; }
.codigo { font: .8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--suave); }

/* Pílula de situação: sempre texto + cor */
.pilula { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--linha); }
.pilula.ok { background: var(--ok-fundo); color: var(--ok); }
.pilula.manual { background: var(--manual-fundo); color: var(--manual); }
.pilula.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.pilula.neutra { background: var(--neutra-fundo); color: var(--neutra); }

/* Avisos */
.aviso { padding: 12px 16px; border-radius: 16px; border-left: 4px solid var(--neutra); background: var(--neutra-fundo); color: var(--tinta); }
.aviso.ok { border-color: var(--ok); background: var(--ok-fundo); }
.aviso.manual { border-color: var(--manual); background: var(--manual-fundo); }
.aviso.alerta { border-color: var(--alerta); background: var(--alerta-fundo); }
/* O aviso de para que serve o portal: texto corrido, discreto, sem a barra colorida dos avisos de situação. */
.aviso.sobre-o-portal { border-left: 0; background: var(--cartao); box-shadow: var(--sombra); color: var(--suave); font-size: .88rem; line-height: 1.5; margin: 0 0 20px; }
.aviso.sobre-o-portal strong { color: var(--tinta); }
.conteudo.estreito .aviso.sobre-o-portal { margin: 16px 0 0; }
.lembrete { max-width: 1040px; margin: 0 auto; padding: 0 24px 32px; color: var(--suave); font-size: .82rem; text-align: center; }

/* Os três valores do relatório */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 12px; }
.tres div { display: grid; gap: 2px; }
.tres dt { color: var(--suave); font-size: .8rem; font-weight: 600; }
.tres dd { margin: 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dados de emissão, com botão copiar */
.campos { margin: 0; display: grid; gap: 0; }
.campo { display: grid; grid-template-columns: 220px 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.campo:last-child { border-bottom: 0; }
.campo dt { color: var(--suave); font-size: .9rem; }
.campo dd { margin: 0; display: flex; align-items: start; justify-content: space-between; gap: 12px; overflow-wrap: anywhere; }
.copiar {
  flex: none; padding: 4px 12px; border: 1px solid var(--linha); border-radius: 999px; background: var(--cartao-forte);
  color: var(--acento); font: 600 .8rem system-ui, sans-serif; cursor: pointer;
}
.copiar:hover { border-color: var(--acento); }
.copiar.feito { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }

/* Logo da seguradora: tamanho fixo (não desloca nada ao carregar) e plaquinha branca atrás, nos dois temas, porque
   os logos têm fundo branco ou transparente. Sem logo, as iniciais num quadrado neutro do mesmo tamanho. */
.logo {
  display: inline-block; flex: none; box-sizing: border-box; width: 28px; height: 28px; padding: 2px; margin-right: 8px;
  border: 1px solid var(--linha); border-radius: 9px; background: #fff; object-fit: contain; vertical-align: middle; overflow: hidden;
}
.logo.t40 { width: 40px; height: 40px; padding: 3px; border-radius: 13px; }
.logo.t18 { width: 18px; height: 18px; padding: 1px; border-radius: 4px; margin-right: 0; }
.logo.iniciais {
  display: inline-grid; place-items: center; padding: 0; background: var(--cartao-forte); color: var(--tinta);
  font: 700 .68rem/1 system-ui, sans-serif; letter-spacing: .02em; text-decoration: none;
}
.logo.iniciais.t40 { font-size: .9rem; }
.logo.iniciais.t18 { font-size: .5rem; letter-spacing: 0; }
.com-logo { display: flex; align-items: center; gap: 4px; min-width: 0; }
.com-logo > div { min-width: 0; }
.com-logo h2 { margin: 0; overflow-wrap: anywhere; }
.fichas .com-logo { margin-bottom: 12px; }

/* Ficha do cadastro fiscal: selo da origem + "Copiar tudo" no topo, depois um campo por linha */
.ficha-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 6px; }
.ficha-topo .pilula { white-space: normal; border-radius: 12px; }
.copiar.tudo { padding: 7px 16px; background: var(--botao); border-color: var(--botao); color: var(--sobre-botao); font-size: .85rem; }
.copiar.tudo:hover { filter: brightness(1.08); }
.copiar.tudo.feito { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); }

/* Tela Seguradoras: busca e cartões em colunas (uma só quando não cabem duas) */
.busca { margin-bottom: 20px; }
.busca label { margin-top: 0; }
.busca input { max-width: 480px; }
.busca .nota { margin: 6px 0 0; min-height: 1.3em; }
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 20px; align-items: start; }
.fichas .cartao { margin: 0; min-width: 0; }
.fichas .campo { grid-template-columns: 150px 1fr; }

/* Atalho "Dados da nota" na linha do mês: pílula discreta que abre o painel */
.atalho {
  display: flex; width: fit-content; max-width: 100%; align-items: baseline; gap: 0 6px; margin-top: 6px; white-space: nowrap;
  padding: 2px 10px; border: 1px solid var(--linha);
  border-radius: 999px; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--acento); background: var(--cartao-forte);
}
.atalho:hover { border-color: var(--acento); }
.atalho .codigo { font-size: .75rem; }
.atalho.sem { color: var(--suave); font-weight: 400; }

/* Painel "Dados da nota": <dialog> nativo. O respiro fica no miolo, para o clique na borda escura fechar. */
dialog.painel {
  width: min(600px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); padding: 0; overflow: auto;
  border: 0; border-radius: 28px; background: var(--cartao-forte); color: var(--tinta);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 24px 80px -12px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--linha);
}
dialog.painel::backdrop { background: rgba(10, 12, 20, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.painel-corpo { padding: 24px; }
.painel-topo { display: flex; align-items: center; gap: 4px; }
.painel-topo h2 { flex: 1; }
.painel-topo h2 { font-size: 1.25rem; margin: 0; overflow-wrap: anywhere; }
.painel-topo form { margin: 0; flex: none; }
.painel .campo { grid-template-columns: 170px 1fr; }
.painel-pe { margin: 14px 0 0; font-size: .9rem; }

/* Envio em lote: área de soltar arquivos (tela Mês) e a revisão */
.solta { padding: 16px 18px; border: 2px dashed var(--linha); border-radius: 18px; background: var(--cartao-forte); }
.solta.sobre { border-color: var(--foco); background: var(--ok-fundo); }
.solta label { margin-top: 0; }
.solta .nota { margin: 8px 0 0; }
.lote-pendente { margin: 14px 0 0; font-weight: 600; }
.lote-topo { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.lote-topo form { margin: 0; }
.lote-topo .botao { margin-top: 0; }
.arquivo-nome { font-weight: 600; overflow-wrap: anywhere; }
.lote-tabela th .nota { display: block; font-weight: 400; }
.lote-seg { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.lote-seg .com-logo { overflow-wrap: anywhere; }
.lote-escolha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; width: 100%; min-width: 0; }
.lote-escolha select { width: 0; min-width: 0; flex: 1 1 140px; padding: 5px 8px; font-size: .85rem; }
.lote-escolha .botao { flex: none; }
.lote-valor { display: grid; gap: 6px; min-width: 0; }
.lote-avisos { margin: 0; padding-left: 16px; font-size: .85rem; color: var(--suave); }
@media (min-width: 1001px) {
  .lote-tabela { table-layout: fixed; }
  .lote-tabela thead th:first-child { width: 26%; }
  .lote-tabela thead th:nth-child(2) { width: 34%; }
  .lote-tabela thead th:last-child { width: 15%; }
}
.lote-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.lote-acoes form { margin: 0; }
.botao.perigo { color: var(--alerta); }

/* Formulários */
label { display: block; font-size: .9rem; font-weight: 600; margin: 14px 0 6px; }
input[type="text"], input[type="password"], input[type="search"], input[type="file"], select {
  width: 100%; padding: 12px 16px; border: 0; border-radius: 16px;
  background: var(--cartao-forte); color: var(--tinta); font: inherit; box-shadow: inset 0 0 0 1px var(--linha);
}
input:focus-visible, select:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--foco), 0 0 0 4px color-mix(in srgb, var(--foco) 40%, transparent); }
.botao {
  display: inline-block; margin-top: 16px; padding: 10px 20px; border: 0; border-radius: 999px;
  background: var(--botao); color: var(--sobre-botao); font: 600 .9rem system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
}
.botao:active { transform: scale(.97); }
.botao:hover { filter: brightness(1.08); }
.botao:disabled { opacity: .6; cursor: progress; }
.botao.discreto { margin-top: 0; padding: 7px 14px; background: var(--cartao-forte); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha); font-size: .82rem; }
.envio-direto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.envio-direto label { margin: 0; cursor: pointer; }
.envio-direto input[type=file] { max-width: 220px; font-size: .78rem; }
.envio-direto:not(.com-js) label { display: none; }
.envio-direto.com-js [data-envio-direto-sem-js] { display: none; }
.envio-direto.com-js input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.envio-direto.com-js:focus-within label { outline: 3px solid var(--foco); outline-offset: 2px; }
.seletor { display: flex; align-items: center; gap: 8px; }
.seletor label { margin: 0; }
.seletor select { width: auto; padding: 8px 14px; border-radius: 999px; font-size: .9rem; }
.entrar { border-radius: 32px; padding: 36px 32px; }
.entrar h1 { font-size: 1.45rem; font-weight: 600; text-align: center; }
.entrar h1 + .suave { text-align: center; margin-bottom: 20px; }
.entrar .botao { width: 100%; padding: 13px 20px; font-size: 1rem; margin-top: 22px; }
.entrar .nota { margin: 16px 0 0; text-align: center; }
/* A marca do portal na tela Entrar: um quadrado de vidro com três linhas e um visto. */
.selo-da-marca {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 22px;
  background: var(--cartao-forte); box-shadow: var(--sombra); color: var(--tinta);
}
.selo-da-marca svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.selo-da-marca .visto { stroke: var(--verde); }
.envio { margin-bottom: 20px; }
.envio .erro { color: var(--alerta); font-weight: 600; }

/* Calendário */
.cal { display: grid; gap: 6px; margin-bottom: 20px; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cabeca span { color: var(--suave); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 8px; }
.dia { min-height: 92px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 16px; background: transparent; display: grid; align-content: start; gap: 4px; }
.dia.fora { border-color: transparent; background: transparent; }
.dia.vazio { background: transparent; }
.dia.com { border-color: transparent; }
.dia .numero { color: var(--suave); font-size: .8rem; font-weight: 700; }
.dia .semana { display: none; }
.credito { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; align-items: center; padding: 4px 7px; border-radius: 9px; background: var(--ok-fundo); color: var(--tinta); text-decoration: none; font-size: .78rem; line-height: 1.3; }
.credito .logo { grid-row: 1 / span 2; }
.credito span:not(.logo), .credito b { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.credito b { font-variant-numeric: tabular-nums; }
.dia .soma { font-size: .78rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lista { margin: 0; padding: 0; list-style: none; }
.lista li { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lista li:last-child { border-bottom: 0; }

/* Celular */
@media (max-width: 640px) {
  .topo { top: 8px; margin: 8px 12px 0; padding: 8px 10px 8px 16px; border-radius: 24px; }
  .entrar { padding: 28px 22px; }
  /* Os três botões do filtro não cabem numa linha no celular: quebram, em vez de esconder o último atrás de rolagem. */
  .segmentado { display: flex; flex-wrap: wrap; border-radius: 22px; overflow-x: visible; }
  .segmentado button { flex: 1 1 auto; padding: 8px 12px; }
  .abas { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .abas a { padding: 6px 10px; }
  .conta { margin-left: auto; }
  .quem { display: none; }
  .conteudo { padding: 20px 16px 40px; }
  h1 { font-size: 1.35rem; }
  .totais, .tres { grid-template-columns: 1fr; }
  .campo, .fichas .campo, .painel .campo { grid-template-columns: 1fr; }
  .painel-corpo { padding: 16px; }
  .busca input { max-width: none; }
  .cartao { padding: 18px; }

  /* Tabela dentro do cartão estreito: as pontas alinham com o texto do cartão (o respiro já é o do cartão), o
     miolo aperta e o texto quebra onde for preciso. Só o valor em dinheiro (td.num) nunca quebra. Sem isto,
     data + pagador + valor somavam mais que a largura do cartão e a coluna de valor passava da borda direita (e a
     página ganhava rolagem para o lado). */
  .tabela th, .tabela td { padding: 10px 6px; overflow-wrap: anywhere; }
  /* A primeira célula de dado é a data do crédito: fica inteira; quem cede largura é o pagador. */
  .tabela td:first-child { white-space: nowrap; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 0; }
  .tabela th:last-child, .tabela td:last-child { padding-right: 0; }

  .cal-cabeca { display: none; }
  .cal-semana { grid-template-columns: 1fr; }
  .dia { min-height: 0; grid-template-columns: 76px 1fr; align-items: start; }
  .dia.fora, .dia.vazio { display: none; }
  .dia .semana { display: inline; font-weight: 400; }
  .dia .credito, .dia .soma { grid-column: 2; }
}

/* Tabela larga (linhas do mês, notas enviadas) vira lista de cartões já no tablet: com 5 ou 6 colunas ela não cabe
   abaixo de uns 1000 px. */
@media (max-width: 1000px) {
  .tabela.empilha thead { display: none; }
  .tabela.empilha, .tabela.empilha tbody, .tabela.empilha tr, .tabela.empilha th, .tabela.empilha td { display: block; }
  .tabela.empilha tr { padding: 10px 0; border-bottom: 1px solid var(--linha); }
  .tabela.empilha tr:last-child { border-bottom: 0; }
  .tabela.empilha th, .tabela.empilha td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 16px; text-align: right; }
  .tabela.empilha th { font-size: 1.05rem; flex-wrap: wrap; align-items: center; gap: 6px 16px; text-align: left; }
  .tabela.empilha th .atalho { margin-top: 0; flex-wrap: wrap; white-space: normal; }
  .tabela.empilha td::before, .tabela.empilha th::before { content: attr(data-rotulo); color: var(--suave); font-size: .85rem; font-weight: 400; text-align: left; }
  .tabela.empilha th[data-rotulo="Seguradora"]::before { content: none; }
  /* Na revisão do lote as células têm formulário: o rótulo vai em cima, não ao lado. */
  .tabela.empilha.lote-tabela th, .tabela.empilha.lote-tabela td { display: block; text-align: left; }
  .tabela.empilha.lote-tabela td::before, .tabela.empilha.lote-tabela th::before { display: block; margin-bottom: 3px; }
  .tabela.empilha.lote-tabela td { padding-top: 8px; }
}

/* O cartão da seguradora (tela Mês) empilha abaixo de 1000 px: nome em cima, os dois valores lado a lado, situação e
   nota embaixo. Vem depois da regra geral de `.empilha` para valer sobre ela. */
@media (max-width: 1000px) {
  .seguradoras-do-mes tr, .seguradoras-do-mes .tabela.empilha tr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px 18px 18px 24px; border-bottom: 0; }
  .seguradoras-do-mes .tabela.empilha tbody th { grid-column: 1 / -1; display: grid; text-align: left; gap: 0 14px; }
  .seguradoras-do-mes .tabela.empilha td { display: block; text-align: left; padding: 0; }
  .seguradoras-do-mes .tabela.empilha td::before { display: block; font-size: .7rem; font-weight: 600; }
  .seguradoras-do-mes td.num, .seguradoras-do-mes td.num::before, .seguradoras-do-mes .tabela.empilha td.num { text-align: left; }
}
@media (max-width: 480px) {
  .seguradoras-do-mes tr, .seguradoras-do-mes .tabela.empilha tr { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .botao, .copiar, .abas a, .seta, .segmentado button { transition: background-color .15s, border-color .15s, filter .15s, transform .15s; }
  .aurora i { animation: flutuar 26s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation-delay: -8s; }
  .aurora i:nth-child(3) { animation-delay: -14s; }
  .aurora i:nth-child(4) { animation-delay: -20s; }
  .seguradoras-do-mes tr, .entrar { animation: surgir .42s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes flutuar { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vw, 3vw, 0) scale(1.08); } }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
/* Tour guiado: o JS só põe e tira classes; quem apaga o resto e destaca o alvo é este bloco. */
.tour-cartao { position: fixed; left: 50%; bottom: 16px; z-index: 80; width: min(520px, calc(100vw - 24px)); transform: translateX(-50%); padding: 16px 18px; border-radius: 22px; background: var(--papel); color: var(--tinta); box-shadow: 0 22px 60px -14px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--linha); }
.tour.no-topo .tour-cartao { top: 16px; bottom: auto; }
.tour-conta { margin: 0 0 4px; color: var(--suave); font-size: .78rem; }
.tour-cartao h2 { margin: 0 0 6px; font-size: 1.05rem; }
.tour-cartao p { margin: 0; line-height: 1.5; }
.tour-botoes { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-botoes .botao { margin-top: 0; }
.tour-botoes [data-tour-pular] { margin-right: auto; }
body.em-tour :is(.topo, main > *, .lembrete, .seguradoras-do-mes tbody tr):not(:has(.tour-alvo)):not(.tour-alvo) { opacity: .25; pointer-events: none; transition: opacity .25s; }
/* a entrada animada das linhas termina em opacity: 1 e seguraria esse valor: durante o tour ela não roda; depois
   dele também não (fez-tour), senão as linhas piscariam de novo ao fechar */
body:is(.em-tour, .fez-tour) .seguradoras-do-mes tbody tr { animation: none; }
body.em-tour .tour-alvo { outline: 3px solid var(--foco); outline-offset: 5px; border-radius: 14px; }
/* Como usar (guia) */
.ajuda-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.ajuda-indice a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta); font-size: .88rem; text-decoration: none; }
.ajuda .cartao { scroll-margin-top: 96px; }
@media (max-width: 640px) { .ajuda .cartao { scroll-margin-top: 150px; } }
.ajuda .cartao > :last-child { margin-bottom: 0; }
.ajuda .cartao p, .ajuda .cartao li { line-height: 1.55; }
.ajuda .lista { margin-bottom: 14px; }
.passos { margin: 0 0 12px; padding-left: 1.4em; }
.passos li { margin-bottom: 6px; }
.duvidas { margin: 0; }
.duvidas dt { margin-top: 14px; font-weight: 600; }
.duvidas dt:first-child { margin-top: 0; }
.duvidas dd { margin: 4px 0 0; color: var(--suave); }
@media print {
  .topo, .envio, .copiar, .seletor, .busca, .atalho, .aurora, .seta, .segmentado, .ajuda-indice, .tour { display: none; }
  body { background: #fff; }
  .cartao, .total, .seguradoras-do-mes tr { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}