/*
 * Portal contábil.
 * Verde + papel branco, tabelas com grade fina, números em fonte mono,
 * situação como preenchimento de célula. Cantos retos.
 */

:root {
  --verde-900: #0E3B22;
  --verde-700: #185C37;
  --verde-600: #217346;
  --verde-200: #C6E0CF;
  --verde-100: #E6F2EA;
  --verde-50: #F3F9F5;

  --papel: #FFFFFF;
  --fundo: #F5F7F6;
  --cabecalho: #F0F3F1;   /* cabeçalho das tabelas */
  --grade: #D9E0DC;
  --grade-forte: #BCC7C1;
  --tinta: #1A1F1C;
  --tinta-2: #4A5550;
  --tinta-3: #78837E;

  --ok-fundo: #E3F1E8;    --ok-tinta: #185C37;
  --aviso-fundo: #FFF4CC; --aviso-tinta: #6E5400;
  --erro-fundo: #FBE6E4;  --erro-tinta: #A3261C;
  --alerta-fundo: #FDEFE0; --alerta-tinta: #8A4B0C;
  --neutro-fundo: #ECEFED; --neutro-tinta: #4A5550;

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --barra: 52px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fundo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }
a { color: var(--verde-700); }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-size: 13px; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

::selection { background: var(--verde-200); }

/* ---------- Shell: topo com menu, linha de contexto, área ---------- */

.shell {
  display: grid;
  grid-template-rows: var(--barra) auto 1fr;
  height: 100vh;
}

.barra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--papel);
  border-bottom: 1px solid var(--grade-forte);
}

.nome-escritorio {
  display: flex;
  align-items: center;
  max-width: 240px;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--verde-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Resumo da tela à esquerda, retorno das ações à direita. */
.contexto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 36px;
  padding: 6px max(32px, calc((100% - 1240px) / 2));
  background: var(--fundo);
  border-bottom: 1px solid var(--grade);
}

.formula-texto {
  min-width: 0;
  font-size: 13.5px;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.formula-texto strong { color: var(--verde-700); font-family: var(--mono); font-weight: 500; }
.formula-seta { color: var(--tinta-3); }

.usuario {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-left: 1px solid var(--grade);
}
.papel { font-size: 12.5px; color: var(--tinta-3); }

.area {
  overflow: auto;
  /* Coluna de 1240px centralizada: o botão do cabeçalho alinha com o fim das tabelas. */
  padding: 28px max(32px, calc((100% - 1240px) / 2)) 48px;
  background: var(--papel);
  outline: none;
}

.abas { display: flex; align-items: stretch; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }

.aba {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.aba:hover { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--grade-forte); }
.aba[aria-current='page'] {
  color: var(--verde-700);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--verde-600);
}
.aba-emitir { color: var(--verde-700); font-weight: 600; }

.status {
  flex: none;
  font-size: 13px;
  color: var(--tinta-3);
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status[data-tom='ok'] { color: var(--verde-700); }
.status[data-tom='erro'] { color: var(--erro-tinta); }

/* O cursor de célula: segue o campo focado, com a alça de preenchimento no canto. */
.cursor-celula {
  position: fixed;
  display: none;
  z-index: 40;
  pointer-events: none;
  border: 2px solid var(--verde-600);
}
.cursor-celula::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 7px;
  height: 7px;
  background: var(--verde-600);
  border: 1px solid var(--papel);
}
main.area :is(input, select, textarea):focus { outline: none; }

/* ---------- Tipografia de página ---------- */

.cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.cabecalho h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.sub { display: block; font-size: 12.5px; color: var(--tinta-3); margin-top: 2px; }
.dica { display: block; font-size: 12.5px; color: var(--tinta-3); margin-top: 4px; }
.alerta-texto {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--alerta-fundo);
  color: var(--alerta-tinta);
  font-size: 13.5px;
  border-left: 3px solid var(--alerta-tinta);
}
.falta { color: var(--alerta-tinta); font-style: italic; }

/* ---------- Botões e links de ação ---------- */

.botao, .botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  font: 500 14px var(--sans);
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.botao {
  color: #fff;
  background: var(--verde-600);
  border: 1px solid var(--verde-700);
}
.botao:hover { background: var(--verde-700); }
.botao.perigo { background: var(--erro-tinta); border-color: #7E1C14; }
.botao-secundario {
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--grade-forte);
}
.botao-secundario:hover { border-color: var(--verde-600); color: var(--verde-700); }
.botao:disabled, .botao-secundario:disabled { opacity: 0.55; cursor: progress; }
.botao-largo { width: 100%; }
.botao-grande { height: 44px; padding: 0 24px; font-size: 15px; }

.link-acao {
  padding: 0;
  font: 500 13.5px var(--sans);
  color: var(--verde-700);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.link-acao:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-acao.perigo { color: var(--erro-tinta); }
.link-acao:disabled { opacity: 0.5; cursor: progress; }

/* ---------- Planilha ---------- */

.planilha-moldura {
  overflow-x: auto;
  border: 1px solid var(--grade-forte);
  background: var(--papel);
}

.planilha {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.planilha th, .planilha td {
  border: 1px solid var(--grade);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.planilha thead th {
  background: var(--cabecalho);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta-2);
  white-space: nowrap;
}
.planilha tr > :first-child { border-left: 0; }
.planilha tr > :last-child { border-right: 0; }
.planilha thead tr:first-child > * { border-top: 0; }
.planilha tbody tr:last-child > * { border-bottom: 0; }

.planilha .n {
  width: 56px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-3);
  text-align: center;
}
.planilha .num { text-align: right; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.planilha .acoes { width: 1%; }

.planilha.clicavel tbody tr { cursor: pointer; }
.planilha tbody tr:hover > td { background: var(--verde-50); }

.link-linha { color: var(--tinta); font-weight: 500; text-decoration: none; }
.link-linha:hover { color: var(--verde-700); text-decoration: underline; text-underline-offset: 3px; }

.acoes-linha { display: flex; gap: 14px; }

.numero { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
tr.riscada .numero, tr.riscada .num { text-decoration: line-through; color: var(--tinta-3); }

.motivo { display: block; margin-top: 4px; font-size: 12.5px; color: var(--erro-tinta); max-width: 340px; }

.carregando td { height: 37px; }
.carregando { opacity: 0.6; }

/* Situação = célula com formatação condicional */
.situacao {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--neutro-fundo);
  color: var(--neutro-tinta);
}
.situacao[data-tom='ok'] { background: var(--ok-fundo); color: var(--ok-tinta); }
.situacao[data-tom='aviso'] { background: var(--aviso-fundo); color: var(--aviso-tinta); }
.situacao[data-tom='erro'] { background: var(--erro-fundo); color: var(--erro-tinta); }
.situacao[data-tom='alerta'] { background: var(--alerta-fundo); color: var(--alerta-tinta); }
.situacao[data-tom='cancelada'] { background: var(--neutro-fundo); color: var(--tinta-3); text-decoration: line-through; }

/* ---------- Filtros ---------- */

.filtros { display: flex; align-items: center; gap: 0; margin-bottom: 14px; flex-wrap: wrap; }
.filtro {
  height: 32px;
  padding: 0 14px;
  font: 500 13px var(--sans);
  color: var(--tinta-2);
  background: var(--papel);
  border: 1px solid var(--grade-forte);
  margin-right: -1px;
  cursor: pointer;
}
.filtro[aria-pressed='true'] {
  position: relative;
  z-index: 1;
  color: var(--verde-700);
  background: var(--verde-100);
  border-color: var(--verde-600);
}
.filtro-empresa { margin-left: 16px; height: 32px; min-width: 220px; }
.sem-resultado { padding: 24px 0; color: var(--tinta-3); }

/* ---------- Estado vazio: explica o próximo passo ---------- */

.vazio {
  max-width: 560px;
  padding: 40px 0;
}
.vazio-titulo { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.vazio-texto { color: var(--tinta-2); margin-bottom: 20px; }

/* ---------- Formulários ---------- */

.formulario { display: grid; gap: 28px; }

.bloco { display: grid; gap: 12px; }
.bloco-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--grade);
}
.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 16px;
}
.grade-campos .largo { grid-column: span 2; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.senha-caixa { position: relative; }
.senha-caixa input { width: 100%; padding-right: 84px; }
.mostrar-senha {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font: 500 12.5px var(--sans);
  color: var(--verde-700);
  cursor: pointer;
}
.mostrar-senha:hover { text-decoration: underline; text-underline-offset: 3px; }
.mostrar-senha:focus-visible { outline: 2px solid var(--verde-600); outline-offset: -2px; }

/* Leitura de conta por foto (Contas do mês) */
.leitura { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.leitura-botao { cursor: pointer; }
.leitura-botao:focus-within { outline: 2px solid var(--verde-600); outline-offset: 2px; }
.leitura-botao.ocupado { opacity: 0.6; pointer-events: none; }
.leitura-nota { font-size: 13.5px; color: var(--tinta-2); }
.leitura-nota:empty { display: none; }
.leitura-nota[data-tom='ok'] { color: var(--ok-tinta); }
.leitura-nota[data-tom='aviso'] { padding: 6px 10px; background: var(--aviso-fundo); color: var(--aviso-tinta); }
.rotulo { font-size: 12.5px; font-weight: 500; color: var(--tinta-2); }

input, select, textarea {
  width: 100%;
  min-width: 0;
  font: 14px var(--sans);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--grade-forte);
  border-radius: 0;
  padding: 0 10px;
}
input, select { height: 36px; }
textarea { padding: 8px 10px; resize: vertical; }
input[type='file'] { padding: 6px; height: auto; }
input:disabled, select:disabled, textarea:disabled { background: var(--fundo); color: var(--tinta-2); }
input::placeholder { color: #A7B0AC; }
input[inputmode='numeric'], input[inputmode='decimal'] { font-family: var(--mono); font-size: 13.5px; }

.caixa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  align-self: end;
  padding-bottom: 6px;
}
.caixa input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--verde-600);
  flex: none;
}
.rotulo-caixa { font-weight: 500; }

.erro-form:not(:empty) {
  padding: 10px 12px;
  background: var(--erro-fundo);
  color: var(--erro-tinta);
  border-left: 3px solid var(--erro-tinta);
  font-size: 13.5px;
}
.ok-form:not(:empty) {
  padding: 8px 12px;
  background: var(--ok-fundo);
  color: var(--ok-tinta);
  font-size: 13.5px;
}
.acoes-form { display: flex; gap: 12px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.trava, fieldset.secao { display: grid; gap: 28px; }

/* ---------- Empresa ---------- */

.grade-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 32px 40px;
}
.form-inline { display: grid; gap: 12px; margin-top: 4px; }
.form-titulo { font-weight: 600; font-size: 14px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.dados {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  margin: 0;
  font-size: 14px;
}
.dados dt { color: var(--tinta-3); }
.dados dd { margin: 0; }

/* ---------- Emissão ---------- */

.escolha {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 16px;
  align-items: end;
}
.tipos { display: grid; grid-template-columns: 1fr 1fr; }
.opcao-tipo {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--grade-forte);
  margin-left: -1px;
  cursor: pointer;
  background: var(--papel);
}
.opcao-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao-titulo { font-weight: 600; font-size: 14px; }
.opcao-sub { font-size: 12.5px; color: var(--tinta-3); font-family: var(--mono); }
.opcao-tipo:has(input:checked) {
  position: relative;
  z-index: 1;
  background: var(--verde-50);
  border: 2px solid var(--verde-600);
  padding: 9px 13px;
}
.opcao-tipo:has(input:checked) .opcao-titulo { color: var(--verde-700); }
.opcao-tipo:has(input:focus-visible) { outline: 2px solid var(--verde-600); outline-offset: 2px; }
.opcao-tipo:has(input:disabled) { cursor: default; }

/* Itens como planilha editável: o input é a célula. */
.planilha.editavel td { padding: 0; vertical-align: middle; }
.planilha.editavel td.n, .planilha.editavel td.num, .planilha.editavel td.acao { padding: 0 10px; }
.planilha.editavel .celula-input input {
  height: 36px;
  border: 0;
  background: transparent;
  padding: 0 10px;
}
.planilha.editavel .celula-input input:focus { background: var(--papel); }
.planilha.editavel .c-curta { width: 84px; }
.planilha.editavel .c-num { width: 110px; text-align: right; }
.planilha.editavel .c-cod { width: 110px; }
.total-linha { font-family: var(--mono); }

.envio {
  position: sticky;
  bottom: -48px;
  margin: 0 -32px -48px;
  padding: 14px 32px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--papel);
  border-top: 1px solid var(--grade-forte);
  max-width: none;
}
.envio-total { display: grid; }
.total-valor { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--verde-700); }
.envio-acao { display: flex; align-items: center; gap: 16px; }
.aguarde { font-size: 13px; color: var(--tinta-2); max-width: 360px; text-align: right; }

.painel-resultado {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--grade-forte);
  border-left: 4px solid var(--grade-forte);
}
.painel-resultado[data-status='autorizada'] { border-left-color: var(--verde-600); background: var(--verde-50); }
.painel-resultado[data-status='rejeitada'],
.painel-resultado[data-status='erro'] { border-left-color: var(--erro-tinta); }
.resultado-topo { display: flex; align-items: center; gap: 12px; }
.resultado-topo h2 { font-size: 18px; font-weight: 600; }
.resultado-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.motivo-grande {
  padding: 10px 12px;
  background: var(--erro-fundo);
  color: var(--erro-tinta);
  font-family: var(--mono);
  font-size: 13px;
}

/* ---------- Diálogo ---------- */

.dialogo {
  width: min(520px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--grade-forte);
  border-top: 4px solid var(--verde-600);
  border-radius: 0;
  color: var(--tinta);
}
.dialogo::backdrop { background: rgba(14, 59, 34, 0.28); }
.dialogo form { display: grid; gap: 14px; }
.dialogo-titulo { font-size: 18px; font-weight: 600; }
.dialogo-texto { color: var(--tinta-2); }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---------- Entrada ---------- */

.entrada {
  display: grid;
  grid-template-columns: 1.25fr minmax(380px, 1fr);
  min-height: 100vh;
  background: var(--papel);
}

.vitrine {
  display: flex;
  align-items: center;
  padding: 48px 56px;
  overflow: hidden;
}
.vitrine-celulas {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(11, 44px);
}
.vitrine-grade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--grade);
  stroke-width: 1;
}
.vcel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14.5px;
  white-space: nowrap;
}
.vcel.titulo { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.015em; }
.vcel.verde { color: var(--verde-600); }
.vcel.rotulo-col { font-size: 12.5px; font-weight: 500; color: var(--tinta-3); }
.vcel.valor { font-family: var(--mono); font-weight: 500; color: var(--verde-700); }
.vcel.nota-rodape { font-size: 13.5px; color: var(--tinta-2); }
.vsel {
  position: relative;
  z-index: 1;
  border: 2px solid var(--verde-600);
  background: rgba(33, 115, 70, 0.07);
  transform-origin: top;
  opacity: 0;
  pointer-events: none;
}
.vsel::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: var(--verde-600);
  border: 1px solid var(--papel);
}

.painel-entrada {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(32px, 6vw, 88px);
  background: var(--verde-700);
  color: #fff;
}
.marca {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--verde-200);
  margin-bottom: 40px;
}
.form-entrada { display: grid; gap: 16px; max-width: 380px; }
.entrada-titulo { font-size: 26px; font-weight: 600; }
.entrada-texto { color: var(--verde-200); font-size: 14px; }
.form-entrada .rotulo { color: var(--verde-100); }
.form-entrada .dica { color: var(--verde-200); }
.form-entrada input { border-color: var(--verde-900); height: 40px; }
.form-entrada input:focus { outline: 2px solid #fff; outline-offset: 0; }
.form-entrada .botao { background: #fff; color: var(--verde-700); border-color: #fff; height: 42px; }
.form-entrada .botao:hover { background: var(--verde-100); }
.form-entrada .erro-form:not(:empty) { background: #fff; }
.troca { font-size: 13.5px; color: var(--verde-200); }
.form-entrada .esqueci { align-self: flex-end; margin-top: 2px; font-size: 13px; color: #fff; }
.troca a { color: #fff; font-weight: 500; }

/* ---------- Área do cliente ---------- */

:root {
  /* Séries do gráfico: validadas para daltonismo contra o papel branco */
  --serie-entrada: #217346;
  --serie-saida: #8B5CC9;
}

.estreito { max-width: 520px; }
.carregando-bloco { height: 240px; background: var(--fundo); opacity: 0.6; }
.centro { align-items: center; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border: 1px solid var(--grade-forte);
  margin-bottom: 28px;
}
.tile {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid var(--grade);
  background: var(--papel);
}
.tile:last-child { border-right: 0; }
.tile-rotulo { font-size: 12.5px; font-weight: 500; color: var(--tinta-2); }
.tile-valor { font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.tile-valor.pequeno { font-size: 18px; }
.tile-nota { font-size: 12.5px; color: var(--tinta-3); }
.tile.negativo .tile-valor { color: var(--erro-tinta); }

.medidor { height: 8px; background: var(--neutro-fundo); margin: 4px 0 2px; }
.medidor span { display: block; height: 100%; background: var(--verde-600); }
.medidor[data-tom='aviso'] span { background: #B8860B; }
.medidor[data-tom='erro'] span { background: var(--erro-tinta); }

.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alerta { padding: 10px 14px; border-left: 3px solid var(--aviso-tinta); background: var(--aviso-fundo); }
.alerta[data-tom='erro'] { border-color: var(--erro-tinta); background: var(--erro-fundo); }
.alerta[data-tom='alerta'] { border-color: var(--alerta-tinta); background: var(--alerta-fundo); }
.alerta-titulo { font-weight: 600; }
.alerta-corpo { font-size: 13.5px; color: var(--tinta-2); margin-top: 2px; }

.dupla-painel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
main.area > .bloco, main.area > .dupla-painel { margin-bottom: 28px; }
.pilha { display: grid; gap: 28px; }
.pilha > .tiles { margin-bottom: 0; }

.lembretes { list-style: none; margin: 0; padding: 0; }
.lembrete {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--grade);
}
.lembrete .situacao { justify-self: start; }
.lembrete-titulo { font-weight: 500; }

.barras-cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.barras-cat li { display: grid; grid-template-columns: 150px 1fr 120px; align-items: center; gap: 12px; font-size: 13.5px; }
.barras-cat-trilho { height: 12px; background: var(--fundo); }
.barras-cat-barra { display: block; height: 100%; background: var(--serie-saida); border-radius: 0 4px 4px 0; }
.barras-cat-valor { text-align: right; font-family: var(--mono); font-size: 13px; }
.barras-cat-valor .sub { display: inline; margin-left: 6px; }

/* Gráfico */
.legenda { display: flex; gap: 18px; font-size: 13px; color: var(--tinta-2); margin-bottom: 6px; }
.legenda-item { display: inline-flex; align-items: center; }
.amostra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; flex: none; }
.amostra.s-entrada { background: var(--serie-entrada); }
.amostra.s-saida { background: var(--serie-saida); }
.barra.s-entrada { fill: var(--serie-entrada); }
.barra.s-saida { fill: var(--serie-saida); }
.grafico-moldura { position: relative; }
.grafico { display: block; width: 100%; height: auto; overflow: visible; }
.grade-linha { stroke: var(--grade); stroke-width: 1; }
.eixo-base { stroke: var(--grade-forte); stroke-width: 1; }
.eixo-texto { font: 11px var(--mono); fill: var(--tinta-3); }
.grupo-mes .barra { transition: opacity 0.12s; }
.grupo-mes.apagado .barra { opacity: 0.3; }
.alvo-toque { fill: transparent; outline: none; }
.alvo-toque:focus-visible { stroke: var(--verde-600); stroke-width: 2; }
.dica-grafico {
  position: absolute;
  top: 8px;
  min-width: 190px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--papel);
  border: 1px solid var(--grade-forte);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.08);
  pointer-events: none;
  transform: translateX(12px);
}
.dica-grafico[data-lado='esquerda'] { transform: translateX(calc(-100% - 12px)); }
.dica-grafico p { display: flex; align-items: center; }
.dica-grafico strong { margin-left: auto; padding-left: 12px; font-family: var(--mono); font-weight: 500; }
.dica-titulo { font-weight: 600; margin-bottom: 4px; }
.ver-tabela { margin-top: 10px; font-size: 13.5px; }
.ver-tabela summary { cursor: pointer; color: var(--verde-700); margin-bottom: 8px; }

/* Lançamentos e contas */
.seletor-mes { display: flex; align-items: center; }
.seletor-mes .filtro { width: 36px; font-size: 16px; }
.mes-rotulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 170px;
  padding: 0 12px;
  border-top: 1px solid var(--grade-forte);
  border-bottom: 1px solid var(--grade-forte);
  font-weight: 500;
  margin-right: -1px;
}
.form-lancamento { display: grid; gap: 14px; margin-bottom: 8px; }
.tipos-curtos { display: flex; }
.opcao-curta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--grade-forte);
  margin-right: -1px;
  cursor: pointer;
  font-size: 13.5px;
}
.opcao-curta input { width: auto; height: auto; accent-color: var(--verde-600); }
.opcao-curta:has(input:checked) {
  position: relative;
  background: var(--verde-100);
  border-color: var(--verde-600);
  color: var(--verde-700);
  font-weight: 500;
}
.valor-entrada { color: var(--verde-700); }
.valor-saida { color: var(--tinta); }
tr.concluida td { color: var(--tinta-3); }

/* Acessos do cliente (página da empresa) */
.acessos { list-style: none; margin: 0; padding: 0; }
.acessos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grade); }
.acessos .situacao { margin-left: 8px; }
.senha { font-size: 16px; letter-spacing: 0.06em; color: var(--verde-700); user-select: all; }

.pendencias { display: flex; flex-wrap: wrap; gap: 6px; }
.pendencia { text-decoration: none; }
.pendencia:hover .situacao { text-decoration: underline; text-underline-offset: 2px; }

/* Filtros das listas de notas */
.filtros-lista { display: grid; gap: 10px; margin-bottom: 14px; }
.filtros-lista .filtros { margin-bottom: 0; }
.filtros-situacao { display: flex; flex-wrap: wrap; }
.busca-lista { height: 32px; max-width: 340px; }
.carregar-mais { margin-top: 14px; }
.fim-lista { margin-top: 10px; }

/* ---------- Monitor ---------- */

.entrada-simples { grid-template-columns: 1fr; }
.entrada-simples .painel-entrada { max-width: 520px; width: 100%; margin: 0 auto; }
.caixa-curta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); white-space: nowrap; }
.caixa-curta input[type='checkbox'] { width: 16px; height: 16px; accent-color: var(--verde-600); }
.tile-servico[data-estado='fora'] { background: var(--erro-fundo); }
.tile-servico[data-estado='degradado'] { background: #FFFBEA; }
.filtros-monitor { gap: 10px; }
.filtros-monitor .filtro-empresa { margin-left: 0; min-width: 180px; width: auto; }
input.curto { width: 90px; height: 32px; }
.trilho-latencia { display: block; width: 140px; height: 8px; background: var(--fundo); }
.trilho-latencia span { display: block; height: 100%; background: var(--verde-600); border-radius: 0 4px 4px 0; }
.trilho-latencia span[data-lento='1'] { background: var(--erro-tinta); }
.mensagem-log { display: block; font-family: var(--mono); font-size: 12.5px; word-break: break-word; max-width: 640px; }
.busca-log { max-width: 420px; height: 34px; }
.logs {
  margin: 0;
  max-height: 70vh;
  overflow: auto;
  padding: 12px 14px;
  background: #101613;
  color: #D7E3DC;
  font: 12.5px/1.6 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}
.log-hora { color: #7FA38E; }
.log-linha[data-erro='1'] { color: #FFB4A9; }

@media (max-width: 900px) {
  .dupla-painel { grid-template-columns: 1fr; }
  .tile { border-right: 0; border-bottom: 1px solid var(--grade); }
  .barras-cat li { grid-template-columns: 110px 1fr 96px; }
  .lembrete { grid-template-columns: 1fr auto; }
  .lembrete .situacao { grid-column: 1 / -1; }
  .cabecalho { flex-wrap: wrap; }
  .mes-rotulo { min-width: 140px; }
  .usuario { gap: 10px; padding: 0 10px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Telas menores ---------- */

@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; }
  .vitrine { display: none; }
  .contexto { padding: 6px 16px; }
  .area { padding: 20px 16px 40px; }
  .envio { margin: 0 -16px -40px; padding: 12px 16px; bottom: -40px; flex-wrap: wrap; }
  .escolha, .dupla { grid-template-columns: 1fr; }
  .grade-blocos { grid-template-columns: 1fr; }
  .grade-campos .largo { grid-column: auto; }
  .aba { padding: 0 10px; font-size: 13px; }
}

/* O menu do cliente tem seis abas: abaixo disso, ele desce para uma linha própria. */
@media (max-width: 1180px) {
  .barra { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .nome-escritorio { min-height: 44px; padding: 0 16px; }
  .abas { grid-column: 1 / -1; grid-row: 2; height: 44px; border-top: 1px solid var(--grade); padding: 0 6px; }
  .shell { grid-template-rows: auto auto 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Pedido de documento a várias empresas */
.lote-empresas { display: grid; gap: 8px; margin: 4px 0 12px; }
.lote-todas { font-weight: 500; color: var(--tinta); gap: 10px; }
.lote-todas .sub { font-weight: 400; }
.lote-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 16px;
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--grade);
  background: var(--papel);
}
.lote-lista .caixa-curta { white-space: normal; }