/* Painel Fluvie NFS-e: o "espelho da nota" (células com rótulo, como no documento fiscal) é o elemento central. */
:root {
  --fundo: #E7ECEA;
  --superficie: #FFFFFF;
  --campo: #F4F7F6;
  --tinta: #14201B;
  --apagado: #53635C;
  --linha: #CAD4D0;
  --linha-forte: #8F9F98;
  --verde: #0A6A54;
  --verde-escuro: #08513F;
  --verde-claro: #DDEFE8;
  --sobre-verde: #FFFFFF;
  --atraso: #A8361C;
  --atraso-claro: #F8E2DB;
  --perto: #875800;
  --perto-claro: #F6EBD3;
  --trilho: #14201B;
  --trilho-texto: #D7E2DD;
  --trilho-apagado: #8EA19A;
  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0E1513; --superficie: #16201D; --campo: #1C2824; --tinta: #E3ECE8; --apagado: #9AAAA3;
    --linha: #2B3934; --linha-forte: #4A5D56; --verde: #43B593; --verde-escuro: #5FC7A6; --verde-claro: #16382E;
    --sobre-verde: #062019; --atraso: #F0806A; --atraso-claro: #3A1C15; --perto: #E2AE4A; --perto-claro: #342711;
    --trilho: #0A100E; --trilho-texto: #D7E2DD; --trilho-apagado: #7F928B;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--tinta);
  font: 400 15px/1.5 var(--fonte); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--verde); }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pequeno { font-size: 12.5px; color: var(--apagado); }

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta);
  font: 500 14px/1 var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--tinta); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primario { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); font-weight: 600; }
.btn-primario:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); }
.btn-sutil { border-color: transparent; background: transparent; color: var(--apagado); }
.btn-sutil:hover { color: var(--tinta); border-color: var(--linha); }
.btn-perigo { background: var(--atraso); border-color: var(--atraso); color: #fff; }
.btn-largo { width: 100%; min-height: 44px; }
.btn-icone { border: 0; background: none; color: var(--apagado); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.btn-icone:hover { color: var(--tinta); background: var(--campo); }
.link { border: 0; background: none; padding: 0; color: var(--verde); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-claro { color: var(--trilho-apagado); }
.link-claro:hover { color: var(--trilho-texto); }

/* ===== Entrada (login) ===== */
.entrada { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 32px 16px; }
/* Marca da plataforma (símbolo + nome), no login e no topo do menu */
.marca { display: flex; align-items: center; gap: 10px; }
.marca-simbolo { flex: none; }
.marca-simbolo rect { fill: var(--verde); }
.marca-simbolo path { stroke: var(--sobre-verde); }
.entrada-marca { justify-content: center; }
.entrada-rodape { font-size: 13px; color: var(--apagado); }
.marca-nome { font-weight: 650; font-stretch: 118%; font-size: 22px; letter-spacing: -0.01em; }
.marca-sub { color: var(--apagado); font-stretch: 85%; }
.entrada-caixa {
  width: min(400px, 100%); background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: 8px; padding: 28px; display: grid; gap: 16px;
}
.entrada-caixa h1 { font-size: 22px; font-weight: 640; font-stretch: 112%; }
.entrada-links { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.mensagem { font-size: 14px; padding: 10px 12px; border-radius: 6px; }
.mensagem-ok { background: var(--verde-claro); }
.mensagem-erro { background: var(--atraso-claro); color: var(--atraso); }
.mensagem-aviso { background: var(--perto-claro); color: var(--perto); }
.mensagem + .acoes-inicio, .bloco .mensagem { margin-top: 12px; }

/* ===== Estrutura ===== */
.estrutura { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.trilho {
  background: var(--trilho); color: var(--trilho-texto); padding: 24px 16px;
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh;
}
.trilho-marca { padding: 0 10px 18px; }
.trilho .marca-simbolo rect { fill: #43B593; }
.trilho .marca-simbolo path { stroke: #062019; }
.trilho-marca .marca-nome { font-size: 18px; line-height: 1.2; }
.trilho-marca .marca-sub { color: var(--trilho-apagado); font-size: 13px; }
/* Em qual escritório a pessoa está trabalhando (as páginas abaixo são dele) */
.trilho-contexto { margin: 0 0 12px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; }
.trilho-rotulo { font-size: 12px; font-stretch: 85%; color: var(--trilho-apagado); letter-spacing: 0.02em; }
.trilho-contexto-nome { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilho-secao { padding: 18px 10px 6px; }
.nav-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-radius: 6px; color: var(--trilho-texto); text-decoration: none; font-weight: 500;
}
.nav-item:hover { background: rgba(255,255,255,.06); }
.nav-item.ativo { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 3px 0 0 #43B593; }
.contador { background: #43B593; color: #062019; font-size: 12.5px; font-weight: 700; min-width: 24px; padding: 1px 7px; border-radius: 10px; text-align: center; }
.trilho-pe { margin-top: auto; padding: 0 10px; font-size: 13px; display: grid; gap: 4px; justify-items: start; }
.trilho-usuario { color: var(--trilho-apagado); overflow: hidden; text-overflow: ellipsis; }
.conteudo { min-width: 0; }

.pagina { max-width: 1080px; padding: 36px 40px 64px; }
.pagina-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.pagina-topo h1 { font-size: 30px; font-weight: 640; font-stretch: 115%; letter-spacing: -0.015em; line-height: 1.15; }
.pagina-resumo { color: var(--apagado); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.resumo-atraso { color: var(--atraso); font-weight: 600; margin-left: -10px; }
.voltar { display: inline-block; margin-bottom: 12px; color: var(--apagado); text-decoration: none; font-size: 14px; }
.voltar::before { content: '‹ '; }
.voltar:hover { color: var(--tinta); }
.carregando { padding: 40px; color: var(--apagado); }

.vazio { border: 1px dashed var(--linha-forte); border-radius: 8px; padding: 32px; max-width: 640px; color: var(--apagado); display: grid; gap: 8px; }
.vazio-titulo { color: var(--tinta); font-weight: 600; font-size: 17px; }
.texto-apoio { color: var(--apagado); font-size: 14px; }

/* ===== O espelho da nota ===== */
.dica-copiar { color: var(--apagado); font-size: 13.5px; margin-bottom: 12px; }
.lista-notas { display: grid; gap: 20px; }
.nota { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 4px; }
.nota-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 14px; }
.nota-cliente { font-size: 19px; font-weight: 640; font-stretch: 108%; }
.nota-meta { display: flex; gap: 14px; color: var(--apagado); font-size: 13.5px; margin-top: 2px; }
.prazo { font-size: 13.5px; font-weight: 600; padding: 4px 10px; border-radius: 4px; white-space: nowrap; background: var(--campo); color: var(--apagado); }
.prazo-perto { background: var(--perto-claro); color: var(--perto); }
.prazo-atrasado { background: var(--atraso-claro); color: var(--atraso); }

.celulas { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); border-top: 1px solid var(--linha-forte); }
.celula {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  padding: 9px 14px 11px; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit;
  border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); cursor: copy;
}
.celula:hover:not(:disabled) { background: var(--campo); }
.celula:disabled { cursor: default; }
.celula-rotulo { font-size: 12px; font-stretch: 72%; font-weight: 560; color: var(--apagado); letter-spacing: 0.01em; }
.celula-valor { font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.celula.copiado { background: var(--verde-claro); }
.celula.copiado .celula-rotulo { color: var(--verde); }
.c-doc .celula-valor { white-space: nowrap; }
.c-valor { border-right: 0; }
.c-valor .celula-valor { font-size: 19px; font-weight: 650; font-stretch: 105%; }
.c-desc { grid-column: 1 / -1; border-right: 0; }
.c-desc .celula-valor { font-weight: 400; }
.nota-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; }
.nota-origem { color: var(--apagado); font-size: 13.5px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

/* ===== Formulários ===== */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form .largo, .form .acoes { grid-column: 1 / -1; }
.form-inline { margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--linha); }
.campo-form { display: grid; gap: 5px; align-content: start; }
.campo-rotulo { font-size: 13px; font-weight: 560; font-stretch: 85%; color: var(--apagado); }
.campo-dica { font-size: 12.5px; color: var(--apagado); }
.campo-erro { font-size: 12.5px; color: var(--atraso); font-weight: 500; }
input, select, textarea {
  width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta); font: 400 15px/1.4 var(--fonte);
}
textarea { resize: vertical; }
input[type="file"] { padding: 7px; background: var(--campo); }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--verde); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: -1px; border-color: var(--verde); }
.caixa-marcar { display: flex; gap: 10px; align-items: center; }
.subform { border: 1px solid var(--linha); border-radius: 6px; padding: 12px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subform .largo { grid-column: 1 / -1; }
.busca { max-width: 360px; margin-bottom: 14px; }
.filtros { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.filtros .campo-form { width: 240px; }

/* ===== Janela ===== */
.sobreposto { position: fixed; inset: 0; background: rgba(10, 18, 15, .5); display: grid; place-items: start center; padding: 6vh 16px; overflow-y: auto; z-index: 20; }
.janela { width: 100%; max-width: 620px; background: var(--superficie); border-radius: 8px; border: 1px solid var(--linha-forte); padding: 22px 24px 24px; display: grid; gap: 14px; }
.janela-topo { display: flex; justify-content: space-between; align-items: center; }
.janela-topo h2 { font-size: 20px; font-weight: 640; font-stretch: 110%; }

/* ===== Tabelas e listas ===== */
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 4px; }
.tabela th { text-align: left; font-size: 12.5px; font-weight: 560; font-stretch: 78%; color: var(--apagado); padding: 10px 14px; border-bottom: 1px solid var(--linha-forte); }
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr[onclick], .tabela tbody tr:has(a) { cursor: pointer; }
.tabela tbody tr:hover { background: var(--campo); }
.tabela a { color: var(--tinta); font-weight: 560; text-decoration: none; }
.tabela .num { text-align: right; }
.inativo { opacity: .6; }
.etiqueta { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--campo); color: var(--apagado); }
.etiqueta-automatico { background: var(--verde-claro); color: var(--verde); }
.etiqueta-assistido { background: var(--campo); color: var(--apagado); border: 1px solid var(--linha); }
.etiqueta-alerta { background: var(--atraso-claro); color: var(--atraso); }
.etiqueta-liberado { background: var(--verde-claro); color: var(--verde); }
.etiqueta-pendente { background: var(--perto-claro); color: var(--perto); }

.grade-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.bloco { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 4px; padding: 18px 20px 20px; }
.bloco-titulo { font-size: 17px; font-weight: 640; font-stretch: 108%; margin-bottom: 6px; grid-column: 1 / -1; }
.itens { list-style: none; margin: 12px 0 0; padding: 0; }
.itens li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); align-items: flex-start; }
.item-desc { color: var(--apagado); font-size: 13.5px; margin-top: 2px; }
.item-uso { color: var(--apagado); font-size: 13px; }

/* ===== Avisos ===== */
.avisos { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 30; max-width: min(420px, calc(100vw - 40px)); }
.aviso { padding: 12px 16px; border-radius: 6px; background: var(--tinta); color: var(--fundo); font-size: 14px; font-weight: 500; }
.aviso-erro { background: var(--atraso); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .aviso { animation: entra .18s ease-out; }
  @keyframes entra { from { opacity: 0; transform: translateY(6px); } }
}

/* ===== Início: cartões de número ===== */
.cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.cartoes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartao {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 14px 16px 16px;
  color: inherit; text-decoration: none;
}
.cartao-link:hover { border-color: var(--tinta); }
.cartao-rotulo { font-size: 13px; font-weight: 560; font-stretch: 85%; color: var(--apagado); }
.cartao-valor { font-size: 26px; font-weight: 650; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.cartao-detalhe { font-size: 13px; color: var(--apagado); }
.cartao-variacao { font-size: 13px; font-weight: 600; }
.cartao-variacao.positiva { color: var(--verde); }
.cartao-variacao.negativa { color: var(--atraso); }
.cartao-variacao.neutra { color: var(--apagado); font-weight: 500; }

/* ===== Alertas ===== */
.alertas { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.alerta {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 6px;
  text-decoration: none; color: var(--tinta); font-weight: 500; border: 1px solid transparent;
}
.alerta-erro { background: var(--atraso-claro); border-color: color-mix(in srgb, var(--atraso) 35%, transparent); }
.alerta-aviso { background: var(--perto-claro); border-color: color-mix(in srgb, var(--perto) 35%, transparent); }
.alerta:hover { border-color: var(--tinta); }
.alerta-icone {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.alerta-erro .alerta-icone { background: var(--atraso); }
.alerta-aviso .alerta-icone { background: var(--perto); }
.alerta-ir { margin-left: auto; color: var(--apagado); font-size: 20px; line-height: 1; }

/* ===== Barras horizontais (faturamento por cliente) ===== */
.barras { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.barra-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px;
  padding: 6px 8px; margin: 0 -8px; border-radius: 4px; color: inherit; text-decoration: none;
}
.barra-linha .barra-trilho { grid-column: 1 / -1; grid-row: 2; }
.barra-linha[href]:hover { background: var(--campo); }
.barra-rotulo { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-trilho { height: 10px; display: block; }
.barra { display: block; height: 100%; background: var(--verde); border-radius: 0 4px 4px 0; }
.barra-valor { font-size: 14px; font-weight: 600; text-align: right; }

/* ===== Colunas por mês (faturamento do cliente) ===== */
.colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 180px; margin: 14px 0 6px; }
.coluna-area { border-bottom: 1px solid var(--linha-forte); }
.coluna { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px; min-width: 0; }
.coluna-valor { font-size: 11.5px; color: var(--apagado); white-space: nowrap; margin-bottom: 3px; }
.coluna-area { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; }
.coluna-barra { width: min(60%, 34px); background: var(--verde); border-radius: 4px 4px 0 0; display: block; }
.coluna-rotulo { font-size: 12.5px; color: var(--apagado); padding: 4px 0 2px; }
.pilha { display: grid; gap: 20px; align-content: start; }
.grade-detalhe > .bloco-largo { grid-column: 1 / -1; }
.acoes-inicio { justify-content: flex-start; margin-top: 14px; }
.oculto { display: none; }
.sugestao-atual { display: block; }
.itens li.sugestao-servico { flex-direction: column; align-items: stretch; gap: 8px; }
.sugestao-descricao { margin-left: 26px; }
.receita-info { grid-column: 1 / -1; font-size: 13.5px; color: var(--apagado); background: var(--campo); border-radius: 6px; padding: 8px 12px; }
.receita-info.alerta { background: var(--perto-claro); color: var(--perto); }
.bloco-pe { margin-top: 12px; font-size: 14px; color: var(--apagado); }

/* ===== Fila: pedidos com problema ===== */
.secao-titulo { font-size: 18px; font-weight: 640; font-stretch: 108%; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.secao-problemas { margin-bottom: 28px; }
.contador-alerta { background: var(--atraso); color: #fff; }
.nota-problema { border-left: 4px solid var(--perto); }
.nota-recusada { border-left-color: var(--atraso); }
.nota-problema .nota-cliente { font-size: 17px; }
.nota-problema .nota-meta { flex-wrap: wrap; }
.problema-corpo { padding: 0 18px 14px; display: grid; gap: 8px; }
.lista-erros { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.nota-aviso { font-size: 13.5px; color: var(--apagado); background: var(--campo); padding: 8px 12px; border-radius: 4px; }

/* ===== Notas: situação, teste, rodapé ===== */
.etiqueta-autorizada { background: var(--verde-claro); color: var(--verde); }
.etiqueta-cancelada { background: var(--atraso-claro); color: var(--atraso); }
.etiqueta-substituida { background: var(--campo); color: var(--apagado); border: 1px solid var(--linha); }
.etiqueta-teste { background: var(--perto-claro); color: var(--perto); }
.tabela tfoot td { padding: 11px 14px; border-top: 1px solid var(--linha-forte); }
.acoes-linha { white-space: nowrap; text-align: right; }
.filtros .campo-curto { width: 170px; }
.filtros .campo-busca { width: 290px; }
.filtro-testes { margin: -6px 0 16px; font-size: 14px; color: var(--apagado); }

/* Só para leitores de tela (tabela equivalente aos gráficos) */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Telas menores ===== */
@media (max-width: 900px) {
  .estrutura { grid-template-columns: 1fr; }
  .trilho { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; flex-wrap: nowrap; padding: 10px 12px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .trilho::-webkit-scrollbar { display: none; }
  .nav-item { flex: none; white-space: nowrap; gap: 6px; }
  .trilho-pe { flex: none; }
  .trilho-marca { padding: 0 12px 0 0; margin-right: auto; }
  .trilho-marca .marca-sub, .trilho-contexto, .trilho-secao { display: none; }
  .trilho-marca .marca-simbolo { width: 24px; height: 24px; }
  .trilho-marca .marca-nome { white-space: nowrap; font-size: 16px; }
  .trilho-pe { margin: 0; flex-direction: row; display: flex; gap: 10px; }
  .trilho-usuario { display: none; }
  .nav-item.ativo { box-shadow: inset 0 -3px 0 #43B593; }
  .pagina { padding: 24px 16px 48px; }
  .grade-detalhe { grid-template-columns: 1fr; }
  .tabela { display: block; overflow-x: auto; }
  .cartoes, .cartoes-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pagina-topo { flex-direction: column; align-items: stretch; }
  .pagina-topo h1 { font-size: 25px; }
  .celulas { grid-template-columns: 1fr 1fr; }
  .c-tomador, .c-desc { grid-column: 1 / -1; border-right: 0; }
  .c-doc, .c-comp { border-right: 1px solid var(--linha); }
  .c-cod, .c-valor { border-right: 0; }
  .c-doc .celula-valor { white-space: normal; }
  .nota-topo { flex-direction: column; }
  .form, .subform { grid-template-columns: 1fr; }
  .nota-rodape .acoes { justify-content: stretch; }
  .nota-rodape .acoes .btn { flex: 1; }
  .filtros .campo-form, .filtros .campo-curto, .filtros .campo-busca { width: 100%; }
  .cartao-valor { font-size: 22px; }
  .cartoes-3 .cartao:first-child { grid-column: 1 / -1; }
  /* Notas: cada linha vira um cartão com rótulos */
  .tabela-notas { display: block; border: 0; background: none; }
  .tabela-notas thead { display: none; }
  .tabela-notas tbody, .tabela-notas tfoot { display: grid; gap: 10px; }
  .tabela-notas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 12px 14px; }
  .tabela-notas td { border: 0; padding: 0; }
  .tabela-notas td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 12px; font-stretch: 78%; font-weight: 560; color: var(--apagado); }
  .tabela-notas td.num { text-align: left; }
  .tabela-notas .acoes-linha { grid-column: 1 / -1; text-align: left; }
  .tabela-notas tfoot tr { margin-top: 4px; }
  .tabela-notas tfoot td[colspan] { grid-column: auto; }
}

/* Escritório: certificado e procuração */
.dados-cert { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 4px; }
.dados-cert dt { color: var(--apagado); font-size: 14px; }
.dados-cert dd { margin: 0; font-weight: 500; }
.passos { margin: 10px 0 12px; padding-left: 22px; display: grid; gap: 6px; }

/* ===== Custos e uso (admin da plataforma) ===== */
.pagina-custos .grade-detalhe > .bloco { min-width: 0; }
.acoes-periodo { flex-wrap: nowrap; }
.acoes-periodo select { width: auto; min-width: 190px; }
.bloco-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.bloco-cabecalho .bloco-titulo { margin: 0; }
@media (max-width: 640px) {
  .acoes-periodo select { flex: 1; min-width: 0; }
}

/* Ficha do cliente: subtítulos dentro de formulários */
.subtitulo { grid-column: 1 / -1; font-size: 15px; font-weight: 640; font-stretch: 105%; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--linha); }