/* =============================================================================
   SAC-NFe 3.00 — Folha de estilo
   Identidade institucional (linhagem índigo SoftSul), tipografia tabular para
   dados fiscais e tratamento de "consulta" como ação de destaque.
   ========================================================================== */

/* O portal nao declara cor: tudo vem do softsul-base.css, carregado antes
   deste arquivo. As duas excecoes estao logo abaixo e existem porque o
   produto tem estados que o ERP nao tem. */
:root {
  /* Carta de correcao e um aviso informativo, nem bom nem ruim: precisa de
     um fundo suave do ciano da casa, que la so existe na cor cheia. */
  --ciano-sup: #E3F3FC;
  /* Altura do cabecalho: o layout de duas colunas calcula a altura da area
     de rolagem a partir dela (100vh menos isto). */
  --header-h: 76px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: var(--ui);
    color: var(--tinta);
    background: var(--nuvem);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Cabecalho ----------
   Era um degrade violeta com texto branco. Passou a branco como a barra do
   painel: sao o mesmo produto visto por pessoas diferentes, e o degrade
   ficou onde ele diz alguma coisa, que e o botao de acao. Com fundo claro,
   os numeros do resumo deixam de ser tons de branco e voltam a usar a cor
   semantica: rubi para cancelada, ciano para correcao, verde para
   contingencia. */
.app-header {
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 0 22px;
    background: var(--branco);
    border-bottom: 1px solid var(--traco);
    position: relative; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-logo { height: 30px; width: auto; flex: none; display: block; }
.ir-inicio { display: flex; align-items: center; text-decoration: none; }
/* O nome do municipio e a informacao de identidade aqui: quem abre o portal
   precisa reconhecer que esta no lugar certo antes de qualquer outra coisa. */
.brand-text { min-width: 0; padding-left: 16px; border-left: 1px solid var(--traco); }
.brand-licenca {
    font-size: 13.5px; font-weight: 700; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-subtitle {
    font-size: 11.5px; color: var(--fraca); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.summary { display: flex; align-items: center; gap: 20px; }
.header-direita { display: flex; align-items: center; gap: 20px; }
.auth-area { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.entrar-reservada { width: auto; padding: 9px 15px; font-size: 13px; text-decoration: none; }
.entrar-reservada .material-symbols-outlined { font-size: 17px; }

.summary-period { text-align: right; padding-right: 18px; border-right: 1px solid var(--traco); }
.summary-label {
    display: block; font-family: var(--dado); font-size: 10px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--fraca);
}
.summary-value { font-weight: 700; font-size: 14.5px; color: var(--tinta) }
.summary-stats { display: flex; gap: 20px; }
.stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.stat-num {
    font-family: var(--dado); font-weight: 600; font-size: 16px;
    font-variant-numeric: tabular-nums; color: var(--tinta);
}
.stat-lbl {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--fraca); margin-top: 2px;
}
.stat-cancel   .stat-num { color: var(--rubi); }
.stat-correcao .stat-num { color: var(--ciano); }
.stat-conting  .stat-num { color: var(--verde); }
.stat-nff      .stat-num { color: var(--indigo); }
.stat-valor    .stat-num { color: var(--indigo-fte); }

/* O menu do usuario e o desenho da casa (.perfil + .suspenso). O que resta
   aqui e so a posicao dele no cabecalho e o nome de quem entrou, que a casa
   mostra na barra lateral e este portal nao tem. */
.usuario-menu { position: relative; }
.quem-suspenso {
    padding: 9px 12px; color: var(--fraca); font-size: 12.5px;
    border-bottom: 1px solid var(--traco); margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Layout ---------- */
.container { display: flex; height: calc(100vh - var(--header-h)); }

.left {
    width: 200px; min-width: 130px; max-width: 50%;
    background: var(--branco);
    border-right: 1px solid var(--traco);
    overflow-y: auto; padding: 10px;
    flex: none;
}
.panel-title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--fraca); padding: 4px 6px 10px;
}

/* ---------- Abas de tipo de documento (NF-e / NFS-e) ---------- */
.doc-tabs {
    display: flex; gap: 4px; padding: 2px;
    background: var(--leve);
    border: 1px solid var(--traco); border-radius: var(--r-p);
    margin-bottom: 12px;
}
.doc-tab {
    flex: 1; font-family: var(--ui);
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
    color: var(--fraca); background: transparent;
    border: 0; border-radius: 5px; padding: 7px 4px;
    cursor: pointer; transition: background .12s, color .12s;
}
.doc-tab:hover { color: var(--indigo-fte); background: var(--indigo-sup); }
.doc-tab.active {
    background: var(--indigo); color: #fff; box-shadow: var(--sombra);
}
.month-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.month-link {
    font-size: 12.5px; font-weight: 600; color: var(--indigo-fte);
    padding: 9px 12px; border: 1px solid var(--traco); border-radius: var(--r-p);
    cursor: pointer; text-align: center; transition: background .12s, color .12s, border-color .12s;
    user-select: none;
}
.month-link:hover { background: var(--indigo-sup); border-color: var(--indigo); }
.month-link.active { background: var(--indigo); color: #fff; border-color: var(--indigo); box-shadow: var(--sombra); }

.resizer {
    width: 6px; cursor: col-resize; flex: none; background: transparent; position: relative;
}
.resizer::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
    background: var(--traco); transform: translateX(-50%); transition: background .12s;
}
.resizer:hover::before, .resizer:focus-visible::before { background: var(--indigo); width: 2px; }

.right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px 16px; overflow: hidden; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.search {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; max-width: 460px;
    background: var(--branco); border: 1px solid var(--traco); border-radius: var(--r-g);
    padding: 0 12px; height: 38px; box-shadow: var(--sombra); transition: border-color .12s, box-shadow .12s;
}
.search:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-sup); }
.search .material-symbols-outlined { color: var(--fraca); font-size: 20px; }
.search input { border: 0; outline: 0; flex: 1; font-family: var(--ui); font-size: 13px; color: var(--tinta); background: transparent; }

.cte-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta); cursor: pointer; user-select: none; }
.cte-toggle input { width: 16px; height: 16px; accent-color: var(--indigo); cursor: pointer; }
.cte-toggle .hint {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
    color: #9a6b00; background: #fff5e0; border: 1px solid #f4dca0; padding: 1px 6px; border-radius: 999px;
}

/* ---------- Tabela ---------- */
.table-wrap { flex: 1; overflow: auto; background: var(--branco); border: 1px solid var(--traco); border-radius: var(--r-g); box-shadow: var(--sombra); }
.file-list { min-height: 100%; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--indigo); color: #fff; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; text-align: left;
    padding: 11px 12px; white-space: nowrap; border-bottom: 2px solid var(--indigo-fte);
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { background: var(--indigo-fte); }
thead th .sort-ico { font-size: 15px; vertical-align: middle; opacity: .55; margin-left: 2px; }
thead th.sorted .sort-ico { opacity: 1; }

tbody td { padding: 9px 12px; border-bottom: 1px solid var(--traco); color: var(--tinta); vertical-align: middle; }
tbody tr:nth-child(even) { background: var(--leve); }
tbody tr:hover { background: var(--indigo-sup); }
tbody tr:last-child td { border-bottom: 0; }

.col-center { text-align: center; }
.col-right { text-align: right; }
.mono { font-family: var(--dado); font-variant-numeric: tabular-nums; white-space: nowrap; }
.valor { font-family: var(--dado); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.razao { max-width: 320px; }

/* Ações (PDF/XML/CTe) */
.act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-p); color: var(--indigo); transition: background .12s, color .12s; }
.act:hover { background: var(--indigo-sup); }
.act .material-symbols-outlined { font-size: 21px; }
.act.pdf { color: #c0392b; } .act.pdf:hover { background: #fdecec; }
.act.xml { color: #2f7d32; } .act.xml:hover { background: #e8f5e9; }
.act.cte { color: #6741d9; } .act.cte:hover { background: #efe9fc; }
.act-empty { color: var(--traco2); }

/* Chave -> consulta no portal */
.chave {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    font-family: var(--dado); font-size: 10.5px; color: var(--tinta);
    background: var(--leve); border: 1px solid var(--traco);
    padding: 4px 9px; border-radius: 999px; cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s, background .12s, color .12s;
}
.chave:hover { border-color: var(--indigo); background: var(--indigo-sup); color: var(--indigo-fte); }
.chave .chave-text { letter-spacing: 0; white-space: nowrap; }
.chave .chave-ico { font-size: 16px; color: var(--indigo); }

/* Status (pills) */
.status { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.status.autorizada { color: #1b6b3a; background: var(--verde-sup); }
.status.cancelada { color: var(--rubi); background: var(--rubi-sup); }
.status.confirmada { color: #0d5c8c; background: #e3f0f8; }
.status.ciencia { color: #6b5900; background: #fbf4d6; }
.status.desconhecida { color: #8a3d00; background: #fbe6d6; }
.status.nao-realizada { color: #8a3d00; background: #fbe6d6; }
.status.correcao { color: var(--ciano); background: var(--ciano-sup); }
.status.contingencia { color: var(--verde); background: var(--verde-sup); }
/* NFF: Nota Fiscal Fácil, regime especial da SEFAZ (não é contingência) */
.status.nff { color: var(--indigo-fte); background: var(--indigo-sup); }

/* Linhas com destaque por status */
tr.row-cancelada td.razao { color: var(--rubi); font-weight: 600; }
tr.row-correcao td.razao { color: var(--ciano); font-weight: 600; }
tr.row-contingencia td.razao { color: var(--verde); font-weight: 600; }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 320px; color: var(--fraca); text-align: center; gap: 12px; padding: 40px; }
.empty-state .material-symbols-outlined { font-size: 52px; color: var(--traco2); }
.empty-state p { margin: 0; max-width: 360px; font-size: 13px; }

/* ---------- Paginação ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px 4px; flex-wrap: wrap; }
.pg-left { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fraca); }
.pg-left .filter-label { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--traco); }
.pg-left select { font-family: var(--ui); font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--traco); border-radius: var(--r-p); background: var(--branco); color: var(--tinta); cursor: pointer; }
.pg-nav { display: flex; align-items: center; gap: 4px; }
.pg-nav button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--traco); background: var(--branco); border-radius: var(--r-p); cursor: pointer; color: var(--indigo); transition: background .12s, border-color .12s; }
.pg-nav button:hover { background: var(--indigo-sup); border-color: var(--indigo); }
.pg-nav button:disabled { opacity: .4; cursor: default; background: var(--branco); border-color: var(--traco); }
.pg-nav .material-symbols-outlined { font-size: 20px; }
.page-info { font-family: var(--dado); font-size: 12px; color: var(--tinta); padding: 0 12px; min-width: 130px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Modal PDF ---------- */
.modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(16,22,46,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal.open { display: block; }
.modal-content { background: #fff; margin: 2.5vh auto; width: 92%; height: 95vh; border-radius: var(--r-g); overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.modal-close { position: absolute; top: 8px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 0; background: rgba(0,0,0,.04); border-radius: 50%; font-size: 26px; line-height: 1; color: var(--fraca); cursor: pointer; transition: background .12s, color .12s; }
.modal-close:hover { background: var(--rubi-sup); color: var(--rubi); }
#pdfFrame { width: 100%; height: 100%; border: 0; }

/* ---------- Loading ---------- */
.loading-overlay { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(16,22,46,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.loading-overlay.open { display: flex; }
.loading-box { background: #fff; border-radius: var(--r-g); padding: 26px 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: var(--sombra); }
.loading-box p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.spinner { width: 40px; height: 40px; border: 4px solid var(--indigo-sup); border-top-color: var(--indigo); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
    background: var(--indigo-fte); color: #fff; font-size: 13px; font-weight: 500;
    padding: 12px 20px; border-radius: var(--r-g); box-shadow: 0 10px 30px rgba(0,0,0,.3);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1200;
    display: flex; align-items: center; gap: 9px; max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .material-symbols-outlined { font-size: 19px; color: #8ce99a; }

/* ---------- Acessibilidade ---------- */
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
    .summary-period { display: none; }
    .summary-stats { gap: 12px; }
    .stat-valor { display: none; }
    .brand-subtitle { display: none; }
}
@media (max-width: 640px) {
    html, body { overflow: auto; height: auto; }
    .container { flex-direction: column; height: auto; }
    .left { width: 100% !important; max-width: none; max-height: 160px; border-right: 0; border-bottom: 1px solid var(--traco); }
    .month-list { flex-direction: row; flex-wrap: wrap; }
    .month-link { flex: 1 1 90px; }
    .resizer { display: none; }
    .right { height: auto; }
    .table-wrap { max-height: 70vh; }
    .summary { display: none; }
}

/* =============================================================================
   Area reservada
   -----------------------------------------------------------------------------
   Cartao, metrica, tabela, etiqueta e barra lateral vem do softsul-base.css.
   O que sobra aqui e o que so este produto tem: os graficos, que ele desenha
   sozinho em SVG, e o cronometro da recarga automatica.
   ========================================================================== */
.grafico { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 10px 4px 0; }
.grafico .barra { flex: 1; background: var(--cor-barra, linear-gradient(180deg, var(--indigo), var(--indigo-fte)));
  border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.grafico .barra span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: var(--fraca); }
.grafico-rotulos { display: flex; gap: 6px; margin-top: 6px; }
.grafico-rotulos div { flex: 1; text-align: center; font-size: 10px; color: var(--fraca); }

.grafico-linha-wrap { width: 100%; max-width: 100%; overflow: hidden; display: block; }
.grafico-linha-svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  display: block; font-family: 'Inter', system-ui, sans-serif; }
.grafico-legenda { display: flex; flex-wrap: wrap; margin-top: 8px; }
.legenda-item { display: inline-flex; align-items: center; font-size: 12px; color: var(--fraca); margin-right: 18px; }
.legenda-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; flex-shrink: 0; }

.cronometro { background: var(--branco); border: 1px solid var(--traco); color: var(--fraca);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; white-space: nowrap; }
.cronometro #cron-num { color: var(--indigo); font-weight: 700; }

/* Downloads/Relatórios reaproveitam .container/.left/.right (da Consulta),
   mas dentro de .admin-content — a altura de tela cheia não se aplica aqui. */
.container-admin { height: 62vh; min-height: 420px; margin-top: 8px; }

.btn-limpar-sel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--traco);
  background: var(--branco); color: var(--fraca); border-radius: var(--r-p); padding: 8px 14px;
  font-family: var(--ui); font-size: 12.5px; cursor: pointer; transition: background .12s, border-color .12s; }
.btn-limpar-sel:hover { background: var(--rubi-sup); border-color: var(--rubi); color: var(--rubi); }

/* Barra flutuante de seleção (Downloads) */
.selection-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: 18px; background: var(--indigo); color: #fff;
  border-radius: 999px; padding: 10px 12px 10px 20px; box-shadow: 0 10px 30px rgba(20,32,79,.35); }
.selection-bar span { font-size: 13px; font-weight: 600; white-space: nowrap; }
.selection-actions { display: flex; gap: 6px; }
.selection-actions button { display: inline-flex; align-items: center; gap: 6px; border: 0;
  background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 8px 14px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s; }
.selection-actions button:hover { background: rgba(255,255,255,.26); }
.selection-actions button.principal { background: var(--indigo); }
.selection-actions button.principal:hover { background: var(--indigo-fte); }
.selection-actions button:disabled { opacity: .45; cursor: default; background: rgba(255,255,255,.14) !important; }
.selection-actions .material-symbols-outlined { font-size: 18px; }

#checkAllPage, .row-check { width: 16px; height: 16px; accent-color: var(--indigo); cursor: pointer; }

/* Relatórios gerenciais */
.filtros-relatorio { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  background: var(--branco); border: 1px solid var(--traco); border-radius: var(--r-g);
  padding: 16px 18px; margin-bottom: 22px; }
.filtro-campo { display: flex; flex-direction: column; gap: 6px; }
.filtro-campo label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fraca); }
.filtro-campo select, .filtro-campo input[type="date"], .filtro-campo input[type="text"] {
  font-family: var(--ui); font-size: 13px; padding: 8px 10px; border: 1px solid var(--traco);
  border-radius: var(--r-p); background: var(--branco); color: var(--tinta); }
.filtro-campo input[type="text"] { width: 200px; }
.btn-gerar, .btn-export { display: inline-flex; align-items: center; gap: 8px; border: 0;
  background: var(--indigo); color: #fff; border-radius: var(--r-p); padding: 10px 18px;
  font-family: var(--ui); font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .12s; }
.btn-gerar:hover, .btn-export:hover { background: var(--indigo-fte); }
.btn-gerar:disabled { opacity: .55; cursor: default; background: var(--indigo); }
.btn-export.disabled { opacity: .55; pointer-events: none; }
.relatorio-acoes { display: flex; gap: 10px; margin-bottom: 22px; }
.relatorio-acoes .btn-export:last-child { background: var(--verde); }
.relatorio-acoes .btn-export:last-child:hover { background: #237a37; }

/* O botao da casa nasce ocupando a linha (e feito para formulario em
   coluna). Numa barra de filtros ele precisa ter a largura do proprio
   texto, senao vira uma faixa atravessando a tela. */
#btnGerar { width: auto; padding: 12px 22px; }

/* O botao do menu do usuario na consulta publica
   -----------------------------------------------------------------------------
   Na base, todo o desenho de .perfil esta preso a .topo, que e a barra do
   painel. O cabecalho da consulta publica nao e .topo: o botao ficava com a
   moldura padrao do navegador, um quadrado cinza-escuro em volta do avatar
   redondo. Aqui ele recebe o mesmo desenho, so que sem o nome ao lado, que
   nesta tela nao cabe. */
.app-header .perfil {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--r-p); padding: 4px;
  font-family: inherit; color: inherit; cursor: pointer;
}
.app-header .perfil:hover { background: var(--leve); }
.app-header .perfil.aberto { background: var(--leve); border-color: var(--traco); }

/* A versao e dado de suporte, nao parte do nome: aparece pequena, em fonte
   de dado, ao lado de quem ela identifica. Ate a v3.20 ela vinha grudada em
   SAC-NFe no lugar de honra do cabecalho, competindo com o municipio. */
.versao {
  font-family: var(--dado); font-size: 10.5px; font-weight: 500;
  color: var(--fraca); letter-spacing: .02em;
}

/* ----------------------------------------- alinhamento entre as metricas
   A metrica da casa empilha rotulo, numero e nota de cima para baixo, e
   cada cartao termina onde seu texto acabar. Numa faixa de seis, cada nota
   parava numa altura, e os numeros tambem: a linha ficava desalinhada e o
   olho perdia a comparacao, que e para o que a faixa existe.
   O rotulo fica preso no topo, a nota no rodape, e o numero ocupa e centra
   o que sobra entre os dois. */
.metricas > .metrica{
  display:grid; grid-row:span 3; grid-template-rows:subgrid;
  row-gap:6px; align-content:start;
}
.metricas > .metrica .rot{align-self:start}
/* Pela linha de base: a hora (19px) centrada ficava 3px acima dos numeros. */
.metricas > .metrica .val{align-self:last baseline; margin:0; line-height:1.15}
.metricas > .metrica .nota{align-self:start}
/* Mesmo ajuste do painel da SoftSul (10/09/2026). Centrar o numero entre
   rotulo e nota so alinha se todos tiverem a mesma altura, e aqui nao tinham:
   "Pendentes de manifestacao" e "Manifestadas no ultimo evento" quebram, e as
   notas tambem. Com subgrid as tres partes de todos os cartoes dividem as
   mesmas tres linhas da faixa. */
@supports not (grid-template-rows:subgrid){
  .metricas > .metrica{display:flex; justify-content:space-between}
  .metricas > .metrica .val{flex:1; display:flex; align-items:center}
}


/* A lista de notas no celular
   -----------------------------------------------------------------------------
   Onze colunas nao cabem num telefone. Ate aqui a tabela apenas rolava de
   lado, o que obriga a arrastar procurando a coluna e faz perder de vista a
   nota que se estava lendo. Cada linha vira um cartao: a razao social como
   titulo, os icones numa faixa propria e o resto como par rotulo/valor.

   O rotulo sai do data-rotulo, escrito no HTML, e nao da posicao da celula:
   a coluna de link direto so existe para quem entrou e a de CT-e so com a
   opcao marcada, entao contar posicao erraria nesses dois casos. */
@media (max-width: 640px) {
  .table-wrap { border: 0; background: transparent; box-shadow: none; overflow: visible; max-height: none; }
  .file-list table { display: block; min-width: 0; }
  .file-list thead { display: none; }
  .file-list tbody { display: block; }
  .file-list tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
    background: var(--branco); border: 1px solid var(--traco);
    border-radius: var(--r-g); padding: 12px 14px; margin-bottom: 10px;
  }
  .file-list td {
    display: flex; width: 100%; border: 0; padding: 7px 0;
    justify-content: space-between; align-items: center; gap: 14px; text-align: right;
  }
  .file-list td + td { border-top: 1px solid var(--traco); }
  .file-list td::before {
    content: attr(data-rotulo); flex: none; text-align: left;
    font-family: var(--dado); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--fraca);
  }
  /* Razao social e o nome da coisa: vira o titulo do cartao, no topo. */
  .file-list td.razao {
    order: -2; display: block; width: 100%; max-width: none; text-align: left;
    font-weight: 700; font-size: 14.5px; padding: 0 0 10px; border: 0;
  }
  .file-list td.razao::before { content: none; }
  /* Os icones ficam juntos, numa faixa logo abaixo do nome. */
  .file-list td.acao-nota {
    order: -1; width: auto; flex: none; padding: 0 0 10px; border: 0;
  }
  .file-list td.acao-nota::before { content: none; }
  .file-list tr td.acao-nota + td { border-top: 1px solid var(--traco); }
  /* A chave e longa: ela quebra, alinhada a esquerda, embaixo do rotulo. */
  .file-list td[data-rotulo="Chave"] { flex-wrap: wrap; justify-content: flex-start; }
  .file-list .chave { max-width: 100%; }
  .file-list .chave-text { word-break: break-all; text-align: left; }
  .file-list td.valor { font-size: 15px; }
  .file-list .empty-state { background: var(--branco); border: 1px solid var(--traco);
                            border-radius: var(--r-g); }
}

/* ------------------------------------------------- filtros da consulta
   Os quatro botoes repetem, na mesma ordem, os quatro numeros do cabecalho.
   O de CT-e fica ao lado deles porque tambem muda o que a lista mostra, mas
   e um liga/desliga: pressionado, mostra. */
.toolbar .pilulas-filtro { gap: 6px; }
.cte-toggle { cursor: pointer; }
.cte-toggle[aria-pressed="true"] {
  background: var(--indigo-sup); border-color: var(--acento-borda, #D9C9FB);
  color: var(--indigo-fte);
}
.cte-toggle .material-symbols-outlined { font-size: 17px; }
/* "mais lento" e ressalva, nao rotulo: acompanha o botao sem disputar com
   ele. A cor de atencao explica por que a ressalva existe. */
.cte-toggle .hint {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ambar); background: var(--ambar-sup);
  padding: 2px 6px; border-radius: 999px;
}

/* --------------------------------------- proxima coleta no cartao
   Segunda linha da nota do cartao: "durou 36s" e "proxima 19:04" sao duas
   informacoes, e na mesma linha se leem como uma frase so. */
.metrica .proxima-coleta { display: block; margin-top: 3px; white-space: nowrap; }
.proxima-coleta strong { color: var(--tinta); }
.conta-regressiva { font-family: var(--dado); color: var(--indigo); }
.proxima-coleta.pausada { color: var(--rubi); font-weight: 600; }

/* A pilula da casa nasceu para <a> e <label>, que herdam a fonte do pai. Como
   <button> nao herda, os quatro filtros sairam em Arial. E o .pf span de la,
   feito para a contagem que acompanha o filtro no ERP, impoe fonte de dado a
   QUALQUER span dentro da pilula: o icone do caminhao virava a palavra
   "local_shipping" escrita em monoespacada. Os dois casos so aparecem aqui,
   entao a correcao fica aqui, e nao no arquivo compartilhado. */
button.pf { font-family: var(--ui); }
.pf .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.cte-toggle .hint { font-family: var(--ui); }

/* ========================================================= downloads em lote
   Ver o comentário de downloads.php: a tela tem dois caminhos, e cada um
   ganhou o seu cartão. */
.linha-tipos { display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin-bottom:16px }
.linha-periodo { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end }
.linha-periodo .campo { width:170px }
.atalhos { display:flex; gap:6px; flex-wrap:wrap; padding-bottom:11px }
.atalhos .pf { padding:6px 12px; font-size:12px }

/* O resultado da conta ocupa a mesma faixa do botão: o tamanho aparece antes
   do clique, não depois da espera. */
.previa {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--leve); border:1px solid var(--traco); border-radius:var(--r-g);
  padding:14px 18px; margin-top:18px;
}
.previa .conta { display:flex; align-items:baseline; gap:8px }
.previa .n { font-family:var(--dado); font-size:23px; font-weight:600; color:var(--indigo-fte) }
.previa .un { color:var(--suave); font-size:13px }
.previa .sep { width:1px; height:26px; background:var(--traco2) }
.previa .acoes-modal { margin-top:0; margin-left:auto }
.previa .botao { width:auto; padding:11px 18px }
.previa .botao:disabled { opacity:.45; cursor:default; filter:none; box-shadow:none }

.barra-escolha { padding:0; margin-bottom:14px }
.barra-escolha .doc-tabs { width:190px; margin:0 }
.seletor-mes { display:flex; gap:10px; align-items:center }
.seletor-mes .entrada { width:150px }
.seletor-mes .entrada.ano { width:110px }
/* Lista aberta do ano e do mês no mesmo visual da caixa de NF-e do CT-e (pedido do
   Luiz, 02/10/2026): fonte da casa, índigo, compacta. A lista nativa herda do select. */
.seletor-mes select { font-family: var(--ui) }
/* A lista nativa abre com a largura do select; o padding da caixa ficava de fora e
   a lista saía mais estreita que a caixa. O padding passa para dentro do select. */
.seletor-mes .entrada { padding: 0 }
.seletor-mes .entrada select { width: 100%; padding: 12px 14px }
.seletor-mes select option { font: 600 13px var(--ui); color: var(--indigo-fte); background: #fff; padding: 4px 8px }
.busca-notas { flex:1; min-width:220px }
.marcar-mes { margin-left:auto }

/* Duas marcas no lugar de duas colunas de ícone: aqui o que importa é se há
   XML e PDF para levar, não abrir cada um. A apagada mostra o que falta. */
.arquivos { display:inline-flex; gap:5px }
.arquivos .marca {
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:22px;
  border-radius:6px; font-family:var(--dado); font-size:9.5px; font-weight:600;
  background:var(--verde-sup); color:var(--verde); text-decoration:none;
}
.arquivos a.marca:hover { background:var(--indigo-sup); color:var(--indigo-fte); text-decoration:none }
.arquivos .marca.falta { background:var(--leve); color:var(--traco2) }

/* Rodape do cartao da lista: paginacao e acoes na mesma faixa, no fim do
   cartao. Ja foram duas faixas, e a de acoes cobria a paginacao; e ja foi
   fixa no rodape da tela, e cobria as proprias linhas da lista enquanto se
   rolava. Parada no fim do cartao ela nao cobre nada. */
.rodape-lista {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--branco); border-top: 1px solid var(--traco);
  margin: 14px -22px -20px; padding: 12px 22px;
  border-radius: 0 0 var(--r-g) var(--r-g);
}
.rodape-lista .pg-nav { display: flex; align-items: center; gap: 6px }
.rodape-lista .por-pagina { width: 92px }
.acoes-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto }
.acoes-sel .quantas { font-weight: 700; font-size: 13.5px }
.acoes-sel .detalhe { color: var(--fraca); font-size: 12px; font-weight: 400 }
.acoes-sel .botao { width: auto; padding: 9px 15px; font-size: 13px }
.acoes-sel .botao:disabled { opacity: .45; cursor: default; filter: none; box-shadow: none }

/* Alternadores de formato: ligado = entra no ZIP. Antes eram tres botoes de
   download lado a lado, e so clicando se descobria que cada um baixava
   sozinho. */
.alternadores { gap: 4px }
.alternadores .pf { padding: 7px 12px; font-size: 12.5px }
.alternadores .pf .material-symbols-outlined { font-size: 16px }
.alternadores .pf:not(.ativa) { opacity: .55 }

/* A cesta: com a marcação somando entre meses, sem ela o operador perde de
   vista o que já juntou. */
.cesta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--indigo-sup); border:1px solid var(--acento-borda,#D9C9FB);
  border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600;
  color:var(--indigo-fte); cursor:pointer;
}
.cesta .material-symbols-outlined { font-size:17px }
.lista-marcadas { max-height:52vh; overflow-y:auto }
.linha-marcada {
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--traco); font-size:13px;
}
.linha-marcada:last-child { border-bottom:0 }
.linha-marcada .rot { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nota-rodape { font-size:12px; color:var(--fraca); margin:0 }

/* Abas da tela: os dois caminhos do download. Empilhados em cartoes, o
   periodo empurrava a lista para baixo da dobra. */
.abas-pagina { margin: 0 0 18px }
.abas-pagina .aba { font-size: 14px; padding: 10px 16px }
.abas-pagina .aba .dado {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: var(--indigo-sup); color: var(--indigo-fte);
  font-size: 11px; font-weight: 600;
}

/* A lista de notas rola por conta propria, e o rodape com paginacao e acoes
   fica encostado nela, sempre a vista.
   Eu tinha tirado essa altura limitada de proposito, para nao ter duas barras
   de rolagem aninhadas. Com as abas isso deixou de ser um problema: so a aba
   escolhida ocupa a tela, a pagina inteira nao rola mais, e a unica barra que
   sobra e a da propria lista.
   A conta desconta o que fica fixo acima: barra do topo, titulo, abas e a
   linha de filtros. */
#tableWrap {
  /* A altura vem do JS (ajustarAlturaLista), medida a partir de onde a lista
     realmente comeca: o cabecalho do cartao e as linhas de filtro mudam de
     altura com a largura da tela, e todo numero fixo aqui erra em alguma. */
  min-height: 220px;
  overflow-y: auto;
}
@media (max-width: 820px) {
  /* No celular a tela ja e curta demais para dividir: a pagina rola inteira. */
  #tableWrap { max-height: none; overflow-y: visible }
}

/* Limpar a marcacao pela cesta: o botao do rodape existe, mas quem esta no
   alto da lista nao o alcanca sem rolar ate o fim. */
.cesta .limpar-cesta {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; margin-left: 2px;
  color: var(--indigo-fte); cursor: pointer; opacity: .65;
}
.cesta .limpar-cesta:hover { opacity: 1 }
.cesta .limpar-cesta .material-symbols-outlined { font-size: 16px }

/* Cabecalho de cartao que ficou so com a cesta: sem titulo, ele nao precisa
   da altura de um titulo. */
.cab-cartao.so-cesta { justify-content: flex-end; margin-bottom: 10px; min-height: 0 }

/* O rodape nao quebra linha: cada quebra come uns 60px da lista, que e o
   espaco onde as notas apareceriam. Medido antes de mexer: com duas linhas
   ele ocupava 122px e sobravam tres notas visiveis. */
.rodape-lista { flex-wrap: nowrap; padding: 10px 22px }
.rodape-lista .page-info { white-space: nowrap; font-size: 12.5px }
.acoes-sel { flex-wrap: nowrap; gap: 8px }
.acoes-sel .quantas { white-space: nowrap; font-size: 13px }
.acoes-sel .detalhe { white-space: nowrap }
.filtros .por-pagina { width: 88px }
@media (max-width: 1100px) {
  /* Numa tela estreita a quebra e inevitavel; melhor quebrar do que espremer. */
  .rodape-lista, .acoes-sel { flex-wrap: wrap }
  .acoes-sel .detalhe { display: none }
}

/* ===================================================== janela de conteudo
   O portal ja tinha .modal, mas so para o visualizador de PDF (iframe em
   tela cheia). A lista de notas marcadas precisa de uma janela comum, e eu
   usei .modal-overlay, que e a do painel: sem estas regras ela nao ficava
   escondida e aparecia como conteudo solto no fim da pagina.
   Mesmo mecanismo do painel (classe .aberto) e mesma aparencia. */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,18,40,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.aberto { display: flex }
.modal-caixa {
  background: var(--branco); border: 1px solid var(--traco);
  border-radius: var(--r-g); box-shadow: var(--sombra-alta);
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 22px;
}
.modal-cabecalho {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.modal-cabecalho strong { font-size: 16px; font-weight: 700 }
.modal-fechar {
  background: none; border: 0; color: var(--fraca); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-fechar:hover { color: var(--tinta) }

/* A consulta pública perdeu a coluna de meses: a tabela ocupa a largura toda
   e a busca cresce com o que sobra. O max-width que a casa dá a .filtros
   .entrada existe para formulário em coluna, e aqui só deixava um vão. */
.container { display: block }
.right { height: calc(100vh - var(--header-h)); }
.toolbar .search { flex: 1; min-width: 240px; max-width: none }
.toolbar .doc-tabs { width: auto; margin: 0; flex: none }
/* Quatro abas (NF-e, NFS-e, CT-e, CT-e OS, desde 02/10/2026): cada uma do tamanho do nome. */
.toolbar .doc-tab { flex: none; padding: 7px 14px; white-space: nowrap }
/* NF-e associadas ao CT-e: o número abre o DANFE; a de outro destinatário fica apagada. */
.col-nfes { max-width: 78px; line-height: 2; padding-left: 4px; padding-right: 4px }
.nfe-ref { font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 12px; color: var(--indigo-fte);
    background: var(--indigo-sup); border-radius: 4px; padding: 2px 6px; text-decoration: none }
a.nfe-ref:hover { background: var(--indigo); color: #fff }
.nfe-ref.fora { color: var(--fraca); background: var(--leve) }
.nfe-ref.mais { color: var(--suave); background: transparent; cursor: help }
.sel-nfes { font: 600 12px var(--ui, inherit); color: var(--indigo-fte); background: var(--indigo-sup);
    border: 1px solid var(--traco); border-radius: 6px; padding: 4px 2px; max-width: 72px; cursor: pointer }
.sel-nfes:focus { outline: 2px solid var(--indigo); outline-offset: 1px }
.toolbar .seletor-mes { flex: none }
.barra-escolha .busca-notas { max-width: none }

/* ==================================================== rolagem da area reservada
   O portal fixa html,body em 100vh com overflow:hidden, porque a consulta
   publica e feita de paineis de altura fixa que rolam por dentro. O layout
   antigo da area reservada convivia com isso por ter .admin-content com
   overflow:auto; ao adotar o .conteudo da casa eu nao repliquei essa parte, e
   a Visao geral ficou sem como rolar: os graficos abaixo da dobra viraram
   inalcancaveis. */
.shell { height: 100vh }
.shell > .painel { min-height: 0 }
/* flex:1 e o que empurra o rodape ate o fim da tela. Sem isso o .conteudo
   media so o proprio conteudo, e em tela curta (Relatorios antes de gerar,
   Downloads na aba do periodo) a assinatura da SoftSul parava no meio da
   pagina, com um vazio embaixo. */
.conteudo { flex: 1; overflow-y: auto; min-height: 0 }

/* ------------------------------------------- cartao de certificado e NSU
   Pares rotulo/valor, nao tabela: sao seis linhas fixas, e uma tabela para
   isso traria cabecalho, borda e ordenacao que ninguem usaria. */
.ficha-cert { display: flex; flex-direction: column; gap: 2px }
.linha-cert {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--traco);
}
.linha-cert:last-child { border-bottom: 0 }
.linha-cert .rot { color: var(--fraca); font-size: 12.5px; flex: none }
.linha-cert .val {
  font-size: 13px; font-weight: 600; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nota-atualizado { font-size: 11.5px; color: var(--fraca); margin: 12px 0 0; text-align: right }

/* Cartao dentro da grade nao leva a margem de cartao empilhado.
   O softsul-base tem ".cartao + .cartao{margin-top:14px}", feito para
   cartoes um embaixo do outro. Dentro de um grid o gap ja da o espaco, e a
   margem so empurra o segundo cartao 14px para baixo: dois cartoes na mesma
   linha ficavam desencontrados, um comecando mais alto que o outro. */
.grade > .cartao { margin-top: 0 }

/* O grafico ocupa a altura que sobra no cartao.
   As barras tem altura em porcentagem, entao crescem junto. Com altura fixa
   de 160px o grafico boiava no meio do cartao sempre que o vizinho da linha
   era mais alto e o grid esticava os dois. */
.grade > .cartao { display: flex; flex-direction: column }
.grade > .cartao > .grafico { flex: 1; height: auto; min-height: 160px }
.grade > .cartao > .grafico-linha-wrap { flex: 1 }

/* --------------------------------------------------- assinatura da SoftSul
   Ultima linha das duas telas, encostada a direita. Discreta de proposito: o
   nome do municipio e que manda no cabecalho, e quem usa o portal todo dia
   nao precisa reler de quem e o sistema. Fica no fluxo, e nao flutuando no
   canto, para nao cobrir o botao de proxima pagina. */
.rodape-softsul {
  flex: none; padding: 7px 22px; text-align: right;
  font-size: 11.5px; color: var(--fraca);
  border-top: 1px solid var(--traco); background: var(--branco);
}
.rodape-softsul a { color: var(--indigo-fte); font-weight: 600; text-decoration: none }
.rodape-softsul a:hover { text-decoration:none }

/* A consulta ocupa a tela menos o cabecalho, e o rodape fica com a altura que
   pedir: a coluna e flex, entao a tabela toma o que sobra. Antes eu descontava
   a altura do rodape na mao e errava por um pixel a cada mudanca de fonte ou
   de espacamento. */
.container { display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); }
.right { flex: 1; min-height: 0; height: auto; }

/* ============================================ consulta publica no celular
   Relatado em 09/09/2026, com foto: uma nota so, a paginacao desenhada por
   cima do cartao, e nada rolava.

   A consulta e um painel de altura fixa que rola por dentro — html e body
   presos em 100vh com overflow:hidden, .right em calc(100vh - cabecalho). Isso
   funciona em tela larga. Numa tela estreita os filtros empilham (abas, ano,
   mes, busca, quatro pilulas de status, CT-e) e comem quase 400px; sobra menos
   que um cartao para a lista, e como a pagina inteira nao rola, nao ha para
   onde ir. A paginacao aparecia por cima do cartao porque o .right e uma
   coluna flex de altura travada: a lista recebe o pouco que sobra e o conteudo
   dela transborda POR CIMA do irmao de baixo.

   Ja existia um @media 820px soltando o #tableWrap, mas ele nao surtia efeito:
   pedia overflow-y:visible enquanto o overflow-x continuava auto, e o CSS
   converte o visible de volta para auto quando o outro eixo nao e visible. Por
   isso a lista seguia sendo uma caixa espremida de 277px. Aqui os dois eixos
   sao soltos juntos.

   Abaixo de 820px, entao: a altura fixa sai de cena e quem rola e a pagina —
   como qualquer site no celular. O rodape da SoftSul vai para o fim do
   conteudo, que e onde se espera achar um rodape. */
@media (max-width: 820px) {
  html, body { height: auto; min-height: 100%; overflow: visible }
  .container { height: auto }
  .right { height: auto; overflow: visible }
  /* Os dois eixos: ver a nota sobre overflow-y acima. */
  .table-wrap, #tableWrap { overflow: visible; max-height: none; height: auto }
}

/* ------------------------------------------- troca da propria senha */
#modalTrocarSenha .aviso { margin-bottom: 14px }
/* O .campo da casa nao tem margem: quem espaca os campos e o conteiner do
   formulario. Sem isto os tres campos ficavam colados (0px medido) e a dica
   da nova senha encostava no rotulo de baixo. */
#modalTrocarSenha form { display: flex; flex-direction: column; gap: 14px }
#modalTrocarSenha .acoes-modal { margin-top: 6px }

/* ================================================================ CND's
   Cinco certidões por linha: cada célula é um selo curto (ícone + validade),
   e o detalhe completo fica na janela que o selo abre. O texto longo
   ("Positiva com efeito de negativa, válida até 12/03/2027") não cabe cinco
   vezes numa linha. */
/* Tem de caber sem barra lateral a partir de 1280 px de tela (notebook comum): a
   tabela não força largura mínima e as colunas se apertam. Medido em 27/09/2026. */
table.tabela-cnd{min-width:0}
/* Sem o .sem-borda da casa: ele fixa min-width:600px na tabela com mais
   especificidade do que a regra do celular consegue desfazer. */
.rolagem-cnd{border:0; border-radius:0}
.ajuda-cnd{font-size:12.5px; color:var(--suave); margin:-4px 0 12px}
.tabela-cnd td.fornecedor{min-width:180px}
/* E-mail comprido não pode alargar a coluna: quebra em qualquer ponto. */
.tabela-cnd td.fornecedor .email-forn{overflow-wrap:anywhere}
.tabela-cnd td.fornecedor > *{display:block}
.tabela-cnd td.fornecedor b{font-weight:700; font-size:13.5px; line-height:1.3}
.tabela-cnd td.fornecedor .dado{font-size:11.5px; color:var(--suave)}
.tabela-cnd td.fornecedor .qtd-notas{font-size:11.5px; color:var(--fraca)}
.tabela-cnd td.certidao{padding-left:4px; padding-right:4px}
.tabela-cnd td.acoes, .tabela-cnd th.acoes{width:1%; text-align:right}
.tabela-cnd tr.recem-atualizada{animation:cnd-destaque 2.4s ease-out}
@keyframes cnd-destaque{from{background:var(--indigo-sup)} to{background:transparent}}

.selo-cnd{display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 5px; border-radius:999px;
  font:600 11.5px/1.2 var(--ui); white-space:nowrap; text-decoration:none; border:0}
.selo-cnd .material-symbols-outlined{font-size:15px}
button.selo-cnd{cursor:pointer}
button.selo-cnd:hover{filter:brightness(.95); box-shadow:0 0 0 1px currentColor inset}
button.selo-cnd:focus-visible{outline:0; box-shadow:var(--anel)}
.selo-cnd.regular{color:#0A6B4F; background:var(--verde-sup)}
.selo-cnd.vence_logo{color:#7A4808; background:var(--ambar-sup)}
.selo-cnd.vencida, .selo-cnd.positiva{color:#7E2630; background:var(--rubi-sup)}
.selo-cnd.nao_obtida{color:var(--indigo-fte); background:var(--indigo-sup)}
.selo-cnd.nao_se_aplica{color:var(--fraca); background:transparent}
.botao.compacto{padding:6px 10px; min-height:0; width:auto; font-size:12.5px}
.legenda-cnd{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--traco)}

/* O .botao da casa ocupa a largura toda (nasceu nas telas de acesso); na faixa
   de filtros ele fica do tamanho do texto, ao lado dos campos. */
.filtros-cnd .botao{width:auto; padding:9px 16px; min-height:0}
/* O campo Fornecedor cresce com o que sobra: os filtros ocupam a linha toda. */
.filtros-cnd .campo-busca{flex:1 1 220px}
.filtros-cnd .campo-busca input[type="text"]{width:100%}
.filtros-cnd #fCidade{max-width:240px}
.filtros-cnd .filtro-campo input[type="month"], .filtros-cnd .filtro-campo input[type="date"]{font-family:var(--ui); font-size:13px; padding:7px 10px;
  border:1px solid var(--traco); border-radius:var(--r-p); background:var(--branco); color:var(--tinta)}

/* ---- janela da certidão */
.caixa-cnd{max-width:560px}
.caixa-cnd .modal-cabecalho{margin-bottom:2px}
.quem-cnd{font-size:12.5px; color:var(--suave); margin-bottom:14px}
.atual-cnd{background:var(--leve); border-radius:var(--r); padding:12px 14px; margin-bottom:16px}
.atual-cnd small{display:block; font-size:11.5px; color:var(--suave); margin-top:3px}
.situacao-cnd{font-weight:700; font-size:14px}
.situacao-cnd.regular{color:#0A6B4F}
.situacao-cnd.vence_logo{color:#7A4808}
.situacao-cnd.vencida, .situacao-cnd.positiva{color:#7E2630}
.situacao-cnd.nao_obtida{color:var(--suave); font-weight:600}
.acoes-atual{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.remover-cnd{color:var(--rubi)}
.passo-cnd{margin-bottom:14px}
.passo-cnd > b{display:block; font-size:13px; margin-bottom:4px}
.passo-cnd > p{font-size:12.5px; color:var(--suave); margin-bottom:8px}
.soltar-cnd{display:flex; align-items:center; justify-content:center; gap:8px; min-height:74px; padding:14px;
  border:1.5px dashed var(--acento-borda); border-radius:var(--r); background:var(--branco);
  color:var(--suave); font-size:13px; text-align:center; cursor:pointer; word-break:break-word; position:relative}
.soltar-cnd:hover, .soltar-cnd.sobre{border-color:var(--indigo); background:var(--indigo-sup); color:var(--indigo-fte)}
.soltar-cnd:focus-within{box-shadow:var(--anel)}
.soltar-cnd input{position:absolute; width:1px; height:1px; opacity:0}
.soltar-cnd .material-symbols-outlined{font-size:22px; color:var(--indigo)}
#erroEnvio{margin:-4px 0 12px}
.conferir-cnd{display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--traco); padding-top:14px}
.conferir-cnd .aviso{margin:0}
.grade-cnd{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.grade-cnd .campo-largo{grid-column:1 / -1}
.grade-cnd select, .grade-cnd input{font-family:var(--ui); font-size:13px; padding:8px 10px; width:100%;
  border:1px solid var(--traco); border-radius:var(--r-p); background:var(--branco); color:var(--tinta)}
.grade-cnd select:focus, .grade-cnd input:focus{outline:0; border-color:var(--indigo); box-shadow:var(--anel)}
.conferir-cnd .acoes-modal{margin-top:2px}

/* Celular: cinco colunas de certidão não cabem. Cada fornecedor vira um bloco:
   nome e valor em cima, os selos embaixo com o nome da certidão na frente. */
@media (max-width:820px){
  .rolagem-cnd{overflow:visible}
  table.tabela-cnd{min-width:0; width:100%; display:block}
  table.tabela-cnd thead{display:none}
  table.tabela-cnd tbody{display:block}
  table.tabela-cnd tbody tr{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; padding:12px 0; border-bottom:1px solid var(--traco)}
  table.tabela-cnd tbody tr[hidden]{display:none}
  table.tabela-cnd tbody tr:hover{background:transparent}
  table.tabela-cnd td{display:block; border:0; padding:0; width:auto}
  table.tabela-cnd td.fornecedor{flex:0 0 calc(100% - 120px); min-width:0}
  table.tabela-cnd td.num{flex:0 0 112px; align-self:flex-start; text-align:right; font-size:12.5px}
  table.tabela-cnd td.certidao{flex:0 0 auto}
  table.tabela-cnd td.certidao::before{content:attr(data-rotulo); display:block; font-size:10px; color:var(--fraca);
    text-transform:uppercase; letter-spacing:.06em; margin:0 0 2px 2px}
  table.tabela-cnd td.acoes{flex:0 0 auto; width:auto; min-width:max-content; margin-left:auto}
}
@media (max-width:480px){
  .grade-cnd{grid-template-columns:1fr}
}
/* O visualizador de PDF abre por cima da janela da certidão, que fica aberta atrás. */
.visor-cnd{z-index:1050}

/* ---- emitir em sequência e envio em lote */
.barra-cnd{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.contagem-fila{font-size:13px; font-weight:600; margin-top:12px}
.fila-botoes{justify-content:space-between; margin-top:14px}
.lista-lote{list-style:none; margin:12px 0 0; padding:0; max-height:42vh; overflow-y:auto; display:flex; flex-direction:column; gap:6px}
.item-lote{display:flex; gap:9px; align-items:flex-start; padding:8px 10px; border-radius:var(--r-p); background:var(--leve); font-size:12.5px}
.item-lote > div{min-width:0}
.item-lote b{display:block; font-weight:600; overflow-wrap:anywhere}
.item-lote small{display:block; color:var(--suave); margin-top:1px}
.item-lote .material-symbols-outlined{font-size:18px; color:var(--fraca); flex:none}
.item-lote.lendo .material-symbols-outlined{color:var(--indigo); animation:cnd-gira 1s linear infinite}
.item-lote.guardada{background:var(--verde-sup)}
.item-lote.guardada .material-symbols-outlined{color:var(--verde)}
.item-lote.erro{background:var(--rubi-sup)}
.item-lote.erro .material-symbols-outlined{color:var(--rubi)}
.item-lote.erro small{color:#7E2630}
.resumo-lote{margin-top:10px}
@keyframes cnd-gira{to{transform:rotate(360deg)}}

/* ---- alerta de recusa da API (ex.: SEFAZ-RS com decisão judicial) */
.tabela-cnd td.certidao{white-space:nowrap}
.alerta-api{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:3px;
  vertical-align:middle; border:0; border-radius:50%; background:var(--ambar-sup); color:var(--ambar); cursor:pointer; padding:0}
.alerta-api .material-symbols-outlined{font-size:16px}
button.alerta-api:hover{box-shadow:0 0 0 1px currentColor inset}
button.alerta-api:focus-visible{outline:0; box-shadow:var(--anel)}
.legenda-alerta{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--suave)}
.legenda-alerta .alerta-api{margin-left:0; cursor:default}
.aviso-recusa{margin-bottom:12px}
.aviso-recusa .botao{margin-top:8px}
.recusa-manual summary{cursor:pointer; font-weight:700; font-size:13px; color:var(--suave)}
.recusa-manual[open] summary{color:var(--tinta); margin-bottom:6px}
.recusa-manual textarea{width:100%; resize:vertical; font:inherit; padding:8px 10px; border:1px solid var(--traco);
  border-radius:8px; background:var(--branco); color:var(--tinta)}
.recusa-manual textarea:focus{outline:0; box-shadow:var(--anel)}

/* ---- balão da tela CND's (no lugar do title nativo, que corta o texto) */
.balao-cnd{position:fixed; z-index:60; max-width:340px; padding:9px 12px; border-radius:8px;
  background:var(--tinta); color:#fff; box-shadow:var(--sombra-alta); font-size:12px; line-height:1.45;
  pointer-events:none; white-space:pre-line}
.balao-cnd b{display:block; font-weight:700}
.balao-cnd span{display:block; margin-top:4px; color:rgba(255,255,255,.86)}
.balao-cnd.alerta{border-left:3px solid var(--ambar)}
.aviso-recusa > span:last-child{display:flex; flex-direction:column; gap:3px}
.aviso-recusa small{display:block; font-size:12px; line-height:1.45; overflow-wrap:anywhere}

/* ---- Visão geral: resumo das certidões */
.cartao-cnd-resumo .cab-cartao a.rotulo{text-decoration:none}
.cartao-cnd-resumo .cab-cartao a.rotulo:hover{text-decoration:none}
.cartao-cnd-resumo .metricas{margin-top:4px}
.nota-cnd-resumo{font-size:12.5px; color:var(--suave); margin-top:12px}

/* Modo e gasto no cartão de certidões: texto, não contagem; menor que os números. */
.cartao-cnd-resumo .metrica .val.val-texto{font-size:20px; white-space:nowrap}

/* Alertas de certidões */
.acoes-cnd-topo{display:flex; justify-content:flex-end; gap:8px; margin-bottom:10px}
.acoes-cnd-topo .botao{width:auto}
.nota-bloco-cnd{font-size:12.5px; color:var(--suave); margin:0; padding:0 18px 10px}
.nota-linha{font-size:11.5px; color:var(--fraca)}
.cartao-cnd-resumo .cab-cartao .rotulo a{text-decoration:none}
.cartao-cnd-resumo .cab-cartao .rotulo a:hover{text-decoration:none}

/* ---- Certidões: log das consultas (cnd_log), o mesmo do painel da SoftSul */
.cartao.sem-recheio{padding:20px 22px 0}
.cartao.sem-recheio .rolagem{margin:0 -22px}
.filtros-log-cnd{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:0 0 16px}
.filtros-log-cnd .campo{min-width:150px}
.filtros-log-cnd .campo-busca-log{flex:1 1 220px}
.filtros-log-cnd .botao{width:auto}
.filtros-log-cnd .check{padding-bottom:10px}
.tabela-log-cnd td{font-size:13px; vertical-align:top}
.tabela-log-cnd .doc-log{display:block; font-size:11px; color:var(--fraca)}
.tabela-log-cnd .detalhe-log{min-width:260px; max-width:520px; color:var(--suave); overflow-wrap:anywhere}
.acoes-export{display:flex; gap:8px; align-items:center; margin-left:auto}
.acoes-export .botao{width:auto; padding:6px 12px; font-size:12.5px}

/* ---- paginação no estilo do Joomla: botões emendados, página atual cheia */
.paginacao{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; padding:14px 18px}
.paginacao .pags{display:inline-flex; flex-wrap:wrap; border:1px solid var(--traco); border-radius:8px; overflow:hidden; background:var(--branco)}
.paginacao .pags > a, .paginacao .pags > span{min-width:36px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; font-size:13px; font-weight:600; color:var(--indigo); text-decoration:none; border-left:1px solid var(--traco)}
.paginacao .pags > :first-child{border-left:0}
.paginacao .pags > a:hover{background:var(--leve)}
.paginacao .pags > a:focus-visible{outline:0; box-shadow:var(--anel) inset}
.paginacao .pags > .atual{background:var(--indigo); color:#fff}
.paginacao .pags > .off{color:var(--fraca); opacity:.55}
.paginacao .pags .material-symbols-outlined{font-size:18px}
.paginacao .info{font-size:12.5px; color:var(--suave); white-space:nowrap}

/* ---- CND's: pedir as certidões ao fornecedor (link do portal) */
.pedir-fornecedor summary{cursor:pointer; font-weight:700; font-size:13px; color:var(--suave)}
.pedir-fornecedor[open] summary{color:var(--tinta); margin-bottom:6px}
.link-fornecedor{margin-top:10px}
.link-fornecedor input{font-family:var(--mono, monospace); font-size:12px}
.nota-link{font-size:12px; color:var(--suave); margin:6px 0 8px}
.acoes-link{display:flex; gap:8px; flex-wrap:wrap}
.acoes-link .botao{width:auto}

/* ---- CND's: e-mail ao fornecedor (enviado pelo FrameFlow) */
.tabela-cnd td.fornecedor .email-forn{display:block; font-size:11.5px; color:var(--indigo); overflow-wrap:anywhere}
.caixa-email{margin-top:10px; display:flex; flex-direction:column; gap:10px}
.caixa-email textarea{width:100%; resize:vertical; font:inherit; padding:8px 10px; border:1px solid var(--traco); border-radius:8px}
.rotulo-previa{font-size:12px; font-weight:700; color:var(--suave)}
.previa-email{width:100%; height:420px; border:1px solid var(--traco); border-radius:10px; background:#F4F7FD}

/* ===================================================== notificações push
   Janela do menu do usuário (lib/admin_layout.php, js/notificacoes.js). */
.notif-ajuda { margin: 0 0 14px; font-size: 13.5px; color: var(--suave); line-height: 1.5 }
.notif-estado { margin: 0 0 12px; font-size: 14px }
.notif-titulo-lista { margin: 20px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fraca) }
.notif-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--traco); font-size: 13.5px }
.notif-meta { font-size: 12px; color: var(--fraca); font-weight: 400 }
.notif-remover { background: none; border: 0; color: var(--fraca); cursor: pointer; padding: 4px; border-radius: 8px }
.notif-remover:hover { color: var(--rubi); background: var(--rubi-sup) }
#modalNotificacoes .aviso { margin-bottom: 12px; font-size: 13px }

/* ===================================================== fornecedores
   Cadastro (fornecedores.php): tabela de colunas fixas que cabe na largura,
   texto longo corta com "..." e o completo no title. */
table.dados.tabela-forn{table-layout:fixed; min-width:0}
.rolagem.sem-borda table.dados.tabela-forn{min-width:0}
table.dados.tabela-forn td{overflow:hidden; overflow-wrap:anywhere; vertical-align:top}
table.dados.tabela-forn th{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.corta{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabela-forn .doc-log{display:block; font-size:11.5px; color:var(--fraca); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.origem-forn{display:inline-block; margin-top:3px; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px;
  background:var(--leve); color:var(--fraca)}
.origem-forn.info{background:var(--indigo-sup); color:var(--indigo)}
.origem-forn.ok{background:var(--verde-sup); color:#0A6B4F}
.forn-quem{margin:0 0 14px; font-size:14px}
.forn-voltas{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px}
.link-forn{background:none; border:0; padding:0; color:var(--indigo); cursor:pointer; font:inherit; font-size:13px}
.link-forn:hover{text-decoration:underline}
.tabela-forn .acao{text-align:right}
.tabela-forn .acao-icone{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  background:none; border:0; border-radius:8px; color:var(--fraca); cursor:pointer}
.tabela-forn .acao-icone:hover{background:var(--leve); color:var(--indigo)}
.tabela-forn .acao-icone .material-symbols-outlined{font-size:19px}
@media (max-width:860px){
  table.dados.tabela-forn,
  .rolagem.sem-borda table.dados.tabela-forn{min-width:760px}
}

/* Importação de contatos (fornecedores.php) */
.modal-caixa.modal-importar{max-width:640px}
.imp-envio{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 12px}
.imp-envio input[type=file]{flex:1 1 260px; font:inherit; font-size:13px}
.imp-envio .botao{width:auto; margin-left:auto}
.imp-envio .zona-upload{flex:1 1 100%}
.imp-numeros{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin:8px 0 4px}
.imp-numeros > div{background:var(--leve); border-radius:10px; padding:10px; text-align:center}
.imp-numeros b{display:block; font-size:20px}
.imp-numeros span{font-size:11.5px; color:var(--suave)}
.imp-numeros .bom{background:var(--verde-sup)}
.imp-numeros .info{background:var(--indigo-sup)}
.imp-numeros .ruim{background:var(--rubi-sup)}
@media (max-width:640px){ .imp-numeros{grid-template-columns:repeat(2, 1fr)} }

/* Consulta de notas dentro da área reservada (index.php com login): o resumo
   do período, que na versão pública fica no cabeçalho, vem acima da lista. */
.consulta-cab{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 4px}
.consulta-cab h1{margin:0}
.consulta-cab .summary{background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g); padding:10px 16px}
.consulta-admin{height:calc(100vh - 210px); min-height:460px}
@media (max-width:820px){ .consulta-cab .summary{display:flex; flex-wrap:wrap} .consulta-admin{height:auto} }

/* Consulta dentro da área reservada: o menu lateral tira largura, e a tabela
   passava da tela (barra horizontal). A chave corta com "..." (completa no
   title), as células ficam mais justas e a emissão pode quebrar em duas linhas. */
@media (min-width: 821px) {
  .consulta-admin .file-list table { width: 100%; }
  .consulta-admin .file-list th, .consulta-admin .file-list td { padding-left: 7px; padding-right: 7px; }
  .consulta-admin .chave .chave-text { display: inline-block; max-width: 138px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .consulta-admin td[data-rotulo="Emissão"] { white-space: normal; min-width: 92px; }
  .consulta-admin .razao { max-width: 260px; }
}

/* Sanções (CEIS/CNEP) na tela CND's */
.tabela-cnd td.sancao .selo-cnd{white-space:nowrap}
.lista-sancoes{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.sancao-item{border:1px solid var(--traco); border-radius:12px; padding:10px 12px}
.sancao-item.impede{border-color:#E6B3B9; background:var(--rubi-sup)}
.sancao-cab{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.sancao-cab b{font-size:13.5px}
.sancao-motivo{margin:6px 0; font-size:13px}
.sancao-dados{display:grid; grid-template-columns:max-content 1fr; gap:2px 12px; margin:0; font-size:12.5px}
.sancao-dados dt{color:var(--fraca)}
.sancao-dados dd{margin:0; overflow-wrap:anywhere}
.sancoes-encerradas{margin-top:12px}
.sancoes-encerradas summary{cursor:pointer; font-size:13px; color:var(--suave); margin-bottom:8px}
.nota-sancao{font-size:12px; color:var(--fraca); margin:12px 0 0}

/* Itens que exigem justificativa (itens-restritos.php e cartão da Visão geral) */
.tabela-itens td{vertical-align:top}
.tabela-itens .nota-linha{display:block; margin-top:4px; font-size:12.5px; color:var(--suave); overflow-wrap:anywhere}
.tabela-itens td:first-child, .tabela-itens td:nth-child(2){overflow-wrap:anywhere}
details.justificar{margin-top:6px}
details.justificar summary{list-style:none; display:inline-flex}
details.justificar summary::-webkit-details-marker{display:none}
.form-item{display:flex; flex-direction:column; gap:6px; margin-top:6px; max-width:320px}
.form-item textarea{width:100%; font:inherit; font-size:13px; padding:8px; border:1px solid var(--traco); border-radius:8px}
.cartao-itens-alerta{border-left:3px solid #C23A47}

/* Modal de detalhe (alertas-notas.php e retencao-ir.php): largo, com as notas e os itens. */
.modal-caixa.modal-largo{max-width:1000px; max-height:92vh; padding:22px 26px}
tr.linha-abre{cursor:pointer}
tr.linha-abre:hover td{background:var(--indigo-sup)}
tr.linha-abre:focus-visible{outline:2px solid var(--indigo); outline-offset:-2px}
.tabela-alertas .abrir-detalhe, .tabela-retencao .abrir-detalhe{margin-top:6px}
.amod-topo{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.amod-topo p{margin:0; font-size:14px; line-height:1.5}
.amod-dica{margin:0 0 14px}
.amod-bloco{border-top:1px solid var(--traco); padding-top:14px; margin-top:14px}
.amod-bloco h3{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); margin:0 0 10px}
.amod-ficha{display:grid; grid-template-columns:130px 1fr; gap:6px 14px; margin:0; font-size:13.5px}
.amod-ficha dt{color:var(--suave)}
.amod-ficha dd{margin:0; overflow-wrap:anywhere}
.amod-comparar{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:860px){ .amod-comparar{grid-template-columns:1fr} .amod-ficha{grid-template-columns:1fr} }
.amod-nota{border:1px solid var(--traco); border-radius:var(--r); padding:12px 14px; min-width:0}
.amod-rotulo{display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--indigo); margin:0 0 6px}
.amod-nota-cab{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:8px}
.amod-nota-valor{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
.amod-itens{width:100%; border-collapse:collapse; font-size:12.5px}
.amod-itens th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--suave); text-align:left; padding:6px; border-bottom:1px solid var(--traco)}
.amod-itens td{padding:6px; border-bottom:1px solid var(--traco); vertical-align:top; overflow-wrap:anywhere}
.amod-itens .num{text-align:right; white-space:nowrap}
.amod-servico{font-size:13px; line-height:1.5; margin:6px 0 0}
.amod-compl{margin-top:8px; font-size:12.5px}
.amod-compl summary{cursor:pointer; color:var(--indigo)}
.amod-compl p{margin:6px 0 0; color:var(--suave); line-height:1.5; overflow-wrap:anywhere}
.amod-dobra{border:1px solid var(--traco); border-radius:var(--r); margin-bottom:8px}
.amod-dobra > summary{cursor:pointer; padding:10px 14px; font-size:13.5px}
.amod-dobra[open] > summary{border-bottom:1px solid var(--traco)}
.amod-dobra .amod-nota{border:0}
.amod-form{display:flex; flex-direction:column; gap:8px}
.amod-form label{font-size:13px; font-weight:600}
.amod-form textarea{width:100%; font:inherit; font-size:14px; line-height:1.5; padding:10px 12px; border:1px solid var(--traco2); border-radius:var(--r); resize:vertical; min-height:130px}
.amod-form textarea:focus{outline:none; border-color:var(--indigo); box-shadow:var(--anel)}
.amod-acoes{display:flex; justify-content:flex-end; gap:10px; margin-top:4px}
.amod-registro{background:var(--leve); border-radius:var(--r); padding:12px 14px; margin-bottom:10px}
.amod-registro p{margin:0 0 6px; line-height:1.5}
.amod-itens thead th{background:transparent; color:var(--suave); position:static; cursor:default}
.amod-nota .nota-linha{display:block; margin-top:2px; font-size:12px; color:var(--suave)}
.amod-nota-valor .botao{white-space:nowrap}

/* ---------------------------------------------------- relatórios (07/10/2026)
   Painel por assunto (relatorios) e a tela de cada um (relatorio?tipo=), como no ERP. */
.trilha-rel { display:flex; align-items:center; gap:4px; font-size:12.5px; color:var(--fraca); margin-bottom:8px; }
.trilha-rel a { color:var(--fraca); text-decoration:none; }
.trilha-rel a:hover { color:var(--indigo); }
.trilha-rel .material-symbols-outlined { font-size:16px; }
.atalhos .pf.ativo { background:var(--indigo); color:#fff; border-color:var(--indigo); }
.tabela-relatorio tfoot td { border-top:2px solid var(--traco); background:var(--leve, #f6f7fb); }

/* Mapa de cobertura (CND's, 07/10/2026) */
.modal-caixa.mapa-caixa{position:relative; display:flex; flex-direction:column; max-width:96vw; width:96vw; height:90vh; max-height:90vh}
.mapa-legenda{display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; font-size:13px; color:var(--suave); margin-bottom:10px}
.mapa-legenda b{font-family:var(--dado); font-weight:600; color:var(--tinta)}
.mapa-cor{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin-right:4px}
.mapa-cor.ativa{background:var(--verde)}
.mapa-cor.cadastrada{background:var(--ambar)}
.mapa-dica{font-size:12px; color:var(--fraca)}
.mapa-area{flex:1; min-height:0; background:var(--leve); border:1px solid var(--traco); border-radius:var(--r); overflow:hidden;
           display:flex; align-items:center; justify-content:center}
.mapa-area svg{width:100%; height:100%; cursor:grab; user-select:none; touch-action:none; -webkit-user-select:none}
.mapa-area svg.arrastando{cursor:grabbing}
.mapa-area #BRMU path{fill:#e6e8f0; stroke:#b4bacb; stroke-width:.4px; vector-effect:non-scaling-stroke}
.mapa-area #BRMU path.ativa{fill:var(--verde)}
.mapa-area #BRMU path.cadastrada{fill:var(--ambar)}
.mapa-area #BRMU path:hover{fill-opacity:.7}
.mapa-ufs path{fill:none; stroke:#262a40; stroke-width:var(--uf-w, 1.2px); vector-effect:non-scaling-stroke; pointer-events:none}
/* Estados legíveis no zoom (09/10/2026): halo branco sob a divisa escura, siglas e a lista de UF */
.mapa-ufs-halo path{fill:none; stroke:#fff; stroke-opacity:.95; stroke-width:calc(var(--uf-w, 1.2px) + 3px); vector-effect:non-scaling-stroke; pointer-events:none}
.mapa-rotulos{pointer-events:none}
.mapa-rotulos text{fill:#1f2340; stroke:#fff; paint-order:stroke; stroke-linejoin:round; font-family:var(--ui, sans-serif); font-weight:700;
  text-anchor:middle; dominant-baseline:central; letter-spacing:.04em}
.mapa-uf{height:30px; padding:0 8px; border:1px solid var(--traco); border-radius:8px; background:var(--branco, #fff); color:var(--tinta);
  font:inherit; font-size:13px; cursor:pointer}
.mapa-carregando{color:var(--fraca); font-size:13px}
.mapa-cartao{position:absolute; z-index:5; width:280px; background:var(--branco); border:1px solid var(--traco);
             border-radius:var(--r-g); box-shadow:var(--sombra-alta); padding:14px 16px; font-size:13px}
.mapa-cartao[hidden]{display:none}
.mapa-cartao .mc-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px}
.mapa-cartao .mc-topo b{font-size:14.5px; line-height:1.3}
.mapa-cartao .mc-topo .pilula{white-space:nowrap}
.mapa-cartao .mc-obs{margin:0 0 10px; color:var(--suave); font-size:12.5px; line-height:1.45}
.mapa-cartao .botao{display:inline-flex; align-items:center; gap:6px; width:100%; justify-content:center}
.mapa-cartao .botao .material-symbols-outlined{font-size:18px}
.mapa-cartao.so-nome{width:auto; max-width:300px; padding:8px 12px; pointer-events:none}

/* filtro-na-caixa (10/10/2026): em CNDs, Alertas nas notas, Itens restritos e Retenção de IR
   as caixas de resumo vêm primeiro e o filtro fica dentro da caixa da lista, como uma faixa
   entre o texto de ajuda e a tabela: sem borda nem fundo próprios, com um traço embaixo. */
.cartao .filtros-relatorio{background:transparent; border:0; border-bottom:1px solid var(--traco);
  border-radius:0; padding:4px 0 16px; margin:10px 0 14px}

/* ==========================================================================
   TEMA ESCURO, portal (10/10/2026): as cores fixas deste arquivo com o equivalente
   escuro. As variáveis ficam em assets/softsul-base.css. A prévia de e-mail continua
   clara de propósito (é como chega a quem recebe).
   ========================================================================== */
[data-tema="escuro"] .cte-toggle .hint{color:var(--ambar); background:var(--ambar-sup); border-color:#5A4520}
[data-tema="escuro"] .cte-toggle[aria-pressed="true"],
[data-tema="escuro"] .cesta{border-color:var(--acento-borda)}
[data-tema="escuro"] .act.pdf{color:#FF7D89}
[data-tema="escuro"] .act.pdf:hover{background:var(--rubi-sup)}
[data-tema="escuro"] .act.xml{color:#3FD3A2}
[data-tema="escuro"] .act.xml:hover{background:var(--verde-sup)}
[data-tema="escuro"] .act.cte{color:var(--indigo)}
[data-tema="escuro"] .act.cte:hover{background:var(--indigo-sup)}
[data-tema="escuro"] .status.autorizada{color:#6EE0B8}
[data-tema="escuro"] .status.confirmada{color:#8FD0F5; background:#10283A}
[data-tema="escuro"] .status.ciencia{color:#F2D36B; background:#332B0E}
[data-tema="escuro"] .status.desconhecida,
[data-tema="escuro"] .status.nao-realizada{color:#F5A66B; background:#3A2210}
[data-tema="escuro"] .modal-content{background:var(--branco)}
[data-tema="escuro"] .modal-close{background:rgba(255,255,255,.06)}
[data-tema="escuro"] .loading-box{background:var(--branco)}
[data-tema="escuro"] .seletor-mes select option{background:var(--branco)}
[data-tema="escuro"] .selo-cnd.regular,
[data-tema="escuro"] .situacao-cnd.regular,
[data-tema="escuro"] .origem-forn.ok{color:#A8EBD3}
[data-tema="escuro"] .selo-cnd.vence_logo,
[data-tema="escuro"] .situacao-cnd.vence_logo{color:#F8D9A8}
[data-tema="escuro"] .selo-cnd.vencida, [data-tema="escuro"] .selo-cnd.positiva,
[data-tema="escuro"] .situacao-cnd.vencida, [data-tema="escuro"] .situacao-cnd.positiva,
[data-tema="escuro"] .item-lote.erro small{color:#FFC2C8}
[data-tema="escuro"] .sancao-item.impede{border-color:#6B2A33}
[data-tema="escuro"] .tabela-relatorio tfoot td{background:var(--leve)}
[data-tema="escuro"] .mapa-area #BRMU path:not(.ativa):not(.cadastrada){fill:#262626; stroke:#3A3A3A}
[data-tema="escuro"] .mapa-ufs path{stroke:#D4D4D4}
[data-tema="escuro"] .mapa-ufs-halo path{stroke:#0A0A0A}
[data-tema="escuro"] .mapa-rotulos text{fill:#EDEDED; stroke:#0A0A0A}
[data-tema="escuro"] .mapa-uf{background:var(--branco)}

/* Mapa no escuro (10/10/2026): o verde e o âmbar do tema escuro são claros para servir em texto e
   ficavam berrantes no mapa. Aqui, tons mais fechados, e divisa fina escura entre os municípios. */
[data-tema="escuro"] .mapa-area #BRMU path.ativa{fill:#23866A; stroke:#0E0E0E}
[data-tema="escuro"] .mapa-area #BRMU path.cadastrada{fill:#8C6527; stroke:#0E0E0E}
[data-tema="escuro"] .mapa-cor.ativa{background:#23866A}
[data-tema="escuro"] .mapa-cor.cadastrada{background:#8C6527}

/* Balão das certidões no escuro (13/10/2026): o fundo era var(--tinta), que no escuro vira quase
   branco, e o texto branco sumia. Aqui, cinza um degrau acima dos cartões, com borda. */
[data-tema="escuro"] .balao-cnd{background:#262626; color:var(--tinta); border:1px solid var(--traco2)}
[data-tema="escuro"] .balao-cnd span{color:var(--suave)}