/* Componentes. Nenhum carrega margem de separacao: quem separa e o gap do container. */

/* Card base */
.cd {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Botao: 44px de altura de toque ate 720px; no desktop, a altura padrao de campo (--fu-h). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

@media (min-width: 721px) {
  .btn { min-height: var(--fu-h); }
}

.btn:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }
.btn:disabled { opacity: .75; cursor: not-allowed; } /* texto do primario desabilitado com 4,5:1 */

.btn-primario { background: var(--cor-primaria); color: var(--texto-sobre-cor-primaria); }
.btn-primario:hover { background: var(--cor-primaria-hover); }

.btn-secundario { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); }
.btn-secundario:hover { background: var(--fundo); }

/* Acao de menos peso (voltar, sair): so o texto, com a mesma altura de toque. */
.btn-texto { background: transparent; color: var(--cor-primaria-texto); padding: 0 var(--sp-2); }
.btn-texto:hover { text-decoration: underline; }
.btn-texto:disabled { opacity: 1; color: var(--texto-suave); } /* "Saindo...": 4,5:1 sem fundo proprio */

.btn-bloco { width: 100%; }

/* Fantasma: acao de apoio (meu perfil, sair, menu), sem fundo. */
.btn-ghost { background: transparent; color: var(--texto-suave); }
.btn-ghost:hover { background: var(--fundo); color: var(--texto); }
.btn-ghost:disabled { opacity: 1; color: var(--texto-suave); }

/* So o icone: o nome vai no title e no aria-label. 44px de toque ate 720px. */
.btn-icone { flex: 0 0 auto; width: 44px; padding: 0; font-size: 18px; }

/* Pequeno: acao da topbar. */
.btn-sm { padding: 0 var(--sp-3); font-size: var(--fs-sm); }

@media (min-width: 721px) {
  .btn-icone { width: 34px; min-height: 34px; }
  .btn-sm { min-height: 34px; }
}

.btn-perigo { background: var(--vermelho); color: var(--branco); }
.btn-perigo:hover { filter: brightness(.92); }

/* Icone de acao destrutiva na linha da tabela: vermelho so no hover. */
.btn-icone-perigo:hover { background: var(--vermelho-suave); color: var(--vermelho); }

/* Acao de modulo que ainda nao tem tela: o clique so avisa (data-em-breve). */
.btn.esmaecido, .btn.esmaecido:hover { background: transparent; color: var(--texto-fraco); cursor: not-allowed; }

/* Acao que o perfil nao alcanca: fica no lugar, apagada, com o motivo no title; o clique so explica. */
.btn.desabilitado { opacity: .75; cursor: not-allowed; }
.btn-primario.desabilitado:hover { background: var(--cor-primaria); }
.btn-secundario.desabilitado:hover { background: var(--superficie); }

/* Estrela de favorito: cheia e ambar quando marcada. */
.estrela.favorita, .estrela.favorita:hover { color: var(--ambar); }

/* Campo de formulario: rotulo em cima, 13px/600, sem caixa alta.
   Ate 720px: 44px de toque e letra de 16px (o iOS da zoom no foco de campo menor que 16px). */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.campo-rotulo { font-size: var(--fs-sm); font-weight: 600; color: var(--texto); }

.campo-entrada {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--fs-lg);
  transition: border-color var(--transicao);
}

@media (min-width: 721px) {
  .campo-entrada { height: var(--fu-h); font-size: var(--fs-md); }
}

.campo-entrada:focus { outline: 2px solid var(--cor-primaria-escura); outline-offset: 1px; border-color: var(--cor-primaria-escura); }

.campo-codigo { letter-spacing: .15em; font-variant-numeric: tabular-nums; }

.campo-ajuda { font-size: var(--fs-xs); color: var(--texto-suave); }

/* Texto longo (motivo): a altura sai do rows e cresce so na vertical. */
.campo-entrada.campo-area { height: auto; min-height: 88px; padding: var(--sp-2) var(--sp-3); line-height: 1.45; resize: vertical; }

/* Campos lado a lado que viram coluna quando nao cabem. */
.form-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--sp-4);
}

/* Aceite (termos de uso): caixa de marcar e o texto ao lado, o rotulo inteiro clicavel. */
.aceite { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-md); line-height: 1.45; cursor: pointer; }

/* No toque, o rotulo inteiro (alvo do clique) com 44px de altura. */
@media (max-width: 720px) {
  .aceite { min-height: 44px; align-items: center; }
}

/* Caixa de marcar propria: borda de campo, marcada na cor da marca com o visto; no cabecalho da
   selecao em lote, o traco quando so parte da pagina esta marcada. */
.tsel {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--borda-forte);
  border-radius: 5px;
  background: var(--superficie);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.tsel::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--texto-sobre-cor-primaria);
  border-bottom: 2px solid var(--texto-sobre-cor-primaria);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}

.tsel:checked { background: var(--cor-primaria); border-color: var(--cor-primaria-escura); }
.tsel:checked::before { opacity: 1; }
.tsel:indeterminate { background: var(--cor-primaria); border-color: var(--cor-primaria-escura); }
.tsel:indeterminate::before { width: 8px; height: 0; border-left: 0; transform: none; opacity: 1; }
.tsel:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }
.tsel.campo-invalido { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }

/* Campo com problema no envio do modal (o main.js marca e tira quando a pessoa mexe). */
.campo-entrada.campo-invalido,
.selectbusca.campo-invalido .sb-display { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }

/* Aviso dentro da tela (erro do formulario, sessao expirada). */
.aviso {
  padding: var(--sp-3);
  border-radius: var(--raio-sm);
  font-size: var(--fs-md);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.aviso-erro { background: var(--vermelho-suave); color: var(--vermelho); }
.aviso-info { background: var(--azul-info-suave); color: var(--azul-info); }
.aviso-alerta { background: var(--ambar-suave); color: var(--ambar); }

/* Espera do envio: spinner com o texto do que esta acontecendo. O main.js monta dentro da area
   do data-loading-target; vazia, a area nao ocupa o gap do cartao. */
.area-envio:empty { display: none; }

.loading-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  text-align: center;
}

.spinner-circle {
  width: 44px;
  height: 44px;
  border: 4px solid var(--borda);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  animation: spinner-rotate .8s linear infinite;
}

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* Movimento reduzido: o spinner continua dizendo que esta trabalhando, so mais devagar. */
@media (prefers-reduced-motion: reduce) {
  .spinner-circle { animation-duration: 2.4s; }
}

.loading-text { font-size: var(--fs-md); font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }

/* Espera de tela inteira (trocar de empresa, sair, envio do modal): mostrarLoading(texto) no
   main.js. Na camada do toast, acima do modal; o toast vem depois no HTML e fica por cima. */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--cor-overlay);
  backdrop-filter: blur(2px);
}

.loading-overlay.aberto { display: flex; }

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  padding: 28px 44px;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
}

/* Grade de cards: quantas colunas couberem, cada card com no minimo 280px. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  align-items: stretch;
}

.grid > .cd { height: 100%; }

.cd-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cd-titulo { font-size: 14px; font-weight: 600; color: var(--texto); }
.cd-icone { font-size: 22px; color: var(--cor-primaria-escura); }
.cd-seta { font-size: 16px; color: var(--texto-suave); transition: transform var(--transicao), color var(--transicao); }

.cd-clicavel {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.cd-clicavel:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra); transform: translateY(-2px); }
.cd-clicavel:hover .cd-seta { color: var(--cor-primaria-escura); transform: translateX(2px); }
.cd-clicavel:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }

.cd.esmaecido { background: var(--fundo); box-shadow: none; cursor: not-allowed; }
.cd.esmaecido .cd-icone { color: var(--texto-fraco); }
.cd.esmaecido .cd-titulo { color: var(--texto-suave); }

/* Etiqueta de modulo que ainda nao tem tela. */
.tag-em-breve {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--fundo);
  color: var(--texto-suave);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Chip de situacao: texto da cor sobre o fundo suave da mesma cor (4,5:1 ou mais). */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--raio-full);
  background: var(--fundo);
  color: var(--texto-suave);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.chip-verde { background: var(--verde-suave); color: var(--verde); }
.chip-azul { background: var(--azul-info-suave); color: var(--azul-info); }
.chip-ambar { background: var(--ambar-suave); color: var(--ambar); }
.chip-vermelho { background: var(--vermelho-suave); color: var(--vermelho); }
.chip-neutro { background: var(--fundo); color: var(--texto-suave); box-shadow: inset 0 0 0 1px var(--borda); }

/* Valores escondidos (preferencia Ocultar valores): todo numero de dinheiro usa .dinheiro. */
.ocultar-valores .dinheiro { filter: blur(6px); user-select: none; }

/* Estado vazio: icone, titulo e o que fazer. */
.vz {
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.vz-icone { padding-bottom: 16px; font-size: 40px; color: var(--texto-fraco); }
.vz-titulo { font-family: var(--font-titulo); font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--texto); }
.vz-sub { max-width: 400px; padding-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); }

/* Vazio que e secao de um card (nao a tela inteira): nao estica, so respira. */
.vz-inline { flex: none; min-height: 150px; padding: 22px 16px; }
.vz-inline .vz-icone { padding-bottom: 10px; font-size: 30px; }
.vz-inline .vz-titulo { font-size: 14.5px; }
.vz-inline .vz-sub { font-size: 12.5px; }

/* Popover (Novo registro): abre do canto do botao, com escala. */
.popover-ancora { position: relative; }

.popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-md);
  transform-origin: top left;
  opacity: 0;
  transform: scale(.96);
  visibility: hidden;
  pointer-events: none;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s, visibility 0s linear .16s;
}

.popover-direita { left: auto; right: 0; transform-origin: top right; }

/* Popover que abre para cima (botao no rodape do modal). */
.popover-acima { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.popover-acima.popover-direita { transform-origin: bottom right; }

.popover.aberto {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s;
}

.pop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pop-item i { font-size: 17px; color: var(--cor-primaria-escura); }
.pop-texto { flex: 1; min-width: 0; }

.pop-item kbd {
  padding: 1px 5px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--fundo);
  color: var(--texto-suave);
  font-family: var(--font-mono);
  font-size: 11px;
}

.pop-item:hover { background: var(--cor-primaria-suave); }
.pop-item:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: -2px; background: var(--cor-primaria-suave); }
/* Item que liga um estado (Filtro por coluna aberto): aceso enquanto vale. */
.pop-item.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 600; }
.pop-item.esmaecido { color: var(--texto-suave); cursor: not-allowed; }
.pop-item.esmaecido i { color: var(--texto-fraco); }
.pop-item.pop-perigo, .pop-item.pop-perigo i { color: var(--vermelho); }
.pop-item.pop-perigo:hover, .pop-item.pop-perigo:focus-visible { background: var(--vermelho-suave); }

@media (max-width: 720px) {
  .pop-item { min-height: 44px; }
}

/* Toggle liga/desliga: o checkbox fica escondido e o label e o switch (role="switch"). */
.cv-sw {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
}

.cv-sw input { display: none; }

.cv-sw label {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--borda-forte); /* desligado com 3:1 sobre a topbar */
  cursor: pointer;
  transition: background .15s;
}

.cv-sw label::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: var(--sombra-bolinha);
  transition: transform .15s;
}

.cv-sw input:checked + label { background: var(--verde-toggle); }
.cv-sw input:checked + label::after { transform: translateX(18px); }
.cv-sw label:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }

/* Toggle tipo 1: presets (periodo, filtro rapido). */
.tg-presets {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--superficie);
}

.tg-presets button {
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--texto-secundario);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.tg-presets button:hover { color: var(--texto); }
.tg-presets button.on { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

/* Toggle tipo 2: escolha entre poucas opcoes coladas (A-, A, A+). */
/* Contorno por dentro no lugar da borda: os botoes enchem a altura do grupo (44px de toque). */
.tg-fonte { display: inline-flex; border-radius: var(--raio-sm); outline: 1px solid var(--borda-forte); outline-offset: -1px; overflow: hidden; }

.tg-fonte button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: var(--superficie);
  color: var(--texto-secundario);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.tg-fonte button + button { border-left: 1px solid var(--borda-forte); }
.tg-fonte button.on { background: var(--cor-primaria); color: var(--texto-sobre-cor-primaria); }
.tg-presets button:focus-visible, .tg-fonte button:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 1px; }

/* No campo do formulario, o grupo fica do tamanho dos botoes. */
.campo > .tg-presets, .campo > .tg-fonte { align-self: flex-start; max-width: 100%; flex-wrap: wrap; }

/* Grupo que o perfil nao muda: fica no lugar, apagado, com o motivo no title do grupo. */
.tg-presets[aria-disabled="true"] { opacity: .75; }
.tg-presets[aria-disabled="true"] button { cursor: not-allowed; }
.tg-presets[aria-disabled="true"] button:hover { color: var(--texto-secundario); }

/* Ate 720px todo alvo de toque tem 44x44. Interruptor e presets ganham a area num pseudo-elemento,
   sem mudar o desenho: 42x24 vira 44x44; o preset de 36 cresce 4px para cima e para baixo (ate a
   borda do grupo) e 2px para os lados (metade do vao). No campo do formulario o grupo nao tem a
   altura da barra de filtros: o botao vai a 36 (o grupo a 44) e o ::before leva o toque a 46. */
@media (max-width: 720px) {
  .cv-sw label::before { content: ""; position: absolute; inset: -10px -1px; }
  .tg-presets button { position: relative; }
  .tg-presets button::before { content: ""; position: absolute; inset: -5px -3px; }
  .campo > .tg-presets button { min-height: 36px; }
  .tg-fonte button { min-width: 44px; justify-content: center; }
  .btn-dividido-seta { min-width: 44px; }
}

/* SelectBusca: lista com busca no lugar do select nativo. O painel e position: fixed (escapa do
   corpo do modal com rolagem); dentro de dialog, absolute (o dialog com transform vira a
   referencia do fixed). */
.selectbusca { position: relative; min-width: 200px; }

.sb-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  height: 44px;
  min-width: 0;
  padding: 0 var(--sp-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--fs-lg);
  cursor: pointer;
}

.sb-display i { flex: 0 0 auto; color: var(--texto-suave); }
.sb-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-placeholder { color: var(--texto-suave); }

.sb-display:focus-visible,
.selectbusca.open .sb-display { outline: 2px solid var(--cor-primaria-escura); outline-offset: 1px; border-color: var(--cor-primaria-escura); }

/* Campo travado (pelo perfil ou por outra escolha do formulario): fica no lugar, apagado, com o motivo no title. */
.sb-display[aria-disabled="true"] { background: var(--fundo); color: var(--texto-secundario); opacity: .75; cursor: not-allowed; }

/* Painel nasce do display (canto de cima a esquerda), com escala curta, como o .popover. */
.sb-panel {
  position: fixed;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  transform-origin: top left;
  opacity: 0;
  transform: scale(.96);
  visibility: hidden;
  pointer-events: none;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s, visibility 0s linear .16s;
}

.selectbusca.open .sb-panel {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), opacity .16s;
}

.sb-panel.sb-in-dialog { position: absolute; }

@media (prefers-reduced-motion: reduce) {
  .sb-panel, .selectbusca.open .sb-panel, .popover, .popover.aberto { transform: none; }
}

.sb-search {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--fs-lg);
}

.sb-search:focus { outline: 2px solid var(--cor-primaria-escura); outline-offset: 0; }

@media (max-width: 720px) {
  .sb-search { min-height: 44px; }
}

.sb-opt { padding: 8px 10px; border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; overflow-wrap: anywhere; }
.sb-opt:hover, .sb-opt.marcada { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.sb-opt[aria-selected="true"] { font-weight: 600; }
.sb-vazio { display: none; padding: 8px 10px; font-size: var(--fs-sm); color: var(--texto-suave); }

/* Busca no servidor (data-sb-url): a linha de estado (Buscando..., sem resposta) e o documento embaixo do
   nome, que o rotulo da escolhida nao leva. */
.sb-estado { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px; font-size: var(--fs-sm); color: var(--texto-suave); }
.sb-estado .spinner-circle { flex: none; width: 16px; height: 16px; border-width: 2px; }
.sb-opt-doc { display: block; font-size: var(--fs-xs); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.sb-opt:hover .sb-opt-doc, .sb-opt.marcada .sb-opt-doc { color: inherit; }

.sb-rodape {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-top: 1px solid var(--borda);
  color: var(--cor-primaria-texto);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.sb-rodape:hover { text-decoration: underline; }

@media (min-width: 721px) {
  .sb-display { height: var(--fu-h); font-size: var(--fs-md); }
  .sb-search { font-size: var(--fs-md); }
}

@media (max-width: 720px) {
  .sb-opt, .sb-rodape { min-height: 44px; display: flex; align-items: center; }
}

/* Resultados da busca global: grupo com o titulo, opcao com icone, titulo e detalhe, e o valor a direita. */
.tb-busca-lista { display: flex; flex-direction: column; }
.tb-busca-grupo + .tb-busca-grupo { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--borda); }
.tb-busca-grupo-titulo { padding: 7px 10px 5px; font-size: 11px; font-weight: 600; color: var(--texto-suave); }

.tb-busca-opcao {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--texto);
  text-decoration: none;
}

.tb-busca-opcao.ativa { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.tb-busca-opcao-icone { flex: none; font-size: 18px; color: var(--texto-suave); }
.tb-busca-opcao.ativa .tb-busca-opcao-icone, .tb-busca-opcao.ativa .tb-busca-detalhe { color: inherit; }
.tb-busca-textos { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.tb-busca-titulo, .tb-busca-detalhe { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-busca-titulo { font-size: var(--fs-sm); font-weight: 600; }
.tb-busca-detalhe { font-size: var(--fs-xs); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.tb-busca-direita { display: flex; flex: none; flex-direction: column; align-items: flex-end; }
.tb-busca-valor { font-size: var(--fs-sm); font-weight: 600; }
.tb-busca-estado { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 10px; font-size: var(--fs-sm); color: var(--texto-suave); }
.tb-busca-estado .spinner-circle { flex: none; width: 16px; height: 16px; border-width: 2px; }

/* No celular a descricao divide a linha com o valor e o vencimento: vai ate duas linhas antes de cortar. */
@media (max-width: 520px) {
  .tb-busca-titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
}

/* Modal: fundo escuro e caixa no meio. Tres tamanhos; sem tamanho, vale o medio.
   Esc e clique fora nao fecham: o que foi digitado so sai pelo Cancelar ou pelo X. */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--cor-overlay-modal);
  backdrop-filter: blur(2px);
}

.modal-bg.visivel { display: flex; }

.modal-caixa {
  width: 55vw;
  max-width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}

.modal-sm { width: 34vw; min-width: min(380px, 96vw); max-height: 42vh; }
.modal-md { width: 55vw; max-height: 70vh; }
.modal-lg { width: 89vw; max-height: 90vh; }

.modal-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 18px 22px;
  border-bottom: 1px solid var(--borda);
}

.modal-cab h3 { font-size: 17px; }

/* O X usa --texto-suave (3:1 de componente), nao o --texto-fraco da nota. */
.modal-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-suave);
  font-size: 22px;
  cursor: pointer;
}

.modal-x:hover { background: var(--fundo); color: var(--texto); }

@media (max-width: 720px) {
  .modal-x { width: 44px; height: 44px; }
}
.modal-x:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 1px; }
.modal-corpo { display: flex; flex-direction: column; gap: var(--sp-4); padding: 22px; }

.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--borda);
}

/* Caixa mais alta que o limite (o aviso do Salvar e novo no modal pequeno, notebook baixo): so o corpo
   rola, como no dialog (Padrao_Modal). O cabecalho com o X e o rodape com o envio ficam presos na caixa;
   sem rolagem, o sticky nao muda nada. */
.modal-caixa { overscroll-behavior: contain; scroll-padding-block: 80px; }
.modal-caixa > .modal-cab,
.modal-caixa .modal-rodape { position: sticky; z-index: var(--z-sticky); background: var(--branco); }
.modal-caixa > .modal-cab { top: 0; }
.modal-caixa .modal-rodape { bottom: 0; }

/* Espera do envio no modal (a de tela inteira fica atras do <dialog>): spinner pequeno com o texto,
   a esquerda dos botoes. Sem lugar ao lado deles, desce para a linha de cima. Vazia, nao ocupa. */
.modal-espera { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }
.modal-espera:empty { display: none; }
.modal-rodape:has(> .modal-espera:not(:empty)) { flex-wrap: wrap; }
.modal-espera .loading-inline { flex-direction: row; gap: var(--sp-2); padding: 0; text-align: left; }
.modal-espera .spinner-circle { flex: none; width: 20px; height: 20px; border-width: 3px; }
.modal-espera .loading-text { font-size: var(--fs-sm); }

/* No celular o spinner fica numa linha so dele, e os botoes seguem juntos embaixo. */
@media (max-width: 720px) {
  .modal-espera { flex-basis: 100%; }
}
/* Na confirmacao, com os botoes no centro, o spinner fica numa linha so dele, centrado em cima. */
.modal-confirm .modal-espera { flex-basis: 100%; justify-content: center; }

/* Aviso do envio barrado no modal: o que falta, na lista. */
.modal-aviso {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--raio-sm);
  background: var(--vermelho-suave);
  color: var(--vermelho);
  font-size: var(--fs-sm);
}

.modal-aviso p { font-weight: 600; }
.modal-aviso ul { padding-left: 18px; }
.modal-aviso .btn { align-self: flex-start; margin-top: var(--sp-1); }

/* Secao do formulario longo (modal-lg): titulo curto com a linha embaixo, campos em .form-linha. */
.form-secao { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.form-secao + .form-secao { padding-top: var(--sp-2); }

.form-secao-titulo {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Botao dividido: a acao principal e, colada, a seta que abre as outras formas (popover ancorado). */
.btn-dividido { display: inline-flex; align-items: stretch; }
.btn-dividido > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.btn-dividido-seta {
  padding: 0 var(--sp-2);
  border-left: 1px solid var(--cor-primaria-escura);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Confirmacao (uiConfirm, uiAlerta): icone grande, pergunta e dois botoes no centro. */
.modal-confirm { width: 34vw; min-width: min(380px, 96vw); max-height: 42vh; text-align: center; }

.confirm-corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: 32px 28px 12px;
}

.confirm-corpo h3 { font-size: 18px; }
.confirm-corpo p { font-size: 14px; color: var(--texto-suave); overflow-wrap: anywhere; }

.confirm-icone {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--azul-info-suave);
  color: var(--azul-info);
  font-size: 36px;
}

.confirm-perigo { background: var(--vermelho-suave); color: var(--vermelho); }
.confirm-aviso { background: var(--ambar-suave); color: var(--ambar); }
.modal-confirm .modal-rodape { justify-content: center; border-top: 0; padding-bottom: 24px; }

/* Formulario que envolve corpo e rodape do modal: a rolagem continua sendo da caixa. */
.modal-form { display: flex; flex-direction: column; min-height: 0; }

/* Confirmacao que pede um campo (motivo do cancelamento): mais alta, campo na largura toda. */
.modal-com-campo { max-height: 70vh; }
.confirm-corpo .campo { width: 100%; text-align: left; }

/* Popup em <dialog> nativo, centralizado. overflow visivel: o painel do SelectBusca sai da caixa. */
dialog.popup-centrado {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55vw;
  max-width: 96vw;
  max-height: 90vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--raio-lg);
  background: var(--branco);
  color: var(--texto);
  box-shadow: var(--sombra-lg);
  overflow: visible !important;
}

dialog.popup-centrado::backdrop { background: var(--cor-overlay-modal); backdrop-filter: blur(2px); }

/* Conteudo mais alto que a caixa (celular, notebook baixo): o main.js liga a rolagem, senao o rodape
   com o envio fica fora da tela. O painel do SelectBusca, absolute e preso ao campo, rola junto. */
dialog.popup-centrado.popup-rolando { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scroll-padding-block: 80px; }

/* Com a rolagem ligada, so o corpo rola (Padrao_Modal): o cabecalho com o X e o rodape com o envio
   ficam presos na caixa. O scroll-padding guarda a altura deles para o scrollIntoView. */
dialog.popup-centrado.popup-rolando .modal-cab,
dialog.popup-centrado.popup-rolando .modal-rodape { position: sticky; z-index: var(--z-sticky); background: var(--branco); }
dialog.popup-centrado.popup-rolando .modal-cab { top: 0; }
dialog.popup-centrado.popup-rolando .modal-rodape { bottom: 0; }

/* Confirmacao aberta sobre um dialog: e <dialog> para subir na camada de cima, com a cara do
   .modal-bg (o fundo escuro e o dele; o ::backdrop fica transparente para nao escurecer duas vezes). */
dialog.modal-bg[open] {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  color: var(--texto);
}

dialog.modal-bg::backdrop { background: transparent; }

@keyframes modalEntra {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes modalSai {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(16px) scale(.98); }
}

/* O dialog ja usa transform para centralizar: a animacao leva o translate junto. */
@keyframes popupEntra {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.98); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes popupSai {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.98); }
}

.modal-caixa.entrando { animation: modalEntra .20s ease forwards; }
.modal-caixa.saindo { animation: modalSai .19s ease forwards; }
dialog.popup-centrado.entrando { animation: popupEntra .20s ease forwards; }
dialog.popup-centrado.saindo { animation: popupSai .19s ease forwards; }

@media (max-width: 1280px) {
  .modal-caixa, .modal-md, dialog.popup-centrado { width: 68vw; }
  .modal-sm, .modal-confirm { width: 34vw; }
  .modal-lg { width: 89vw; }
}

@media (max-width: 880px) {
  .modal-caixa, .modal-sm, .modal-md, .modal-lg, .modal-confirm, dialog.popup-centrado { width: 96vw; max-height: 92vh; }
  .modal-bg { padding: 2vw; }
}

/* O dialog grande (cadastro com secoes) fica com a largura do modal-lg. */
dialog.popup-centrado.modal-lg { width: 89vw; }

@media (max-width: 880px) {
  dialog.popup-centrado.modal-lg { width: 96vw; max-height: 92vh; }
}

/* Celulas da tabela (te-tab). O card, a rolagem e o paginador sao os da tabela paginada, mais abaixo. */
.te-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }

.te-tab th {
  padding: 10px 14px;
  background: transparent;
  border-bottom: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.te-tab td { padding: 8px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.te-tab tbody tr:last-child td { border-bottom: 0; }
/* A 1280 a lista cabe sem rolar: nome com minimo de 180, chip e data quebram onde tem espaco. */
.te-empresa { display: flex; align-items: center; gap: var(--sp-1); min-width: 180px; }
.te-tab .chip { white-space: normal; }
.te-forte { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.te-doc, .te-num { white-space: nowrap; }
.te-doc, .te-num { font-variant-numeric: tabular-nums; }
.te-tab .col-acoes { width: 1%; text-align: right; white-space: nowrap; }
.te-acoes-linha { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.te-acoes { display: flex; align-items: center; gap: 2px; }

/* Paginador: contador a esquerda, setas e pagina a direita. */
.oc-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.oc-pag-contador { font-size: var(--fs-sm); color: var(--texto-suave); }
.oc-pag-nav { display: flex; align-items: center; gap: var(--sp-2); }
.oc-pag-indicador { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Tabela paginada (macro paginada() em templates/_tabela.html, tabela-avancada.js) ------- */

/* Card da lista: titulo e menu na primeira faixa, a tabela rola de lado na propria caixa, o
   paginador no pe. Sem overflow hidden: o menu do titulo sai por cima do card. */
.tabela-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra-sm);
}

.tabela-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--borda);
}

.tabela-titulo { min-width: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.tabela-ferramentas { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.tabela-contagem { font-size: var(--fs-sm); color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }

.tabela-area { position: relative; z-index: var(--z-base); display: flex; flex-direction: column; min-width: 0; }
.tabela-area .tabela-espera { padding: var(--sp-6) var(--sp-4); }

/* Recarga com a lista na tela: a lista esmaece e o spinner fica por cima, no alto. */
.tabela-area.recarregando > * { opacity: .45; pointer-events: none; transition: opacity .15s; }
.tabela-area.recarregando > .tabela-espera { position: absolute; top: var(--sp-6); left: 0; right: 0; z-index: var(--z-dropdown); opacity: 1; }

/* Quando a tabela nao cabe, a sombra na borda avisa que tem mais para o lado. As camadas brancas
   rolam com o conteudo e cobrem a sombra quando chega no fim (ou quando nao ha o que rolar).
   Posicionada para segurar o que e absoluto dentro da tabela (o .so-leitor do 2FA, por exemplo):
   sem isso ele sai da rolagem e alarga a pagina no celular. */
.tabela-scroll {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--superficie) 30%, transparent) left center / 20px 100% no-repeat,
    linear-gradient(to right, transparent, var(--superficie) 70%) right center / 20px 100% no-repeat,
    linear-gradient(to right, var(--pista-rolagem), transparent) left center / 12px 100% no-repeat,
    linear-gradient(to left, var(--pista-rolagem), transparent) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Cabecalho da tabela: branco (o do card), caixa alta pequena. Quebra entre as palavras quando
   aperta, para a lista caber a 1280 com Acoes a vista. */
.tabela-wrap .te-tab th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: normal;
}

.tabela-wrap .te-tab th[aria-sort] { padding: 4px 8px; }

/* Ordem pelo cabecalho: o titulo inteiro e o botao, a seta diz a direcao. */
.th-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  user-select: none; /* Shift+clique soma a coluna a ordem: sem isto, seleciona o texto */
}

.th-ordenar:hover { background: var(--fundo); color: var(--texto); }
.th-ordenar:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: -2px; }
.th-seta { font-size: 13px; color: var(--texto-fraco); }
.ordenada .th-ordenar { color: var(--texto); }
.ordenada .th-seta { color: var(--cor-primaria-escura); }

/* Da segunda coluna da ordem em diante, o numero da prioridade ao lado da seta. */
.th-prioridade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.th-prioridade[hidden] { display: none; }

/* Filtro por coluna: linha no proprio cabecalho, um campo de 30px por coluna que filtra. */
.tabela-filtros th { padding: 0 14px 8px; text-transform: none; letter-spacing: 0; }

.tabela-filtro-campo {
  width: 100%;
  min-width: 90px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
}

.tabela-filtro-campo::placeholder { color: var(--texto-suave); }
.tabela-filtro-campo:focus { outline: 2px solid var(--cor-primaria-escura); outline-offset: -1px; border-color: var(--cor-primaria-escura); }

/* Coluna escondida pelo menu Colunas. */
.te-tab .col-oculta { display: none; }

/* Selecao em lote: a coluna da caixa, estreita, com o rotulo como alvo do clique. */
.te-tab .col-sel { width: 1%; padding-right: 0; }
.tsel-alvo { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; cursor: pointer; }
/* Linha que so aparece de contexto (a principal da subcategoria achada): a caixa fica, apagada. */
.tsel-alvo:has(.tsel:disabled) { cursor: not-allowed; }
.te-tab .tsel:disabled { opacity: .45; cursor: not-allowed; }
.te-tab tbody tr.selecionada td { background: var(--cor-primaria-suave); }

/* Acao da linha indisponivel: o slot fica, apagado, com o motivo no title, e nao acende no hover. */
.btn-icone.desabilitado { display: inline-flex; align-items: center; justify-content: center; opacity: .30; cursor: not-allowed; }
.btn-icone.desabilitado:hover { background: transparent; color: var(--texto-secundario); }

/* Paginador: contagem a esquerda, setas no centro, o terceiro terco vazio equilibra a grade. */
.tabela-wrap .oc-pag {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 16px;
  border-top: 1px solid var(--borda);
}

.oc-pag-info { font-size: var(--fs-sm); color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* Modais de Ordenar, Colunas e Linhas por pagina: lista de opcoes de toque. */
.tabela-escolha { display: flex; flex-direction: column; gap: var(--sp-2); }
.tabela-escolha-rotulo { font-size: var(--fs-sm); font-weight: 600; }
.tabela-opcoes { display: flex; flex-direction: column; gap: 2px; }

.tabela-opcao {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
}

.tabela-opcao:hover { background: var(--fundo); }
.tabela-opcao:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: -2px; }
.tabela-opcao.on { border-color: var(--cor-primaria-escura); background: var(--cor-primaria-suave); font-weight: 600; }
.tabela-opcao:disabled { color: var(--texto-suave); cursor: not-allowed; }
.tabela-coluna { min-height: 40px; align-items: center; padding: 0 var(--sp-1); }

/* Ordenar: uma regra por coluna da ordem, na prioridade. */
.tabela-regras { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }

.tabela-regra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}

.tabela-regra-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tabela-regra-nome { flex: 1 1 120px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tabela-regra .tg-presets { height: 34px; }
.tabela-regra .btn-icone:disabled { opacity: .30; cursor: not-allowed; }

/* Barra do lote: escura, no pe da area de trabalho, so com alguma linha marcada. */
.tsel-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: var(--z-sticky);
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  background: var(--cor-faixa-lote);
  color: var(--texto-sobre-faixa-lote);
  box-shadow: var(--sombra-md);
}

.tsel-bar.visivel { display: flex; }
.tsel-bar-contagem { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tsel-bar-link {
  min-height: 32px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-sobre-faixa-lote);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}

.tsel-bar-link:hover { background: var(--cor-faixa-lote-hover); }
.tsel-bar-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-left: auto; }

.tsel-bar-btn {
  border: 1px solid var(--cor-faixa-lote-borda);
  background: transparent;
  color: var(--texto-sobre-faixa-lote);
}

.tsel-bar-btn:hover { background: var(--cor-faixa-lote-hover); }
.tsel-bar-btn.esmaecido { opacity: .55; cursor: not-allowed; }
.tsel-bar-btn:focus-visible, .tsel-bar-link:focus-visible { outline: 2px solid var(--texto-sobre-faixa-lote); outline-offset: 2px; }

/* Barra de filtros da listagem: campos na altura --fu-h, o espaco empurra o resto para a direita.
   Cada filtro e um grupo .g, com o rotulo pequeno em cima do campo (Padrao_Barra_de_Filtros). */
.fu-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); min-width: 0; }
.fu-bar .g { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fu-bar .g:has(> .input) { flex: 1 1 240px; max-width: 420px; }

.fu-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-secundario);
}

.fu-bar .input { position: relative; min-width: 240px; }
.fu-bar .selectbusca { min-width: 170px; }
.fu-bar .sp { flex: 1; }
.fu-bar .tg-presets, .fu-bar .tg-fonte { height: 44px; }

@media (min-width: 721px) {
  .fu-bar .tg-presets, .fu-bar .tg-fonte { height: var(--fu-h); }
}

/* Selecao de periodo (templates/_periodo.html): os chips e os campos De e Ate entram na barra como se
   fossem filhos dela; De e Ate so aparecem no Periodo customizado ([hidden] vence o display). */
.periodo, .periodo-datas { display: contents; }

@media (max-width: 880px) {
  .tsel-bar { left: 0; padding: 10px var(--sp-3); }
}

@media (max-width: 720px) {
  /* 16px: abaixo disso o iOS da zoom no foco do campo (Responsividade_Sempre). */
  .tabela-filtro-campo { height: 44px; font-size: var(--fs-lg); }
  .tsel-alvo { min-width: 44px; min-height: 44px; }
  .th-ordenar, .tsel-bar-link { min-height: 44px; }
  .tabela-opcao, .tabela-coluna { min-height: 44px; }
  .fu-bar .g, .fu-bar .g:has(> .input) { flex: 1 1 100%; max-width: none; }
  .fu-bar .input { min-width: 0; }
  /* Seis botoes nao cabem na largura do celular: quebram linha no lugar de espremer a barra. Quebrado, o
     grupo perde a altura da barra: o botao vai a 44 sozinho, e o ::before so cresce para os lados (em cima
     e embaixo cobriria o botao da outra linha). */
  .fu-bar .periodo .tg-presets { flex-wrap: wrap; height: auto; }
  .fu-bar .periodo .tg-presets button { min-height: 44px; }
  .fu-bar .periodo .tg-presets button::before { inset: 0 -3px; }
  .tabela-wrap .oc-pag { grid-template-columns: 1fr; justify-items: center; }
  .tabela-wrap .oc-pag .oc-pag-fim { display: none; }
}

/* --- Portal de empresas --------------------------------------------------------------------- */

.portal { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.portal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.portal-busca { position: relative; flex: 1 1 260px; min-width: 0; max-width: 420px; }

.portal-busca i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--texto-suave);
  font-size: 16px;
  pointer-events: none;
}

.portal-busca .campo-entrada { padding-left: 36px; }

/* Filtro e visao na altura dos campos da barra (44px de toque ate 720px). */
.portal-barra .tg-presets, .portal-barra .tg-fonte { height: 44px; }

@media (min-width: 721px) {
  .portal-barra .tg-presets, .portal-barra .tg-fonte { height: var(--fu-h); }
}

.portal-ordem .selectbusca { width: 190px; min-width: 0; }
/* Cards (com o paginador deles) ou a tabela: so um a vista, conforme a visao. */
.portal-bloco { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.portal-area { position: relative; z-index: var(--z-base); display: flex; flex-direction: column; min-width: 0; }

/* Recarga com a lista na tela: a lista esmaece e o spinner fica por cima, no alto. */
.portal-area.recarregando > * { opacity: .45; pointer-events: none; transition: opacity .15s; }
.portal-area.recarregando > .portal-espera { position: absolute; top: var(--sp-6); left: 0; right: 0; z-index: var(--z-dropdown); opacity: 1; }

.portal-card { gap: var(--sp-4); }
.portal-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-width: 0; }
.portal-card-acoes { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.portal-ident { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.portal-avatar { width: 44px; height: 44px; border-radius: var(--raio); font-size: 15px; }
.portal-nomes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portal-nome { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.portal-doc { font-size: var(--fs-sm); color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* Rodape do card no pe (cards da mesma fileira com a mesma altura): ultimo acesso e Acessar. */
.portal-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--borda);
}

.portal-ultimo { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); color: var(--texto-suave); }
.portal-rodape form { flex: 0 0 auto; }

@media (max-width: 720px) {
  .portal-busca { max-width: none; flex-basis: 100%; }
}

@media (max-width: 520px) {
  .portal-ordem { flex: 1 1 140px; min-width: 0; }
  .portal-ordem .selectbusca { width: 100%; }
  .portal .tg-fonte span { display: none; }
}

/* --- Meu perfil ----------------------------------------------------------------------------- */

/* Dois cards por fileira quando cabem, com a mesma altura; um so no celular. */
.perfil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
  min-width: 0;
}

.perfil-card { gap: var(--sp-4); min-width: 0; }
.perfil-titulo { font-size: var(--fs-lg); }
.perfil-form { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 auto; }
.perfil-acoes { display: flex; justify-content: flex-end; margin-top: auto; }
.campo-entrada[readonly] { background: var(--fundo); color: var(--texto-suave); }

/* Linha de ajuste: texto a esquerda, acao a direita; quebra quando nao cabe. */
.perfil-linhas { display: flex; flex-direction: column; }

.perfil-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.perfil-linhas .perfil-linha { padding: var(--sp-3) 0; }
.perfil-linhas .perfil-linha:first-child { padding-top: 0; }
.perfil-linhas .perfil-linha + .perfil-linha { border-top: 1px solid var(--borda); }
.perfil-linha-textos { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.perfil-linha-titulo { font-weight: 600; }
.perfil-linha-sub { min-width: 0; font-size: var(--fs-sm); color: var(--texto-suave); }
.perfil-linha > .perfil-linha-sub { flex: 1 1 220px; }
.perfil-linha > .btn { flex: 0 0 auto; }
.cv-sw input:disabled + label { opacity: .6; cursor: not-allowed; }

.acessos { display: flex; flex-direction: column; list-style: none; }

.acesso-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.acesso-item + .acesso-item { border-top: 1px solid var(--borda); }
.acesso-icone { flex: 0 0 auto; font-size: 18px; color: var(--texto-suave); }
.acesso-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acesso-quando { font-weight: 600; font-variant-numeric: tabular-nums; }
.acesso-onde { font-size: var(--fs-sm); color: var(--texto-suave); overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .perfil-linha > .btn { flex: 1 1 100%; }
}

/* --- Desenvolvedor: Sistema ------------------------------------------------------------------ */

/* Dois cards por fileira quando cabem, com a mesma altura; rotulo a esquerda e valor a direita,
   um embaixo do outro no celular. */
.dev-sistema {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
  min-width: 0;
}

.dev-card { gap: var(--sp-4); min-width: 0; }
.dev-titulo { font-size: var(--fs-lg); }
.dev-info { display: flex; flex-direction: column; }

.dev-linha {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
}

.dev-linha:first-child { padding-top: 0; }
.dev-linha + .dev-linha { border-top: 1px solid var(--borda); }
.dev-linha dt { font-size: var(--fs-sm); color: var(--texto-suave); }
.dev-linha dd { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .dev-linha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --- Administracao: Usuarios ---------------------------------------------------------------- */

.ua { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Busca da barra de filtros: a lupa dentro do campo. */
.fu-bar .input i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--texto-suave);
  font-size: 16px;
  pointer-events: none;
}

.fu-bar .input .campo-entrada { padding-left: 36px; }

/* A 1280 a lista cabe com Acoes a vista: o nome tem minimo de 180 e o resto quebra onde tem
   quebra natural (o e-mail depois do @, a empresa depois do chip, data e hora). */
.ua-pessoa { display: flex; align-items: center; gap: var(--sp-3); min-width: 180px; }
.ua-nomes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-nome-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.ua-sub { font-size: var(--fs-sm); color: var(--texto-suave); }

/* Perfis: uma linha por acesso, o chip do perfil e a empresa ao lado. Quando aperta, a empresa
   desce para baixo do chip, em ate duas linhas (o nome inteiro fica no title da linha). */
.ua-perfis { display: flex; flex-direction: column; gap: var(--sp-2); }
.ua-perfil-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }

.ua-perfil-empresa {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

/* 2FA so no icone (cadeado fechado ligado, aberto desligado); o texto vai para o leitor de tela. */
.ua-2fa { display: inline-flex; align-items: center; font-size: 18px; color: var(--texto-suave); }
.ua-2fa-ligado { color: var(--verde); }
.ua-situacao { display: flex; align-items: center; }
.ua-ultimo { font-variant-numeric: tabular-nums; }

/* Modais: quem esta sendo mexido, uma linha por empresa no Acessos, um bloco por assunto no
   Senha e 2FA. */
.ua-quem { font-weight: 600; overflow-wrap: anywhere; }
.ua-acessos { display: flex; flex-direction: column; }

.ua-acesso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

.ua-acesso + .ua-acesso { border-top: 1px solid var(--borda); }
.ua-acesso-empresa { font-weight: 600; overflow-wrap: anywhere; }
.ua-vazio { color: var(--texto-suave); }
.ua-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.ua-bloco + .ua-bloco { padding-top: var(--sp-4); border-top: 1px solid var(--borda); }
.ua-bloco-titulo { font-size: var(--fs-md); }
.ua-bloco-texto { font-size: var(--fs-sm); color: var(--texto-suave); }
.ua-provisoria { align-self: stretch; }
.ua-provisoria-linha { display: flex; align-items: center; gap: var(--sp-2); }
.ua-provisoria-linha .chave-2fa-valor { flex: 1 1 auto; }

@media (max-width: 520px) {
  .ua-acesso { grid-template-columns: minmax(0, 1fr) auto; }
  .ua-acesso-empresa { grid-column: 1 / -1; }
}

/* Convites: card abaixo da lista, um item por convite (e-mail, perfil, empresas e prazo a
   esquerda, Reenviar e Cancelar a direita). No modal, as empresas rolam na propria caixa: o
   <dialog> fica com overflow visivel por causa do painel do SelectBusca. */
.conv-lista { display: flex; flex-direction: column; list-style: none; }

.conv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

.conv-item + .conv-item { border-top: 1px solid var(--borda); }
.conv-dados { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.conv-email { font-weight: 600; overflow-wrap: anywhere; }
.conv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--texto-suave); }
.conv-prazo { font-variant-numeric: tabular-nums; }
.conv-vencido { color: var(--vermelho); font-weight: 600; }
.conv-empresas { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 196px; overflow-y: auto; }
.conv-link-linha { display: flex; align-items: center; gap: var(--sp-2); }
.conv-link-linha .conv-link-valor { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); letter-spacing: 0; }

@media (max-width: 520px) {
  .conv-item { flex-direction: column; align-items: stretch; }
  .conv-acoes { justify-content: flex-end; }
  .conv-link-linha { flex-direction: column; align-items: stretch; }
}

/* --- Seguranca da conta ------------------------------------------------------------------------ */

/* Tres cards de mesma altura na grade; a protecao por IP e os ultimos acessos abaixo, inteiros. */
.seg { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.seg-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.seg-card { min-width: 0; }
.seg-form { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 auto; }
.seg-acoes { display: flex; justify-content: flex-end; margin-top: auto; }
.seg-estado { font-size: var(--fs-sm); color: var(--texto-suave); }

.seg-valores { display: flex; flex-direction: column; }

.seg-valor {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.seg-valor + .seg-valor { border-top: 1px solid var(--borda); }
.seg-valor dt { font-size: var(--fs-sm); color: var(--texto-suave); }
.seg-valor dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.seg-ip { min-width: 0; }
.seg-rede { font-size: var(--fs-sm); color: var(--texto-suave); }
.seg-rede strong { font-family: var(--font-mono); font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }

/* Regras: uma por linha (tipo e endereco, descricao e prazo a esquerda; Excluir a direita). */
.seg-regras { display: flex; flex-direction: column; list-style: none; }

.seg-regra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

.seg-regra + .seg-regra { border-top: 1px solid var(--borda); }
.seg-regra-dados { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.seg-regra-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.seg-regra-ip { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
.seg-regra-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--texto-suave); }
.seg-regra-descricao { overflow-wrap: anywhere; }
.seg-regra-prazo { display: inline-flex; align-items: center; gap: var(--sp-1); font-variant-numeric: tabular-nums; }
.seg-regra-vencida .seg-regra-ip { color: var(--texto-suave); text-decoration: line-through; }

.seg-quando { font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg-ip-celula { font-family: var(--font-mono); font-size: var(--fs-sm); }

@media (max-width: 520px) {
  .seg-regra { align-items: flex-start; }
}

/* --- Dados da conta ---------------------------------------------------------------------------- */

/* Formulario largo e o plano estreito ao lado, com a mesma altura (Padrao_Box_Card); um embaixo do
   outro quando nao cabem. */
.conta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
  min-width: 0;
}

.conta > .cd { height: 100%; }

.conta-card { min-width: 0; }
.conta-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.conta-acoes { display: flex; justify-content: flex-end; }

.conta-valores { display: flex; flex-direction: column; }

.conta-valor {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.conta-valor + .conta-valor { border-top: 1px solid var(--borda); }
.conta-valor dt { font-size: var(--fs-sm); color: var(--texto-suave); }
.conta-valor dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .conta { grid-template-columns: minmax(0, 1fr); }
}

/* --- Perfis e permissoes ----------------------------------------------------------------------- */

/* Lista: nome com a descricao embaixo. */
.pf-lista { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.pf-nome { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.pf-descr { font-size: var(--fs-sm); color: var(--texto-suave); overflow-wrap: anywhere; }

/* Matriz: um card por grupo, com os interruptores da auto-liberacao no cabecalho. Excecao ao
   te-tab (sem paginacao nem lote): a tabela e um formulario de caixas, todas na tela. */
.pf { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.pf-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pf-quem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.pf-descricao { color: var(--texto-suave); overflow-wrap: anywhere; }
.pf-globais { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pf-aviso { display: flex; align-items: flex-start; gap: var(--sp-2); }
.pf-aviso i { flex: 0 0 auto; font-size: 18px; }

.pf-grupo-cab { flex-wrap: wrap; }
.pf-auto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.pf-auto-rotulo { font-size: var(--fs-sm); color: var(--texto-suave); }
.pf-auto-item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.pf-auto-texto { color: var(--texto); white-space: nowrap; }

.pf-rolagem { overflow-x: auto; min-width: 0; }
.pf-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.pf-tab th, .pf-tab td { padding: 4px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.pf-tab tbody tr:last-child th, .pf-tab tbody tr:last-child td { border-bottom: 0; }
.pf-tab thead th { color: var(--texto-suave); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pf-col-modulo { text-align: left; }
.pf-col { width: 96px; text-align: center; }

.pf-col-btn {
  padding: 4px 8px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.pf-col-btn:hover { background: var(--fundo); color: var(--texto); }
.pf-col-btn:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 2px; }

.pf-sub th {
  padding-top: var(--sp-3);
  background: var(--fundo);
  color: var(--texto-suave);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pf-modulo { font-weight: 500; color: var(--texto); text-align: left; overflow-wrap: break-word; }
.pf-celula { text-align: center; }
.pf-alvo { display: inline-flex; align-items: center; justify-content: center; padding: 8px; cursor: pointer; }
.pf-alvo:has(.tsel:disabled) { cursor: not-allowed; }
.pf .tsel:disabled { opacity: .55; cursor: not-allowed; }
.pf-vazio { display: inline-flex; align-items: center; justify-content: center; padding: 8px; color: var(--texto-fraco); cursor: not-allowed; }

.pf-gerais { min-width: 0; }
.pf-geral { padding: var(--sp-1) 0; }
.pf-gerais-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.pf-geral-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-geral-nome { font-weight: 600; }
.pf-geral-ajuda { font-size: var(--fs-sm); color: var(--texto-suave); }

/* Salvar unico, sempre a vista no pe da tela, com o aviso do que ainda nao foi salvo. */
.pf-rodape {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}

.pf-pendente { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--ambar); }

/* No toque, cada caixa com 44px de alvo, sem folga em volta: o resto da largura fica com o nome do
   modulo. O rotulo da auto-liberacao ganha linha propria. */
@media (max-width: 720px) {
  .pf-alvo { min-width: 44px; min-height: 44px; padding: 0; }
  .pf-col { width: auto; }
  .pf-tab th, .pf-tab td { padding: 2px 4px; }
  .pf-tab .pf-celula, .pf-tab .pf-col { padding: 0; }
  .pf-auto-rotulo { flex-basis: 100%; }
}

/* --- Plataforma: Contas ------------------------------------------------------------------------ */

/* Lista: razao social com o e-mail de contato embaixo; um pedido de cancelamento por linha, com a
   empresa em ambar (pede atencao) e a data embaixo. Sao oito colunas: para caber a 1280 com Acoes a
   vista, o nome tem minimo de 150, a celula respira 10px de cada lado e o CNPJ quebra so na barra. */
.ac-lista { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ac-lista .te-tab td { padding-left: 10px; padding-right: 10px; }
.ac-conta { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.ac-sub { font-size: var(--fs-sm); color: var(--texto-suave); overflow-wrap: anywhere; }
.ac-vazio { color: var(--texto-suave); }
.ac-pedidos { display: flex; flex-direction: column; gap: var(--sp-2); }
.ac-pedido { display: flex; flex-direction: column; gap: 2px; }
.ac-pedido-empresa { font-size: var(--fs-sm); font-weight: 600; color: var(--ambar); overflow-wrap: anywhere; }

/* Modais: quem esta sendo mexido em cima; no Editar, uma linha por empresa (nome, chip e pedido a
   esquerda, Mudar situacao a direita). */
.ac-quem { display: flex; flex-direction: column; gap: var(--sp-1); }
.ac-razao { font-weight: 600; overflow-wrap: anywhere; }
.ac-texto { font-size: var(--fs-sm); color: var(--texto-suave); }
.ac-empresas { display: flex; flex-direction: column; list-style: none; border: 1px solid var(--borda); border-radius: var(--raio-sm); }

.ac-empresa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
}

.ac-empresa + .ac-empresa { border-top: 1px solid var(--borda); }
.ac-empresa-textos { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ac-empresa-nome { font-weight: 600; overflow-wrap: anywhere; }
.ac-empresa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }

/* Protecao por IP no Editar: o modo atual a esquerda, Desligar a direita. */
.ac-ip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; }

@media (max-width: 520px) {
  .ac-empresa, .ac-ip { flex-direction: column; align-items: stretch; }
}

/* --- Pessoas: clientes, fornecedores e transportadoras ---------------------------------------- */

/* Lista: nome com o nome fantasia embaixo e um chip para cada outra lista da pessoa. */
.pessoas { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.pe-nome { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.pe-nome-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.pe-sub { font-size: var(--fs-sm); color: var(--texto-suave); overflow-wrap: anywhere; }
.pe-situacao { display: flex; align-items: center; }

/* Modal: os papeis lado a lado na altura de um campo; o papel travado fica apagado, com o motivo no title. */
.pe-papeis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-height: var(--fu-h); }
.pe-papeis .aceite { align-items: center; }
.pe-papeis .aceite:has(.tsel:disabled) { cursor: not-allowed; }
.pe-papeis .tsel:disabled { opacity: .55; cursor: not-allowed; }

/* No toque cada papel ja tem 44px de alvo (.aceite): quebrados, encostam um no outro. */
@media (max-width: 720px) {
  .pe-papeis { row-gap: 0; }
}

/* --- Financeiro: contas, categorias e centros de custo ----------------------------------------- */

/* Lista: o interruptor de situacao na linha; o saldo alinhado a direita, em vermelho quando negativo
   (o .dinheiro some com o Ocultar valores); a conta padrao com um chip ao lado do nome. O nome guarda
   160px, como o .pf-nome: no celular a tabela rola de lado em vez de quebrar a palavra no meio. */
.financeiro { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.fi-situacao { display: flex; align-items: center; }
.fi-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 160px; }
.te-tab .fi-valor { text-align: right; }
.fi-negativo { color: var(--vermelho); }

/* Categorias: a subcategoria entra recuada, com o ramo antes do nome; a principal que so aparece por
   causa de uma subcategoria que casa com o filtro (contexto) fica apagada e fora da selecao. */
.fi-nivel-2 { flex-wrap: nowrap; align-items: flex-start; padding-left: var(--sp-5); }
.fi-ramo { flex: none; margin-top: 2px; color: var(--texto-suave); font-size: 14px; }
.fi-contexto > td { color: var(--texto-secundario); }
.fi-contexto .te-forte { font-weight: 500; color: inherit; }

/* Modal: valor digitado alinhado como na lista; o interruptor da conta padrao com a explicacao ao lado. */
.campo-valor { text-align: right; font-variant-numeric: tabular-nums; }
.fi-padrao-linha { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--fu-h); }

/* --- Financeiro: contas a receber e a pagar ----------------------------------------------------- */

.lancamentos { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Barra: o Mais filtros com o numero de filtros em uso; o popover em duas colunas (uma no celular), e
   abre para a esquerda do botao quando nao cabe a direita (.lc-mais-direita, pelo lancamentos.js). */
.lc-mais-ancora { flex: none; }

.lc-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lc-mais-filtros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-3) var(--sp-4);
  width: min(520px, calc(100vw - 32px));
  padding: var(--sp-4);
}

.lc-mais-filtros.lc-mais-direita { left: auto; right: 0; transform-origin: top right; }
.lc-mais-filtros .selectbusca { min-width: 0; }
.lc-mais-largo { grid-column: 1 / -1; }

/* Varias escolhas ao mesmo tempo (Situacao da parcela): cada botao liga e desliga (aria-pressed). */
.tg-multi { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.tg-multi button {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-secundario);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.tg-multi button:hover { color: var(--texto); }
.tg-multi button[aria-pressed="true"] { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.tg-multi button:focus-visible { outline: 2px solid var(--cor-primaria-escura); outline-offset: 1px; }

/* Situacao: uma linha so para as cinco visoes, cada uma com a quantidade e o valor. */
.lc-visoes-g { flex: 1 1 100%; }
.fu-bar .lc-visoes { display: flex; flex-wrap: wrap; height: auto; }

.lc-visoes button {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
}

.lc-visao-nome { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lc-visao-qtd { font-size: var(--fs-xs); font-weight: 500; color: var(--texto-suave); }
.lc-visao-valor { color: var(--texto); font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-visoes button.on .lc-visao-qtd, .lc-visoes button.on .lc-visao-valor { color: inherit; }

/* Lista: a descricao em destaque e, embaixo, parcela, pessoa e categorias. */
.lc-resumo { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.lc-meta { font-size: var(--fs-sm); color: var(--texto-suave); overflow-wrap: anywhere; }

/* Modal do lancamento: o titulo da secao com o interruptor dela a direita, na mesma linha. */
.lc-secao-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--borda);
}

.lc-secao-cab .form-secao-titulo { padding-bottom: 0; border-bottom: 0; }
.lc-chave { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; }
.lc-chave-rotulo { font-size: var(--fs-sm); font-weight: 600; color: var(--texto); }

/* Rateio: cada categoria num cartao (categoria, valor, porcentagem e remover numa linha); o rateio de
   centro de custo da categoria entra recuado embaixo; a soma contra o total no pe de cada grade. */
.lc-rateio, .lc-linhas, .lc-subgrade { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.lc-linha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}

.lc-linha-campos {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 96px auto;
  align-items: end;
  gap: var(--sp-3);
}

.lc-linha-campos .selectbusca { min-width: 0; }
.lc-campo-pct { min-width: 0; }
.lc-remover { align-self: end; }
.lc-subgrade { padding-left: var(--sp-4); border-left: 2px solid var(--borda); }
.lc-centro { min-width: 0; }
.lc-rateio-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.lc-soma { margin-left: auto; font-size: var(--fs-sm); color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.lc-soma.fi-negativo { color: var(--vermelho); font-weight: 600; }

/* Previa das parcelas: rola dentro da propria caixa, com o cabecalho preso. */
.lc-previa-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.lc-previa-rolagem[data-previa] { max-height: 320px; overflow-y: auto; }
.lc-previa th { position: sticky; top: 0; z-index: var(--z-base); background: var(--superficie); }
.lc-previa th, .lc-previa td { padding: 6px 12px; }

/* Recebimento (ou pagamento) e lote: a frase do que vai ser feito em cima; embaixo, o que abate, o que
   entra (ou sai) da conta e o que fica em aberto. */
.lc-contexto { color: var(--texto-secundario); font-size: var(--fs-md); overflow-wrap: anywhere; }

.lc-efeito {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--raio-sm);
  background: var(--fundo);
}

.lc-efeito dt { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); }
.lc-efeito dd { min-height: 1.4em; font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Ver detalhes: o cabecalho em grade, o rateio, as parcelas com cada recebimento embaixo e o historico. */
.lc-detalhes { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

.lc-detalhes-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-3) var(--sp-4);
}

.lc-detalhes-grade dt { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); }
.lc-detalhes-grade dd { font-weight: 600; overflow-wrap: anywhere; }
.lc-detalhes-secao { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.lc-detalhes-titulo {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  font-size: var(--fs-md);
  font-weight: 700;
}

.lc-detalhes-tab th, .lc-detalhes-tab td { padding: 8px 12px; }
.lc-sublinha td { color: var(--texto-secundario); font-size: var(--fs-sm); }
.lc-sublinha td:nth-child(2) { padding-left: var(--sp-5); }
.te-tab .lc-baixa td { padding-top: 0; }

.lc-baixa-caixa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio-sm);
  background: var(--fundo);
}

.lc-baixa-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
.lc-observacoes { white-space: pre-wrap; overflow-wrap: anywhere; }
.lc-historico { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; font-size: var(--fs-sm); }
.lc-historico > li { display: flex; gap: var(--sp-3); }
/* Cada evento da trilha: a frase (com o valor) e, embaixo, os campos, um por linha. */
.lc-evento { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.lc-evento-campos { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.lc-quando { flex: none; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .lc-mais-filtros { grid-template-columns: minmax(0, 1fr); }
  .tg-multi button { min-height: 44px; }
  .lc-visoes button { flex-basis: 130px; }
  /* A categoria (ou o centro) ocupa a linha; valor, porcentagem e remover vao na de baixo. */
  .lc-linha-campos { grid-template-columns: minmax(0, 1fr) 88px auto; }
  .lc-linha-campos > .campo:first-child { grid-column: 1 / -1; }
  .lc-subgrade { padding-left: var(--sp-3); }
  .lc-baixa-caixa, .lc-historico > li { flex-direction: column; gap: var(--sp-1); }
}

/* --- Financeiro: detalhe da conta (Fase 9) ----------------------------------------------------- */
/* O card com o tipo, o banco e os tres saldos (atual, antes do periodo e no fim dele) e a linha do saldo
   inicial, que abre a lista e nao e lancamento. */
.fi-detalhe { gap: var(--sp-4); }
.fi-conta { gap: var(--sp-4); }
.fi-conta-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.fi-conta-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-3) var(--sp-4);
}

.fi-conta-dados dt { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); }
.fi-conta-dados dd { font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.fi-saldos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-3);
}

.fi-saldo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--fundo);
}

.fi-saldo-rotulo { font-size: var(--fs-xs); font-weight: 600; color: var(--texto-suave); }

.fi-saldo-valor {
  min-height: 1.4em;
  color: var(--texto);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.fi-saldo-valor.fi-negativo { color: var(--vermelho); }
.fi-linha-inicial > td { color: var(--texto-secundario); }
.fi-linha-inicial .te-forte { font-weight: 500; color: inherit; }

/* Extrato: o resultado de cada dia (ou mes) numa linha logo depois da ultima movimentacao dele, na faixa do fundo
   e com o valor em destaque. */
.ex-extrato .ex-grupo > td { background: var(--fundo); font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-grupo-rotulo { color: var(--texto-suave); font-size: var(--fs-sm); font-weight: 600; }

/* Competencia: o toggle Receitas | Despesas leva no botao a quantidade e o valor do tipo, e o Total (receitas
   menos despesas) fica ao lado no mesmo desenho, sem clique, com a mesma altura. */
.fu-bar .cp-tipos { height: auto; }
.cp-tipos button { gap: var(--sp-2); min-height: 72px; padding: var(--sp-2) var(--sp-3); text-align: left; }
.cp-tipos button > i { font-size: 22px; }
.cp-tipo-corpo, .cp-total-caixa { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 130px; }
.cp-tipos button.on .lc-visao-qtd, .cp-tipos button.on .lc-visao-valor { color: inherit; }

.cp-total-caixa {
  justify-content: center;
  min-height: 72px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raio-sm);
  outline: 1px solid var(--borda-forte);
  outline-offset: -1px;
  background: var(--superficie);
}

.cp-total .lc-visao-valor.fi-negativo { color: var(--vermelho); }

/* Resumo da linha: as etiquetas de categoria e de pessoa embaixo da descricao. */
.cp-chips { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 720px) {
  .cp-tipos { width: 100%; }
  .cp-tipos button { flex: 1 1 0; }
}

/* Historico: a data e hora numa linha so; no Ver detalhes, a frase em destaque, o resumo e os campos, com o
   antes apagado ao lado do depois. */
.hi-historico { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hi-historico .te-tab td:first-child { white-space: nowrap; }
.hi-evento { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hi-frase { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.hi-antes { color: var(--texto-suave); }

/* Toast: aviso curto no canto, some sozinho. */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul-info);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra-md);
  color: var(--texto);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: toastEntra .2s ease;
  transition: opacity .2s, transform .2s;
}

.toast i { flex: 0 0 auto; font-size: 18px; color: var(--azul-info); }
.toast p { min-width: 0; overflow-wrap: anywhere; }
.toast-sucesso { border-left-color: var(--verde); }
.toast-sucesso i { color: var(--verde); }
.toast-erro { border-left-color: var(--vermelho); }
.toast-erro i { color: var(--vermelho); }
.toast-aviso { border-left-color: var(--ambar); }
.toast-aviso i { color: var(--ambar); }
.toast-saindo { opacity: 0; transform: translateY(8px); }

@keyframes toastEntra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .toasts { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-caixa.entrando, .modal-caixa.saindo, dialog.popup-centrado.entrando, dialog.popup-centrado.saindo,
  .toast { animation: none; }
  .popover, .popover.aberto, .toast, .cv-sw label, .cv-sw label::after, .cd-clicavel { transition: none; }
}