/* Painel Fluvie NFS-e: tema claro e calmo (areia + verde-petróleo), cartões brancos com borda fina,
   títulos em Bricolage Grotesque, interface em Instrument Sans e números/CNPJ em Geist Mono. */
:root {
  --fundo: #F6F4EF;
  --superficie: #FFFFFF;
  --superficie-2: #FCFBF8;
  --campo: #F6F4EF;
  --areia: #F0ECE3;
  --tinta: #0F2F2C;
  --apagado: #66746F;
  --apagado-2: #93A09B;
  --linha: #EEEBE4;
  --linha-forte: #E4E0D6;
  --verde: #0F4C45;
  --verde-escuro: #0A3934;
  --verde-claro: #E3EEEB;
  --menta: #2EB88A;
  --menta-claro: #DDF3EA;
  --menta-texto: #137656;
  --sobre-verde: #FFFFFF;
  --atraso: #D64F30;
  --atraso-claro: #FCE7E0;
  --perto: #9A6A00;
  --perto-claro: #FBF0D6;
  --sol: #D99A16;
  --sombra: 0 1px 2px rgba(15, 47, 44, .06);
  --raio: 16px;
  --raio-p: 10px;
  --fonte: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --fonte-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0E1513; --superficie: #151E1B; --superficie-2: #121A18; --campo: #1B2623; --areia: #22302C;
    --tinta: #E3ECE8; --apagado: #9AAAA3; --apagado-2: #6F807A; --linha: #22302C; --linha-forte: #2E3D38;
    --verde: #43B593; --verde-escuro: #5FC7A6; --verde-claro: #16382E; --menta: #43B593; --menta-claro: #16382E; --menta-texto: #7FDDB9;
    --sobre-verde: #062019; --atraso: #F0806A; --atraso-claro: #3A1C15; --perto: #E2AE4A; --perto-claro: #342711; --sol: #E2AE4A;
    --sombra: none;
    color-scheme: dark;
  }
}

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

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

/* ===== Marca ===== */
.marca { display: flex; align-items: center; gap: 10px; }
.marca-simbolo { flex: none; }
.marca-simbolo rect { fill: var(--verde); }
.marca-simbolo path { stroke: #55E0A8; }
.marca-nome { font: 700 22px/1.1 var(--fonte-titulo); letter-spacing: -0.03em; }
.marca-sub { color: var(--apagado); font-size: 13px; }
.marca-pill { font: 700 10.5px/1 var(--fonte-mono); letter-spacing: .08em; background: var(--verde); color: var(--sobre-verde); padding: 5px 7px; border-radius: 6px; text-transform: uppercase; }

/* ===== Entrada (login) ===== */
.entrada { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 32px 16px; }
.entrada-marca { justify-content: center; }
.entrada-rodape { font-size: 12.5px; color: var(--apagado); text-align: center; }
.entrada-rodape a { color: var(--verde); font-weight: 700; text-decoration: none; }
.entrada-caixa {
  width: min(420px, 100%); background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: 18px; padding: 28px; display: grid; gap: 16px;
}
.entrada-caixa h1 { font: 700 28px/1.1 var(--fonte-titulo); letter-spacing: -0.03em; }
.entrada-links { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
/* Login em duas colunas: apresentação à esquerda, formulário à direita */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-apresentacao {
  background: #0F4C45; color: #fff; padding: 56px 64px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.login-apresentacao .marca-nome { color: #fff; }
.login-apresentacao .marca-simbolo rect { fill: #55E0A8; }
.login-apresentacao .marca-simbolo path { stroke: #0F4C45; }
.login-apresentacao .marca-pill { background: #55E0A8; color: #06231A; }
.login-ondas { position: absolute; right: -60px; top: 80px; opacity: .14; pointer-events: none; }
.login-titulo { font: 700 clamp(34px, 3.6vw, 54px)/1.03 var(--fonte-titulo); letter-spacing: -0.045em; margin-top: auto; max-width: 560px; position: relative; }
.login-titulo em { font-style: normal; color: #55E0A8; }
.login-texto { font-size: 16px; color: #B5D4CC; margin-top: 18px; max-width: 470px; line-height: 1.5; position: relative; }
.login-fatos { display: flex; gap: 28px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 22px; position: relative; flex-wrap: wrap; }
.login-fatos div { font-size: 12.5px; color: #9FC7BD; }
.login-fatos b { display: block; font-size: 15px; color: #fff; margin-bottom: 2px; }
.login-lado { display: grid; place-items: center; align-content: center; gap: 24px; padding: 40px 24px; }
.login-lado .entrada-caixa { border: 0; background: transparent; padding: 0; width: min(400px, 100%); }
.login-lado .entrada-caixa input { background: var(--superficie); min-height: 46px; }
.login-convite { border: 1px solid var(--linha-forte); background: var(--superficie); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--apagado); text-align: left; cursor: pointer; font-family: inherit; width: 100%; }
.login-convite b { display: block; color: var(--tinta); font-size: 14px; margin-bottom: 2px; }
.login-ou { display: flex; align-items: center; gap: 12px; color: var(--apagado-2); font-size: 12px; }
.login-ou::before, .login-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha-forte); }
.mensagem { font-size: 14px; padding: 10px 12px; border-radius: 10px; }
.mensagem-ok { background: var(--menta-claro); color: var(--tinta); }
.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: barra superior + conteúdo ===== */
.estrutura { min-height: 100vh; display: flex; flex-direction: column; }
.topo {
  height: 68px; background: var(--superficie); border-bottom: 1px solid var(--linha-forte);
  display: flex; align-items: center; gap: 24px; padding: 0 32px; position: sticky; top: 0; z-index: 15;
}
.topo-marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tinta); flex: none; }
.topo-marca .marca-nome { font-size: 22px; }
.abas { display: flex; gap: 2px; min-width: 0; }
.nav-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  color: var(--apagado); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.nav-item:hover { color: var(--tinta); background: var(--campo); }
.nav-item.ativo { background: var(--verde); color: var(--sobre-verde); font-weight: 700; }
.nav-icone { display: none; position: relative; }
.contador-icone { display: none; }
.contador { background: var(--atraso); color: #fff; font: 700 11px/1 var(--fonte); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: inline-grid; place-items: center; }
.topo-busca { margin-left: auto; position: relative; width: 280px; flex: none; }
.topo-busca input { border-radius: 999px; background: var(--campo); border-color: var(--linha-forte); padding: 8px 64px 8px 36px; min-height: 40px; font-size: 13.5px; }
.topo-busca::before { content: ""; position: absolute; left: 14px; top: 13px; width: 11px; height: 11px; border: 1.8px solid var(--apagado-2); border-radius: 50%; }
.topo-busca::after { content: ""; position: absolute; left: 24px; top: 24px; width: 5px; height: 1.8px; background: var(--apagado-2); transform: rotate(45deg); }
.topo-busca kbd { position: absolute; right: 10px; top: 9px; font: 400 11px/1 var(--fonte-mono); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 5px; padding: 4px 6px; color: var(--apagado); }
.topo-icone { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; color: var(--apagado); background: var(--superficie); }
.topo-icone:hover { color: var(--tinta); border-color: var(--apagado-2); }
.topo-icone.ativo { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.conta { position: relative; flex: none; }
.conta-botao { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 12px; font: inherit; color: inherit; text-align: left; }
.conta-botao:hover { background: var(--campo); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--menta-claro); color: var(--verde); display: grid; place-items: center; font: 700 13px/1 var(--fonte); flex: none; }
.conta-nome { display: block; font-size: 13.5px; font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-sub { display: block; font-size: 12px; color: var(--apagado); }
.conta-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: var(--superficie); border: 1px solid var(--linha-forte);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 47, 44, .14); padding: 8px; display: grid; gap: 2px; z-index: 30;
}
.conta-menu p { padding: 8px 10px 10px; font-size: 12.5px; color: var(--apagado); border-bottom: 1px solid var(--linha); margin-bottom: 4px; overflow-wrap: anywhere; }
.conta-menu a, .conta-menu button, .conta-menu select { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; border: 0; background: none; color: var(--tinta); font: 400 14px/1.3 var(--fonte); text-decoration: none; cursor: pointer; }
.conta-menu a:hover, .conta-menu button:hover { background: var(--campo); }
.conta-menu select { border: 1px solid var(--linha-forte); margin-bottom: 4px; }
.conteudo { min-width: 0; flex: 1; }

.pagina { max-width: 1440px; margin: 0 auto; padding: 32px 40px 64px; }
.pagina-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pagina-topo h1 { font: 700 34px/1.08 var(--fonte-titulo); letter-spacing: -0.035em; }
.pagina-resumo { color: var(--apagado); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; }
.pagina-resumo b, .pagina-resumo strong { color: var(--tinta); }
.ponto-ok { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--menta); margin-right: 7px; vertical-align: 1px; }
.resumo-atraso { color: var(--atraso); font-weight: 600; margin-left: -10px; }
.voltar { display: inline-block; margin-bottom: 10px; color: var(--apagado); text-decoration: none; font-size: 13px; }
.voltar::before { content: '‹ '; }
.voltar:hover { color: var(--tinta); }
.carregando { padding: 40px; color: var(--apagado); }

.vazio { border: 1.5px dashed var(--linha-forte); border-radius: var(--raio); padding: 28px; color: var(--apagado); display: grid; gap: 6px; background: var(--superficie-2); }
.vazio-titulo { color: var(--tinta); font: 700 17px/1.3 var(--fonte-titulo); letter-spacing: -0.01em; }
.texto-apoio { color: var(--apagado); font-size: 13.5px; }

/* ===== Chips (filtros rápidos) ===== */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font: 400 13px/1 var(--fonte); padding: 8px 12px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--apagado); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.chip:hover { color: var(--tinta); border-color: var(--apagado-2); }
.chip.ativo { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); font-weight: 700; }
.chip em { font-style: normal; opacity: .7; }
.chip-alerta { color: var(--atraso); border-color: color-mix(in srgb, var(--atraso) 30%, var(--linha-forte)); }
.barra-filtros { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.barra-filtros .separador { width: 1px; height: 24px; background: var(--linha-forte); align-self: center; }
.barra-filtros select, .barra-filtros input { width: auto; min-width: 170px; }
.barra-filtros .busca-direita { margin-left: auto; width: 260px; }

/* ===== O espelho da nota ===== */
.dica-copiar { color: var(--apagado); font-size: 13.5px; margin-bottom: 12px; }
.lista-notas { display: grid; gap: 14px; }
.nota { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); overflow: hidden; }
.nota-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 14px; }
.nota-cliente { font: 700 18px/1.2 var(--fonte-titulo); letter-spacing: -0.015em; }
.nota-meta { display: flex; gap: 14px; color: var(--apagado); font-size: 13px; margin-top: 4px; flex-wrap: wrap; }
.prazo { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; white-space: nowrap; background: var(--campo); color: var(--apagado); display: inline-flex; gap: 6px; align-items: center; }
.prazo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.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: 10px 14px 12px; 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: 400 10px/1.2 var(--fonte-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado-2); }
.celula-valor { font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.celula.copiado { background: var(--menta-claro); }
.celula.copiado .celula-rotulo { color: var(--menta-texto); }
.c-doc .celula-valor { white-space: nowrap; font-family: var(--fonte-mono); font-size: 13.5px; }
.c-valor { border-right: 0; }
.c-valor .celula-valor { font: 700 20px/1.2 var(--fonte-titulo); letter-spacing: -0.02em; }
.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; background: var(--superficie-2); border-top: 1px solid var(--linha); }
.nota-origem { color: var(--apagado); font-size: 13px; }
.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-forte); }
.campo-form { display: grid; gap: 6px; align-content: start; }
.campo-rotulo { font-size: 12.5px; font-weight: 700; color: var(--tinta); }
.campo-dica { font-size: 12px; color: var(--apagado); }
.campo-erro { font-size: 12px; color: var(--atraso); font-weight: 600; }
input, select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-forte); background: var(--campo); color: var(--tinta); font: 400 14px/1.4 var(--fonte);
}
textarea { resize: vertical; }
input[type="file"] { padding: 8px; }
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); background: var(--superficie); }
.caixa-marcar { display: flex; gap: 10px; align-items: center; }
.subform { border: 1px solid var(--linha-forte); border-radius: 12px; padding: 14px; 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: 12px; margin-bottom: 18px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo-form { width: 220px; }
.segmentado { display: flex; background: var(--campo); border: 1px solid var(--linha-forte); border-radius: 12px; padding: 3px; }
.segmentado button { flex: 1; border: 0; background: none; padding: 7px 12px; font: 400 12.5px/1.2 var(--fonte); color: var(--apagado); border-radius: 9px; cursor: pointer; white-space: nowrap; }
.segmentado button.ativo { background: var(--superficie); color: var(--tinta); font-weight: 700; box-shadow: 0 1px 2px rgba(15,47,44,.12); }

/* ===== Janela ===== */
.sobreposto { position: fixed; inset: 0; background: rgba(10, 30, 27, .45); display: grid; place-items: start center; padding: 6vh 16px; overflow-y: auto; z-index: 40; }
.janela { width: 100%; max-width: 620px; background: var(--superficie); border-radius: 20px; border: 1px solid var(--linha-forte); padding: 24px; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(10, 30, 27, .25); }
.janela-topo { display: flex; justify-content: space-between; align-items: center; }
.janela-topo h2 { font: 700 21px/1.2 var(--fonte-titulo); letter-spacing: -0.02em; }

/* ===== Tabelas e listas ===== */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); overflow: hidden; }
.tabela th { text-align: left; font: 400 10.5px/1.2 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado-2); padding: 13px 14px 10px; border-bottom: 1px solid var(--linha); background: var(--superficie-2); }
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; font-size: 13.5px; }
.tabela th:first-child, .tabela td:first-child { padding-left: 20px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 20px; }
.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(--superficie-2); }
.tabela a { color: var(--tinta); font-weight: 700; text-decoration: none; }
.tabela .num { text-align: right; }
.tabela td.num { font-family: var(--fonte-mono); font-size: 13px; }
.sub-linha { display: block; font: 400 11px/1.4 var(--fonte-mono); color: var(--apagado-2); }
.inativo { opacity: .6; }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--campo); color: var(--apagado); white-space: nowrap; }
.etiqueta-automatico, .etiqueta-liberado, .etiqueta-autorizada { background: var(--menta-claro); color: var(--menta-texto); }
.etiqueta-assistido { background: var(--campo); color: var(--apagado); border: 1px solid var(--linha-forte); }
.etiqueta-alerta, .etiqueta-cancelada { background: var(--atraso-claro); color: var(--atraso); }
.etiqueta-pendente, .etiqueta-teste { background: var(--perto-claro); color: var(--perto); }
.etiqueta-substituida { background: var(--campo); color: var(--apagado); border: 1px solid var(--linha-forte); }
.origem { display: inline-block; font: 400 10.5px/1 var(--fonte-mono); letter-spacing: .03em; padding: 5px 7px; border-radius: 6px; background: var(--campo); color: var(--apagado); text-transform: uppercase; white-space: nowrap; }
.origem-whatsapp { background: var(--menta-claro); color: var(--menta-texto); }
.situacao { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.situacao::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.situacao-autorizada { color: var(--menta-texto); }
.situacao-cancelada { color: var(--atraso); }
.situacao-substituida { color: var(--apagado); }

.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: var(--raio); padding: 20px 22px 22px; min-width: 0; }
.bloco-titulo { font: 700 18px/1.2 var(--fonte-titulo); letter-spacing: -0.02em; margin-bottom: 6px; grid-column: 1 / -1; display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.bloco-titulo small { font: 400 13px/1.2 var(--fonte); color: var(--apagado); letter-spacing: 0; }
.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: 13px; 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: 50; max-width: min(420px, calc(100vw - 40px)); }
.aviso { padding: 12px 16px; border-radius: 12px; background: var(--tinta); color: var(--fundo); font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(10,30,27,.2); }
.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); } }
}

/* ===== Cartões de número ===== */
.cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.cartoes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartao {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 14px; padding: 14px 16px 15px;
  color: inherit; text-decoration: none;
}
.cartao-link:hover { border-color: var(--apagado-2); }
.cartao-rotulo { font-size: 12.5px; color: var(--apagado); }
.cartao-valor { font: 700 24px/1.2 var(--fonte-titulo); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.cartao-detalhe { font-size: 12px; color: var(--apagado); }
.cartao-variacao { font-size: 12px; font-weight: 700; }
.cartao-variacao.positiva { color: var(--menta-texto); }
.cartao-variacao.negativa { color: var(--atraso); }
.cartao-variacao.neutra { color: var(--apagado); font-weight: 500; }

/* ===== Alertas (lista simples) ===== */
.alertas { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.alerta {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  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) 25%, transparent); }
.alerta-aviso { background: var(--perto-claro); border-color: color-mix(in srgb, var(--perto) 25%, transparent); }
.alerta:hover { border-color: var(--apagado-2); }
.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 ===== */
.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: 8px; 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: 8px; display: block; background: var(--areia); border-radius: 99px; overflow: hidden; }
.barra { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
.barra-valor { font: 400 13px/1.2 var(--fonte-mono); text-align: right; }

/* ===== Colunas por mês ===== */
.colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 180px; margin: 14px 0 6px; }
.coluna { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px; min-width: 0; }
.coluna-valor { font: 400 10.5px/1.2 var(--fonte-mono); color: var(--apagado); white-space: nowrap; margin-bottom: 4px; }
.coluna-area { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; border-bottom: 1px solid var(--linha-forte); }
.coluna-barra { width: min(70%, 44px); background: #C9D9D5; border-radius: 6px 6px 0 0; display: block; }
.coluna:last-child .coluna-barra { background: var(--verde); }
.coluna-rotulo { font: 400 10.5px/1 var(--fonte-mono); color: var(--apagado); padding: 6px 0 2px; text-transform: lowercase; }
.pilha { display: grid; gap: 20px; align-content: start; min-width: 0; }
.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: 13px; color: var(--apagado); background: var(--campo); border-radius: 10px; padding: 9px 12px; }
.receita-info.alerta { background: var(--perto-claro); color: var(--perto); }
.bloco-pe { margin-top: 12px; font-size: 13.5px; color: var(--apagado); }
.bloco-pe a { font-weight: 700; text-decoration: none; }

/* ===== Início ===== */
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px 24px; align-items: start; }
.inicio-lado { display: grid; gap: 20px; }
.cartoes-acao { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.cartao-acao { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.cartao-acao strong { font: 700 16px/1.2 var(--fonte-titulo); letter-spacing: -0.015em; }
.cartao-acao p { font-size: 13px; color: var(--apagado); line-height: 1.4; flex: 1; }
.cartao-acao .btn { justify-content: space-between; width: 100%; }
.selo { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--fonte); padding: 6px 9px; border-radius: 999px; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo-erro { background: var(--atraso-claro); color: var(--atraso); }
.selo-aviso { background: var(--perto-claro); color: var(--perto); }
.selo-ok { background: var(--menta-claro); color: var(--menta-texto); }
.tudo-certo { display: flex; gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 16px 18px; margin: 12px 0 20px; color: var(--apagado); }
.tudo-certo b { color: var(--tinta); }
.ranking-rolagem { overflow-x: auto; }
.ranking { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ranking th { font: 400 10.5px/1 var(--fonte-mono); letter-spacing: .08em; color: var(--apagado-2); text-transform: uppercase; text-align: left; padding: 8px 0 9px; border-bottom: 1px solid var(--linha); }
.ranking td { padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.ranking tr:last-child td { border-bottom: 0; }
.ranking .num { text-align: right; font-family: var(--fonte-mono); font-size: 13px; padding-left: 12px; white-space: nowrap; }
.ranking .pos { width: 32px; font: 400 12px var(--fonte-mono); color: var(--apagado-2); }
.ranking a { color: var(--tinta); font-weight: 700; text-decoration: none; }
.ranking .num .link { font-family: var(--fonte); font-size: 12.5px; }
.ranking a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ranking .trilho-barra { width: 34%; padding: 0 16px; }
.ranking .sem-notas td { background: color-mix(in srgb, var(--atraso-claro) 45%, transparent); }
.variacao { display: inline-block; font: 700 11.5px/1 var(--fonte); padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.variacao.positiva { background: var(--menta-claro); color: var(--menta-texto); }
.variacao.negativa { background: var(--atraso-claro); color: var(--atraso); }
.variacao.neutra { background: var(--campo); color: var(--apagado); }
.lista-recorrentes { display: grid; gap: 8px; margin-top: 4px; }
.dia-grupo { font: 400 10.5px/1 var(--fonte-mono); letter-spacing: .1em; color: var(--apagado); text-transform: uppercase; margin: 14px 0 2px; }
.item-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie-2); }
.item-rec strong { font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-rec p { font-size: 12px; color: var(--apagado); }
.barra-mei { margin-top: 14px; }
.barra-mei-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.barra-mei-topo a { font-weight: 700; color: var(--tinta); text-decoration: none; }
.barra-mei-topo span { color: var(--apagado); font-family: var(--fonte-mono); font-size: 12px; }

/* ===== Duas colunas: lista + detalhe (Atenção, Clientes, Recorrentes) ===== */
.mestre-detalhe { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; align-items: start; }
.detalhe-fixo { position: sticky; top: 92px; }
.grupo-titulo { display: flex; justify-content: space-between; font: 400 10.5px/1 var(--fonte-mono); letter-spacing: .1em; color: var(--apagado-2); text-transform: uppercase; margin: 6px 0 10px; }
.item-lista {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; text-align: left;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 14px; padding: 13px 16px; margin-bottom: 10px;
  font: inherit; color: inherit; cursor: pointer; text-decoration: none;
}
.item-lista:hover { border-color: var(--apagado-2); }
.item-lista.ativo { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.item-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 15px var(--fonte-titulo); background: var(--campo); color: var(--apagado); }
.item-icone.erro { background: var(--atraso-claro); color: var(--atraso); }
.item-icone.aviso { background: var(--perto-claro); color: var(--perto); }
.item-lista strong { display: block; font-size: 14.5px; }
.item-lista p { font-size: 12.5px; color: var(--apagado); margin-top: 1px; }
.item-quando { text-align: right; font-size: 11.5px; color: var(--apagado-2); white-space: nowrap; }
.item-quando b { display: block; font-size: 12.5px; color: var(--verde); margin-top: 4px; }
.painel-detalhe { background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 18px; padding: 22px; display: grid; gap: 14px; }
.painel-detalhe .selo { justify-self: start; }
.painel-detalhe h2 { font: 700 21px/1.15 var(--fonte-titulo); letter-spacing: -0.02em; }
.explicacao { background: var(--campo); border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.5; }
.explicacao b { display: block; margin-bottom: 4px; }
.explicacao code { font: 400 11.5px var(--fonte-mono); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 5px; padding: 1px 5px; }
.ficha { border: 1px solid var(--linha-forte); border-radius: 12px; overflow: hidden; }
.ficha-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--linha); font-size: 13px; }
.ficha-linha:last-child { border-bottom: 0; }
.ficha-linha > span:first-child { color: var(--apagado); }
.balao { justify-self: start; background: #D7F5E6; color: #0F2F2C; border-radius: 12px 12px 12px 4px; padding: 7px 11px; font-size: 12.5px; }
.linha-tempo { display: grid; gap: 2px; }
.evento { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 5px 0; position: relative; font-size: 12.5px; }
.evento::before { content: ""; position: absolute; left: 4px; top: 17px; bottom: -6px; width: 1px; background: var(--linha-forte); }
.evento:last-child::before { display: none; }
.evento i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--apagado-2); margin-top: 4px; background: var(--superficie); position: relative; z-index: 1; }
.evento i.ok { background: var(--menta); border-color: var(--menta); }
.evento i.erro { background: var(--atraso); border-color: var(--atraso); }
.evento time { font: 400 11px var(--fonte-mono); color: var(--apagado-2); }

/* ===== Clientes: lista à esquerda + ficha ===== */
.clientes-area { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.clientes-lista { background: var(--superficie); border-right: 1px solid var(--linha-forte); display: flex; flex-direction: column; position: sticky; top: 68px; height: calc(100vh - 68px); }
.clientes-lista-topo { padding: 20px 18px 12px; border-bottom: 1px solid var(--linha); display: grid; gap: 10px; }
.clientes-lista-topo h2 { font: 700 18px/1 var(--fonte-titulo); letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: center; }
.clientes-lista-topo h2 span { font: 400 12px var(--fonte-mono); color: var(--apagado); }
.clientes-lista .chips .chip { padding: 5px 9px; font-size: 12px; }
.clientes-lista-itens { overflow-y: auto; flex: 1; }
.cli-linha { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; }
.cli-linha:hover { background: var(--superficie-2); }
.cli-linha.ativo { background: var(--verde-claro); box-shadow: inset 3px 0 0 var(--verde); }
.cli-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--campo); display: grid; place-items: center; font: 700 11px var(--fonte); color: var(--apagado); }
.cli-linha.ativo .cli-avatar { background: var(--verde); color: var(--sobre-verde); }
.cli-linha strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-linha small { font: 400 10.5px var(--fonte-mono); color: var(--apagado-2); }
.cli-valor { text-align: right; font: 400 12px var(--fonte-mono); white-space: nowrap; }
.cli-valor i { display: block; font: 700 10.5px var(--fonte); font-style: normal; margin-top: 3px; }
.cli-ok { color: var(--menta-texto); } .cli-alerta { color: var(--atraso); } .cli-aviso { color: var(--perto); } .cli-neutro { color: var(--apagado); }
.clientes-lista-pe { padding: 12px 18px; border-top: 1px solid var(--linha); }
.clientes-lista-pe .btn { width: 100%; }
.ficha-cliente { padding: 24px 28px 64px; min-width: 0; max-width: 1180px; }
.ficha-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ficha-cabecalho h1 { font: 700 30px/1.08 var(--fonte-titulo); letter-spacing: -0.035em; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--apagado); }
.tag-ok { background: var(--menta-claro); border-color: transparent; color: var(--menta-texto); font-weight: 700; }
.tag-aviso { background: var(--perto-claro); border-color: transparent; color: var(--perto); font-weight: 700; }
.abas-ficha { display: flex; gap: 22px; border-bottom: 1px solid var(--linha-forte); margin: 22px 0 18px; overflow-x: auto; }
.abas-ficha button { border: 0; background: none; padding: 12px 0 11px; color: var(--apagado); font: 400 14px/1 var(--fonte); cursor: pointer; white-space: nowrap; }
.abas-ficha button.ativo { color: var(--tinta); font-weight: 700; box-shadow: inset 0 -2px 0 var(--verde); }
.abas-ficha em { font: 400 11px var(--fonte-mono); font-style: normal; color: var(--apagado-2); margin-left: 5px; }
.ficha-cliente .pagina { padding: 0; max-width: none; margin: 0; }
.ficha-cliente .pagina > .pagina-topo h1 { font-size: 20px; letter-spacing: -0.02em; }

/* ===== Recorrentes (página) ===== */
.rec-linha { display: grid; grid-template-columns: 52px minmax(0, 1fr) 130px 110px auto; gap: 16px; align-items: center; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
.rec-linha.inativo { opacity: .6; }
.rec-dia { width: 52px; height: 52px; border-radius: 12px; background: var(--verde-claro); display: grid; place-items: center; text-align: center; line-height: 1; }
.rec-dia b { font: 700 20px/1 var(--fonte-titulo); color: var(--verde); display: block; }
.rec-dia small { font: 400 9px var(--fonte-mono); color: var(--apagado); letter-spacing: .05em; text-transform: uppercase; }
.rec-linha.inativo .rec-dia { background: var(--campo); } .rec-linha.inativo .rec-dia b { color: var(--apagado); }
.rec-linha strong { font-size: 14px; display: block; }
.rec-linha p { font-size: 12px; color: var(--apagado); margin-top: 2px; }
.rec-valor { font: 400 14px var(--fonte-mono); text-align: right; white-space: nowrap; }
.rec-prox { font-size: 12px; color: var(--apagado); }
.rec-prox b { display: block; color: var(--tinta); font-size: 13px; }
.dica-verde { background: var(--verde-claro); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; }

/* ===== Configurações: menu lateral ===== */
.config { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.config-menu { position: sticky; top: 92px; display: grid; gap: 2px; }
.config-menu a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--apagado); text-decoration: none; border: 1px solid transparent; }
.config-menu a:hover { color: var(--tinta); }
.config-menu a.ativo { background: var(--superficie); border-color: var(--linha-forte); color: var(--tinta); font-weight: 700; }
.config-menu .rotulo-mono { margin: 18px 14px 8px; }
.config .pagina { padding: 0; max-width: none; margin: 0; }
.config .pagina > .pagina-topo h1 { font-size: 24px; }

/* ===== Fila: pedidos com problema ===== */
.secao-titulo { font: 700 18px/1.2 var(--fonte-titulo); letter-spacing: -0.02em; 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(--sol); }
.nota-recusada { border-left-color: var(--atraso); }
.nota-problema .nota-cliente { font-size: 17px; }
.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: 13px; color: var(--apagado); background: var(--campo); padding: 9px 12px; border-radius: 10px; }

/* ===== Notas ===== */
.tabela tfoot td { padding: 12px 14px; border-top: 1px solid var(--linha-forte); background: var(--superficie-2); }
.acoes-linha { white-space: nowrap; text-align: right; }
.acoes-linha .btn { min-height: 30px; padding: 0 9px; border-radius: 8px; font: 700 10.5px/1 var(--fonte-mono); border-color: var(--linha-forte); color: var(--apagado); background: var(--superficie); }
.acoes-linha .btn:hover { color: var(--tinta); }
.filtros .campo-curto { width: 170px; }
.filtros .campo-busca { width: 290px; }
.filtro-testes { margin: -6px 0 16px; font-size: 13.5px; color: var(--apagado); }
.faixa-info { display: flex; align-items: center; gap: 12px; background: var(--verde-claro); border-radius: 12px; padding: 11px 14px; margin-bottom: 16px; font-size: 13px; }
.faixa-info::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--menta) 22%, transparent); flex: none; }
.faixa-info span { color: var(--apagado); }

.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; }

/* 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: 13.5px; }
.dados-cert dd { margin: 0; font-weight: 600; }
.passos { margin: 10px 0 12px; padding-left: 22px; display: grid; gap: 6px; }

/* ===== Custos e uso ===== */
.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: 10px 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bloco-cabecalho .bloco-titulo { margin: 0; }

.subtitulo { grid-column: 1 / -1; font: 700 15px/1.2 var(--fonte-titulo); margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--linha-forte); }

/* Equipe e convites */
.convite-criado { display: grid; gap: 8px; }
.convite-texto { background: var(--campo); border: 1px dashed var(--linha-forte); border-radius: 12px; padding: 12px 14px; color: var(--tinta); user-select: all; }
.acoes select.papel-select { width: auto; min-width: 150px; }
.tabela-escritorios td strong { font-weight: 700; }

/* Remoção com confirmação */
.btn-perigo-contorno { background: transparent; border-color: var(--atraso); color: var(--atraso); }
.btn-perigo-contorno:hover { background: var(--atraso-claro); }
.btn-perigo:disabled { opacity: 0.45; cursor: not-allowed; }
.bloco-remover { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-remocao { display: grid; gap: 12px; }
.lista-remocao { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* Aviso de nova versão */
.aviso-versao { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px;
  background: #0F2F2C; color: #fff; padding: 10px 12px 10px 18px; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100% - 32px); }
.aviso-versao .btn { flex: none; }

/* Área da empresa */
.barra-limite { height: 12px; background: var(--areia); border-radius: 99px; overflow: hidden; margin: 12px 0 10px; }
.barra-limite span { display: block; height: 100%; background: var(--menta); border-radius: 99px; }
.barra-limite span.alerta { background: var(--sol); }
.limite-valor { font: 700 30px/1.1 var(--fonte-titulo); letter-spacing: -0.04em; margin-top: 10px; }
.limite-valor small { font: 400 14px var(--fonte); color: var(--apagado); letter-spacing: 0; }
.bloco-escuro { background: #0F4C45; border-color: #0F4C45; color: #fff; }
.bloco-escuro .bloco-titulo { color: #fff; }
.bloco-escuro p { color: #B5D4CC; }
.bloco-escuro .texto-apoio { color: #9FC7BD; }
.exemplos-whatsapp { margin: 14px 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.exemplos-whatsapp li { justify-self: start; background: #D7F5E6; color: #0F2F2C; border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 13px; }

/* XML em lote */
.opcoes-lote { display: grid; gap: 6px; }

/* ===== Telas menores ===== */
@media (max-width: 1180px) {
  .topo-busca { width: 200px; }
  .conta-texto { display: none; }
  .inicio-grade, .mestre-detalhe { grid-template-columns: minmax(0, 1fr); }
  .detalhe-fixo { position: static; }
}
@media (max-width: 960px) {
  .topo { padding: 0 14px; gap: 10px; }
  .topo-marca .marca-pill { display: none; }
  /* Abas numa linha só delas, largura toda (cabem as 6 a partir de ~640 px) */
  .topo { flex-wrap: wrap; height: auto; padding: 10px 14px 0; row-gap: 4px; }
  .topo-icone { margin-left: auto; }
  .abas { order: 5; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
  .abas::-webkit-scrollbar { display: none; }
  .topo-busca { display: none; }
  .pagina { padding: 22px 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)); }
  .clientes-area { grid-template-columns: 1fr; }
  .so-tela-larga { display: none; }
  .clientes-lista { position: static; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--linha-forte); }
  .clientes-area.com-ficha .clientes-lista { display: none; }
  .ficha-cliente { padding: 20px 16px 48px; }
  .config { grid-template-columns: 1fr; }
  .config-menu { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .config-menu a { white-space: nowrap; }
  .config-menu .rotulo-mono { display: none; }
  .rec-linha { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .rec-linha .rec-prox { display: none; }
  .login { grid-template-columns: 1fr; }
  .login-apresentacao { padding: 28px 22px 32px; }
  .login-titulo { margin-top: 36px; font-size: 32px; }
  .login-fatos { display: none; }
  .ranking .trilho-barra { display: none; }
  /* Notas em cartões: a tabela não cabe sem cortar a coluna Arquivos */
  .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: repeat(4, minmax(0, 1fr)); gap: 6px 12px; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 14px; padding: 12px 14px; }
  .tabela-notas td, .tabela-notas td:first-child, .tabela-notas td:last-child { border: 0; padding: 0; }
  .tabela-notas td[data-rotulo]::before { content: attr(data-rotulo); display: block; font: 400 10px/1.4 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado-2); }
  .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; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .tabela-notas tfoot td, .tabela-notas tfoot td:first-child, .tabela-notas tfoot td:last-child { background: none; border: 0; padding: 0; }
  .tabela-notas tfoot td[colspan] { flex: 1 1 100%; }
  .tabela-notas tfoot td:empty { display: none; }
}
@media (max-width: 640px) {
  /* Celular: abas numa barra fixa embaixo, com ícone e rótulo */
  .topo { flex-wrap: nowrap; height: 60px; padding: 0 14px; }
  .abas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; order: 0; flex: none; overflow: visible;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
    background: var(--superficie); border-top: 1px solid var(--linha-forte);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-item { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 0; border-radius: 12px; font-size: 10px; letter-spacing: -0.01em; line-height: 1.1; min-width: 0; }
  .nav-item.ativo { background: var(--menta-claro); color: var(--verde); }
  .nav-rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav-icone { display: block; }
  .contador-texto { display: none; }
  .contador-icone { display: inline-grid; position: absolute; top: -6px; right: -11px; min-width: 17px; height: 17px; font-size: 10px; }
  .conteudo { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .avisos, .aviso-versao { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .tabela-notas tr { grid-template-columns: 1fr 1fr; }
  .pagina-topo { flex-direction: column; align-items: stretch; }
  .pagina-topo h1 { font-size: 27px; }
  .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, .barra-filtros select, .barra-filtros input, .barra-filtros .busca-direita { width: 100%; }
  .cartao-valor { font-size: 21px; }
  .cartoes-3 .cartao:first-child { grid-column: 1 / -1; }
  .acoes-periodo select { flex: 1; min-width: 0; }
  .ficha-linha { grid-template-columns: 90px minmax(0, 1fr); }
  .rec-linha { grid-template-columns: 44px minmax(0, 1fr); }
  .rec-linha .rec-valor, .rec-linha .acoes { grid-column: 2; text-align: left; justify-content: flex-start; }
  .rec-dia { width: 44px; height: 44px; }
}

/* Serviços: numeração do WhatsApp e palavra-chave */
.numero-servico { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 8px; border-radius: 11px;
  background: var(--verde-claro); color: var(--verde); font-weight: 700; font-size: 12px; vertical-align: 1px; }
.form-apelido { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.form-apelido input { width: 180px; }
.escolha-servico { margin: 10px 0 14px; max-width: 460px; }