/* Botoes */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  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: var(--transition);
  text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn-primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-contrast); font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger {
  background: var(--danger); border-color: var(--danger);
  color: var(--danger-contrast); font-weight: 600;
}
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.btn-block { width: 100%; justify-content: center; }

/* Cards e paineis */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
/* Padding por tamanho (Padrao_Box_Card): 12 / 16 / 20-24 */
.card-sm { padding: var(--sp-3); }
.card-lg { padding: var(--sp-5); }

/* Boxes irmaos em grid tem OBRIGATORIAMENTE a mesma altura */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}
.card-grid > .card { height: 100%; }

/* Card clicavel: nunca muda background no hover, so borda + sombra + elevacao */
.card-clicavel { cursor: pointer; transition: var(--transition); }
.card-clicavel:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.glass {
  background: var(--surface-glass); backdrop-filter: var(--blur);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

/* KPI cards (so em dashboard, nunca em telas de listagem operacional) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.kpi-card .kpi-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
}
.kpi-card .kpi-value {
  font-family: var(--font-titulo);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.kpi-card .kpi-value.positive { color: var(--success); }
.kpi-card .kpi-value.negative { color: var(--danger); }
.kpi-card .kpi-value.neutral { color: var(--text); }

/* KPI Dashboard completo (Padrao_KPI_Dashboard): grid 6/3/2, faixa 3px, icone 44x44 */
.kpi-grid-full {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: var(--sp-5);
}
@media (max-width: 1300px) { .kpi-grid-full { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .kpi-grid-full { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.kpi2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kpi2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-strip-accent);
}
.kpi2.kpi2-success::before { background: var(--kpi-strip-success); }
.kpi2.kpi2-danger::before  { background: var(--kpi-strip-danger); }
.kpi2.kpi2-warning::before { background: var(--kpi-strip-warning); }

.kpi2 .kpi2-ico {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
}
.kpi2.kpi2-success .kpi2-ico { background: var(--success-soft); color: var(--success); }
.kpi2.kpi2-danger  .kpi2-ico { background: var(--danger-soft); color: var(--danger); }
.kpi2.kpi2-warning .kpi2-ico { background: var(--warning-soft); color: var(--warning); }

.kpi2 .kpi2-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.kpi2 .kpi2-lbl {
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  line-height: 1.2;
  min-height: 25px;
  display: flex;
  align-items: flex-end;
}
/* Padrao_KPI_Dashboard.md:114-121 (.val): 20px/800/-.5px, citado a integra pro componente cheio */
.kpi2 .kpi2-val {
  font-family: var(--font-titulo);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.kpi2.kpi2-pos .kpi2-val { color: var(--success); }
.kpi2.kpi2-neg .kpi2-val { color: var(--danger); }
.kpi2 .kpi2-disc {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 4px;
  line-height: 1.2;
  font-style: italic;
  min-height: 14px;
}
.kpi2.kpi2-pos { background: var(--kpi-pos-bg); border-color: var(--kpi-pos-border); }
.kpi2.kpi2-neg { background: var(--kpi-neg-bg); border-color: var(--kpi-neg-border); }

@media (max-width: 720px) {
  .kpi2 { padding: 12px 11px; gap: 9px; }
  .kpi2 .kpi2-ico { width: 36px; height: 36px; font-size: 17px; border-radius: 9px; }
  .kpi2 .kpi2-lbl { font-size: 9.5px; min-height: 23px; }
  .kpi2 .kpi2-val { font-size: 18px; }
  .kpi2 .kpi2-disc { font-size: 10px; min-height: 13px; }
}

/* Alertas deterministicos do dashboard */
.alerta-box {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}
.alerta-box i { font-size: 22px; line-height: 1; flex-shrink: 0; }
.alerta-box .alerta-titulo { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.alerta-box .alerta-msg { font-size: var(--fs-sm); color: var(--text-dim); }
.alerta-box.alerta-success { background: var(--success-soft); border-color: var(--success); }
.alerta-box.alerta-success i { color: var(--success); }
.alerta-box.alerta-danger { background: var(--danger-soft); border-color: var(--danger); }
.alerta-box.alerta-danger i { color: var(--danger); }
.alerta-box.alerta-warning { background: var(--warning-soft); border-color: var(--warning); }
.alerta-box.alerta-warning i { color: var(--warning); }

/* Grafico: card + estado vazio sobreposto */
.dash-chart-card { position: relative; }
.dash-chart-vazio { padding: var(--sp-5) var(--sp-4); }
.dash-chart-vazio i { font-size: 36px; }
.dash-chart-titulo { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; }
.dash-secao-titulo { margin: var(--sp-5) 0 var(--sp-3); }
.dash-alertas { margin-bottom: var(--sp-4); }
.dash-oculto { display: none; }
/* especificidade extra: .estado-vazio (definido depois no arquivo) tem display:flex
   e precisa perder pra .dash-oculto quando os dois coexistem no mesmo elemento */
.dash-oculto.estado-vazio { display: none; }

/* Seletor de periodo do grafico temporal: Padrao_Toggle_Tipos Tipo 1 (multi-opcoes) */
.periodo-presets {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  margin-bottom: var(--sp-4);
}
.periodo-btn {
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
}
.periodo-btn:hover { color: var(--accent); }
.periodo-btn.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Tabelas */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.table td { font-size: 14px; }
.table th {
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.table tr:hover td { background: var(--bg-elev); }
.table th.th-valor, .table td.td-valor { text-align: right; }
.table th.th-acoes { width: 56px; }

/* Responsivo: tabela com scroll horizontal no mobile */
/* overflow-y: hidden neutraliza a coercao da spec CSS Overflow que forca
   overflow-y=auto quando overflow-x!=visible, gerando barra vertical fantasma
   dentro do card (Fase 13 tratava so via position:fixed do popover; aqui vale
   pra listagens sem popover, como plataforma/index.html). */
.table-wrap { overflow: auto hidden; }

/* Fase 20: modo visitante restrito (Fase 30: so Superadmin BIHub consultando
   qualquer org; Escritorio na propria carteira NAO entra mais aqui, edita normal).
   Esconde botoes de escrita globalmente. O bloqueio real e no backend
   (auth.py bloquear_escrita_modo_visitante), este CSS so retira ruido da UI. */
body.modo-visitante .topo-acoes .btn-primary,
body.modo-visitante [data-confirm-form],
body.modo-visitante .popover-item[href*="/novo"],
body.modo-visitante .popover-item[href*="/editar"],
body.modo-visitante .popover-item[href*="/duplicar"] {
  display: none !important;
}
.banner-visitante {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
}
.banner-visitante i { font-size: 16px; }

.link-faturas {
  color: var(--text-dim);
  margin-left: var(--sp-2);
  vertical-align: middle;
  transition: color .15s;
}
.link-faturas:hover { color: var(--accent); }

/* Forms */
.field { margin-bottom: var(--sp-4); }
.field-largo { flex: 2; }
/* Label de form: 13px peso 600, SEM uppercase (Padrao_Formulario) */
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: var(--sp-2);
}
/* Controles a 40px de altura (Padrao_Formulario) */
.input, .textarea {
  width: 100%;
  height: var(--altura-controle);
  padding: 0 var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  transition: border-color var(--transition);
}
/* Botao da barra de formulario na mesma altura dos campos (Padrao_Formulario:109) */
.campo-acao > .btn { height: var(--altura-controle); }
/* Rotulo vazio ocupa a linha inteira, assim o botao fica na altura dos campos */
.form-row > .campo-acao > label { display: block; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled, .textarea:disabled {
  background: var(--surface-hover);
  color: var(--text-faint);
  cursor: not-allowed;
}
.textarea { height: auto; min-height: 80px; padding: var(--sp-3); resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.form-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .form-actions .btn { flex: 1 1 auto; }
}

/* Badges */
.badge {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-block;
}
.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-neutral { background: var(--surface-hover); color: var(--text-dim); }

/* Filtros (topo das telas de listagem operacional) */
.filtros {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  align-items: flex-end;
}

/* SelectBusca (substitui o select nativo) */
.selectbusca { position: relative; min-width: 200px; }
/* Mesma altura do .input (Padrao_Formulario:109); antes o padding dava 49px
   no desktop. Texto longo corta com reticencias em vez de quebrar a linha. */
.selectbusca .sb-display {
  height: var(--altura-controle);
  box-sizing: border-box;
  padding: 0 var(--sp-3);
  font-size: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.selectbusca .sb-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selectbusca .sb-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: var(--z-dropdown);
  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: var(--sp-3);
  background: var(--bg-elev);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
}
.selectbusca .sb-opt {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
}
.selectbusca .sb-opt:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Flash messages */
.flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.flash { transition: opacity .3s ease; }
.flash.saindo { opacity: 0; }
.flash.success { background: var(--success-soft); color: var(--success); }
.flash.error { background: var(--danger-soft); color: var(--danger); }
.flash.warning { background: var(--warning-soft); color: var(--warning); }
.flash.info { background: var(--info-soft); color: var(--info); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--sp-6);
  color: var(--text-dim);
}
.empty-state h3 {
  margin-bottom: var(--sp-3);
  color: var(--text);
}

/* Tipo org badge */
.tipo-pf { background: var(--info-soft); color: var(--info); }
.tipo-pj { background: var(--accent-soft); color: var(--accent); }
.tipo-escritorio { background: var(--warning-soft); color: var(--warning); }
.tipo-familia { background: var(--success-soft); color: var(--success); }

/* ============================================================
   TOGGLE LIGA/DESLIGA (Padrao_Toggle_OnOff - estilo on/off, 42x24)
   Trio obrigatorio: span.cv-sw + input[type=checkbox] + label.
   O display:none no input e o que impede o checkbox nativo do browser
   de aparecer. Sem essa linha, a tela ganha visual de Windows 98.
   ============================================================ */
.cv-sw {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-block;
}
.cv-sw input { display: none; }
.cv-sw label {
  position: absolute;
  inset: 0;
  background: var(--toggle-track);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition);
}
.cv-sw label::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--toggle-knob);
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.cv-sw input:checked + label { background: var(--toggle-on); }
.cv-sw input:checked + label::after { transform: translateX(18px); }
.cv-sw input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Variante compacta 36x20, SO em tabela densa. Nao criar um terceiro tamanho. */
.cv-sw.cv-sw-compacto { width: 36px; height: 20px; }
.cv-sw.cv-sw-compacto label::after { width: 16px; height: 16px; }
.cv-sw.cv-sw-compacto input:checked + label::after { transform: translateX(16px); }

/* Toggle com rotulo ao lado */
.cv-rev { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cv-rev-lbl {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ============================================================
   MODAL (Padrao_Modal + Padrao_Elevacao_Zindex + Padrao_Transicao_Simetrica)
   Estrutura controlada, tamanho em vw/vh, nunca max-width em px.
   Acao destrutiva usa .btn-danger, nunca .btn-primary.
   ============================================================ */
/* Backdrop escurecido com blur leve */
.modal-bg {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: var(--backdrop-blur);
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.modal-bg.visivel { display: flex; }

/* Caixa base, sem tamanho: o tamanho vem de .modal-sm / .modal-md / .modal-lg */
.modal-caixa {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modalSobe .2s ease;
}

/* Tamanhos oficiais em vw/vh (Fibonacci 34-55-89). Nunca px:
   modal calibrado em px encolhe no ultrawide e estoura no notebook. */
.modal-caixa.modal-sm { width: 34vw; max-height: 42vh; }
.modal-caixa.modal-md { width: 55vw; max-height: 70vh; }
.modal-caixa.modal-lg { width: 89vw; max-height: 90vh; }

/* Sem classe de tamanho, cai no md (default seguro) */
.modal-caixa:not(.modal-sm):not(.modal-md):not(.modal-lg):not(.modal-confirm) {
  width: 55vw;
  max-height: 70vh;
}

@media (max-width: 1280px) {
  .modal-caixa.modal-md,
  .modal-caixa:not(.modal-sm):not(.modal-md):not(.modal-lg):not(.modal-confirm) { width: 68vw; }
}
@media (max-width: 880px) {
  .modal-caixa.modal-sm,
  .modal-caixa.modal-md,
  .modal-caixa.modal-lg,
  .modal-caixa.modal-confirm,
  .modal-caixa:not(.modal-sm):not(.modal-md):not(.modal-lg):not(.modal-confirm) {
    width: 96vw;
    max-height: 92vh;
  }
}

/* Entra subindo com fade; ao fechar, o caminho e o mesmo invertido
   (Padrao_Transicao_Simetrica) */
@keyframes modalSobe {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.modal-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-faint);
  display: grid;
  place-items: center;
}
.modal-x:hover { color: var(--text); }

.modal-corpo { padding: 22px; }

/* Botao primario SEMPRE a direita, secundario a esquerda */
.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: 16px 22px;
  border-top: 1px solid var(--border);
}

/* Variante confirm: acao destrutiva ou aviso curto. Rodape centralizado. */
.modal-caixa.modal-confirm {
  width: 34vw;
  max-height: 42vh;
  text-align: center;
}
/* Mobile depois da variante (Padrao_Modal:201): a regra acima tem a mesma
   especificidade do bloco @880 la em cima e, vindo depois, anulava os 96vw */
@media (max-width: 880px) {
  .modal-caixa.modal-confirm { width: 96vw; max-height: 92vh; }
}
.modal-confirm .modal-rodape { justify-content: center; }
.confirm-corpo { padding: 32px 28px 12px; }
.confirm-corpo h3 { font-size: 18px; margin-bottom: var(--sp-2); }
.confirm-corpo p { color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.confirm-icone {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.confirm-icone i { font-size: 36px; }
.confirm-icone.confirm-perigo { background: var(--danger-soft); color: var(--danger); }
.confirm-icone.confirm-aviso { background: var(--warning-soft); color: var(--warning); }
.confirm-icone.confirm-info { background: var(--info-soft); color: var(--info); }

/* ============================================================
   ESTADOS: vazio, carregando, erro (componentes reutilizaveis)
   ============================================================ */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  color: var(--text-dim);
}
.estado-vazio i { font-size: 44px; color: var(--text-faint); line-height: 1; }
.estado-vazio-titulo {
  font-family: var(--font-titulo);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin-top: var(--sp-2);
}
.estado-vazio-msg { font-size: var(--fs-sm); color: var(--text-dim); }
.estado-vazio .btn { margin-top: var(--sp-3); }

.estado-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius);
  color: var(--text);
}
.estado-erro i { color: var(--danger); font-size: 20px; line-height: 1; }

/* Spinner com texto ao lado. NUNCA dentro do botao (Padrao_Loading_Estado).
   A cor do spinner e a cor da marca. */
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.loading-inline::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar .6s linear infinite;
}
.loading-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  color: var(--text-dim);
}
.loading-bloco::before {
  content: '';
  width: 32px;
  height: 32px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar .6s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .loading-inline::before, .loading-bloco::before { animation-duration: 2s; }
  .modal-caixa { animation: none; }
  .card-clicavel, .cv-sw label, .cv-sw label::after { transition: none; }
}

/* ============================================================
   ALTERNADOR DE TEMA (usa o mesmo trio cv-sw)
   ============================================================ */
.tema-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tema-toggle i { font-size: 16px; color: var(--text-dim); line-height: 1; }

/* ============================================================
   MARCA
   ============================================================ */
.marca-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent);
}
.assinatura-bihub {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
  letter-spacing: .01em;
}

/* ============================================================
   LISTAGENS OPERACIONAIS (Fase 5)
   Listagens_sem_KPI: nada de card de KPI aqui. Resumo e so texto+numero.
   ============================================================ */

/* Resumo leve (nao e KPI): rotulo + numero em linha, sem icone/faixa/grid */
.resumo-bar {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}
.resumo-item { color: var(--text-dim); }
.resumo-item strong {
  color: var(--text);
  font-weight: 700;
  margin-left: 4px;
}
.resumo-item strong.positive { color: var(--success); }
.resumo-item strong.negative { color: var(--danger); }

/* Barra de filtros (Padrao_Formulario / Padrao_Barra_de_Filtros), recolhivel */
.ra-bar-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
}
.ra-bar-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}
.ra-bar-titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.ra-bar-corpo {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 0 var(--sp-4) var(--sp-4);
}
.filtros-recolhidos .ra-bar-corpo { display: none; }

.ra-bar-corpo .campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ra-bar-corpo .campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.ra-bar-corpo .input,
.ra-bar-corpo .selectbusca .sb-display,
.ra-bar-corpo > .btn {
  height: var(--altura-controle);
  box-sizing: border-box;
}
.ra-bar-corpo .input { min-width: 160px; }
.ra-bar-corpo .selectbusca { min-width: 170px; }
.ra-bar-corpo .campo-acao label { visibility: hidden; }

@media (max-width: 720px) {
  .ra-bar-corpo .campo { flex: 1 1 100%; }
}

/* Coluna de acoes: slots fixos com esmaecimento (Padrao_Tabela) */
.celula-acoes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}
.btn-icone {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  transition: background var(--transition), color var(--transition);
}
.btn-icone:hover { background: var(--surface-hover); color: var(--text); }
.btn-icone.perigo:hover { color: var(--danger); }
.btn-icone.desabilitado { opacity: .30; cursor: not-allowed; }
.btn-icone.desabilitado:hover { background: transparent; color: var(--text-dim); }

/* Modal de detalhes: lista label/valor */
.detalhe-linha {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.detalhe-linha:last-child { border-bottom: none; }
.detalhe-lbl { color: var(--text-dim); }
.detalhe-val { color: var(--text); font-weight: 600; text-align: right; }

/* Badge de origem (movimentacoes.origem) */
.badge-origem { background: var(--surface-hover); color: var(--text-dim); }

/* Valor da coluna com cor semantica (evita style= inline) */
.valor-cel { font-weight: 600; text-align: right; }
.valor-cel.positive { color: var(--success); }
.valor-cel.negative { color: var(--danger); }

/* Slot de acao esmaecido dentro do menu de 3 pontos (Padrao_Tabela) */
.popover-item.desabilitado { opacity: .45; cursor: not-allowed; }
.popover-item.desabilitado:hover { background: transparent; color: var(--text); }

/* Fase 42: grupo recolhivel de fatura de cartao na tabela de Contas a pagar.
   Cor so via token (Sistema_de_Estilos). O toggle mora em listagens.js. */
.fatura-grupo-cab { cursor: pointer; }
.fatura-grupo-cab > .fatura-grupo-td {
  background: var(--accent-soft);
  border-top: 2px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
}
.fatura-grupo-cab:hover > .fatura-grupo-td { background: var(--surface-hover); }
.fatura-grupo-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fatura-grupo-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.fatura-grupo-caret { color: var(--text-dim); display: inline-flex; font-size: 16px; }
.fatura-grupo-icone { color: var(--accent); font-size: 18px; }
.fatura-grupo-titulo { font-weight: 700; color: var(--text); }
.fatura-grupo-contagem { font-size: var(--fs-xs); color: var(--text-dim); }
.fatura-grupo-subtotal { margin-left: auto; font-weight: 700; color: var(--text); }
/* linha de compra escondida quando o grupo esta recolhido */
tr.grupo-oculto { display: none; }
/* mobile (.tabela-cards): sem data-label fantasma no cabecalho do grupo */
.fatura-grupo-td::before { content: none !important; }

/* Form escondido que so existe pra dar action ao modal de confirmacao */
.oculto-form { display: none; }

/* Select compacto pra uso dentro de celula de tabela (evita style= inline) */
.input-compacto { min-width: 120px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); height: auto; }

/* Lista numerada de passos (ex.: instrucoes de vinculacao) */
.lista-passos { line-height: 2; padding-left: var(--sp-5); }

/* Bloco secundario separado por linha (ex.: acao opcional dentro de um card) */
.secao-separada {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* Codigo de vinculacao do Telegram, em destaque */
.codigo-vinculo {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
  font-family: monospace;
  margin: var(--sp-3) 0;
}

/* Tabela vira card no mobile (Fase 5, criterio: sem rolagem horizontal a 390px) */
@media (max-width: 720px) {
  .tabela-cards thead { display: none; }
  .tabela-cards, .tabela-cards tbody, .tabela-cards tr, .tabela-cards td { display: block; width: 100%; }
  .tabela-cards tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
  }
  .tabela-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px 0;
    border-bottom: none;
    text-align: right;
  }
  .tabela-cards td::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
    text-align: left;
  }
  .tabela-cards td:empty,
  .tabela-cards td[data-label=""] { display: none; }
  .tabela-cards td.td-acoes { justify-content: flex-end; }
  .tabela-cards td.td-acoes::before { display: none; }
}

/* Marca propria por escritorio (Fase 10, Padrao_Upload_Arquivo adaptado) */
.upload-logo {
  display: block;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-align: center;
  color: var(--text-dim);
  cursor: pointer;
  transition: .15s;
  user-select: none;
}
.upload-logo:hover,
.upload-logo.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  border-style: solid;
}
.upload-logo.carregado {
  border-style: solid;
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}
.upload-logo i { font-size: 36px; display: block; margin-bottom: var(--sp-2); }
.upload-logo-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.marca-logo-atual {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.marca-logo-atual img {
  max-height: 48px;
  max-width: 160px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-2);
}
.marca-cor-linha {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.marca-cor-linha input[type="color"] {
  width: 48px;
  height: var(--altura-controle);
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

/* Fase 18: Conciliacao bancaria (padroes ja existentes reaproveitados
   para KPIs/tabela/modal; aqui so o que e especifico da tela). */
.kpi-card.kpi-warning { border-top: 3px solid var(--warning); }
.kpi-card.kpi-info    { border-top: 3px solid var(--accent); }
.kpi-card.kpi-success { border-top: 3px solid var(--success); }
.kpi-card.kpi-neutral { border-top: 3px solid var(--border-strong); }

.cartao-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.cartao-titulo {
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--text);
}
.cartao-lado { text-align: right; }
.cartao-valor {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
}

.valor-positivo { color: var(--success); font-weight: 600; }
.valor-negativo { color: var(--danger);  font-weight: 600; }

.conc-mini {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  margin-right: 2px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
}
.conc-mini-pendente   { background: var(--surface-hover); color: var(--text-dim); }
.conc-mini-sugerido   { background: var(--warning-soft);  color: var(--warning); }
.conc-mini-conciliado { background: var(--success-soft);  color: var(--success); }
.conc-mini-ignorado   { background: var(--surface-hover); color: var(--text-faint); }
.conc-mini-total      { color: var(--text-dim); font-size: var(--fs-xs); }

.conc-manual {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 220px;
}
.conc-manual .selectbusca { min-width: 180px; }

/* Fase 24: seletor de empresa-cliente pro escritorio conciliar sem trocar de org. */
.conc-seletor-empresa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: 460px;
  margin-bottom: var(--sp-4);
}
.conc-seletor-empresa > label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.conc-seletor-empresa .selectbusca { width: 100%; }

/* Fase 19: Orcamento (previsto x realizado por categoria).
   Reaproveita kpi-card/table/campo; aqui so a barra de execucao. */
.orc-barra {
  position: relative;
  width: 100%;
  min-width: 120px;
  height: 8px;
  background: var(--surface-hover);
  border-radius: 999px;
  overflow: hidden;
}
.orc-barra-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 200ms ease;
}
.orc-barra-fill.ok       { background: var(--success); }
.orc-barra-fill.alerta   { background: var(--warning); }
.orc-barra-fill.estouro  { background: var(--danger); }

.orc-pct {
  display: inline-block;
  min-width: 46px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  line-height: 1.8;
  background: var(--surface-hover);
  color: var(--text-dim);
}
.orc-pct.ok      { background: var(--success-soft); color: var(--success); }
.orc-pct.alerta  { background: var(--warning-soft); color: var(--warning); }
.orc-pct.estouro { background: var(--danger-soft);  color: var(--danger); }

.orc-form-inline {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) auto 150px 1fr auto;
  gap: var(--sp-2);
  align-items: end;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.orc-tipo-seg { margin-bottom: 0; }
@media (max-width: 720px) {
  .orc-form-inline { grid-template-columns: 1fr; }
}

.orc-secao-titulo {
  font-family: var(--font-titulo, inherit);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
  margin: var(--sp-4) 0 var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-2);
}
.orc-secao-titulo .orc-badge {
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--text-dim);
}
.orc-secao-titulo .orc-badge.receita { background: var(--success-soft); color: var(--success); }
.orc-secao-titulo .orc-badge.despesa { background: var(--danger-soft);  color: var(--danger); }

/* Fase 21: tela de importacao xlsx (Padrao_Tabs client-side + upload) */
.importacao-descricao {
  color: var(--text-dim);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
}
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.aba {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color .15s, border-color .15s, background .15s;
}
.aba:hover { color: var(--text); background: var(--surface-hover); }
.aba.ativa {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.aba i { font-size: 16px; }
.aba-painel { display: none; }
.aba-painel.ativa { display: block; }
.aba-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.aba-cabecalho h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.aba-explicacao {
  color: var(--text-dim);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
}
.form-upload-import .upload-arquivo {
  display: block;
  margin-top: var(--sp-2);
  font-weight: 600;
  color: inherit;
}
.form-upload-import .form-acoes {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-4);
}
/* Fase 22: seletor de empresa alvo no topo da importacao */
.importacao-seletor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.importacao-seletor-rotulo {
  font-weight: 600;
  color: var(--text);
}
.importacao-seletor-ajuda {
  margin: 0;
  font-size: var(--fs-sm);
}
.importacao-vazia {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.aba.desabilitada {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.aba-painel.desabilitada { display: none; }

/* ========================================================================== */
/* Fase 31: Pendencias (escritorio -> empresa). Zero hex cru; so var(--*).     */
/* ========================================================================== */

/* Badge do item de menu (contador de pendencias que aguardam acao) */
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--danger);
  color: var(--on-danger, #fff);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Badges de tipo e status */
.pend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}
.pend-badge-doc {
  background: var(--accent-soft);
  color: var(--accent);
}
.pend-badge-info {
  background: var(--info-soft, var(--accent-soft));
  color: var(--info, var(--accent));
}
.pend-status-aberta {
  background: var(--info-soft, var(--accent-soft));
  color: var(--info, var(--accent));
}
.pend-status-aguardando_aprovacao {
  background: var(--warning-soft);
  color: var(--warning);
}
.pend-status-resolvida {
  background: var(--success-soft);
  color: var(--success);
}
.pend-status-rejeitada {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Link do titulo na listagem */
.pend-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.pend-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Cabecalho do detalhe */
.pend-cabecalho .pend-cabecalho-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.pend-titulo {
  margin: 0;
  font-size: var(--fs-lg);
}
.pend-meta {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.pend-meta i {
  margin-right: 4px;
}
.pend-descricao {
  margin-top: var(--sp-3);
  color: var(--text);
  white-space: pre-wrap;
}
.pend-secao-titulo {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
}

/* Aviso (rejeicao, alertas) */
.pend-aviso {
  border-left: 4px solid var(--warning);
  background: var(--warning-soft);
}
.pend-aviso-erro {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.pend-aviso p {
  margin: var(--sp-1) 0 0;
}
.pend-aviso-inline {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md, 8px);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--fs-sm);
}
.pend-aviso-inline i {
  margin-right: 4px;
}

/* Lista de anexos */
.pend-anexos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pend-anexo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elev, var(--bg));
}
.pend-anexo-info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.pend-anexo-nome {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pend-anexo-tamanho {
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

/* Dropzone de anexar */
.pend-anexar-form {
  margin-top: var(--sp-3);
}
.pend-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md, 8px);
  color: var(--text-dim);
  background: var(--bg);
  cursor: pointer;
  text-align: center;
}
.pend-drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pend-drop i {
  font-size: 24px;
}
.pend-drop-texto strong {
  color: var(--accent);
}
.pend-drop-ajuda {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.pend-anexar-acoes {
  margin-top: var(--sp-2);
  display: flex;
  justify-content: flex-end;
}

/* Blocos de responder / rejeitar / excluir */
.pend-responder,
.pend-aprovacao {
  margin-top: var(--sp-3);
}
.pend-resposta {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elev, var(--bg));
  border-left: 3px solid var(--accent);
  margin-bottom: var(--sp-3);
}
.pend-resposta-rotulo {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pend-resposta p {
  margin: var(--sp-1) 0 0;
  white-space: pre-wrap;
}
.pend-form-acoes {
  margin-top: var(--sp-3);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.pend-form-acoes-dupla {
  justify-content: flex-start;
  gap: var(--sp-3);
}
.pend-rejeitar-box {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.pend-excluir {
  margin-top: var(--sp-4);
  text-align: right;
}

/* Timeline */
.pend-timeline-card {
  margin-top: var(--sp-3);
}
.pend-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pend-timeline li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.pend-timeline i {
  color: var(--accent);
}
.pend-drop-erro { color: var(--danger); }

/* Formulario de pendencia (modal Nova + textareas do detalhe) */
.pend-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.pend-form-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pend-form-campo label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.pend-form-campo .input,
.pend-form-campo input,
.pend-form-campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elev, var(--bg));
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
}
.pend-form-campo textarea {
  resize: vertical;
  min-height: 84px;
}
.pend-form-campo input:focus,
.pend-form-campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pend-form-campo-metade { max-width: 50%; }
@media (max-width: 720px) {
  .pend-form-campo-metade { max-width: 100%; }
}

/* ============ ASSISTENTE (Fase 34) ============
   Padrao_Marca_IA + Sempre_Marcar_IA: TUDO em roxo, ph-sparkle sempre.
   Padrao_Formulario: barra de entrada obedece 40px + label+  .
   Padrao_Box_Card: cards de mensagem usam tokens do sistema.
   ZERO hex cru — so var(--ia-*) e tokens gerais do projeto. */

/* Coluna centrada da conversa */
.ia-conversa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 820px;
  margin: 0 auto;
}

/* Bloco convite (Padrao_Marca_IA:56 — gradiente pastel + titulo + descricao) */
.bloco-ia {
  background: linear-gradient(135deg, var(--ia-pastel-1), var(--ia-pastel-2));
  border: 1px solid var(--ia-borda);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.bloco-ia h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ia-texto);
}
.bloco-ia p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ia-texto);
}

/* Mensagens (Padrao_Box_Card: .cd base, sem inventar) */
.ia-msg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 88%;
}
/* Bolha do usuario dentro do chat de IA usa --ia-suave (Sempre_Marcar_IA:24
   manda IA ser SEMPRE roxa, inclusive fundo de mensagem dentro da conversa). */
.ia-msg-user      { align-self: flex-end;   background: var(--ia-suave); border-color: var(--ia-borda); }
.ia-msg-assistant { align-self: flex-start; }
.ia-msg-corpo {
  font-size: var(--fs-base);
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ia-msg-meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Card de proposta pendente (variante IA do Padrao_Box_Card:163) */
.ia-proposta {
  align-self: flex-start;
  max-width: 88%;
  background: linear-gradient(135deg, var(--ia-pastel-1), var(--ia-pastel-2));
  border: 1px solid var(--ia-borda);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ia-proposta-titulo {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ia-texto);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ia-proposta-resumo {
  font-size: var(--fs-sm);
  color: var(--ia-texto);
  white-space: pre-wrap;
  line-height: 1.5;
}
.ia-proposta-acoes {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* Botao IA (Padrao_Marca_IA:165 — 40px pra bater com Padrao_Formulario) */
.btn-ia {
  background: var(--ia-primario);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-4);
  height: var(--altura-controle);
  box-sizing: border-box;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: var(--transition);
}
.btn-ia:hover                { background: var(--ia-primario-hover); }
.btn-ia:disabled             { background: var(--ia-primario-disabled); cursor: wait; }
[data-theme="dark"] .btn-ia  { color: #0D0F12; }

/* Loading inline (Padrao_Marca_IA:270 — spinner e texto em roxo) */
.ia-loading {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ia-texto);
  font-size: var(--fs-sm);
}
.ia-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ia-borda);
  border-top-color: var(--ia-primario);
  border-radius: 50%;
  animation: ia-spin .7s linear infinite;
}
@keyframes ia-spin { to { transform: rotate(360deg); } }

/* Barra de entrada (Padrao_Formulario:35 — .campo + label + 40px + flex-end) */
.ia-bar {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
}
.ia-bar .campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ia-bar label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}
.ia-bar .input {
  height: var(--altura-controle);
  box-sizing: border-box;
  min-width: 240px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.ia-bar .input:focus {
  outline: 0;
  border-color: var(--ia-primario);
  box-shadow: 0 0 0 3px var(--ia-suave);
}
.ia-bar .campo-msg { flex: 1; }
.ia-bar .campo-acao { display: flex; flex-direction: column; gap: 5px; }

/* ============ TELEGRAM — TELA DE VINCULACAO (Fase 37) ============
   Padrao_Box_Card: tokens do sistema, zero valor solto.
   Padrao_Marca_IA: bloco marcado como IA usa var(--ia-*).
   Tela_Nao_Tem_Manual: instrucao COLADA no controle, nao paragrafo cinza. */

/* Estado inicial (sem codigo): convite grande e centrado. */
.tg-intro {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
}
.tg-intro-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 32px;
  margin-bottom: var(--sp-3);
}
.tg-intro-titulo {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  color: var(--text);
}
.tg-intro-msg {
  font-size: var(--fs-base);
  color: var(--text-dim);
  max-width: 480px;
  margin: 0 auto var(--sp-5);
  line-height: 1.5;
}

/* Passos numerados grandes (aparecem so quando ha codigo). */
.tg-passos-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.tg-passo {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.tg-passo-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-titulo);
  font-size: var(--fs-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-passo-conteudo { flex: 1; min-width: 0; }
.tg-passo-titulo {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.tg-passo-msg {
  font-size: var(--fs-base);
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 var(--sp-3);
}
.tg-passo-msg strong { color: var(--text); font-weight: 600; }
.tg-passo-obs {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  margin: var(--sp-2) 0 0;
}
.tg-inline-link { color: var(--accent); font-weight: 500; }

/* Sublista dentro do passo (cenario PC+celular). Numerada, respiro pequeno. */
.tg-sublista {
  margin: var(--sp-2) 0 var(--sp-3) var(--sp-5);
  padding: 0;
  font-size: var(--fs-base);
  color: var(--text-dim);
  line-height: 1.5;
}
.tg-sublista li { margin-bottom: var(--sp-2); }
.tg-sublista strong { color: var(--text); font-weight: 600; }
.tg-sublista code {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 6px;
  font-size: 0.92em;
  color: var(--text);
}

/* Botao grande "Abrir bot no Telegram" — largo pra ser o alvo obvio. */
.tg-btn-abrir {
  display: inline-flex;
  padding: 12px var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 600;
}

/* Caixa com o codigo destacado — monoespaco, selecionavel facil. */
.tg-codigo-caixa {
  background: var(--surface-hover);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.tg-codigo-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.tg-codigo-valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-lg);
  color: var(--text);
  background: transparent;
  padding: 0;
  user-select: all;                /* clique = seleciona tudo */
  word-break: break-all;
}

.tg-regerar {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Bloco "O que voce podera fazer" — cinza suave, discreto, no rodape. */
.tg-oque-fazer {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface-hover);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.tg-oque-titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-3);
}
.tg-oque-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tg-oque-lista > li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.5;
}
.tg-oque-lista > li > i {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--accent);
  margin-top: 2px;
}
.tg-oque-lista strong { color: var(--text); font-weight: 600; }
.tg-oque-lista code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--surface);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Item "IA" recebe marca roxa (Padrao_Marca_IA + Sempre_Marcar_IA). */
.tg-oque-ia { background: var(--ia-suave); border-radius: var(--radius-sm); padding: var(--sp-3); margin: -6px 0; }
.tg-oque-ia > i { color: var(--ia-primario); }
.tg-oque-ia strong { color: var(--ia-texto); }



/* ============ Fase 39: Extratos e Relatorios ============ */
.rel-form-filtros { display:flex; flex-direction:column; gap: var(--sp-4); margin-top: var(--sp-3); }
.rel-fs { border:1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); background: var(--card-bg); }
.rel-fs > legend { padding: 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }
.rel-orgs-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2) var(--sp-3); }
.rel-check { display:inline-flex; align-items:center; gap: var(--sp-2); cursor:pointer; font-size: var(--fs-sm); }
.rel-check input[type="checkbox"] { accent-color: var(--accent); }
.rel-check-inline { padding-top: var(--sp-2); }
.rel-org-fixo { font-weight: 600; color: var(--text); }
.rel-hint { font-size: var(--fs-xs); color: var(--text-dim); margin: var(--sp-2) 0 0; }
.rel-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); }
.rel-acoes { display:flex; gap: var(--sp-2); }
.rel-export { display:flex; align-items:center; gap: var(--sp-3); margin: var(--sp-3) 0; flex-wrap: wrap; }
.rel-export-rotulo { font-weight: 600; color: var(--text-dim); font-size: var(--fs-sm); }
.rel-export-form { display:flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0; }
.rel-tabela .rel-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-tabela .rel-num-th { text-align: right; }
.rel-tabela tfoot .rel-tot { background: var(--card-alt-bg, var(--card-bg)); font-weight: 700; }
.rel-abas { display:flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.rel-aba { padding: var(--sp-2) var(--sp-4); text-decoration: none; color: var(--text-dim); font-weight: 600; font-size: var(--fs-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rel-aba:hover { color: var(--text); }
.rel-aba-ativa { color: var(--accent); border-bottom-color: var(--accent); }

/* Fase 39 hotfix visual: linhas com separacao + zebra + hover na tabela de extrato/relatorio */
.rel-tabela { border-collapse: collapse; width: 100%; }
.rel-tabela thead th { border-bottom: 2px solid var(--border); padding: var(--sp-3) var(--sp-2); text-align: left; font-weight: 600; color: var(--text-dim); font-size: var(--fs-sm); background: var(--card-bg); position: sticky; top: 0; z-index: 1; }
.rel-tabela tbody td { padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.rel-tabela tbody tr:nth-child(even) td { background: var(--card-alt-bg, rgba(0,0,0,0.02)); }
.rel-tabela tbody tr:hover td { background: var(--accent-soft); }
.rel-tabela tfoot .rel-tot th { border-top: 2px solid var(--border); padding: var(--sp-3) var(--sp-2); }


/* ============ Fase 44: pre-lancamento a partir do extrato ============ */
.pre-lanc-resumo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-4);
  background: var(--card-alt-bg, var(--accent-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.pre-lanc-linha { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.pre-lanc-linha strong { color: var(--text); font-weight: 600; }
.pre-lanc-linha .texto-dim { font-size: var(--fs-xs); }
@media (max-width: 480px) {
  .pre-lanc-resumo { grid-template-columns: 1fr; }
}

/* ============================================================
   FASE 49: refinamento mobile (toque, tipografia, cards enxutos)
   Regra dura: TUDO dentro de media query. Desktop nao muda 1px.
   Fontes: Responsividade_Sempre:138 (toque 44px), :170 (input 16px
   no mobile, senao o iOS da zoom ao focar), Padrao_Formulario:96
   (todos os controles com a mesma altura), Padrao_KPI_Dashboard
   (divergencia aprovada pelo usuario: icone em cima no mobile).
   ============================================================ */
@media (max-width: 768px) {
  /* Controles: 44px e fonte 16px. O token sobe so aqui, entao input,
     SelectBusca e botao da barra de filtros continuam com a MESMA altura. */
  :root { --altura-controle: 44px; }
  .input, .textarea, .input-compacto,
  .selectbusca .sb-search { font-size: 16px; }
  .selectbusca .sb-display {
    height: var(--altura-controle);
    padding: 0 var(--sp-3);
    box-sizing: border-box;
    font-size: 16px;
  }
  .selectbusca .sb-opt { min-height: 44px; display: flex; align-items: center; }
  .field label { font-size: 14px; }

  /* Botoes: alvo de toque 44px, texto 14px (13px no btn-sm) */
  .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; justify-content: center; }
  .btn-sm { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  .btn-icone { width: 44px; height: 44px; font-size: 20px; }
  /* Seletor segmentado (Padrao_Toggle_Tipos Tipo 1): 44px e mesmo peso visual */
  .periodo-btn { height: 44px; padding: 0 14px; font-size: 13px; }

  /* Topbar: switch de tema sai daqui e vira item do menu do usuario
     (decisao do usuario 2026-10-07); botao do usuario vira icone 44x44. */
  .topbar .tema-toggle { display: none; }
  .topbar .btn-usuario { width: 44px; height: 44px; padding: 0; gap: 0; }
  .topbar .btn-usuario .ph-user-circle { font-size: 24px; }
  .topbar .btn-usuario .ph-caret-down { display: none; }
}

@media (max-width: 720px) {
  /* ---- Painel: KPI com icone em cima, ao lado do rotulo; valor usa a
     largura toda sem quebrar (antes "R$" quebrava com 99px uteis) ---- */
  .kpi2 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ico lbl" "val val" "disc disc";
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    padding: 12px;
  }
  .kpi2 .kpi2-corpo { display: contents; }
  .kpi2 .kpi2-ico { grid-area: ico; width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
  .kpi2 .kpi2-lbl { grid-area: lbl; min-height: 0; font-size: 10px; align-items: center; }
  .kpi2 .kpi2-val { grid-area: val; margin-top: 2px; font-size: 19px; white-space: nowrap; }
  .kpi2 .kpi2-disc { grid-area: disc; margin-top: 0; min-height: 0; }

  /* Secoes "Proximos 7 dias" / "Este mes": 2 colunas, valor menor */
  .kpi-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-mini-grid > .kpi-card { padding: 12px; gap: 4px; }
  .kpi-mini-grid > .kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-mini-grid .kpi-label { font-size: 10.5px; margin-bottom: 0; }
  .kpi-mini-grid .kpi-value { font-size: 19px; white-space: nowrap; }
  .dash-secao-titulo { margin: var(--sp-4) 0 var(--sp-2); font-size: 16px; }

  /* Alertas do Painel mais compactos */
  .alerta-box { padding: 10px 12px; gap: 10px; margin-bottom: 8px; }
  .alerta-box i { font-size: 18px; }
  .alerta-box .alerta-titulo { font-size: 14px; }
  .alerta-box .alerta-msg { font-size: 12.5px; }

  /* ---- Listagens: resumo em grade 2 colunas (rotulo em cima, numero
     embaixo). Continua texto+numero, sem caixa de KPI (Listagens_sem_KPI). */
  .resumo-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; font-size: 12px; }
  .resumo-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .resumo-item strong { margin-left: 0; font-size: 15px; }
  .resumo-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Cabecalho dos filtros recolhidos: linha unica, sem respiro extra */
  .ra-bar-cab { padding: 4px 4px 4px var(--sp-4); }
  /* Periodo (De / Ate) lado a lado: o par cabe em 2 colunas a 360px */
  .ra-bar-corpo .campo:has(> input[type="date"]) { flex: 1 1 calc(50% - 7px); min-width: 0; }
  .ra-bar-corpo .campo:has(> input[type="date"]) .input { min-width: 0; }

  /* ---- Cards de tabela (todas as listagens .tabela-cards): mais justos ---- */
  .tabela-cards tr { padding: 10px 14px; margin-bottom: 10px; }
  .tabela-cards td { padding: 4px 0; font-size: 14px; }
  .tabela-cards td::before { font-size: 11px; }
  /* Slot esmaecido vazio ( ) so existe pra alinhar coluna de tabela
     (Padrao_Tabela); no card nao alinha nada e viraria alvo morto */
  .tabela-cards td.td-acoes .btn.desabilitado { display: none; }

  /* ---- Card ENXUTO (Movimentacoes, Contas a pagar, Contas a receber),
     decisao do usuario 2026-10-07:
       linha 1: descricao ............ valor
       linha 2: data · categoria · conta ...... status [3 pontos]
       linha 3 (so se houver botao de acao, ex. Pagar): botao largo + 3 pontos
     Tipo/classificacao/forma/origem saem do card (seguem no Visualizar).
     tr::before vira a quebra de linha entre a linha 1 e a 2. */
  .tabela-cards.cards-enxutos tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 12px 14px;
  }
  .tabela-cards.cards-enxutos tr::before { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .tabela-cards.cards-enxutos td { display: block; width: auto; padding: 0; text-align: left; }
  .tabela-cards.cards-enxutos td::before { content: none; }
  .tabela-cards.cards-enxutos td.cel-sec { display: none; }
  .tabela-cards.cards-enxutos td.cel-titulo {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .tabela-cards.cards-enxutos td.cel-valor {
    order: 1;
    flex: 0 0 auto;
    font-family: var(--font-titulo);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .tabela-cards.cards-enxutos td.cel-meta {
    order: 3;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tabela-cards.cards-enxutos td.cel-meta:first-child { flex-shrink: 0; }
  /* Com flex-wrap o item quebra de linha antes de encolher. Por isso so a 1a
     meta (data) e a 2a (categoria, limitada) tem tamanho proprio; a ultima
     meta (conta) nasce com base 0 e ocupa o que sobrar, com reticencias. */
  .tabela-cards.cards-enxutos td.cel-meta ~ td.cel-meta { max-width: 40%; }
  .tabela-cards.cards-enxutos td.cel-meta ~ td.cel-meta ~ td.cel-meta { flex: 1 1 0; max-width: none; }
  /* Fase 63: meta que fecha a linha (tipo de conta da categoria) ocupa o que
     sobrar mesmo sendo a 2a meta, quando a categoria e raiz. */
  .tabela-cards.cards-enxutos td.cel-meta ~ td.cel-meta.cel-meta-fim { flex: 1 1 0; max-width: none; }
  .tabela-cards.cards-enxutos td.cel-meta ~ td.cel-meta::before {
    content: '·';
    margin-right: 8px;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-faint);
  }
  .tabela-cards.cards-enxutos td.cel-status { order: 3; flex: 0 0 auto; margin-left: auto; }
  .tabela-cards.cards-enxutos td.cel-status .badge { font-size: 11px; padding: 2px 8px; }
  /* 3 pontos sobem pra linha 1, ao lado do valor (margem negativa: o alvo de
     44px nao estica a linha) */
  .tabela-cards.cards-enxutos td.td-acoes { order: 1; flex: 0 0 auto; margin: -12px -10px -12px -4px; }
  /* Com botao de acao (Pagar / Receber / Ver pagamento): linha propria,
     botao largo pro polegar + 3 pontos */
  .tabela-cards.cards-enxutos td.td-acoes:has(.btn:not(.desabilitado)) {
    order: 4;
    flex: 1 1 100%;
    margin: 6px 0 0;
  }
  .tabela-cards.cards-enxutos td.td-acoes:has(.btn:not(.desabilitado)) .celula-acoes { display: flex; gap: 8px; }
  .tabela-cards.cards-enxutos td.td-acoes .celula-acoes > .btn { flex: 1 1 auto; }
  /* Cabecalho do grupo de fatura (Fase 42) ocupa a linha toda */
  .tabela-cards.cards-enxutos td.fatura-grupo-td { flex: 1 1 100%; }
}

/* ============================================================
   FASE 50: celular mais pratico e mais limpo (desktop intacto)
   Decisoes do usuario 2026-10-13: Painel enxuto, form de cadastro
   recolhido, card enxuto nas listagens restantes, ajuda ao focar.
   Fontes: Responsividade_Sempre:83 e Padrao_KPI_Dashboard:21 (KPI
   2 colunas <=720), Listagens_sem_KPI:26, Padrao_Box_Card:51,
   Padrao_Formulario:67 (espaco unico entre campos).
   Fora de media query so 3 regras: o cabecalho recolhivel novo
   (display:none no desktop) e 2 correcoes de bug que valem em
   qualquer largura (icone do botao no estado vazio; [hidden] em
   .form-row).
   ============================================================ */
.form-recolhivel-cab { display: none; }
/* .estado-vazio i (44px, cor apagada) pegava tambem o icone de dentro
   do botao "Nova X" do estado vazio */
.estado-vazio .btn i { font-size: inherit; color: inherit; line-height: inherit; }
/* .form-row{display:grid} vencia o atributo hidden: campos de cartao
   apareciam com Tipo=Banco em Contas financeiras */
.form-row[hidden] { display: none; }

@media (max-width: 720px) {
  /* ---- Painel: alerta em 1 linha (titulo + resumo cortado) ---- */
  .alerta-box { align-items: center; padding: 8px 12px; min-height: 44px; }
  .alerta-box > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; }
  .alerta-box .alerta-titulo { flex: 0 0 auto; margin-bottom: 0; font-size: 13.5px; }
  .alerta-box .alerta-msg { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
  .dash-alertas { margin-bottom: var(--sp-3); }
  /* Numeros repetidos saem so no celular (seguem no desktop) */
  .oculto-celular { display: none !important; }
  /* Sobra 5 KPIs: o ultimo (Resultado do mes) ocupa a linha toda */
  .kpi-grid-full:has(> .oculto-celular) > :last-child { grid-column: 1 / -1; }
  /* Folga pro botao flutuante (so existe no Painel) nao cobrir o ultimo bloco */
  body:has(.fab-ancora) .content { padding-bottom: 88px; }

  /* ---- Totais (Orcamento, Extratos, Relatorios...): 2 colunas ---- */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--sp-4); }
  .kpi-grid > .kpi-card { padding: 10px 12px; min-width: 0; }
  .kpi-grid > .kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-card .kpi-label, .kpi-card .kpi-rotulo {
    font-size: 10.5px; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: .04em; font-weight: 600; margin-bottom: 2px;
  }
  .kpi-card .kpi-value, .kpi-card .kpi-valor {
    font-family: var(--font-titulo); font-weight: 700;
    font-size: clamp(16px, 5vw, 19px); white-space: nowrap;
  }
  .kpi-card .kpi-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
  /* Orcamento: o "comparativo do mes" repete os 4 totais logo abaixo */
  .orc-cabecalho .cartao-lado { display: none; }
  /* Extratos: frase de apresentacao sai (o titulo ja diz) */
  .extrato-intro { display: none; }

  /* ---- Formularios: espaco unico entre campos (.form-row empilhado
     somava gap 16 + margem 16 do .field) ---- */
  .form-row { row-gap: 0; }
  /* Ajuda de campo: aparece quando o campo recebe foco */
  .field .ajuda-campo { display: none; }
  .field:focus-within .ajuda-campo { display: block; }
  /* Caixa de marcar com rotulo: a linha toda e o alvo de toque (44px) */
  .field .label-check { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }

  /* ---- Form/filtros recolhivel: no celular nasce fechado numa faixa
     (main.js); botao "+" da topbar e a propria faixa abrem ---- */
  .form-recolhivel-cab {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 48px;
    padding: 0 4px 0 var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .form-recolhivel-cab > i:first-child { font-size: 18px; color: var(--accent); }
  .form-recolhivel-caret {
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--text-dim);
    transition: transform .2s ease;
  }
  .form-recolhivel:not(.form-recolhido) .form-recolhivel-caret { transform: rotate(180deg); }
  .form-recolhivel.form-recolhido > :not(.form-recolhivel-cab) { display: none !important; }

  /* Dentro de card: a faixa usa a borda do card */
  .card.form-recolhivel { padding: 0; margin-bottom: var(--sp-3); }
  .card.form-recolhivel > .form-recolhivel-cab,
  .orc-form-inline.form-recolhivel > .form-recolhivel-cab { border: 0; background: none; }
  .card.form-recolhivel > form {
    display: flex;
    flex-direction: column;
    padding: 0 var(--sp-4) var(--sp-4);
  }
  .card.form-recolhivel > form > .form-row:not([hidden]) { display: contents; }
  /* Salvar sempre por ultimo e largo (em Contas financeiras ficava antes
     dos campos de cartao) */
  .card.form-recolhivel .campo-acao { order: 99; margin-bottom: 0; }
  .card.form-recolhivel .campo-acao > label { display: none; }
  .card.form-recolhivel .campo-acao .btn { width: 100%; }

  /* Orcamento: a faixa substitui o titulo "Adicionar linha de orcamento" */
  .orc-titulo-form { display: none; }
  .orc-form-inline.form-recolhivel { padding: 0; gap: var(--sp-3); margin-top: var(--sp-3); }
  .orc-form-inline.form-recolhivel > :not(.form-recolhivel-cab):not([type="hidden"]) { margin: 0 var(--sp-3); }
  .orc-form-inline.form-recolhivel > :last-child { margin-bottom: var(--sp-3); }
  .orc-form-inline.form-recolhivel > .campo { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
  .orc-form-inline.form-recolhivel > .campo > label { font-size: 14px; font-weight: 600; color: var(--text); }
  .orc-form-inline.form-recolhivel .orc-tipo-seg { align-self: flex-start; }
  .orc-form-inline.form-recolhivel > .campo:last-child > label { display: none; }
  .orc-form-inline.form-recolhivel > .campo:last-child .btn { width: 100%; }

  /* ---- Card enxuto: complementos das listagens novas ---- */
  /* Relatorios/Extratos: a tabela .rel-tabela tem borda e zebra proprias */
  .rel-tabela.cards-enxutos tbody tr td { border-bottom: 0; background: none; padding: 0; }
  .rel-tabela.cards-enxutos tbody tr:hover td { background: none; }
  /* Transferencias: origem -> destino */
  .tabela-cards.cards-enxutos td.cel-meta ~ td.cel-destino::before { content: '→'; }
  /* Orcamento (comparativo): categoria ...... %  /  realizado de previsto  /  barra */
  .tabela-cards.cards-enxutos td.orc-real,
  .tabela-cards.cards-enxutos td.orc-prev { order: 3; flex: 0 0 auto; font-size: 12.5px; white-space: nowrap; }
  .tabela-cards.cards-enxutos td.orc-real { color: var(--text); font-weight: 600; }
  .tabela-cards.cards-enxutos td.orc-prev { order: 4; color: var(--text-dim); }
  .tabela-cards.cards-enxutos td.orc-prev::before {
    content: 'de';
    margin-right: 4px;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
  }
  .tabela-cards.cards-enxutos td.orc-barra-td { order: 5; flex: 1 1 100%; margin-top: 4px; }
  .tabela-cards.cards-enxutos td.cel-valor .orc-pct { font-size: 12px; }
  .tabela-cards.cards-enxutos td.cel-valor .texto-dim { font-family: var(--font); font-size: 12px; font-weight: 400; }
  /* Orcamento (linhas cadastradas): lixeira na linha 1 como os 3 pontos */
  .tabela-cards.cards-enxutos.orc-linhas td.td-acoes:has(.btn) { order: 1; flex: 0 0 auto; margin: -12px -10px -12px -4px; }
  .tabela-cards.cards-enxutos.orc-linhas td.td-acoes .btn { min-height: 0; padding: 0; border: 0; background: none; }
}

@media (max-width: 720px) {
  /* Extratos: o selo Entrada/Saida sai do card; o tipo vai no proprio valor
     (sinal + cor, o sinal garante leitura sem depender so da cor) */
  .tabela-cards.cards-enxutos td.cel-tipo-entrada { color: var(--success); }
  .tabela-cards.cards-enxutos td.cel-tipo-saida { color: var(--danger); }
  .tabela-cards.cards-enxutos td.cel-tipo-entrada::before,
  .tabela-cards.cards-enxutos td.cel-tipo-saida::before {
    content: '+';
    display: inline;
    margin-right: 2px;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
  }
  .tabela-cards.cards-enxutos td.cel-tipo-saida::before { content: '−'; }
  /* Relatorios: situacao sempre no fim da linha 2 (vem depois das metas) */
  .rel-tabela.cards-enxutos td.cel-status { order: 4; }
}

@media (max-width: 720px) {
  /* Relatorios numericos (Fluxo de caixa, Orcamento): card em grade 2
     colunas, rotulo pequeno em cima e numero embaixo; .cel-cab (data /
     competencia / categoria) vira o titulo do card */
  .rel-tabela.cards-grade tbody tr,
  .rel-tabela.cards-grade tfoot tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 14px;
  }
  .rel-tabela.cards-grade tfoot { display: block; }
  .rel-tabela.cards-grade tfoot tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .rel-tabela.cards-grade tbody tr td,
  .rel-tabela.cards-grade tfoot tr th {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 14px;
  }
  .rel-tabela.cards-grade tbody tr:hover td { background: none; }
  .rel-tabela.cards-grade tbody tr td::before,
  .rel-tabela.cards-grade tfoot tr th::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
  }
  .rel-tabela.cards-grade .cel-cab {
    grid-column: 1 / -1;
    order: -1;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }
  .rel-tabela.cards-grade .cel-cab::before { content: none; }
  .rel-tabela.cards-grade tfoot tr th:empty { display: none; }
}

@media (max-width: 720px) {
  /* Abas dos relatorios: faixa unica rolavel (antes quebrava em 2 linhas)
     e alvo de toque 44px (antes 38) */
  .rel-abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rel-abas::-webkit-scrollbar { display: none; }
  .rel-aba { display: flex; align-items: center; min-height: 44px; white-space: nowrap; flex: 0 0 auto; }
}

/* Fase 54: validacao dentro do modal (Padrao_Modal_Nao_Fecha_Sozinho:62-70).
   Aviso reaproveita .alerta-box.alerta-danger; aqui so a lista e a marca. */
.modal-aviso { margin-bottom: var(--sp-4); }
.modal-aviso-lista { margin: var(--sp-1) 0 var(--sp-2); padding-left: var(--sp-4); }
.modal-aviso-lista li { margin-bottom: 2px; }
input.campo-invalido,
input.campo-invalido:focus,
textarea.campo-invalido,
textarea.campo-invalido:focus,
.selectbusca.campo-invalido .sb-display,
.upload-logo.campo-invalido {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.upload-logo.campo-invalido { border-style: solid; }
@media (max-width: 720px) {
  /* O alerta do Painel vira 1 linha cortada no celular (Fase 50); o do modal
     precisa ser lido item a item (:62-70), entao volta a empilhar. */
  .alerta-box.modal-aviso { align-items: flex-start; padding: var(--sp-3); }
  .alerta-box.modal-aviso > div { display: block; }
  .alerta-box.modal-aviso .alerta-msg { white-space: normal; overflow: visible; }
}

/* ============ ASSISTENTE NO MODAL DA TOPBAR (Fase 57) ============
   Mesmo componente (_chat.html) na pagina /assistente e no modal.
   Padrao_Marca_IA:14-15 (roxo + ph-sparkle sempre), :284-287 (resultado de
   IA marcado com .tag-ia), Padrao_Loading_Estado:125-135 (spinner 44px +
   texto descritivo), Padrao_Modal:15-17 (cab/corpo/rodape, tamanho md),
   Responsividade_Sempre:138/:170 (toque 44px, input 16px no celular).
   Zero hex cru: so var(--ia-*) e tokens gerais. */
.ia-chat { display: flex; flex-direction: column; gap: var(--sp-3); }
.ia-lista { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Selo de conteudo gerado por IA */
.tag-ia {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ia-suave);
  border: 1px solid var(--ia-borda);
  color: var(--ia-texto);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
}
.ia-msg-meta { display: inline-flex; align-items: center; gap: 4px; }

/* Spinner da conversa: 44px roxo (Padrao_Loading_Estado:322-328) */
.ia-loading .ia-spinner { width: 44px; height: 44px; border-width: 4px; flex: 0 0 auto; }
.ia-loading { gap: var(--sp-3); }

/* Modal: caixa de altura fixa, so a lista rola; a barra vira o rodape */
.modal-caixa.ia-modal {
  display: flex;
  flex-direction: column;
  height: 70vh;
  overflow: hidden;
}
.ia-modal-titulo { display: flex; align-items: center; gap: var(--sp-2); color: var(--ia-texto); }
.ia-modal-titulo i { color: var(--ia-primario); }
.ia-modal .ia-chat { flex: 1; min-height: 0; gap: 0; }
.ia-modal .ia-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  overscroll-behavior: contain;
}
.ia-modal .ia-bar {
  position: static;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 22px;
}
html.ia-modal-aberto, html.ia-modal-aberto body { overflow: hidden; }

/* Barra: botoes lado a lado, mesma altura do campo (Padrao_Formulario) */
.ia-bar .campo-msg { min-width: 0; }
.ia-bar-linha { display: flex; gap: var(--sp-2); }
.ia-btn-mic, .ia-btn-descartar {
  width: var(--altura-controle);
  height: var(--altura-controle);
  padding: 0;
  justify-content: center;
  font-size: 18px;
}
.ia-btn-descartar { color: var(--text-dim); }
.ia-btn-descartar:hover { color: var(--danger); border-color: var(--danger); }
.ia-gravando-ativo .ia-btn-mic { background: var(--ia-texto); }

/* Faixa "Gravando 0:12" no lugar do campo */
.ia-gravando {
  height: var(--altura-controle);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border: 1px solid var(--ia-borda);
  border-radius: var(--radius-sm);
  background: var(--ia-suave);
  color: var(--ia-texto);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ia-gravando[hidden] { display: none; }
/* .btn/.btn-ia/.input definem display; [hidden] precisa vencer */
.ia-bar-linha > [hidden], .ia-bar .input[hidden] { display: none; }
.ia-gravando-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: ia-pulso 1.2s ease-in-out infinite;
}
.ia-gravando-dica { margin-left: auto; font-weight: 400; font-size: var(--fs-xs); color: var(--text-dim); }
@keyframes ia-pulso { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .ia-gravando-ponto { animation: none; }
}

/* Botao da topbar: mesma altura do .btn-sm vizinho (Novo / usuario) */
.btn-ia.btn-ia-topo {
  height: auto;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  line-height: normal;
}

@media (max-width: 768px) {
  /* Topbar: so o icone, alvo 44x44 */
  .btn-ia.btn-ia-topo { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 20px; }
  .btn-ia-topo .btn-ia-topo-rotulo { display: none; }
}

@media (max-width: 720px) {
  .modal-caixa.ia-modal { height: 92vh; height: 92dvh; }
  .ia-modal .ia-lista { padding: var(--sp-3); }
  .ia-modal .ia-bar { padding: var(--sp-3); }
  .ia-modal .modal-cab { padding: 6px 6px 6px var(--sp-4); }
  .ia-modal .modal-x { width: 44px; height: 44px; }
  /* Rotulo numa linha: invade a coluna dos botoes, cujo rotulo e vazio */
  .ia-bar .campo-msg label { white-space: nowrap; }
  /* Barra numa linha so: campo estica, Enviar vira icone 44px */
  .ia-bar { flex-wrap: nowrap; gap: var(--sp-2); }
  .ia-bar .input { min-width: 0; width: 100%; font-size: 16px; }
  .ia-bar .campo-msg label { font-size: 14px; }
  .ia-bar [data-ia-enviar] { width: var(--altura-controle); padding: 0; justify-content: center; font-size: 18px; }
  .ia-bar .ia-enviar-rotulo { display: none; }
  .ia-msg, .ia-proposta { max-width: 94%; }
  .ia-proposta-acoes .btn, .ia-proposta-acoes .btn-ia { flex: 1; justify-content: center; min-height: 44px; }
}

/* ============ VOZ ESTILO WHATSAPP (Fase 58) ============
   Segurar grava, soltar envia; arrastar p/ esquerda cancela, p/ cima trava.
   Padrao_BottomSheet_Arrastavel:42 (segue o dedo via pointermove), :53
   (reduced-motion), :58/:65 (alternativa sem gesto: toque rapido grava
   travado, com Lixeira e Enviar). Responsividade_Sempre:138 (alvo 44px). */
.ia-mic-ancora { position: relative; display: flex; }
.ia-btn-mic {
  touch-action: none;              /* segurar nao rola a tela */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;     /* sem menu de contexto do iOS */
}
.ia-gravando-tempo { min-width: 2.6em; flex: 0 0 auto; }
/* A dica ocupa o resto da faixa e recorta o proprio conteudo: ao deslizar,
   o texto some por baixo da borda em vez de passar por cima do tempo */
.ia-gravando-dica {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.ia-gravando-dica [hidden] { display: none; }

/* Segurando: mic cresce e segue o dedo; a dica anda junto pra esquerda */
.ia-segurando .ia-btn-mic {
  transform: translate(var(--ia-arrasto-x, 0px), var(--ia-arrasto-y, 0px)) scale(1.15);
  box-shadow: 0 0 0 6px var(--ia-suave);
  transition: box-shadow .15s ease;
  position: relative;
  z-index: 3;
}
.ia-segurando .ia-gravando-dica > * { transform: translateX(var(--ia-arrasto-x, 0px)); }
.ia-travado .ia-btn-mic { background: var(--ia-primario); }
.ia-travado .ia-btn-mic:hover { background: var(--ia-primario-hover); }

/* Indicador de trava acima do mic (so enquanto segura) */
.ia-trava {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 2;
  width: 36px;
  padding: var(--sp-2) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--ia-borda);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ia-primario);
  font-size: 16px;
  pointer-events: none;
  /* sobe junto com o dedo: fica sempre acima do mic */
  transform: translate(-50%, var(--ia-arrasto-y, 0px));
}
.ia-trava[hidden] { display: none; }
.ia-trava .ph-caret-up { font-size: 12px; animation: ia-trava-sobe 1s ease-in-out infinite; }
@keyframes ia-trava-sobe { 50% { transform: translateY(-3px); } }

/* Aviso curto na faixa ("Audio descartado", "Segure para gravar") */
.ia-aviso-voz .ia-gravando-ponto,
.ia-aviso-voz .ia-gravando-tempo { display: none; }
.ia-aviso-voz .ia-gravando-dica { margin-left: 0; justify-content: flex-start; color: var(--ia-texto); font-size: var(--fs-sm); font-weight: 600; }
.ia-aviso-voz .ia-gravando { animation: ia-tremer .35s ease; }
@keyframes ia-tremer {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .ia-trava .ph-caret-up,
  .ia-aviso-voz .ia-gravando { animation: none; }
  .ia-segurando .ia-btn-mic { transition: none; }
}

/* ============================================================
   FASE 59: TELA INICIAL ENXUTA
   Saldo total (com detalhe por conta) + A pagar / A receber por periodo.
   Cards seguem .kpi2 (Padrao_KPI_Dashboard:21-24); campo de periodo segue
   Padrao_Formulario (label 13px/600, controles na mesma altura).
   ============================================================ */
.painel-inicio {
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Saldo: botao "Ver contas" a direita, lista abre embaixo, dentro do card */
.kpi2.painel-saldo { flex-wrap: wrap; }
.painel-ver-contas {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 36px;
}
.painel-ver-contas .ph-caret-down { transition: transform .15s ease; }
.painel-ver-contas.aberto .ph-caret-down { transform: rotate(180deg); }
.painel-contas {
  flex-basis: 100%;
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--border);
}
.painel-contas[hidden] { display: none; }
.painel-contas li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--text);
}
.painel-contas li + li { border-top: 1px solid var(--border); }
.painel-conta-nome { min-width: 0; overflow-wrap: anywhere; }
.painel-conta-nome small { display: block; font-size: 11px; color: var(--text-faint); }
.painel-conta-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.painel-conta-valor.negative { color: var(--danger); }

/* Periodo */
.painel-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.painel-periodo .campo { display: flex; flex-direction: column; gap: 5px; }
.painel-periodo .campo[hidden] { display: none; }
.painel-periodo .campo label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.painel-periodo .selectbusca { min-width: 230px; }
.painel-periodo .input { width: 130px; }
.painel-periodo-info {
  min-height: var(--altura-controle);
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.painel-periodo-info.painel-info-erro { color: var(--danger); font-weight: 600; }

/* A pagar / A receber */
.painel-aberto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.painel-card[hidden] { display: none; }
.kpi2 .kpi2-disc.painel-vencido { color: var(--danger); font-style: normal; font-weight: 600; }
.painel-carregando {
  grid-column: 1 / -1;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.painel-carregando[hidden] { display: none; }

@media (max-width: 720px) {
  .kpi2.painel-saldo {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico lbl ver" "val val val" "disc disc disc" "lista lista lista";
  }
  .painel-ver-contas { grid-area: ver; min-height: 44px; margin-left: 0; }
  .painel-contas { grid-area: lista; }
  .painel-periodo .campo { flex: 1 1 100%; }
  .painel-periodo .selectbusca { min-width: 0; width: 100%; }
  .painel-periodo .input { width: 100%; }
  .painel-periodo-info { min-height: 0; flex: 1 1 100%; }
  .painel-aberto { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .painel-ver-contas .ph-caret-down { transition: none; }
}

/* ============ Fase 60: fatura do cartao importada na conciliacao ============ */
.alerta-box.alerta-info { background: var(--info-soft); border-color: var(--info); }
.alerta-box.alerta-info i { color: var(--info); }
.alerta-box[hidden],
.loading-bloco[hidden] { display: none; }

/* Mensagem do que falta, a esquerda dos botoes (Padrao_Upload_Arquivo:317) */
.modal-rodape-com-msg { flex-wrap: wrap; align-items: center; }
.modal-rodape-msg { margin-right: auto; font-size: var(--fs-sm); }
.modal-rodape-msg:empty { display: none; }

/* Total do arquivo x total no Prumo, lado a lado no cabecalho */
.conc-fatura-totais { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Credito da fatura no agrupamento de Contas a pagar, colado no subtotal */
.fatura-grupo-credito { margin-left: auto; font-size: var(--fs-xs); }
.fatura-grupo-credito + .fatura-grupo-subtotal { margin-left: var(--sp-2); }

@media (max-width: 480px) {
  .modal-rodape-msg { flex: 1 1 100%; margin-right: 0; }
  .conc-fatura-totais { width: 100%; justify-content: space-between; }
  .conc-fatura-totais .cartao-lado { text-align: left; }
}
/* Valor em tabela nao quebra entre "R$" e o numero */
.td-num { white-space: nowrap; }
@media (max-width: 768px) {
  .conc-fatura-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Titulo longo no modal nao espreme o X de fechar (alvo de 44px no celular) */
.modal-cab .btn-icone { flex-shrink: 0; }
/* 360px: Cancelar + Importar arquivo cabem na mesma linha do rodape */
@media (max-width: 480px) {
  .modal-rodape-com-msg .btn { padding-left: 12px; padding-right: 12px; }
}

/* ============ Fase 61: MCP (consentimento + Conexoes com IA) ============
   Marca de IA em grafite (--ia-*, LASTRO Fase 59): nunca --accent. */
.mcp-ia-icone, .estado-vazio i.mcp-ia-icone { color: var(--ia-primario); }
.mcp-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.card .mcp-titulo { justify-content: flex-start; }
.card .mcp-titulo .mcp-contagem { margin-left: auto; font-weight: 400; }
/* Fase 62: vazio que ocupa a tela inteira fica no meio vertical da area
   (Padrao_Estado_Vazio:14-16,185-187). .content nao e flex-column, entao a
   altura vem da janela menos topbar e padding. */
.estado-vazio-tela {
  min-height: max(300px, calc(100dvh - var(--topbar-h) - 2 * var(--sp-5)));
  justify-content: center;
}
.auth-card .mcp-titulo { flex-direction: column; text-wrap: balance; }
.auth-card .mcp-titulo .mcp-ia-icone { font-size: 28px; }
.mcp-org-fixa {
  height: var(--altura-controle);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  font-weight: 600;
}
.mcp-escopo {
  list-style: none;
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--ia-suave);
  border: 1px solid var(--ia-borda);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--ia-texto);
}
.mcp-escopo li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.mcp-escopo i { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.mcp-pode { color: var(--success); }
.mcp-nao-pode { color: var(--danger); }
.mcp-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}
.mcp-acoes .btn, .mcp-acoes .btn-ia { height: var(--altura-controle); }
.mcp-endereco {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
  color: var(--text);
}
@media (max-width: 720px) {
  .mcp-acoes { flex-direction: column-reverse; }
  .mcp-acoes .btn, .mcp-acoes .btn-ia { width: 100%; min-height: 44px; justify-content: center; }
}

/* ============ Fase 61b: conectar ao Claude (modal) + destino no consentimento ============
   Tokens --ia-* (grafite, LASTRO Fase 59); nunca --accent em elemento de IA. */
.mcp-destino {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  color: var(--text-dim);
}
.mcp-destino i { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.mcp-destino .ph-warning { color: var(--warning); }
.mcp-copiar {
  display: flex;
  gap: var(--sp-2);
}
.mcp-copiar .input { flex: 1 1 auto; min-width: 0; }
.mcp-copiar .btn { flex: 0 0 auto; height: var(--altura-controle); }
.mcp-passos {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  line-height: 1.5;
}
.mcp-passos li::marker { color: var(--ia-primario); font-weight: 700; }
.mcp-nota { margin: 0; }
/* Botao do topo: "Conectar aplicativo" vira "Conectar" no celular, com texto
   para nao ficar igual ao icone do Assistente ao lado. */
/* Mesma medida do .btn-ia-topo no desktop, sem herdar o "so icone" dele. */
.btn-ia.mcp-btn-conectar {
  height: auto;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  line-height: normal;
}
@media (max-width: 768px) {
  .mcp-btn-conectar .mcp-rotulo-extra { display: none; }
  .btn-ia.mcp-btn-conectar { min-height: 44px; }
}
@media (max-width: 720px) {
  .mcp-copiar { flex-direction: column; }
  .mcp-copiar .btn { width: 100%; min-height: 44px; justify-content: center; }
  #modalConectarIa .modal-rodape .btn { min-height: 44px; }
}


/* ============ Fase 64: DRE + Fluxo de caixa + Auditoria 0a0 ============ */
/* Respiro (Padrao_Espacamento_e_Respiro): a tela separa os blocos por gap no
   container, nunca por margem no componente. Fora 24 > dentro 16. */
.dre-pagina { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.dre-pagina > .rel-abas,
.dre-pagina > .rel-form-filtros,
.dre-pagina > .abas { margin: 0; }
.dre-resultado { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dre-resultado > .alerta-box { margin: 0; }
.dre-painel.ativa { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dre-painel > .kpi-grid-full { margin-bottom: 0; }
/* 6 KPIs por linha entre 1301 e 1700px deixam ~100px pro valor: o icone sai
   e o valor nao quebra entre "R$" e o numero. */
.dre-painel .kpi2-val { white-space: nowrap; }
@media (min-width: 1301px) and (max-width: 1700px) {
  .dre-painel .kpi2-ico { display: none; }
}
.dre-rodape { margin: 0; font-size: var(--fs-xs); color: var(--text-dim); }

/* Barra de filtros (Padrao_Barra_de_Filtros): altura unica --fu-h, label em
   cima, acao principal a direita. */
.fu-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.fu-bar .g { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.fu-bar .sp { flex: 1; }
.fu-bar > .btn { height: var(--fu-h); box-sizing: border-box; }
.fu-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
}

/* Selecao de periodo (templates/_periodo.html): chips = toggle tipo 1 */
.fu-presets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  height: var(--fu-h);
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}
.fu-presets button {
  height: calc(var(--fu-h) - 8px);
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  padding: 0 10px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.fu-presets button:hover { color: var(--accent); }
.fu-presets button.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.periodo-linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.periodo-sem { font-size: var(--fs-sm); font-style: italic; color: var(--text-dim); }
.periodo-datas { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); }
.periodo-sem[hidden], .periodo-datas[hidden] { display: none; }
.periodo-data { display: flex; flex-direction: column; gap: var(--sp-1); }
.periodo-data .input { height: var(--fu-h); box-sizing: border-box; }

/* Card da grade/tabela: titulo e exportacao na primeira faixa DENTRO do card
   (Padrao_Cabecalho_da_Tabela). Sem overflow:hidden no card; quem recorta e o
   container de rolagem. */
.dre-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.dre-card-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.dre-card-titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}
.dre-scroll { border-radius: 0 0 var(--radius) var(--radius); }

/* Grade: separate (nao collapse) pra coluna fixa manter a borda ao rolar */
.dre-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.dre-tab th, .dre-tab td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  background: var(--surface);
  color: var(--text);
}
.dre-tab thead th {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.dre-tab tbody th { font-weight: 400; }
.dre-tab tbody tr:hover > * { background: var(--surface-hover); }
.dre-tab .dre-num { text-align: right; font-variant-numeric: tabular-nums; }
.dre-tab .dre-num.dre-neg { color: var(--danger); }
.dre-tab .dre-col-conta { position: sticky; left: 0; z-index: 1; min-width: 240px; white-space: normal; }
.dre-col-conta .badge { margin-left: var(--sp-2); white-space: nowrap; font-weight: 600; }

.dre-tab .dre-grupo-lin > * { font-weight: 700; }
.dre-tab .dre-cat-lin th { padding-left: var(--sp-4); }
.dre-drill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.dre-drill i { color: var(--text-dim); transition: transform .15s; }
.dre-drill[aria-expanded="true"] i { transform: rotate(90deg); }
.dre-drill:hover span { color: var(--accent); }
.dre-tab .dre-det-lin > * { background: var(--bg); font-size: var(--fs-xs); color: var(--text-dim); }
.dre-tab .dre-det-lin th { padding-left: calc(var(--sp-5) + var(--sp-4)); }
.dre-det-data { margin-right: var(--sp-2); font-variant-numeric: tabular-nums; }
.dre-det-desc { color: var(--text); }
.dre-tab .dre-det-mais { font-style: italic; }
.dre-tab .dre-tot-lin > * { font-weight: 800; background: var(--bg); border-top: 2px solid var(--border); }
.dre-tab .dre-saldo-lin th { font-weight: 600; }
.dre-tab .dre-saldo tr:first-child > * { border-top: 2px solid var(--border); }

/* Auditoria 0a0 */
.dre-aud-desc { display: block; font-weight: 600; color: var(--text); }
.dre-aud-cat { display: block; font-size: var(--fs-xs); color: var(--text-dim); }
.dre-tab .dre-aud-data { font-variant-numeric: tabular-nums; }
.dre-tab .dre-aud-motivos { white-space: normal; min-width: 220px; }
.dre-aud-motivos .badge { margin: 2px var(--sp-1) 2px 0; }
.dre-tab .dre-aud-erro > th:first-child { box-shadow: inset 3px 0 0 var(--danger); }

@media (max-width: 720px) {
  .fu-bar { --fu-h: 44px; }
  .fu-bar .g, .fu-bar .sp { flex: 1 1 100%; }
  .fu-bar > .btn { flex: 1; justify-content: center; }
  .fu-presets { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; width: 100%; }
  .fu-presets button { height: 44px; white-space: normal; line-height: 1.15; }
  /* Coluna fixa estreita: o resto da tela fica pros meses ao rolar. */
  .dre-tab .dre-col-conta { width: 160px; min-width: 160px; max-width: 160px; }
  .dre-col-conta .badge { display: inline-block; margin: var(--sp-1) 0 0; white-space: normal; }
  .dre-drill { min-height: 44px; }
}
@media (max-width: 520px) {
  .fu-presets { grid-template-columns: repeat(2, 1fr); }
  /* As tres abas cabem numa linha so: menos recuo, e rolagem se faltar. */
  .dre-pagina > .abas { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .dre-pagina > .abas .aba { padding: var(--sp-3) var(--sp-2); white-space: nowrap; min-height: 44px; }
}

/* ============================================================
   FASE 65: contas recorrentes e provisoes
   ============================================================ */

/* Checkbox de selecao (Padrao_Selecao_em_Lote): desenhado por nos, nunca o
   do sistema. O check e uma borda em L girada; o traco e o estado parcial. */
.tsel {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  position: relative;
  vertical-align: middle;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tsel:hover { border-color: var(--accent); }
.tsel:checked,
.tsel:indeterminate { background: var(--accent); border-color: var(--accent); }
.tsel:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--accent-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tsel:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  background: var(--accent-contrast);
}
.tsel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.table th.th-sel,
.table td.td-sel { width: 36px; padding-right: 0; text-align: center; }
.table tr.tsel-linha-on > td { background: var(--accent-soft); }

/* Faixa de acoes: so existe com algo marcado, escura (modo temporario, nao a
   cor da marca), ao lado do menu e nunca por baixo dele. */
.tsel-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: calc(var(--z-sidebar) - 10);
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 24px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--lote-bg);
  color: var(--lote-texto);
  font-size: 13.5px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .2);
  animation: tselSobe .18s ease;
}
.tsel-bar.visivel { display: flex; }
.app-shell.sidebar-recolhida .tsel-bar { left: var(--sidebar-w-recolhida); }
@keyframes tselSobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tsel-bar-qtd { font-weight: 700; font-variant-numeric: tabular-nums; }
.tsel-bar-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* Altura unica de 36px na faixa (sem ela botao com icone "sobe"). */
.tsel-bar .btn.tsel-bar-btn { height: 36px; min-height: 36px; }
.tsel-bar .btn.tsel-bar-btn:not(.btn-primary) {
  background: transparent;
  color: var(--lote-texto);
  border-color: var(--lote-borda);
}
.tsel-bar .btn.tsel-bar-btn:not(.btn-primary):hover { background: var(--lote-hover); }
.tsel-bar .btn.tsel-bar-btn[hidden] { display: none; }
/* A faixa nao cobre a ultima linha da lista. */
body.tsel-ativa .main { padding-bottom: 96px; }
@media (prefers-reduced-motion: reduce) { .tsel-bar { animation: none; } }

/* Selo de provisao na coluna Situacao */
.badge.selo-provisao { display: inline-flex; align-items: center; gap: 4px; }
.cel-status .badge + .badge { margin-left: 4px; }

/* Modal "Salvar em quais meses?" */
.escopo-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.escopo-opcao {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
}
.escopo-opcao-titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  color: var(--text);
}
.escopo-opcao-titulo i { font-size: 18px; color: var(--accent); }
.escopo-opcao-texto { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--text-dim); }
.escopo-incluir {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}

/* Telas de recorrencia: card com titulo dentro e contagem no rodape */
.rec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  margin-bottom: var(--sp-4);
}
.rec-card-cab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.rec-card-titulo {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.rec-card-rodape {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.rec-card .table-wrap + .rec-card-rodape { border-top: 1px solid var(--border); }
.rec-dados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
  padding: var(--sp-4);
}
.rec-dados dt { font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }
.rec-dados dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }
.rec-dados dd.rec-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-card .celula-acoes .btn { white-space: nowrap; }
.rec-obs { margin: 0; padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); color: var(--text-dim); }
.modal-corpo .alerta-box { margin-top: var(--sp-3); align-items: flex-start; }
/* No celular o .alerta-box do Painel vira 1 linha cortada; no modal o aviso
   precisa ser lido inteiro. */
.modal-corpo .alerta-box > div { display: block; }
.modal-corpo .alerta-box .alerta-msg { white-space: normal; overflow: visible; }

/* DRE: Com provisoes / So lancados (Padrao_Toggle_Tipos tipo 2: duas opcoes
   coladas, icone obrigatorio, escolhida em cor solida invertida). */
.dre-fonte-linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.dre-fonte-rotulo { font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }
.dre-fonte {
  display: inline-flex;
  align-items: stretch;
  height: var(--fu-h);
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface);
}
.dre-fonte button {
  border: none;
  background: transparent;
  padding: 0 13px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.dre-fonte button + button { border-left: 1px solid var(--border); }
.dre-fonte button:hover { color: var(--accent); }
.dre-fonte button.on { background: var(--accent); color: var(--accent-contrast); }
.dre-fonte button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 768px) {
  .tsel-bar,
  .app-shell.sidebar-recolhida .tsel-bar { left: 0; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) {
  /* Card enxuto: o checkbox abre a linha 1, com alvo de 44px. A celula vazia
     (linha sem provisao) some, como as outras td:empty. */
  .tabela-cards.cards-enxutos td.td-sel {
    order: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -12px -6px -12px -10px;
  }
  .tabela-cards.cards-enxutos td.td-sel:empty { display: none; }
  /* No card a linha marcada pinta o card inteiro, nao celula por celula. */
  .tabela-cards.cards-enxutos tr.tsel-linha-on { background: var(--accent-soft); }
  .tabela-cards.cards-enxutos tr.tsel-linha-on > td { background: transparent; }
  .tsel-bar { gap: 8px; }
  .tsel-bar-qtd { flex: 1 1 100%; }
  .tsel-bar .btn.tsel-bar-btn { height: 44px; min-height: 44px; }
  .tsel-bar-acoes { margin-left: 0; flex: 1 1 100%; }
  .tsel-bar-acoes .btn { flex: 1 1 auto; justify-content: center; }
  body.tsel-ativa .main { padding-bottom: 180px; }
  .escopo-opcoes { grid-template-columns: 1fr; }
  /* Tres botoes nao cabem lado a lado: empilha, o principal em cima. */
  .modal-rodape.escopo-rodape { flex-direction: column-reverse; align-items: stretch; }
  .modal-rodape.escopo-rodape .btn { width: 100%; min-height: 44px; justify-content: center; }
  .rec-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dre-fonte { --fu-h: 44px; width: 100%; }
  .dre-fonte button { flex: 1; justify-content: center; }
}
@media (max-width: 400px) {
  .rec-dados { grid-template-columns: 1fr; }
}

/* ============ Fase 66: Futuro do caixa ============ */
.fc-filtros { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.fc-secao { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.fc-secao > .alerta-box { margin: 0; }
/* O aviso do caixa negativo nao pode virar 1 linha cortada no celular (regra do Painel). */
.alerta-box.fc-alerta { align-items: flex-start; }
.alerta-box.fc-alerta > div { display: block; }
.alerta-box.fc-alerta .alerta-msg { white-space: normal; overflow: visible; }
.fc-titulo { margin: 0; font-family: var(--font-titulo); font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.fc-titulo-sub { font-family: var(--font); font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim); margin-left: var(--sp-2); }
/* 4 indicadores por grupo: 4 colunas no desktop, 2 abaixo de 1300px (3 deixaria um sozinho). */
.kpi-grid-full.fc-kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
@media (max-width: 1300px) { .kpi-grid-full.fc-kpis { grid-template-columns: repeat(2, 1fr); } }
.fc-kpis .kpi2-lbl { gap: var(--sp-1); }
.fc-kpis .kpi2-val { white-space: nowrap; }
.fc-pos { color: var(--success); }
.fc-neg { color: var(--danger); }

/* Dica: botao "i" + balao unico da tela (fora do card, que corta o que vaza). */
.dica {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; padding: 0; margin: 0;
  border: none; border-radius: var(--radius-full); background: transparent;
  color: var(--text-faint); font-size: 15px; line-height: 1; cursor: help;
  position: relative;
}
/* Area de toque de 44px sem aumentar o icone. */
.dica::after { content: ''; position: absolute; inset: -13px; }
.dica:hover, .dica:focus-visible, .dica[aria-expanded="true"] { color: var(--accent); }
.dica:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dica-balao {
  position: fixed; z-index: var(--z-tooltip);
  width: max-content; max-width: min(320px, calc(100vw - 16px));
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-md);
  font-size: var(--fs-sm); line-height: 1.45; text-transform: none; letter-spacing: normal;
}
.dica-balao[hidden] { display: none; }
.dica-balao strong { display: block; margin-bottom: var(--sp-1); font-weight: 700; }
.dica-balao p { margin: var(--sp-1) 0 0; color: var(--text-dim); }
.dica-balao b { color: var(--text); font-weight: 600; }

/* Grafico */
.fc-card-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.fc-legenda { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-dim); }
.fc-leg { display: inline-flex; align-items: center; gap: var(--sp-2); }
.fc-leg::before { content: ''; width: 22px; border-top: 2px solid var(--accent); }
.fc-leg-prov::before { border-top: 2px dashed var(--warning); }
.fc-grafico { position: relative; height: 280px; min-width: 0; }

/* Linha do tempo: cards lado a lado, rolagem lateral, todos da mesma altura. */
.fc-linha {
  list-style: none; margin: 0; padding: var(--sp-3) 2px var(--sp-2);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: var(--sp-3); align-items: stretch;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.fc-bloco {
  position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.fc-bloco-neg { border-color: var(--danger); background: var(--danger-soft); }
/* Marco da linha do tempo: bolinha no topo de cada card, ligada pelo traco. */
.fc-marco {
  position: absolute; top: -7px; left: var(--sp-3); right: calc(-1 * var(--sp-3) - 2px);
  border-top: 2px solid var(--border);
}
.fc-bloco:last-child .fc-marco { right: var(--sp-3); }
.fc-marco::before {
  content: ''; position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--accent); border: 2px solid var(--surface);
}
.fc-bloco-neg .fc-marco::before { background: var(--danger); }
.fc-bloco-cab { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.fc-num { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.fc-num > div { display: flex; justify-content: space-between; gap: var(--sp-2); }
.fc-num dt { color: var(--text-dim); }
.fc-num dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-num-saldo { padding-top: var(--sp-1); border-top: 1px solid var(--border); font-weight: 700; }
.fc-num-saldo dt { color: var(--text); }
.fc-contas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.fc-conta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-dim);
}
.fc-conta-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.fc-conta-data { grid-column: 1; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fc-conta-valor { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-mais { margin-top: auto; font-size: var(--fs-xs); color: var(--text-faint); }
a.fc-mais { color: var(--accent); text-decoration: none; }
a.fc-mais:hover { text-decoration: underline; }

/* Atrasados */
.fc-atrasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; }
.fc-atraso { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fc-atraso-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-dim); }
.fc-atraso-cab strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .kpi-grid-full.fc-kpis { gap: 8px; }
  .fu-presets.fc-presets { grid-template-columns: repeat(4, 1fr); }
  .fc-grafico { height: 220px; }
  .fc-linha { grid-auto-columns: minmax(78%, 1fr); }
  .fc-atrasos { grid-template-columns: 1fr; }
  .fc-titulo-sub { display: block; margin: 2px 0 0; }
}


/* ============ Fase 67: Simulador de cenarios ============ */
/* SelectBusca da barra na altura da barra (--fu-h), nao do formulario. */
.sim-filtros .selectbusca .sb-display { height: var(--fu-h); }
.sim-g-sb, .sim-g-sb .selectbusca { min-width: 220px; }
/* Ajustes em cima, prazos embaixo: lado a lado a grade de ajustes rolava
   de lado ja em 1440px. Dentro do card de prazos, receber | pagar. */
.sim-grade { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.sim-tab .sim-col-aj { width: 1%; text-align: center; white-space: nowrap; }
.sim-pct { position: relative; display: inline-flex; align-items: center; }
.sim-pct .input { width: 90px; padding-right: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.sim-pct-suf { position: absolute; right: var(--sp-3); font-size: var(--fs-sm); color: var(--text-dim); pointer-events: none; }
.sim-tab .sim-sub-lin > th { background: var(--bg); }
.sim-sub {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim);
}
.sim-prazos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); padding: var(--sp-4); }
.sim-prazo { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.sim-prazo-tit { padding: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.sim-prazo-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.sim-prazo-campos .campo { display: flex; flex-direction: column; gap: 5px; }
.sim-prazo-campos label, .sim-prazo-lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.sim-prazo-total { min-width: 56px; }
.sim-prazo-soma { display: flex; align-items: center; height: var(--altura-controle); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--success); }
.sim-prazo-soma.sim-soma-erro { color: var(--danger); }
/* Acao principal (Simular) a direita; Excluir encosta na esquerda. */
.sim-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.sim-acoes > .btn { height: var(--altura-controle); box-sizing: border-box; }
.sim-acoes-esq { margin-right: auto; }
.sim-erros { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); white-space: normal; }
/* O gap da pagina ja separa: sem a margem do alerta-box o vao fica igual aos outros. */
.sim-filtros + .alerta-box { margin: 0; }
.sim-oculto, .sim-espelho { display: none; }
.kpi-grid-full.sim-kpis { margin-bottom: 0; }
.sim-kpis .kpi2-lbl { gap: var(--sp-1); }
.sim-kpis .kpi2-val { white-space: nowrap; }
/* 6 por linha entre 1301 e 1700px: o icone sai para o valor nao quebrar (igual ao DRE). */
@media (min-width: 1301px) and (max-width: 1700px) { .sim-kpis .kpi2-ico { display: none; } }
.sim-leg-hoje::before { border-top: 2px dashed var(--text-faint); }

@media (max-width: 1100px) { .sim-prazos { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .sim-g-sb, .sim-g-sb .selectbusca { min-width: 0; }
  .sim-pct .input { height: 44px; font-size: 16px; }
  .sim-prazo-soma { height: 44px; }
  .sim-prazos { padding: var(--sp-3); }
  .sim-acoes > .btn { flex: 1 1 100%; justify-content: center; height: 44px; }
  .sim-acoes-esq { margin-right: 0; }
}

/* ============ Fase 68: base mes a mes no simulador ============ */
.sim-lbl-dica { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* Opcao indisponivel do toggle tipo 1: mesmo tamanho do botao, apagada. */
.fu-presets .desabilitado {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--fu-h) - 8px); padding: 0 10px; border-radius: 5px;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  color: var(--text-faint); opacity: .6; cursor: not-allowed;
}
@media (max-width: 720px) {
  .fu-presets .desabilitado { height: 44px; white-space: normal; line-height: 1.15; text-align: center; }
}