/* =============================================================================
 * BOTOES
 * ===========================================================================*/
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-success {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1.1;
  white-space: nowrap;
}
.btn:hover { border-color: var(--dourado); color: var(--azul-rrgk); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
  border-radius: var(--radius-md);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-foreground); }

.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  font-weight: 500;
  border-radius: var(--radius-md);
}
.btn-secondary:hover { background: var(--muted); border-color: var(--muted-border); color: var(--text); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
}
.btn-ghost:hover { background: var(--dourado-soft-2); color: var(--azul-rrgk); }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: #B33A33; border-color: #B33A33; color: #fff; }

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.btn-sm { padding: 6px 10px; font-size: var(--fs-xs); }
.btn-bloco { width: 100%; justify-content: center; }

.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-icone:hover { background: var(--dourado-soft-2); border-color: var(--dourado); color: var(--azul-rrgk); }
.btn-icone.perigo:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* =============================================================================
 * CARDS / PAINEIS
 * ===========================================================================*/
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card-titulo {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--azul-rrgk);
  margin-bottom: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
}

/* KPI cards (dashboard) — estilo referencia RRGK */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: none;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
  min-height: 108px;
  /* Sem o wrap, rotulo e valor disputam a mesma linha e o valor vaza pela
     direita. Com ele, o valor cai pra linha de baixo quando nao cabe, que e
     o comportamento esperado de card de indicador. */
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
}
/* Card estreito (muitos KPIs na linha ou celular): rotulo em cima, valor
   embaixo, alinhado a esquerda. Lado a lado so enquanto sobra largura. */
@media (max-width: 620px) {
  .kpi { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .kpi .kpi-valor { text-align: left; }
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.kpi .kpi-corpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
  flex: 1;
}
.kpi .kpi-rotulo,
.kpi .kpi-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  /* min-width:0 permite o rotulo encolher dentro do flex em vez de empurrar
     o valor pra fora do card. Sem isso, o tamanho minimo do conteudo (a maior
     palavra) vira piso e o valor transborda. */
  min-width: 0;
  overflow-wrap: break-word;
  flex: 1 1 auto;
}
.kpi .kpi-valor {
  font-family: var(--font);
  /* Fonte fluida: 30px onde cabe, encolhendo ate 19px em card estreito.
     O valor era fixo em var(--fs-3xl) e estourava a borda direita assim que
     o card ficava menor que o numero, o que acontece com 5+ KPIs na linha
     ou em tela de celular. */
  font-size: clamp(19px, 3.4vw, var(--fs-3xl));
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  flex: 0 1 auto;
  text-align: right;
}
.kpi .kpi-sub { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; }

.kpi .kpi-icone {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  color: var(--dourado);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  align-self: flex-start;
}
/* aceita as duas convencoes: .kpi.verde e .kpi.kpi-verde */
.kpi.azul     .kpi-valor, .kpi.kpi-azul     .kpi-valor { color: var(--azul-rrgk); }
.kpi.azul     .kpi-icone, .kpi.kpi-azul     .kpi-icone { color: var(--azul-rrgk); }
.kpi.verde    .kpi-valor, .kpi.kpi-verde    .kpi-valor { color: var(--success); }
.kpi.verde    .kpi-icone, .kpi.kpi-verde    .kpi-icone { color: var(--success); }
.kpi.vermelho .kpi-valor, .kpi.kpi-vermelho .kpi-valor { color: var(--danger); }
.kpi.vermelho .kpi-icone, .kpi.kpi-vermelho .kpi-icone { color: var(--danger); }
.kpi.amarelo  .kpi-valor, .kpi.kpi-amarelo  .kpi-valor { color: var(--warning); }
.kpi.amarelo  .kpi-icone, .kpi.kpi-amarelo  .kpi-icone { color: var(--warning); }

/* =============================================================================
 * TABELAS
 * ===========================================================================*/
.tabela-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tabela-wrap.scroll { overflow-x: auto; }

/* Rolagem horizontal só na tabela, nunca no card inteiro: overflow-x:auto
   força overflow-y:auto junto (regra do CSS), e isso cortaria o popup do
   menu sanduiche por baixo. Ver Padrao_Cabecalho_da_Tabela na vault. */
.tabela-scroll { overflow-x: auto; }

/* Estado vazio de tabela (Padrao_Estado_Vazio): substitui a tabela inteira,
   nunca so as linhas. .vz-inline porque aqui a tabela e sempre secao de um
   card, nunca a tela inteira (por isso sem o flex:1 da versao de pagina cheia). */
.vz {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  flex: none; min-height: 150px; padding: 22px 16px;
}
.vz .vz-icone { font-size: 30px; color: var(--text-mute); line-height: 1; margin-bottom: 10px; }
.vz-titulo { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.vz-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; max-width: 400px; }

/* Rodape de paginacao no servidor (Padrao_Cabecalho_da_Tabela): grid de 3
   colunas pra contagem ficar na esquerda de verdade sem sobrepor os
   controles quando a janela aperta (nunca position:absolute aqui). */
.oc-pag {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.oc-pag-info { grid-column: 1; }
.oc-pag-nav { grid-column: 2; display: flex; align-items: center; gap: var(--sp-2); justify-self: center; }
.oc-pag-nav button {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  color: var(--text-soft);
}
.oc-pag-nav button:hover:not(:disabled) { border-color: var(--dourado); color: var(--azul-rrgk); }
.oc-pag-nav button:disabled { opacity: .35; cursor: not-allowed; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-2);
  font-size: var(--fs-sm);
}
.tabela th {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tabela tbody tr:hover { background: var(--dourado-soft-2); }
.tabela td.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.acoes {
  text-align: right;
  white-space: nowrap;
}
.tabela td.acoes a, .tabela td.acoes button { margin-left: 4px; }
.tabela.zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.tabela.zebra tbody tr:nth-child(even):hover { background: var(--dourado-soft-2); }

.tabela-vazia {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-mute);
  font-size: var(--fs-sm);
}

/* =============================================================================
 * FORMULARIOS
 * ===========================================================================*/
.form-grid {
  display: grid;
  gap: var(--sp-4);
  /* minmax(0, 1fr) e nao 1fr: em grid, "1fr" carrega min-width:auto implicito,
     entao a coluna nunca encolhe abaixo do conteudo dela e o form inteiro vira
     piso de largura da tela. Medido em 768px: o form exigia 809px e a pagina
     rolava na horizontal. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9  { grid-column: span 9; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
.col-2  { grid-column: span 2; }
.col-1  { grid-column: span 1; }
/* Faixa media: 12 colunas com 11 gaps de 16px gastam 176px so de respiro, e
   uma col-2 fica estreita demais pro botao que mora dentro dela, que nao
   encolhe. Antes de empilhar tudo, o grid vai pra 6 colunas e a col-2 dobra
   de largura. Medido em 900px: sem isto o form exigia 908px e a pagina rolava. */
@media (max-width: 1080px) {
  .form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
  .col-12, .col-11, .col-10, .col-9, .col-8, .col-7 { grid-column: span 6; }
  .col-6, .col-5 { grid-column: span 3; }
  .col-4, .col-3 { grid-column: span 2; }
  .col-2, .col-1 { grid-column: span 2; }
}
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11,
  .col-12 { grid-column: span 1; }
}

/* Componente de periodo (templates/_periodo.html): presets = toggle tipo 1
   (Padrao_Toggle_Tipos), mesma combinacao ja usada em .pp-grupo-acao:hover
   (borda dourado + fundo dourado-soft + texto azul-rrgk no selecionado). */
.periodo-campo { display: flex; flex-direction: column; gap: 6px; }
.periodo-presets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.periodo-presets button {
  height: 34px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}
.periodo-presets button:hover { color: var(--azul-rrgk); }
.periodo-presets button.on {
  border-color: var(--dourado);
  background: var(--dourado-soft);
  color: var(--azul-rrgk);
}
.periodo-custom { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.periodo-custom > * { flex: 1; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, label {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  font-weight: 500;
}
.campo .hint, .hint {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.input, .textarea, .select,
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"],
.campo input[type="number"], .campo input[type="date"], .campo input[type="tel"],
.campo input[type="search"], .campo input[type="url"], .campo input:not([type]),
.campo textarea, .campo select {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.input:focus, .textarea:focus, .select:focus,
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px var(--dourado-soft);
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled {
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: not-allowed;
}
.textarea, .campo textarea { resize: vertical; min-height: 90px; }

/* Grupo com input + botao anexo (ex.: CNPJ + Buscar) */
.campo .input-grupo {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
  min-width: 0;
}
.campo .input-grupo > input { flex: 1; min-width: 0; }
.campo .input-grupo > .btn-anexo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--azul-rrgk);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.campo .input-grupo > .btn-anexo:hover:not(:disabled) {
  background: var(--dourado-soft);
  border-color: var(--dourado);
}
.campo .input-grupo > .btn-anexo:disabled { opacity: 0.6; cursor: wait; }

/* Titulo dentro de card */
.card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--azul-rrgk);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: -0.005em;
}
.card .card-subtitulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.card h3 > i.ph, .card h3 > i[class*="ph-"] {
  color: var(--dourado-3);
  font-size: 1.2em;
  line-height: 1;
}
form .card { margin-bottom: var(--sp-4); }

/* Mensagem de status abaixo do campo (verde/vermelho conforme classe) */
.campo-status { font-size: var(--fs-xs); margin-top: 4px; min-height: 16px; }
.campo-status.ok  { color: var(--success); }
.campo-status.err { color: var(--danger); }

.input-senha { position: relative; }
.input-senha .input { padding-right: 40px; }
.input-senha .toggle-senha {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 4px;
  display: inline-flex;
}
.input-senha .toggle-senha:hover { color: var(--azul-rrgk); }

.check-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-soft);
  cursor: pointer;
}

/* =============================================================================
 * BADGES / STATUS
 * ===========================================================================*/
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--border-2);
  color: var(--text-soft);
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-dourado { background: var(--dourado-soft); color: var(--dourado-3); }
.badge-azul    { background: rgba(27, 42, 74, 0.08); color: var(--azul-rrgk); }

/* =============================================================================
 * FILTROS (topo das telas de listagem operacional)
 * ===========================================================================*/
.filtros {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.filtros .campo { min-width: 180px; flex: 1; }
.filtros .campo.curto { min-width: 130px; max-width: 200px; }

/* =============================================================================
 * FLASH MESSAGES
 * ===========================================================================*/
.flash {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  border-left: 3px solid;
}
.flash.success { background: var(--success-soft); color: var(--success); border-left-color: var(--success); }
.flash.error   { background: var(--danger-soft);  color: var(--danger);  border-left-color: var(--danger); }
.flash.warning { background: var(--warning-soft); color: var(--warning); border-left-color: var(--warning); }
.flash.info    { background: var(--info-soft);    color: var(--info);    border-left-color: var(--info); }

/* =============================================================================
 * ICONES
 * ===========================================================================*/
.icon { font-size: 1.05rem; line-height: 1; display: inline-flex; vertical-align: middle; }
.icon-sm { font-size: 0.9rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.65rem; }
.icon-xl { font-size: 2.5rem; }
.icon-accent  { color: var(--dourado-3); }
.icon-azul    { color: var(--azul-rrgk); }
.icon-success { color: var(--success); }
.icon-danger  { color: var(--danger); }
.icon-warning { color: var(--warning); }
.icon-muted   { color: var(--text-mute); }

/* =============================================================================
 * MODAL
 * ===========================================================================*/
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(27, 42, 74, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: var(--sp-4);
}
.modal-mask.open { display: flex; }

.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%; max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.modal-card.lg { max-width: 800px; }
.modal-card.sm { max-width: 420px; }

.modal-cab {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-cab h3 { margin: 0; font-size: var(--fs-lg); }
.modal-cab .fechar {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 1.3rem;
  padding: 4px;
}

.modal-body { padding: var(--sp-5); }
.modal-rodape {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: var(--sp-2);
}

/* =============================================================================
 * SELECTBUSCA
 * ===========================================================================*/
.selectbusca { position: relative; min-width: 180px; }
.selectbusca .sb-display {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-base);
  color: var(--text);
  user-select: none;
}
.selectbusca .sb-display:hover { border-color: var(--dourado); }
.selectbusca .sb-display .sb-label.placeholder { color: var(--text-mute); }
.selectbusca .sb-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.selectbusca.open .sb-panel { display: block; }
.selectbusca .sb-search {
  width: 100%;
  padding: 10px;
  background: var(--surface-2);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
}
.selectbusca .sb-search:focus { outline: none; background: var(--surface); }
.selectbusca .sb-opt {
  padding: 10px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
}
.selectbusca .sb-opt:hover { background: var(--dourado-soft); color: var(--azul-rrgk); }
.selectbusca .sb-opt.selecionado { background: var(--dourado-soft); color: var(--azul-rrgk); font-weight: 600; }
.selectbusca.sb-disabled .sb-display { cursor: not-allowed; opacity: .6; background: var(--surface-2); }
.selectbusca.sb-disabled .sb-display:hover { border-color: var(--border); }
.selectbusca.sb-erro .sb-display { border-color: var(--danger); }
.selectbusca.sb-mini { display: inline-block; min-width: 140px; vertical-align: middle; }
.selectbusca.sb-mini .sb-display { padding: 2px 6px; font-size: 11px; }
.selectbusca.sb-mini .sb-opt { padding: 6px 8px; font-size: 12px; }

/* =============================================================================
 * UTILITARIOS
 * ===========================================================================*/
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-mute); }
.text-soft { color: var(--text-soft); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--dourado-3); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hidden { display: none !important; }

/* =============================================================================
 * PERFIS / PERMISSOES (tela dedicada)
 * ===========================================================================*/
.pp-cab-info {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.pp-cab-info .nome-perfil {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--azul-rrgk);
}
.pp-cab-info .desc-perfil { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 2px; }

.pp-barra-global {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.pp-barra-global strong { color: var(--azul-rrgk); margin-right: var(--sp-3); font-size: var(--fs-sm); }
.pp-barra-global .esp { flex: 1; }
.ppg-acao, .pp-grupo-acao {
  padding: 5px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}
.ppg-acao:hover, .pp-grupo-acao:hover { background: var(--dourado-soft); color: var(--azul-rrgk); border-color: var(--dourado); }

.pp-grupo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pp-grupo-cab {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2);
}
.pp-grupo-cab h4 { margin: 0; color: var(--azul-rrgk); font-size: var(--fs-base); }
.pp-grupo-cab .qtd { font-size: var(--fs-xs); color: var(--text-dim); font-weight: 500; margin-left: var(--sp-2); }
.pp-grupo-cab .acoes-grupo { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-grupo-acoes-extra {
  padding: var(--sp-3) var(--sp-4);
  background: var(--dourado-soft-2);
  border-bottom: 1px solid var(--border-2);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-soft);
}
.pp-grupo-acoes-extra label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pp-tabela { width: 100%; border-collapse: collapse; }
.pp-tabela th, .pp-tabela td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-2);
  font-size: var(--fs-sm);
}
.pp-tabela th { background: transparent; color: var(--text-dim); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; }
.pp-tabela th:nth-child(2), .pp-tabela th:nth-child(3), .pp-tabela td:nth-child(2), .pp-tabela td:nth-child(3) { width: 80px; text-align: center; }
.pp-rodape-fixo {
  position: sticky; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  box-shadow: 0 -4px 12px rgba(27, 42, 74, 0.08);
  margin: var(--sp-4) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
  flex-wrap: wrap;
}
.pp-rodape-fixo .info { color: var(--text-dim); font-size: var(--fs-sm); }

/* =============================================================================
 * IMPRESSAO (Razao etc)
 * ===========================================================================*/
@media print {
  .sidebar, .topbar, .page-head .acoes, .filtros { display: none !important; }
  .main { margin-left: 0 !important; }
  body { background: white; }
  .content { padding: 0 !important; }
}

/* =============================================================================
 * TABELA COM FERRAMENTAS (TabelaAvancada): menu sanduiche, filtro por coluna,
 * ordenar, colunas. Ver static/js/tabela-avancada.js e Padrao_Tabela na vault.
 * ===========================================================================*/

/* Faixa titulo + menu: PRIMEIRA coisa dentro do card da tabela, nao solta
   sobre o fundo da pagina (Padrao_Cabecalho_da_Tabela). Usa o padding do
   .card existente (RRGK nao usa header branco sangrando ate a borda -- o
   .tabela th cinza e convencao em ~30 tabelas do sistema, mudar isso e
   fora do escopo desta fase). */
.tabela-cab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.tabela-cab .card-titulo { margin-bottom: 0; flex: 0 0 auto; }
.tabela-cab .ta-menu-wrapper { margin-left: auto; }

.ta-menu-wrapper { position: relative; display: inline-block; }
.ta-menu-btn {
  width: 36px; height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--text-soft);
  transition: all 0.15s ease;
}
.ta-menu-btn:hover { background: var(--dourado-soft-2); border-color: var(--dourado); color: var(--azul-rrgk); }
.ta-menu-btn i { font-size: 18px; }

.ta-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: 4px 0;
  display: none;
  animation: modalSobe .15s ease;
}
.ta-menu.aberto { display: block; }
.ta-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  background: none; border: none;
  width: 100%; text-align: left;
  font-family: var(--font);
  transition: all 0.15s ease;
}
.ta-menu-item:hover { background: var(--dourado-soft); color: var(--azul-rrgk); }
.ta-menu-item i {
  color: var(--text-dim);
  font-size: 16px; width: 18px; text-align: center;
  transition: color 0.15s ease;
}
.ta-menu-item:hover i { color: var(--azul-rrgk); }
.ta-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Popups da toolbar (Colunas, Ordenar) */
.ta-popup {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 300px;
  display: none;
  animation: modalSobe .15s ease;
}
.ta-popup.aberto { display: block; }
.ta-popup-cab {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 13px;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.ta-popup-cab i { color: var(--azul-rrgk); }
.ta-popup-rodape {
  display: flex; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  justify-content: space-between; align-items: center;
}
.ta-popup-rodape button {
  font-size: 12px; font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.15s ease;
}
.ta-popup-rodape button:hover { background: var(--dourado-soft-2); }
.ta-popup-rodape .ta-aplicar {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.ta-popup-rodape .ta-aplicar:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.ta-cols-lista { max-height: 280px; overflow-y: auto; padding: 6px 0; }
.ta-cols-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ta-cols-item:hover { background: var(--dourado-soft-2); }
.ta-cols-item input { width: 15px; height: 15px; accent-color: var(--azul-rrgk); cursor: pointer; }

.ta-sort-regras { padding: 8px 14px; min-height: 50px; }
.ta-sort-vazio { padding: 14px 0; text-align: center; color: var(--text-dim); font-size: 13px; }
.ta-sort-regra {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px; align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.ta-sort-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--dourado-soft);
  color: var(--dourado-3);
  font-weight: 700; font-size: 11px;
  display: grid; place-items: center;
}
.ta-sort-regra select {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font);
}
.ta-sort-dir {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  transition: all 0.15s ease;
}
.ta-sort-dir:hover { border-color: var(--dourado); color: var(--azul-rrgk); }
.ta-sort-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  padding: 2px;
}
.ta-sort-remove:hover { color: var(--danger); }

/* Filtro por coluna (Padrao_Filtro_por_Coluna): linha "contem" dentro do
   thead, ligada pelo item "Filtro por coluna" do menu, nasce fechada. */
.ta-filtro-row { display: none; }
.ta-filtro-row.aberta { display: table-row; }
.ta-filtro-row th {
  background: var(--surface);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.ta-filtro-col-input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
}
.ta-filtro-col-input:focus { outline: none; border-color: var(--dourado); }
.ta-filtro-col-input::placeholder { color: var(--text-mute); text-transform: none; }

.ta-menu-item.ativo { background: var(--dourado-soft); color: var(--azul-rrgk); }
.ta-menu-item.ativo i { color: var(--azul-rrgk); }

.ta-contagem {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  margin-right: 8px;
}

/* No papel nao ha o que clicar: menu, campo de filtro e contagem de linhas
   sao controle de tela. O titulo da faixa continua, que ele diz o que a
   tabela e. */
@media print {
  .ta-menu-wrapper, .ta-filtro-row, .ta-contagem { display: none !important; }
  .tabela-cab { border-bottom: none; padding-bottom: 0; }
}

/* =============================================================================
 * LANCAMENTO EM LOTE (tabela editavel estilo planilha)
 * Celula = input/select apertados. Larguras minimas por coluna evitam que a
 * descricao (unica coluna elastica) engula os selects em telas medias.
 * ===========================================================================*/
.lote-tabela th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); padding: 8px 6px;
  background: var(--surface-2); border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.lote-tabela td { padding: 4px 4px; border-bottom: 1px solid var(--border-2); vertical-align: top; }
.lote-tabela .col-vcto  { width: 130px; }
.lote-tabela .col-tipo  { width: 100px; }
.lote-tabela .col-desc  { min-width: 200px; }
.lote-tabela .col-cat   { width: 180px; }
.lote-tabela .col-cli   { width: 200px; }
.lote-tabela .col-conta { width: 140px; }
.lote-tabela .col-valor { width: 110px; }
.lote-tabela .col-x     { width: 40px; }

.cel-inp, .cel-sel {
  width: 100%; box-sizing: border-box; height: 32px;
  padding: 4px 6px; font-size: 13px; font-family: var(--font);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
}
.cel-inp:focus, .cel-sel:focus {
  outline: none; border-color: var(--dourado);
  box-shadow: 0 0 0 2px var(--dourado-soft);
}
.cel-inp.text-right { text-align: right; font-variant-numeric: tabular-nums; }
.cel-cli-texto { margin-top: 3px; }
.cel-remove { padding: 4px 6px; }

.lote-linha.lote-invalida td { background: var(--danger-bg); }
.lote-linha.lote-invalida .cel-inp:not([value]):not(:focus),
.lote-linha.lote-invalida .cel-sel:invalid,
.lote-linha.lote-invalida .cel-inp[value=""]:not(:focus) {
  border-color: var(--danger);
}

.lote-status {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.lote-status.ok  { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.lote-status.err { background: var(--danger-bg);  color: var(--danger-text);  border: 1px solid var(--danger-border); }

.ph-spin { animation: sk-spin .8s linear infinite; display: inline-block; }
@keyframes sk-spin { to { transform: rotate(360deg); } }