/* components.css : botoes, cards, badges, alternador de tema.
   Componentes reutilizaveis. Mudou botao/card, muda aqui, propaga pra todas as telas. */

/* ===== BOTOES ===== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 500; line-height: 1;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--branco);
  color: var(--texto);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:hover { background: var(--fundo); }
.btn:active { transform: translateY(1px); }
.btn i { font-size: 15px; }

.btn-primary {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff; font-weight: 600;
}
.btn-primary:hover { background: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); }

.btn-sm { padding: 6px 10px; font-size: 12px; }

.btn-fantasma {
  background: transparent; border-color: transparent;
  color: var(--texto-secundario);
}
.btn-fantasma:hover { background: var(--fundo); color: var(--texto); }

.btn-perigo {
  background: var(--perigo); border-color: var(--perigo);
  color: #fff; font-weight: 600;
}
.btn-perigo:hover { filter: brightness(.92); }

/* Botao so-icone (topbar, rodape) */
.btn-icone {
  width: 36px; height: 36px; padding: 0;
  display: inline-grid; place-items: center;
}
.btn-icone i { font-size: 17px; }

/* ===== CARD ===== */
.cd {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--sombra);
}
.cd + .cd { margin-top: var(--sp-4); }
.cd-titulo {
  font-family: var(--font-titulo);
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 var(--sp-2);
}
.cd-sub { color: var(--texto-suave); font-size: 13px; margin: 0; }

/* ===== BADGE ===== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--raio-full);
  background: var(--fundo-2); color: var(--texto-secundario);
}
.badge-primary { background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); }
.badge-sucesso { background: rgba(22,163,74,.12); color: var(--sucesso); }
.badge-perigo  { background: rgba(220,38,38,.12); color: var(--perigo); }

/* ===== ALTERNADOR DE TEMA ===== */
.tema-btn { position: relative; }
.tema-btn .ph-moon  { display: inline-flex; }
.tema-btn .ph-sun   { display: none; }
:root[data-tema="dark"] .tema-btn .ph-moon { display: none; }
:root[data-tema="dark"] .tema-btn .ph-sun  { display: inline-flex; }

/* ===== GRID DE CARDS ===== */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.btn-bloco { width: 100%; justify-content: center; padding: 11px 14px; font-size: 14px; }

/* ===== AVISOS / FLASH ===== */
.aviso {
  padding: 10px 14px; border-radius: var(--raio-sm); font-size: 13px;
  margin-bottom: var(--sp-3); border: 1px solid var(--borda);
}
.aviso-erro { background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.30); color: var(--perigo); }
.aviso-ok   { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.30); color: var(--sucesso); }

/* ===== FORMULARIO (Padrao_Formulario: controle 40px, label 13px/600) ===== */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.campo .rotulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"] {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto); font-size: 14px;
}
.campo input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
.form-acoes { display: flex; gap: var(--sp-2); align-items: flex-end; margin-top: var(--sp-2); }
.ajuda-campo { font-size: 12px; color: var(--texto-suave); }
.form-contexto { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.form-contexto .muted, .muted { color: var(--texto-suave); font-size: 13px; }
.sub-secao { font-family: var(--font-titulo); font-size: 15px; margin: 0 0 4px; }
.sep { border: none; border-top: 1px solid var(--borda); margin: var(--sp-4) 0; }

/* ===== PLANO DE CONTAS (arvore Avo > Pai > Filho) ===== */
.pc-topo { margin-bottom: var(--sp-3); }
.pc-no { border-left: 2px solid var(--borda); margin: 2px 0; }
.pc-linha { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  cursor: pointer; border-radius: var(--raio-sm); list-style: none; }
.pc-linha::-webkit-details-marker { display: none; }
.pc-linha:hover { background: var(--fundo); }
.pc-nome { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pc-nivel-1 > .pc-linha .pc-nome { font-weight: 700; font-family: var(--font-titulo); }
.pc-nivel-2 > .pc-linha .pc-nome { font-weight: 600; }
.pc-codigo { font-size: 12px; font-weight: 600; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.pc-seta { transition: transform var(--transicao); color: var(--texto-secundario); font-size: 13px; }
details[open] > .pc-linha .pc-seta { transform: rotate(90deg); }
.pc-seta-vazia { width: 13px; display: inline-block; }
.pc-grupos { display: inline-flex; gap: 6px; margin-left: auto; }
.pc-acoes { display: inline-flex; gap: 2px; margin-left: 10px; }
.pc-no .pc-no { margin-left: 18px; }
.pc-add { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px 28px;
  font-size: 12.5px; font-weight: 600; color: var(--cor-primaria-texto, var(--cor-primaria-escura));
  text-decoration: none; }
.pc-add:hover { text-decoration: underline; }

/* Escolha por radio/checkbox (escada do SelectBusca pra listas curtas e fixas) */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.opcao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  font-size: 13px; cursor: pointer; background: var(--branco);
}
.opcao input { accent-color: var(--cor-primaria); }

/* ===== TABELA ===== */
/* O card NAO tem overflow (Padrao_Cabecalho_da_Tabela): overflow aqui corta o
   popup do menu sanduiche. Quem rola horizontal e o .tabela-scroll de dentro. */
.tabela-wrap {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
}
.tabela-scroll { overflow-x: auto; border-radius: 0 0 var(--raio) var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borda); }
/* header de coluna branco (o card e continuo); a borda separa, nao o preenchimento */
.tabela thead th { font-size: 12px; font-weight: 700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .03em; background: var(--branco); }
.tabela tbody tr:hover { background: var(--fundo); }
.tabela .col-acoes, .tabela .celula-acoes { width: 1%; white-space: nowrap; text-align: right; }
.desabilitado { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Cabecalho DENTRO do card: titulo + contagem (so com filtro) + menu sanduiche */
.tabela-cab { display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.tabela-titulo { font-family: var(--font-titulo); font-weight: 700; font-size: 15px; }
.tabela-info { color: var(--texto-suave); font-size: 12px; margin-left: auto; }
.tabela-acoes-cab { margin-left: auto; }
.tabela-info + .tabela-acoes-cab { margin-left: var(--sp-2); }

/* menu sanduiche da tabela */
.tab-menu-wrap { position: relative; }
.btn-tab-menu { width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); cursor: pointer; color: var(--texto-secundario); }
.btn-tab-menu:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-tab-menu i { font-size: 18px; }
.tab-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-md); z-index: 60; padding: 4px; }
.tab-menu[hidden] { display: none; }
.tab-menu-item { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--texto);
  background: none; border: none; border-radius: var(--raio-sm); text-align: left; font-family: inherit; }
.tab-menu-item:hover { background: var(--fundo); color: var(--cor-primaria); }
.tab-menu-item.ativo { color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.tab-menu-item i { font-size: 16px; color: var(--texto-secundario); }
.tab-menu-item:hover i, .tab-menu-item.ativo i { color: var(--cor-primaria); }
.tab-menu-sep { height: 1px; background: var(--borda); margin: 4px 0; }

/* popup de Ordenar / Colunas / Linhas */
.tab-popup { position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-md); z-index: 70; }
.tab-popup[hidden] { display: none; }
.tab-popup-cab { padding: 11px 14px; border-bottom: 1px solid var(--borda); font-weight: 700; font-size: 13px; }
.tab-popup-corpo { padding: 10px 14px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.tab-popup-rod { padding: 10px 14px; border-top: 1px solid var(--borda); display: flex; justify-content: flex-end; }
.tab-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.tab-check input { accent-color: var(--cor-primaria); }
.tab-ord-linha { display: flex; align-items: center; gap: 6px; }
.tab-ord-nome { flex: 1; font-size: 13px; }
.tab-ord-btn, .tab-linha-btn { border: 1px solid var(--borda); background: var(--branco);
  border-radius: var(--raio-sm); padding: 4px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--texto-secundario); font-family: inherit; }
.tab-ord-btn.on, .tab-linha-btn.on { border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.tab-ord-limpar { align-self: flex-start; border: none; background: none; color: var(--texto-suave);
  font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; padding: 0; }
.tab-linhas { flex-direction: row; flex-wrap: wrap; }

/* linha de filtros no thead (Padrao_Filtro_por_Coluna) */
.th-filtro th { padding: 4px 8px 8px; }
.inp-filtro { width: 100%; height: 30px; box-sizing: border-box; padding: 0 8px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: 12px; font-family: inherit; }
.inp-filtro:focus { outline: none; border-color: var(--cor-primaria); }
.th-ordenavel { cursor: pointer; user-select: none; }
.th-ordenavel:hover { color: var(--cor-primaria); }
.th-ordenavel[data-ordem="asc"]::after { content: " \2191"; color: var(--cor-primaria); }
.th-ordenavel[data-ordem="desc"]::after { content: " \2193"; color: var(--cor-primaria); }

/* Cabecalho de pagina com acao primaria (a acao real fica na topbar via topo_acoes) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }

/* rodape: paginador COMPLETO em grid de 3 colunas (Padrao_Cabecalho_da_Tabela) */
.oc-pag { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sp-2); margin-top: var(--sp-3); }
.oc-pag[hidden] { display: none; }
.oc-pag-info { color: var(--texto-suave); font-size: 12px; }
.oc-pag-nav { display: flex; align-items: center; gap: var(--sp-1); justify-content: center; }
.oc-pag-ind { font-size: 12.5px; color: var(--texto-secundario); padding: 0 8px; white-space: nowrap; }
.oc-pg { min-width: 32px; height: 32px; display: inline-grid; place-items: center;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco);
  cursor: pointer; color: var(--texto-secundario); font-size: 13px; font-family: inherit; }
.oc-pg:hover:not(:disabled) { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.oc-pg:disabled { opacity: .4; cursor: default; }
.paginador { display: flex; gap: var(--sp-1); align-items: center; margin-top: var(--sp-3); flex-wrap: wrap; }

/* Matriz de permissoes */
.matriz td.check { text-align: center; width: 90px; }
.grupo-linha td { background: var(--fundo-2); font-weight: 600; font-size: 12px; color: var(--texto-secundario); }

/* Estado vazio (Padrao_Estado_Vazio): substitui a tabela, centrado na area que sobra */
.vazio { text-align: center; color: var(--texto-suave); padding: var(--sp-6) var(--sp-4); }
.vz { flex: 1; min-height: 300px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 32px 20px; }
.vz[hidden] { display: none; }
.vz-icone { font-size: 40px; color: var(--texto-fraco, var(--texto-suave)); line-height: 1; margin-bottom: 16px; }
.vz-titulo { margin: 0; font-family: var(--font-titulo); font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; color: var(--texto); }
.vz-sub { margin: 7px 0 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; max-width: 400px; }

/* ===== TABS (Padrao_Tabs): sublinhado, nunca pilula ===== */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); margin-bottom: 16px; }
.tab { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--texto-secundario);
  cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.tab:hover { color: var(--texto); }
.tab.ativo { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.pane { display: none; }
.pane.ativo { display: block; }

/* ===== BARRA DE FILTROS (Padrao_Barra_de_Filtros) ===== */
.fu-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; --fu-h: 38px; }
.fu-bar .g { display: flex; flex-direction: column; gap: 4px; }
.fu-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-secundario); }
.fu-bar input, .fu-bar .btn { height: var(--fu-h); box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: 7px; font-size: 13px; display: inline-flex; align-items: center; }
.fu-bar .sp { flex: 1; }
@media (max-width: 720px) { .fu-bar .g { flex: 1 1 100%; } }

/* ===== SelectBusca (Componente_SelectBusca): substitui o <select> nativo ===== */
.selectbusca { position: relative; }
.sb-display { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 40px; padding: 0 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); cursor: pointer; font-size: 13px; }
.selectbusca.open .sb-display { border-color: var(--cor-primaria); }
.sb-display i { color: var(--texto-secundario); font-size: 14px; }
.sb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-placeholder { color: var(--texto-suave); }
.sb-panel { position: fixed; z-index: 200; background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-sm); box-shadow: var(--sombra-md); padding: 6px; display: none; max-height: 280px; overflow-y: auto; }
.selectbusca.open .sb-panel { display: block; }
.sb-search { width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; margin-bottom: 6px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: 13px; font-family: inherit; }
.sb-opt { padding: 8px 10px; border-radius: var(--raio-sm); font-size: 13px; cursor: pointer; position: relative; }
.sb-opt:hover { background: var(--fundo); color: var(--cor-primaria); }
/* selecao multipla (data-multi): abre espaco a esquerda e marca o selecionado */
.selectbusca[data-multi="1"] .sb-opt { padding-left: 28px; }
.selectbusca[data-multi="1"] .sb-opt.sb-sel { color: var(--cor-primaria-escura); font-weight: 600; }
.selectbusca[data-multi="1"] .sb-opt.sb-sel::before { content: '\2713'; position: absolute;
  left: 9px; top: 50%; transform: translateY(-50%); color: var(--cor-primaria); font-weight: 700; }
.sb-vazio { padding: 8px 10px; font-size: 12.5px; color: var(--texto-suave); display: none; }

/* ===== UTILITARIOS DE ESPACO ===== */
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.caixa-estreita { max-width: 460px; }
.caixa-media { max-width: 720px; }

/* Estado de carregamento da tabela (consulta assincrona) */
.tabela-scroll table[aria-busy="true"] tbody { opacity: .45; transition: opacity var(--transicao); }

/* ===== MODAL PROPRIO (confirmacao) ===== */
.modal-fundo {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(15, 23, 32, .48);
  padding: var(--sp-4);
}
.modal-fundo[hidden] { display: none; }
.modal-cx {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  width: 100%; max-width: 420px;
  overflow: hidden;
}
.modal-cab { padding: var(--sp-4) var(--sp-4) 0; }
.modal-titulo {
  font-family: var(--font-titulo);
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  color: var(--texto);
}
.modal-corpo { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.modal-msg { margin: 0; color: var(--texto-secundario); font-size: 14px; }
.modal-rodape {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}

/* ===== IMPORTACAO (upload drag-and-drop) ===== */
.im-card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--sombra);
}
.im-card h3 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-titulo);
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  display: flex; align-items: center; gap: var(--sp-2);
  justify-content: space-between;
}
.im-card h3 span { display: inline-flex; align-items: center; gap: var(--sp-2); }

.im-lbl {
  display: block;
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-secundario);
}

/* chips de tipo (pre-requisito) */
.im-plats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.im-plat {
  flex: 1 1 200px; text-align: left;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--transicao), background var(--transicao);
}
.im-plat:hover { border-color: var(--cor-primaria); }
.im-plat.ativo {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}
.im-plat strong { font-size: 13.5px; color: var(--texto); }
.im-plat small { font-size: 12px; color: var(--texto-secundario); }

/* dropzone */
.im-drop {
  display: block;
  border: 2px dashed var(--borda); border-radius: var(--raio);
  padding: 32px; text-align: center;
  color: var(--texto-secundario); cursor: pointer;
  user-select: none; transition: .15s;
}
.im-drop:hover, .im-drop.over {
  border-style: solid; border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave); color: var(--cor-primaria-texto);
}
.im-drop.loaded {
  border-style: solid; border-color: var(--sucesso);
  background: var(--sucesso-suave); color: var(--sucesso-forte);
}
.im-drop i { font-size: 36px; display: block; margin-bottom: 6px; }
.im-arq { display: block; margin-top: 6px; font-weight: 600; color: var(--sucesso-forte); }

/* input file escondido off-screen (nunca o visual nativo do browser) */
.im-inp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* linha de acao: botao ancorado a direita, mensagem a esquerda */
.im-acao {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  justify-content: flex-end; margin-top: var(--sp-4);
}
.im-acao .im-msg { margin-right: auto; font-size: 12.5px; color: var(--texto-secundario); }
.im-acao .im-msg.ok   { color: var(--sucesso-forte); font-weight: 600; }
.im-acao .im-msg.erro { color: var(--perigo); font-weight: 600; }
#imBtn:disabled { opacity: .45; cursor: not-allowed; }
.im-acao .ph-spinner-gap { animation: im-spin .8s linear infinite; }
@keyframes im-spin { to { transform: rotate(360deg); } }

/* arquivos prontos da Empresa Exemplo */
.im-exemplos { margin-top: var(--sp-4); }
.im-exemplos-lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* resultado */
.im-result { margin-top: var(--sp-4); }
.im-resumo { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.im-chip {
  font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--fundo-2); color: var(--texto-secundario);
}
.im-chip.ok   { background: var(--sucesso-suave); color: var(--sucesso-forte); }
.im-chip.erro { background: rgba(220,38,38,.12); color: var(--perigo); }
.im-tab-erros { width: 100%; border-collapse: collapse; font-size: 13px; }
.im-tab-erros th, .im-tab-erros td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--borda);
}
.im-tab-erros th { color: var(--texto-secundario); font-weight: 700; }
.im-tab-erros td:first-child { width: 70px; color: var(--perigo); font-weight: 600; }

/* ============================================================ DRE (Fase 5) */
/* Cartoes de indicador no topo de relatorio (Padrao_KPI_Dashboard), adaptados
   aos tokens do projeto (nunca cor de marca; verde/vermelho sao status). */
.mg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1000px) { .mg-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mg-kpis { grid-template-columns: 1fr; } }
.mg-kpi { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; }
.mg-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--borda); }
.mg-kpi.pos::before { background: var(--sucesso); }
.mg-kpi.neg::before { background: var(--perigo); }
.mg-kpi .ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  font-size: 22px; flex-shrink: 0; background: var(--fundo); color: var(--texto-secundario); }
.mg-kpi.pos .ico { background: var(--sucesso-suave); color: var(--sucesso-forte); }
.mg-kpi.neg .ico { background: var(--perigo-suave); color: var(--perigo-forte); }
.mg-kpi .corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mg-kpi .lbl { font-size: 10.5px; color: var(--texto-secundario); text-transform: uppercase;
  letter-spacing: .03em; font-weight: 700; line-height: 1.2; min-height: 25px; display: flex; align-items: flex-end; }
.mg-kpi .val { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1;
  font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--texto); }
.mg-kpi .disc { font-size: 10.5px; color: var(--texto-fraco); margin-top: 4px; line-height: 1.2;
  font-style: italic; min-height: 14px; }
.mg-kpi.pos .val { color: var(--sucesso-forte); }
.mg-kpi.neg .val { color: var(--perigo-forte); }

/* rotulo do periodo escolhido (nome da data, nunca "Periodo") */
.dre-periodo { font-family: var(--font-titulo); font-weight: 700; font-size: 15px;
  color: var(--texto); margin: 2px 0 12px; }

/* faixa de loading fora do botao (Padrao_Loading_Estado) */
.dre-load { padding: 22px 16px; text-align: center; color: var(--texto-suave); font-size: 13.5px; }
.dre-load[hidden] { display: none; }
.dre-load .ph-spinner-gap { display: inline-block; animation: im-spin .8s linear infinite; }

/* tabela hierarquica */
.tabela-dre td, .tabela-dre th { vertical-align: middle; }
.tabela-dre .dre-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-dre thead th.dre-num { text-align: right; }
.tabela-dre .dre-num.pos { color: var(--sucesso-forte); }
.tabela-dre .dre-num.neg { color: var(--perigo-forte); }
.dre-caret { width: 22px; height: 22px; margin-right: 4px; display: inline-grid; place-items: center;
  border: none; background: none; cursor: pointer; color: var(--texto-secundario);
  border-radius: var(--raio-sm); font-family: inherit; vertical-align: middle; }
.dre-caret:hover { background: var(--fundo); color: var(--cor-primaria); }
.dre-caret-vazio { cursor: default; }   /* nao usar "vazio": colide com o estado vazio global */
.dre-caret-vazio:hover { background: none; }
.dre-nome { vertical-align: middle; }
.tabela-dre .dre-grupo td { font-weight: 700; }
.tabela-dre .dre-subtotal td { background: var(--fundo); }
.tabela-dre .dre-linha.nivel-1 .dre-nome,
.tabela-dre .dre-linha.nivel-2 .dre-nome,
.tabela-dre .dre-linha.nivel-3 .dre-nome { font-weight: 400; color: var(--texto-secundario); }
.tabela-dre .dre-linha:hover td { background: var(--fundo-2); }

/* ---- Apuracao de saldos (DFC), mes a mes : conferencia que precisa zerar ---- */
.ap-bloco { margin-top: 20px; }
.ap-bloco[hidden] { display: none; }
.ap-tabela .ap-ent td.dre-num { color: var(--sucesso-forte); }
.ap-tabela .ap-sai td.dre-num { color: var(--perigo-forte); }
.ap-tabela .ap-destaque td { font-weight: 600; }
.ap-tabela .ap-final td { font-weight: 700; border-bottom: none; }
.ap-tabela .ap-final td.dre-col-conta { color: var(--texto); }
.ap-tabela td.ap-ok { background: var(--sucesso-suave); color: var(--sucesso-forte); }
.ap-tabela td.ap-erro { background: var(--perigo-suave); color: var(--perigo-forte); }
.ap-tabela .dre-linha:hover td.ap-ok { background: var(--sucesso-suave); }
.ap-tabela .dre-linha:hover td.ap-erro { background: var(--perigo-suave); }
/* saldo bancario abre em uma linha por conta (clique no nome ou na setinha) */
.ap-tabela .ap-abre td.dre-col-conta { cursor: pointer; }
.ap-tabela .ap-banco td { font-weight: 400; color: var(--texto-secundario); }
.ap-tabela .ap-banco td.dre-col-conta { padding-left: 52px; }
.ap-tabela .ap-banco[hidden] { display: none; }

/* ============================================ Filtro de periodo dos relatorios */
/* atalhos em botoes segmentados; "on" = periodo escolhido */
.rl-periodo-g { position: relative; }
.pr-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-btn { height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); border-radius: 7px; background: var(--branco);
  color: var(--texto-secundario); font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: background var(--transicao), border-color var(--transicao); }
.pr-btn:hover { border-color: var(--cor-primaria); color: var(--texto); }
.pr-btn.on { background: var(--cor-primaria-suave); border-color: var(--cor-primaria);
  color: var(--cor-primaria-texto); font-weight: 600; }
.pr-btn i { font-size: 15px; }

/* calendario de intervalo (dois meses) */
.pr-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 150;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-forte); padding: 12px 14px; width: max-content; max-width: calc(100vw - 32px); }
.pr-pop[hidden] { display: none; }
.pr-navs { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.pr-nav-sp { flex: 1; }
.pr-nav { width: 30px; height: 30px; display: inline-grid; place-items: center; border: none;
  background: none; border-radius: var(--raio-sm); cursor: pointer; color: var(--texto-secundario); }
.pr-nav:hover { background: var(--fundo); color: var(--texto); }
.pr-meses { display: flex; gap: 22px; flex-wrap: wrap; }
.pr-mes-cab { text-align: center; margin-bottom: 6px; }
.pr-mes-nome { border: none; background: none; font-family: var(--font-titulo); font-weight: 700;
  font-size: 14px; color: var(--texto); cursor: pointer; padding: 4px 8px; border-radius: var(--raio-sm); }
.pr-mes-nome:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); }
.pr-grade { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px 0; }
.pr-dsem { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-fraco); padding: 4px 0; }
.pr-dia { height: 32px; border: none; background: none; font-size: 13px; color: var(--texto);
  cursor: pointer; font-family: inherit; border-radius: 0; font-variant-numeric: tabular-nums; }
.pr-dia:hover { background: var(--fundo-2); }
.pr-dia.hoje { font-weight: 700; text-decoration: underline; }
.pr-dia.dentro { background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); }
.pr-dia.ponta { background: var(--cor-primaria); color: #fff; font-weight: 700; border-radius: var(--raio-sm); }
.pr-rod { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; border-top: 1px solid var(--borda); margin-top: 10px; padding-top: 10px; }
.pr-sel { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--texto-secundario); max-width: 380px; }
.pr-sel strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.pr-dica { flex-basis: 100%; font-size: 11.5px; color: var(--texto-fraco); }
.pr-acoes { display: flex; gap: 6px; }
.pr-acoes .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) { .pr-grade { grid-template-columns: repeat(7, 30px); } .pr-meses { gap: 12px; } }

/* observacao discreta embaixo do nome do periodo */
.rl-nota { font-size: 11.5px; color: var(--texto-fraco); margin: -8px 0 14px; }

/* cabecalho da tabela do relatorio: botoes de analise + expandir + exportar */
.rl-cab-tabela { flex-wrap: wrap; }
.rl-toggles { display: flex; gap: 4px; margin-left: auto; }
.rl-toggles .pr-btn { height: 30px; padding: 0 10px; font-size: 12px; }
.tabela-info + .rl-toggles { margin-left: var(--sp-2); }

/* colunas por mes: a coluna da conta fica presa ao rolar para o lado */
.tabela-dre th.dre-col-conta, .tabela-dre td.dre-col-conta { position: sticky; left: 0; z-index: 1;
  background: var(--branco); min-width: 260px; white-space: nowrap; text-align: left; }
/* celular: o nome pode quebrar, mas alinhado depois da setinha (nunca solto no meio) */
@media (max-width: 700px) {
  .tabela-dre th.dre-col-conta, .tabela-dre td.dre-col-conta { min-width: 170px; max-width: 220px;
    white-space: normal; }
  .tabela-dre td.dre-col-conta .dre-nome { display: inline-block; max-width: calc(100% - 30px); }
}
.tabela-dre .dre-subtotal td.dre-col-conta { background: var(--fundo); }
.tabela-dre .dre-linha:hover td.dre-col-conta { background: var(--fundo-2); }
.tabela-dre thead th.rl-bloco { text-align: center; border-bottom: 1px solid var(--borda); }
.tabela-dre thead th.rl-sub { font-size: 10.5px; }
.tabela-dre .rl-pct { color: var(--texto-suave); font-size: 12.5px; }
.tabela-dre .rl-col-total { border-left: 2px solid var(--borda); font-weight: 700; }
.tabela-dre td.rl-col-total ~ td.rl-col-total { border-left: none; }
.tabela-dre th.rl-col-total ~ th.rl-col-total { border-left: none; }
.tabela-dre .rl-col-media { background: var(--fundo); }

/* ============================================ Historico de importacoes */
.hi-intro { margin: 0 0 12px; }
.hi-arquivo { font-weight: 600; color: var(--texto); word-break: break-word; }
.hi-sub { font-size: 12px; color: var(--texto-suave); }
.hi-hist { max-width: 320px; }
.hi-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px; }
.hi-busca { display: flex; gap: 6px; }
.hi-busca input { height: 34px; min-width: 260px; padding: 0 10px; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: var(--branco); color: var(--texto); font-size: 13px; font-family: inherit; }
.hi-busca input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
.celula-acoes { display: inline-flex; align-items: center; gap: 2px; }
.celula-acoes form { display: inline; margin: 0; }
.celula-acoes .btn-icone { border: none; background: none; cursor: pointer; color: var(--texto-secundario);
  border-radius: var(--raio-sm); }
.celula-acoes .btn-icone:hover { background: var(--fundo); color: var(--texto); text-decoration: none; }
.btn-icone.perigo:hover { color: var(--perigo-forte); }
.form-sair { margin: 0; display: inline; }

/* importar: aviso de substituicao e escolha quando o arquivo ja foi importado */
.im-subst { display: block; }
.im-subst a { margin-left: 6px; }
.im-confirma { margin-top: var(--sp-4); padding: 12px 14px; border: 1px solid var(--aviso);
  border-radius: var(--raio-sm); background: var(--fundo); }
.im-confirma[hidden] { display: none; }
.im-confirma p { margin: 0 0 10px; font-size: 13.5px; color: var(--texto); }
.im-confirma-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== LANCAMENTOS DO LOTE: jeito "base do Excel" ===== */
.fc-scroll { max-height: calc(100vh - 250px); overflow: auto; }
.tabela-excel { font-size: 13px; }
.tabela-excel th, .tabela-excel td { padding: 6px 10px; border-right: 1px solid var(--borda); white-space: nowrap; }
.tabela-excel td { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.tabela-excel td.hi-hist { white-space: normal; min-width: 220px; max-width: 360px; }
.tabela-excel .btn-icone { width: 28px; height: 28px; }
.tabela-excel thead th { position: sticky; top: 0; z-index: 2; background: var(--fundo-2);
  text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--texto-secundario); }
.tabela thead th.fc-ligado { background: var(--cor-primaria-suave); color: var(--texto); }
.tabela-excel tbody tr:nth-child(even) { background: var(--fundo); }
.tabela-excel tbody tr:hover { background: var(--cor-primaria-suave); }
.fc-cab { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.tabela-excel th.dre-num .fc-cab { justify-content: flex-end; }
.fc-rot { flex: 1; }
.fc-ord { font-size: 12px; color: var(--cor-primaria-texto); }
.fc-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--branco);
  color: var(--texto-suave); cursor: pointer; padding: 0; flex: none; }
.fc-btn:hover { border-color: var(--cor-primaria); color: var(--texto); }
.fc-ligado .fc-btn { border-color: var(--cor-primaria-escura); color: var(--cor-primaria-texto); }
.fc-aviso { font-size: 12px; color: var(--cor-primaria-texto); display: inline-flex; align-items: center; gap: 4px; }

.fc-painel { position: absolute; z-index: 60; width: 290px; background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-forte);
  padding: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fc-acao { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 0;
  background: none; color: var(--texto); border-radius: var(--raio-sm); cursor: pointer; text-align: left; font: inherit; }
.fc-acao:hover:not(:disabled) { background: var(--fundo); }
.fc-acao:disabled { opacity: .45; cursor: default; }
.fc-sep { border: 0; border-top: 1px solid var(--borda); margin: 4px 0; }
.fc-busca { height: 32px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto); font: inherit; }
.fc-busca:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
.fc-lista { max-height: 260px; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 4px 0; }
.fc-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 10px; cursor: pointer; line-height: 1.35; }
.fc-item[hidden] { display: none; }
.fc-item:hover { background: var(--fundo); }
.fc-item input { accent-color: var(--cor-primaria); margin-top: 2px; flex: none; }
.fc-todos { font-weight: 600; border-bottom: 1px solid var(--borda); padding-bottom: 6px; margin-bottom: 2px; }
.fc-vazias { font-style: italic; color: var(--texto-suave); }
.fc-carregando { padding: 8px 10px; color: var(--texto-suave); }
.fc-erro { color: var(--perigo-forte); font-size: 12px; padding: 2px 4px; }
.fc-erro[hidden] { display: none; }
.fc-rodape { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }

/* ===== LANCAMENTO MANUAL ===== */
.mn-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.mn-tipo { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--borda);
  border-radius: var(--raio); color: var(--texto); text-decoration: none; background: var(--branco); }
.mn-tipo small { color: var(--texto-suave); font-size: 12px; }
.mn-tipo:hover { border-color: var(--cor-primaria); }
.mn-tipo.ativo { border-color: var(--cor-primaria-escura); background: var(--cor-primaria-suave); box-shadow: inset 0 0 0 1px var(--cor-primaria-escura); }
.mn-empresa { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.mn-novo { margin-top: 6px; }

/* ===== COLUNA ACOES SEMPRE A VISTA =====
   Em tabela larga (rola pro lado) a coluna Acoes fica grudada na direita, com
   fundo proprio, pra o lapis estar sempre a mao. A celula nao corta os icones. */
.tabela .celula-acoes { width: auto; }
.tabela-scroll .tabela th.col-acoes, .tabela-scroll .tabela td.col-acoes {
  position: sticky; right: 0; z-index: 1; background: var(--branco);
  box-shadow: inset 1px 0 0 var(--borda); }
.tabela-scroll .tabela thead th.col-acoes { z-index: 3; }
.tabela-excel thead th.col-acoes { background: var(--fundo-2); }
.tabela-excel td.col-acoes { max-width: none; overflow: visible; }
.tabela-excel tbody tr:nth-child(even) td.col-acoes { background: var(--fundo); }
.tabela-scroll .tabela tbody tr:hover td.col-acoes { background: var(--fundo); }
.tabela-excel tbody tr:hover td.col-acoes { background: var(--fundo-2); }

/* historico de importacoes: titulo de coluna numa linha so, nome do arquivo com espaco */
.tabela-hist thead th { white-space: nowrap; }
.tabela-hist td { white-space: nowrap; }
.tabela-hist td:nth-child(2) { white-space: normal; min-width: 240px; }
.tabela-hist td:nth-child(2) .hi-arquivo { word-break: normal; overflow-wrap: anywhere; }
.tabela-hist td:nth-child(5) { white-space: normal; min-width: 200px; }
.mn-dica { font-size: 12.5px; margin: 4px 0 12px; }
/* usuarios: empresas logo abaixo da explicacao, bloco de acesso separado do form */
.us-empresas { margin-top: 4px; }
.us-acesso { border-top: 1px solid var(--borda); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.us-acesso .rotulo { font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.us-acesso p { margin: 6px 0 10px; }
.campo input[disabled] { background: var(--fundo); color: var(--texto-secundario); }

/* ===== Painel de indicadores (templates/painel, static/js/painel.js) =====
   Graficos em SVG pintados so por token (Leitura_Correta_do_Grafico): grade fina
   e clara, titulo e legenda no canto superior esquerdo, uma cor por serie. */
.pn-vazio[hidden], .pn-conteudo[hidden], .pn-so-caixa[hidden] { display: none; }
.pn-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 1000px) { .pn-grade { grid-template-columns: minmax(0, 1fr); } }
.pn-graf { margin: 0; min-width: 0; }
.pn-largo { grid-column: 1 / -1; }
.pn-graf-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.pn-graf-tit { font-family: var(--font-titulo); font-size: 14.5px; font-weight: 700; color: var(--texto);
  margin: 0; text-align: left; display: flex; align-items: center; gap: 6px; }
.pn-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--texto-secundario); }
.pn-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.pn-leg-txt { color: var(--texto-fraco); }
.pn-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: var(--borda); }
.pn-sw.gf-s1 { background: var(--cor-primaria); }
.pn-sw.gf-s2 { background: var(--grafico-2); }
.pn-sw.gf-s-ly { background: var(--texto-fraco); opacity: .45; }
.pn-sw.gf-s-ent { background: var(--sucesso); }
.pn-sw.gf-s-sai { background: var(--perigo); }
.pn-sw.gf-s-desce { background: var(--perigo); opacity: .75; }
.pn-sw.gf-s-lucro { background: var(--sucesso); }
.pn-sw.pn-sw-nada { display: none; }
.pn-svg { width: 100%; min-height: 80px; }
.pn-svg svg { display: block; overflow: visible; }

.gf-grade { stroke: var(--borda); stroke-width: 1; opacity: .6; }
.gf-zero  { stroke: var(--texto-fraco); stroke-width: 1; }
.gf-eixo  { fill: var(--texto-fraco); font-size: 11px; font-variant-numeric: tabular-nums; }
.gf-eixo-h { fill: var(--texto-secundario); font-size: 12px; }
.gf-rot   { fill: var(--texto-secundario); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gf-barra { rx: 2; }
.gf-barra:hover, .gf-ponto:hover { opacity: .8; }
.gf-s1    { fill: var(--cor-primaria); }
.gf-s2    { fill: var(--grafico-2); }
.gf-s-ly  { fill: var(--texto-fraco); opacity: .45; }
.gf-s-ent { fill: var(--sucesso); }
.gf-s-sai { fill: var(--perigo); }
.gf-s-lucro { fill: var(--sucesso); }
.gf-s-desce { fill: var(--perigo); opacity: .75; }
.gf-forte { font-weight: 700; fill: var(--texto); }
.gf-liga  { stroke: var(--texto-fraco); stroke-width: 1; stroke-dasharray: 2 2; }
.gf-linha.gf-l2 { stroke: var(--grafico-2); }
.gf-ponto.gf-l2 { stroke: var(--grafico-2); }
.gf-ponto.gf-l2.gf-negativa { stroke: var(--perigo); fill: var(--perigo); }
.gf-barra.gf-s1.gf-negativa, .gf-barra.gf-s2.gf-negativa { fill: var(--perigo); }
.gf-linha { fill: none; stroke: var(--cor-primaria); stroke-width: 2.5; stroke-linejoin: round; }
.gf-ponto { fill: var(--branco); stroke: var(--cor-primaria); stroke-width: 2; }
.gf-ponto.gf-negativa { stroke: var(--perigo); }

.mg-kpi .disc .pn-var { font-style: normal; font-weight: 700; }
.mg-kpi .disc .pn-var.bom  { color: var(--sucesso-forte); }
.mg-kpi .disc .pn-var.ruim { color: var(--perigo-forte); }

.pn-equilibrio { margin-bottom: 14px; }
.pn-eq-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  align-items: end; margin: var(--sp-3) 0; }
@media (max-width: 1000px) { .pn-eq-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pn-eq-grade { grid-template-columns: minmax(0, 1fr); } }
.pn-eq-grade .campo { margin-bottom: 0; }
.pn-eq-grade input { text-align: right; font-variant-numeric: tabular-nums; }
.pn-eq-res { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--raio);
  background: var(--cor-primaria-suave); }
.pn-eq-res .rotulo { font-size: 12px; font-weight: 600; color: var(--texto-secundario); }
.pn-eq-valor { font-size: 20px; font-weight: 800; color: var(--cor-primaria-texto); font-variant-numeric: tabular-nums; }
.pn-eq-valor.neg { color: var(--perigo-forte); }
.pn-eq-comp { font-size: 11.5px; color: var(--texto-secundario); line-height: 1.3; }

/* ===== Comparar periodos (templates/comparar, static/js/comparar.js) ===== */
.cp-bar { margin-top: -6px; }
.cp-com-g { position: relative; }
.tabela-dre .cp-ini { border-left: 2px solid var(--borda); }      /* 1a coluna de cada bloco */
.tabela-dre .cp-col-var { background: var(--fundo); font-weight: 600; }

/* ---------- switch liga/desliga (Padrao_Toggle_OnOff), 42x24 ----------
   Checkbox real fica no DOM (invisivel, focavel pelo teclado); o <label> e a pista. */
.cv-sw { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.cv-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cv-sw label { position: absolute; inset: 0; background: var(--borda); border-radius: 999px;
  cursor: pointer; transition: .15s; }
.cv-sw label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.cv-sw input:checked + label { background: var(--sucesso); }
.cv-sw input:checked + label::after { transform: translateX(18px); }
.cv-sw input:focus-visible + label { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* formato dos valores nos relatorios: "÷ 1.000" e "Sem centavos" (valores.js) */
.vl-toggles { display: flex; align-items: center; gap: var(--sp-3);
  padding-left: var(--sp-3); border-left: 1px solid var(--borda); }
.vl-item { display: inline-flex; align-items: center; gap: 6px; }
.vl-lbl { font-size: 12px; font-weight: 600; color: var(--texto-secundario); cursor: pointer; white-space: nowrap; }
.vl-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); }
.vl-tag[hidden] { display: none; }
@media (max-width: 700px) { .vl-toggles { border-left: 0; padding-left: 0; } }

/* ============================================ Gestao Orcamentaria (rodada 16) */
/* ---- lista de modelos (cartoes) ---- */
.og-bar-info { justify-content: flex-end; }
.og-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.og-card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: var(--sp-4); display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--transicao); min-width: 0; }
.og-card:hover { border-color: var(--cor-primaria); }
.og-card-cab { display: flex; gap: 12px; align-items: flex-start; }
.og-card-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--raio-sm); display: grid;
  place-items: center; background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); font-size: 20px; }
.og-card-tit { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.og-card-nome { font-family: var(--font-titulo); font-weight: 700; font-size: 15px; color: var(--texto);
  text-decoration: none; letter-spacing: -.01em; overflow-wrap: anywhere; }
.og-card-nome:hover { color: var(--cor-primaria-texto); }
.og-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--texto-secundario);
  align-items: center; }
.og-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.og-card-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px;
  background: var(--fundo); border-radius: var(--raio-sm); }
.og-card-nums div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.og-card-lbl { font-size: 11px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.og-card-nums strong { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--texto); }
.og-card-nums strong.pos { color: var(--sucesso-forte); }
.og-card-nums strong.neg { color: var(--perigo-forte); }
.og-card-rod { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: auto; border-top: 1px solid var(--borda); padding-top: 10px; }
.og-card-rod .muted { font-size: 11.5px; }
.og-card-acoes { display: flex; align-items: center; gap: 4px; }
.og-card-acoes form { margin: 0; }
.og-card-novo { border: 2px dashed var(--borda); box-shadow: none; background: transparent; cursor: pointer;
  align-items: center; justify-content: center; text-align: center; min-height: 200px; font-family: inherit;
  color: var(--texto-secundario); }
.og-card-novo i { font-size: 34px; color: var(--cor-primaria-texto); }
.og-card-novo strong { font-size: 15px; color: var(--texto); }
.og-card-novo span { font-size: 12.5px; }
.og-card-novo:hover { background: var(--cor-primaria-suave); }

/* ---- janelas (novo modelo / importar) ---- */
.og-modal { max-width: 680px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.og-modal form { display: flex; flex-direction: column; min-height: 0; }
.og-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.og-modal-corpo { overflow-y: auto; min-height: 0; }
.og-linha { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.og-linha > .campo { flex: 1 1 150px; }
.og-rot-origem { display: block; font-size: 13px; font-weight: 600; color: var(--texto-secundario); margin-bottom: 6px; }
.og-origens { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.og-origens .im-plat strong { display: inline-flex; align-items: center; gap: 6px; }
.og-sec { border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--sp-3); display: flex;
  flex-direction: column; gap: 8px; background: var(--fundo); }
.og-sec[hidden] { display: none; }
.og-sec .muted { margin: 0; }
.og-presets .pr-btn { height: 32px; font-size: 12.5px; }
.og-dica-cresc { margin: 0; }
.selectbusca.sb-erro .sb-display { border-color: var(--perigo); }
.og-aviso-emp { color: var(--perigo); }
.og-zerar { margin-top: var(--sp-3); }
@media (max-width: 640px) { .og-origens { grid-template-columns: 1fr; } }

/* ---- editor do modelo ---- */
.og-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.og-cab-info { display: flex; gap: 12px; align-items: center; min-width: 0; }
.og-cab-nome { font-family: var(--font-titulo); font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.og-cab-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
a.pr-btn { text-decoration: none; }
.og-salvar { display: flex; align-items: center; gap: 10px; }
.og-status { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }
.og-status.og-st-ok { color: var(--sucesso-forte); }
.og-status.og-st-sujo { color: var(--aviso); font-weight: 600; }
.og-status.og-st-erro { color: var(--perigo); font-weight: 600; }
.og-salvar .btn:disabled { opacity: .45; cursor: default; }

.og-grade td.og-cel { padding: 2px 4px; }
.og-in { width: 104px; height: 30px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 13px; font-family: inherit; color: var(--texto); background: transparent;
  border: 1px solid transparent; border-radius: var(--raio-sm); }
.og-grade .og-folha .og-in { background: var(--fundo); }
.og-in:hover { border-color: var(--borda); }
.og-in:focus { outline: none; border-color: var(--cor-primaria); background: var(--branco); box-shadow: var(--foco); }
.og-in[readonly] { background: transparent; border-color: transparent; box-shadow: none; }
.og-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
  font-weight: 600; vertical-align: middle; background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); }
.og-badge.og-badge-man { background: var(--fundo-2); color: var(--texto-suave); }
.og-copiar { margin-left: 4px; width: 22px; height: 22px; display: inline-grid; place-items: center; border: none;
  background: none; color: var(--texto-fraco); cursor: pointer; border-radius: var(--raio-sm); vertical-align: middle; }
.og-copiar:hover { background: var(--fundo-2); color: var(--cor-primaria-texto); }

/* ---- painel de Regras (gaveta a direita) ---- */
.og-gaveta-fundo { position: fixed; inset: 0; z-index: 900; background: rgba(15, 23, 32, .38); }
.og-gaveta-fundo[hidden], .og-gaveta[hidden] { display: none; }
.og-gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 901; width: min(640px, 100vw);
  background: var(--branco); border-left: 1px solid var(--borda); box-shadow: var(--sombra-forte);
  display: flex; flex-direction: column; }
.og-gaveta-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.og-gaveta-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: var(--sp-4); border-bottom: 1px solid var(--borda); }
.og-gaveta-sub { display: block; font-size: 12.5px; margin-top: 4px; }
.og-gaveta-corpo { flex: 1; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-4); }
.og-gaveta-rod { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--borda); background: var(--fundo); }
.og-gaveta-rod .muted { margin-right: auto; font-size: 12px; }
.og-gv-sec { padding-top: var(--sp-4); }
.og-gv-sec + .og-gv-sec { border-top: 1px solid var(--borda); margin-top: var(--sp-4); }
.og-gv-sec .ajuda-campo { display: block; margin: 0 0 10px; }
.og-ref-custom { margin-top: 10px; }
.og-ref-custom[hidden] { display: none; }
.og-rg-lista { display: flex; flex-direction: column; }
.og-rg-linha { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--borda);
  min-height: 42px; }
.og-rg-grupo .og-rg-nome { font-weight: 700; color: var(--texto); }
.og-rg-linha.nivel-1 { padding-left: 18px; }
.og-rg-linha.nivel-2 { padding-left: 36px; }
.og-rg-linha.nivel-3 { padding-left: 54px; }
.og-rg-abre { flex: 0 0 auto; }
.og-rg-nome { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--texto-secundario);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-rg-ctrl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.og-rg-sb { width: 210px; }
.og-rg-ctrl:not(.og-rg-propria) .sb-label { color: var(--texto-fraco); }
.og-rg-campo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texto-secundario); }
.og-rg-campo[hidden] { display: none; }
.og-rg-in { width: 64px; height: 32px; padding: 0 8px; text-align: right; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: var(--branco); color: var(--texto); font-size: 13px; font-family: inherit; }
.og-rg-in.og-rg-valor { width: 96px; }
.og-rg-in:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
.og-rg-filhos[hidden] { display: none; }
@media (max-width: 640px) {
  .og-rg-linha { flex-wrap: wrap; }
  .og-rg-nome { flex-basis: calc(100% - 40px); }
  .og-rg-ctrl { width: 100%; justify-content: flex-start; padding-left: 26px; }
  .og-cab-acoes .btn { flex: 1 1 auto; }
}

/* ---- De-Para ---- */
.og-depara td { vertical-align: middle; }

/* ---- Orcado x Realizado ---- */
.tabela-dre .or-o { color: var(--texto-suave); }
.tabela-dre .dre-grupo .or-o { color: var(--texto-secundario); }
.tabela-dre td.or-r { vertical-align: top; }
.tabela-dre td.or-sem { color: var(--texto-fraco); }
.or-var { font-size: 10.5px; font-weight: 600; color: var(--texto-fraco); margin-top: 1px; }
.or-var.bom { color: var(--sucesso-forte); }
.or-var.ruim { color: var(--perigo-forte); }
.or-var.or-var-cheia { font-size: 12.5px; margin-top: 0; }

/* ---- Analise vertical (editor do modelo e Orcado x Realizado) ---- */
.og-av, .or-av { font-size: 10.5px; font-weight: 600; color: var(--texto-suave); line-height: 1.2;
  margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-grade td.og-cel .og-av { padding-right: 9px; }
.or-av-dif.bom { color: var(--sucesso-forte); }
.or-av-dif.ruim { color: var(--perigo-forte); }
td.or-av-col { font-size: 12.5px; }
td.or-av-dif { font-weight: 600; }
/* filtro de estouro: grupo que so aparece pra dar caminho ate a conta que estourou */
.tabela-dre tr.or-ctx .dre-nome { color: var(--texto-fraco); }
.rl-toggles + .or-filtros { margin-left: var(--sp-2); }
.tabela-dre td.or-estouro { background: var(--perigo-suave); box-shadow: inset 0 -2px 0 var(--perigo-forte); }
.or-filtros .pr-btn i { font-size: 13px; }

/* ===== PLANO DE ACAO (Planos e Tarefas) ===== */
.campo textarea { padding: 9px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto); font: inherit; font-size: 14px; resize: vertical; min-height: 64px; }
.campo textarea:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
.campo input:disabled, .campo textarea:disabled { background: var(--fundo); color: var(--texto-suave); cursor: not-allowed; }
.selectbusca.sb-travado { pointer-events: none; }
.selectbusca.sb-travado .sb-display { background: var(--fundo); color: var(--texto-suave); }
.selectbusca.sb-travado .sb-display i { visibility: hidden; }
.sb-opt.sb-off { display: none; }
body.pa-sem-rolagem { overflow: hidden; }
.pa-g-busca input { width: 220px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto); font-size: 13.5px; }
.pa-g-busca input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
@media (max-width: 720px) { .pa-g-busca input { width: 100%; } }

/* situacao: ponto de cor + texto (nunca so a cor) */
.pa-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--texto-fraco); }
.pa-ponto-aberta { background: var(--cor-primaria); }
.pa-ponto-andamento { background: var(--aviso); }
.pa-ponto-concluida { background: var(--sucesso); }
.pa-ponto-cancelada { background: var(--texto-fraco); }
.pa-sit { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600;
  color: var(--texto-secundario); white-space: nowrap; }
.pa-sit-cancelada { color: var(--texto-fraco); }

.pa-chip-conta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.pa-chip-conta[hidden], .pa-chip-conta .badge[hidden] { display: none; }
.pa-chip-conta .badge { font-size: 12.5px; padding: 4px 6px 4px 10px; }
.pa-chip-x { border: none; background: none; color: inherit; cursor: pointer; padding: 0 2px; display: inline-grid; place-items: center; }
.pa-resumo { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px;
  color: var(--texto-suave); margin: 0 0 10px; min-height: 18px; }
.pa-res-tot { font-weight: 700; color: var(--texto); }
.pa-res-it { display: inline-flex; align-items: center; gap: 4px; }
.pa-atrasada { color: var(--perigo-forte) !important; font-weight: 600; }
.pa-hoje { color: var(--aviso); font-weight: 600; }

/* lista */
.pa-tabela th.pa-ord { cursor: pointer; user-select: none; white-space: nowrap; }
.pa-tabela th.pa-ord:hover { color: var(--texto); }
.pa-tabela th.pa-ord-asc .pa-th-txt::after { content: ' \2191'; }
.pa-tabela th.pa-ord-desc .pa-th-txt::after { content: ' \2193'; }
.pa-linha { cursor: pointer; }
.pa-linha:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.pa-num { color: var(--texto-fraco); font-variant-numeric: tabular-nums; width: 1%; }
.pa-col-tit { min-width: 260px; }
.pa-tit { font-weight: 600; color: var(--texto); }
.pa-conta { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.pa-conta i { font-size: 12px; }
.pa-ncom { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--texto-suave); }
.pa-col-tit .pa-ncom { margin-top: 2px; }
.pa-dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-emp { color: var(--texto-secundario); }

/* kanban */
.pa-kanban { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 12px;
  overflow-x: auto; padding-bottom: 6px; align-items: start; }
.pa-kanban[hidden] { display: none; }
.pa-col { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px; min-height: 180px; transition: border-color var(--transicao), background var(--transicao); }
.pa-col-alvo { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.pa-col-cab { display: flex; align-items: center; gap: 7px; font-family: var(--font-titulo);
  font-size: 13.5px; font-weight: 700; color: var(--texto); padding: 2px 4px 10px; }
.pa-col-cab .pa-col-ponto { width: 9px; height: 9px; border-radius: 50%; }
.pa-col-aberta .pa-col-ponto { background: var(--cor-primaria); }
.pa-col-andamento .pa-col-ponto { background: var(--aviso); }
.pa-col-concluida .pa-col-ponto { background: var(--sucesso); }
.pa-col-cancelada .pa-col-ponto { background: var(--texto-fraco); }
.pa-col-n { margin-left: auto; font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--texto-suave); background: var(--branco); border-radius: var(--raio-full); padding: 1px 8px; }
.pa-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.pa-col-vazia { font-size: 12.5px; color: var(--texto-fraco); text-align: center; padding: 18px 0;
  border: 1px dashed var(--borda); border-radius: var(--raio-sm); }
.pa-card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-sm);
  padding: 10px 12px; cursor: grab; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; }
.pa-card:hover { border-color: var(--cor-primaria); }
.pa-card:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.pa-card-atrasada { box-shadow: inset 3px 0 0 var(--perigo-forte), var(--sombra); }
.pa-arrastando { opacity: .5; }
.pa-card-tit { font-size: 13.5px; font-weight: 600; color: var(--texto); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pa-card .pa-conta { margin: 0; }
.pa-card-emp { font-size: 11.5px; color: var(--texto-fraco); }
.pa-card-rod { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--texto-suave); }
.pa-quem { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.pa-avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); font-size: 10.5px; font-weight: 700; }
.pa-card-dir { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.pa-prazo { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.pa-col-cancelada .pa-card { opacity: .75; }
@media (max-width: 860px) {
  .pa-kanban { grid-template-columns: repeat(4, minmax(240px, 82vw)); scroll-snap-type: x mandatory; }
  .pa-col { scroll-snap-align: start; }
  .pa-card { cursor: pointer; }
}

/* gaveta */
.pa-grade2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.pa-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.pa-grade2 > *, .pa-grade3 > * { min-width: 0; }
@media (max-width: 560px) { .pa-grade2, .pa-grade3 { grid-template-columns: 1fr; } }
.pa-situacao { flex-wrap: wrap; }
.pa-situacao .pr-btn { height: 34px; font-size: 12.5px; }
.pa-data { position: relative; }
.pa-data-in { display: flex; height: 40px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); overflow: hidden; }
.pa-data-in:focus-within { border-color: var(--cor-primaria); box-shadow: var(--foco); }
.pa-data-in input { flex: 1; min-width: 0; border: none; background: none; padding: 0 10px; color: var(--texto);
  font-size: 14px; font-variant-numeric: tabular-nums; outline: none; }
.pa-data-btn { border: none; border-left: 1px solid var(--borda); background: var(--fundo); width: 38px;
  cursor: pointer; color: var(--texto-secundario); display: grid; place-items: center; }
.pa-data-btn:hover { color: var(--cor-primaria-texto); }
.pa-data-erro .pa-data-in { border-color: var(--perigo); }
.pa-data-off .pa-data-in { background: var(--fundo); }
.pa-data-off .pa-data-in input, .pa-data-off .pa-data-btn { cursor: not-allowed; color: var(--texto-suave); }
.pa-data .pa-cal { top: calc(100% + 4px); }
.pa-data .pa-cal.pa-cal-cima { top: auto; bottom: calc(100% + 4px); }
.pa-data[data-campo="data_conclusao"] .pa-cal { left: auto; right: 0; }
.pa-cal-tit { cursor: default; }
.pa-cal .pr-rod { justify-content: flex-end; }

.pa-dup { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--sp-4); padding: 10px 12px;
  border-radius: var(--raio-sm); background: var(--perigo-suave); color: var(--texto); font-size: 13px; }
.pa-dup[hidden] { display: none; }
.pa-dup > i { color: var(--perigo-forte); font-size: 18px; flex: none; margin-top: 1px; }
.pa-dup ul { margin: 6px 0 0; padding-left: 18px; }
.pa-link { border: none; background: none; padding: 0; color: var(--cor-primaria-texto); font: inherit;
  font-weight: 600; cursor: pointer; text-decoration: underline; text-align: left; }

.pa-origem { margin-top: var(--sp-4); border: 1px solid var(--borda); border-left: 3px solid var(--cor-primaria);
  border-radius: var(--raio-sm); padding: 10px 12px; background: var(--fundo); }
.pa-origem[hidden] { display: none; }
.pa-origem-cab { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); display: flex; align-items: center; gap: 5px; }
.pa-origem-conta { font-weight: 700; color: var(--texto); margin: 4px 0 6px; font-size: 14px; }
.pa-origem-nums { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.pa-origem-nums[hidden] { display: none; }
.pa-num-it dt { font-size: 11px; color: var(--texto-suave); }
.pa-num-it dd { margin: 0; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--texto); }
.pa-num-it dd.neg { color: var(--perigo-forte); }
.pa-origem-ctx { font-size: 12px; margin-top: 6px; }
.pa-origem-ctx:empty { display: none; }

.pa-andamento .sub-secao { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.pa-coments { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-com { border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 8px 10px; background: var(--branco); }
.pa-com-sistema { background: var(--fundo); border-style: dashed; }
.pa-com-sistema .pa-com-txt { color: var(--texto-suave); font-size: 12.5px; }
.pa-com-cab { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave); margin-bottom: 3px; }
.pa-com-cab strong { color: var(--texto-secundario); }
.pa-com-em { margin-left: auto; font-variant-numeric: tabular-nums; }
.pa-com-txt { font-size: 13.5px; color: var(--texto); white-space: pre-wrap; word-break: break-word; }
.pa-com-vazio { font-size: 13px; color: var(--texto-fraco); }
.pa-btn-excluir { color: var(--perigo-forte); }
.pa-form-excluir { margin: 0; }
.pa-form-excluir[hidden] { display: none; }
.pa-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100;
  margin: 0; box-shadow: var(--sombra-forte); background-color: var(--branco); }
.pa-toast[hidden] { display: none; }

/* marcacao discreta nos relatorios: bandeira da acao aberta + botao que so aparece no hover */
.ac-marca { display: inline-grid; place-items: center; border: none; background: none; padding: 0 2px;
  margin-left: 6px; color: var(--cor-primaria-texto); font-size: 13px; cursor: pointer; vertical-align: -1px; }
.ac-marca.ac-atrasada { color: var(--perigo-forte); }
.ac-marca:hover { filter: brightness(.85); }
.ac-abrir { display: inline-grid; place-items: center; width: 22px; height: 22px; border: none; margin-left: 4px;
  border-radius: var(--raio-sm); background: none; color: var(--texto-fraco); font-size: 14px; cursor: pointer;
  vertical-align: middle; opacity: 0; transition: opacity var(--transicao); }
.ac-abrir:hover, .ac-abrir:focus-visible { background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); opacity: 1; }
.tabela-dre tr:hover .ac-abrir, .ac-abrir:focus-visible { opacity: 1; color: var(--cor-primaria-texto); }
@media (hover: none) { .ac-abrir { opacity: .55; } }

/* Plano de Acao: filtro no cabecalho da lista (funil por coluna) */
.pa-em-lista .pa-so-kanban { display: none; }
.pa-th { display: inline-flex; align-items: center; gap: 2px; }
.pa-th-f { width: 24px; height: 24px; display: inline-grid; place-items: center; flex: none;
  border: none; background: none; border-radius: var(--raio-sm); cursor: pointer;
  color: var(--texto-fraco); font-size: 14px; opacity: .55; transition: opacity .15s, background .15s; }
.pa-tabela th:hover .pa-th-f, .pa-th-f:focus-visible, .pa-th-f[aria-expanded="true"] { opacity: 1; }
.pa-th-f:hover { background: var(--fundo); color: var(--texto); }
.pa-th-f:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.pa-th-f.pa-th-on { opacity: 1; color: var(--cor-primaria-texto); background: var(--cor-primaria-suave); }
@media (hover: none) { .pa-th-f { opacity: .8; } }

.pa-cf-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: -4px 0 10px; }
.pa-cf-chips[hidden] { display: none; }
.pa-cf-chip { font-size: 12.5px; padding: 4px 6px 4px 9px; display: inline-flex; align-items: center; gap: 2px;
  max-width: 100%; overflow-wrap: anywhere; }

.pa-fpop { position: fixed; z-index: 400; width: 300px; max-width: calc(100vw - 16px);
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-forte); padding: 10px 12px 12px; }
.pa-fpop[hidden] { display: none; }
.pa-fpop-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pa-fpop-tit { font-size: 13px; font-weight: 700; color: var(--texto); }
.pa-fpop-in { width: 100%; height: 36px; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: var(--branco); color: var(--texto); font-size: 13.5px; padding: 0 10px; }
.pa-fpop-in:focus { outline: none; border-color: var(--cor-primaria); box-shadow: var(--foco); }
.pa-fpop-in + .pa-fpop-ops { margin-top: 8px; }
.pa-fpop-ops { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.pa-fpop-op { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--raio-sm);
  font-size: 13.5px; color: var(--texto); cursor: pointer; }
.pa-fpop-op[hidden] { display: none; }
.pa-fpop-op:hover { background: var(--fundo); }
.pa-fpop-op input { accent-color: var(--cor-primaria); width: 15px; height: 15px; margin: 0; flex: none; }
.pa-fpop-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pa-fpop-atalhos:empty { display: none; }
.pa-fpop-at.pr-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.pa-fpop-datas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pa-fpop-datas > * { min-width: 0; }
.pa-fpop-data .fu-lbl { display: block; margin-bottom: 3px; }
.pa-fpop-datas .pa-data-in { height: 36px; }
.pa-fpop-datas .pa-data-in input { padding: 0 7px; font-size: 13px; }
.pa-fpop-datas .pa-data-btn { width: 32px; }
.pa-fpop-datas .pa-fpop-data:last-child .pa-cal { left: auto; right: 0; }
.pa-fpop-dica { font-size: 11.5px; color: var(--texto-suave); margin: 8px 0 0; line-height: 1.4; }