/* ===========================================================================
   finpulse.css — o visual do Painel Gestor, na linguagem do FinPulse (29/08)
   ===========================================================================

   "faça o layout do sistema igual ao finpulse" (Fernando, 29/08/2026).

   DE ONDE VEIO CADA NÚMERO
   ------------------------
   Nada aqui foi inventado. Os tokens saíram de
   `BOT/sistema-llp/nuxt/assets/css/style.css` e `menu.css` — o FinPulse que o
   escritório usa — e da `tailwind.config.js` dele:

     · azul #2563eb, hover #1d4ed8, fundo do azul #eff6ff
     · fundo da página #f8fafc, cartão #fff, borda #e2e8f0
     · texto #1e293b, texto fraco #64748b
     · Public Sans no corpo, IBM Plex Mono no número
     · cartão com raio 14px, botão e campo com raio 10px
     · foco azul com halo de 3px

   POR QUE ISTO É UM ARQUIVO, E NÃO UM <style> NO BASE
   ---------------------------------------------------
   Duas telas-base carregam ele (`base_gestor.html` e, aos poucos, o
   `base.html` antigo). Repetir 400 linhas em dois lugares é garantir que um
   dos dois fique para trás.

   COMO ELE CONVERSA COM O TABLER
   -------------------------------
   O Tabler 1.4 é todo construído sobre variáveis `--tblr-*`. Em vez de
   reescrever componente por componente, este arquivo REDEFINE as variáveis:
   o botão, o cartão, a tabela e o alerta passam a usar a paleta nova sem
   uma linha de override. Os overrides que existem aqui embaixo são só onde a
   forma muda (raio, peso, espaçamento), e não a cor.

   O QUE FICOU DO VISUAL ANTERIOR, DE PROPÓSITO
   ---------------------------------------------
   A tabela que vira bloco no celular. Ela veio da análise do Acessórias em
   22/08 e resolve um problema real de 19 telas — o FinPulse não contradiz
   isso, e jogar fora seria perder o ganho para repintar.

   O QUE SAIU
   ----------
   O foco LARANJA (#f59942), também do Acessórias. Era bom pelo motivo certo
   (achar o cursor numa ficha de 40 campos), mas o FinPulse resolve o mesmo
   problema com o halo azul de 3px — e duas cores de foco no mesmo sistema é
   o tipo de detalhe que faz a tela parecer remendada.
   =========================================================================== */

:root {
  /* ---- a paleta, igual à do FinPulse ---- */
  --fp-primary: #2563eb;
  --fp-primary-hover: #1d4ed8;
  --fp-primary-subtle: #eff6ff;
  --fp-ground: #f8fafc;
  --fp-card: #ffffff;
  --fp-border: #e2e8f0;
  --fp-border-forte: #cbd5e1;
  --fp-heading: #1e293b;
  --fp-strong: #0f172a;
  --fp-muted: #64748b;
  --fp-muted-claro: #94a3b8;

  --fp-ok: #16a34a;      --fp-ok-bg: #dcfce7;
  --fp-warn: #d97706;    --fp-warn-bg: #fef3c7;
  --fp-bad: #dc2626;     --fp-bad-bg: #fee2e2;
  --fp-info: #2563eb;    --fp-info-bg: #eff6ff;

  --fp-raio-card: 14px;
  --fp-raio-controle: 10px;
  --fp-sombra-card: 0 1px 3px 0 rgba(0, 0, 0, .03);
  --fp-largura-menu: 244px;

  --fp-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --fp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
             monospace;

  /* ---- e agora o Tabler inteiro passa a falar essa língua ---- */
  --tblr-font-sans-serif: var(--fp-sans);
  --tblr-font-monospace: var(--fp-mono);
  --tblr-body-font-family: var(--fp-sans);
  --tblr-body-font-size: .875rem;      /* 14px, como o html do FinPulse */
  --tblr-body-line-height: 1.5;
  --tblr-body-bg: var(--fp-ground);
  --tblr-body-color: var(--fp-heading);
  --tblr-border-color: var(--fp-border);
  --tblr-border-color-translucent: var(--fp-border);
  --tblr-primary: var(--fp-primary);
  --tblr-primary-rgb: 37, 99, 235;
  --tblr-primary-bg-subtle: var(--fp-primary-subtle);
  --tblr-primary-border-subtle: #bfdbfe;
  --tblr-primary-text-emphasis: var(--fp-primary-hover);
  --tblr-link-color: var(--fp-primary);
  --tblr-link-color-rgb: 37, 99, 235;
  --tblr-link-hover-color: var(--fp-primary-hover);
  --tblr-muted: var(--fp-muted);
  --tblr-secondary: var(--fp-muted);
  --tblr-secondary-color: var(--fp-muted);
  --tblr-secondary-bg: var(--fp-ground);
  /* as duas superfícies que o `_gestor_padrao.html` usa nas listas */
  --tblr-bg-surface: var(--fp-card);
  --tblr-bg-surface-secondary: var(--fp-ground);
  --tblr-bg-surface-tertiary: #f1f5f9;
  --tblr-border-radius: var(--fp-raio-controle);
  --tblr-border-radius-sm: 8px;
  --tblr-border-radius-lg: var(--fp-raio-card);
}

html { font-size: 16px; }

body {
  background: var(--fp-ground);
  color: var(--fp-heading);
  font-family: var(--fp-sans);
  font-size: .875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ===========================================================================
   1. O NÚMERO É MONOESPAÇADO
   ===========================================================================
   É o detalhe que mais faz um sistema financeiro parecer um sistema
   financeiro: com a Public Sans, "1.234,56" e "9.876,54" têm larguras
   diferentes e as colunas de dinheiro dançam. Com a IBM Plex Mono elas
   alinham na vírgula sozinhas.

   `.g-num` já era a classe usada nas telas do Gestor; ela continua valendo e
   agora troca a fonte junto. */
.font-mono, .data-mono, .money, .g-num, .kpi-value, .code-tag,
code, kbd, samp, pre, .fp-mono {
  font-family: var(--fp-mono);
  font-variant-numeric: tabular-nums;
}
.g-num, .money { letter-spacing: -.01em; }

code {
  background: var(--fp-ground);
  border: 1px solid var(--fp-border);
  border-radius: 6px;
  padding: .1em .35em;
  font-size: .82em;
  color: var(--fp-strong);
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre code { border: 0; padding: 0; background: transparent; }

/* ===========================================================================
   2. O ESQUELETO: menu à esquerda, barra fina em cima
   ===========================================================================
   O FinPulse é um menu lateral branco com o conteúdo num cinza muito claro.
   O painel era uma barra grafite em cima com oito menus suspensos — e um
   menu suspenso esconde onde a pessoa está: para saber, ela tinha de abrir.
   Na lateral, a seção aberta e o item atual ficam à vista o tempo todo. */
.fp-shell { display: flex; min-height: 100vh; align-items: stretch; }

.fp-sidebar {
  width: var(--fp-largura-menu);
  flex: 0 0 var(--fp-largura-menu);
  background: var(--fp-card);
  border-right: 1px solid var(--fp-border);
}
@media (min-width: 992px) {
  .fp-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.fp-sidebar::-webkit-scrollbar { width: 8px; }
.fp-sidebar::-webkit-scrollbar-thumb {
  background: #e2e8f0; border-radius: 4px;
}

.fp-marca {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem .9rem .85rem;
  border-bottom: 1px solid var(--fp-border);
  text-decoration: none; color: var(--fp-strong);
}
.fp-marca img { height: 26px; width: auto; border-radius: 6px; }
.fp-marca .nome { font-weight: 700; font-size: .9rem; letter-spacing: -.01em; }
.fp-marca .sub {
  display: block; font-family: var(--fp-mono); font-size: 10px;
  font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--fp-muted-claro);
}

.fp-nav { padding: .5rem .55rem 1.5rem; }

/* o rótulo de seção: mono, minúsculo, espaçado — igual ao menu-group-header */
.fp-grupo {
  font-family: var(--fp-mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--fp-muted-claro);
  padding: .85rem .7rem .3rem;
  display: flex; align-items: center; gap: .4rem;
}
.fp-grupo .conta {
  margin-left: auto; font-size: 9.5px; letter-spacing: .04em;
  color: #cbd5e1; font-weight: 600;
}

.fp-item {
  display: flex; align-items: center;
  padding: .45rem .65rem;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: #475569; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.fp-item:hover { background: var(--fp-ground); color: var(--fp-strong); }
.fp-item.ativo {
  background: var(--fp-primary-subtle);
  color: var(--fp-primary);
  font-weight: 600;
}
.fp-ponto {
  width: 6px; height: 6px; border-radius: 2px;
  background: #cbd5e1; margin-right: .65rem; flex: 0 0 6px;
  transition: background-color .12s ease;
}
.fp-item:hover .fp-ponto { background: var(--fp-muted-claro); }
.fp-item.ativo .fp-ponto { background: var(--fp-primary); }

/* A TELA QUE AINDA NÃO EXISTE continua aparecendo — a decisão é antiga e
   segue valendo: item escondido faz achar que a migração parou. O que muda é
   que ela não tem ponto, e o ponto é justamente o sinal de "tem tela". */
.fp-item.futuro {
  color: var(--fp-muted-claro); cursor: default;
  justify-content: space-between; gap: .5rem;
}
.fp-item.futuro:hover { background: transparent; color: var(--fp-muted-claro); }
.fp-item.futuro .fp-ponto { background: transparent; box-shadow: inset 0 0 0 1px #e2e8f0; }
.fp-etiqueta {
  font-family: var(--fp-mono); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--fp-muted-claro); background: var(--fp-ground);
  border-radius: 999px; padding: .1rem .4rem; white-space: nowrap;
}

.fp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.fp-topbar {
  background: var(--fp-card);
  border-bottom: 1px solid var(--fp-border);
  padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  position: sticky; top: 0; z-index: 20;
}
/* O CAMINHO: "Financeiro / Agendamento". Diz onde a pessoa está sem repetir
   o título que a própria tela já mostra logo abaixo. */
.fp-caminho { min-width: 0; font-size: 12.5px; }
.fp-caminho .secao {
  font-family: var(--fp-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fp-muted-claro);
}
.fp-caminho .sep { color: #e2e8f0; margin: 0 .4rem; }
.fp-caminho .tela { font-weight: 600; color: var(--fp-strong); }
.fp-topbar .quem {
  font-family: var(--fp-mono); font-size: 11px; color: var(--fp-muted);
}
.fp-abre-menu {
  border: 1px solid var(--fp-border); background: #fff;
  border-radius: 8px; padding: .3rem .5rem; line-height: 1; color: #475569;
}

.fp-content { padding: 1.25rem; flex: 1 1 auto; }
/* as telas trazem o `container-xl` delas; sem isto o recuo entra duas vezes */
.fp-content > .container-xl,
.fp-content > .container-fluid { padding-left: 0; padding-right: 0; }
@media (max-width: 575.98px) { .fp-content { padding: .85rem; } }

.fp-rodape {
  padding: .85rem 1.25rem 1.5rem;
  color: var(--fp-muted-claro); font-size: 11.5px;
}

/* ===========================================================================
   3. OS COMPONENTES
   =========================================================================== */
.card {
  background: var(--fp-card);
  border: 1px solid var(--fp-border) !important;
  border-radius: var(--fp-raio-card) !important;
  box-shadow: var(--fp-sombra-card) !important;
}
.card-header {
  background: var(--fp-card);
  border-bottom: 1px solid var(--fp-border);
  padding: .85rem 1.25rem;
  min-height: 0;
}
.card-body { padding: 1.25rem; }
.card-body.py-2 { padding-top: .75rem; padding-bottom: .75rem; }
.card-footer { background: var(--fp-card); border-top: 1px solid var(--fp-border); }
.card-title {
  font-size: .875rem; font-weight: 600; color: var(--fp-strong);
  margin: 0; letter-spacing: -.005em;
}

.page-title {
  font-size: 1.25rem; font-weight: 600; color: var(--fp-strong);
  letter-spacing: -.015em;
}
.page-header { margin-bottom: 1rem; }

.btn {
  border-radius: var(--fp-raio-controle);
  font-weight: 600; font-size: 13px;
  padding: .5rem 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .04);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { padding: .35rem .7rem; font-size: 12.5px; }
.btn-primary {
  background: var(--fp-primary); border-color: var(--fp-primary); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--fp-primary-hover); border-color: var(--fp-primary-hover);
}
/* O BOTÃO NEUTRO. No Tabler ele vinha cinza-claro sobre cinza-claro; no
   FinPulse é branco com borda, e é isso que separa "ação" de "fundo".

   ⚠️ QUEM DECIDE QUAL BOTÃO É NEUTRO É O JAVASCRIPT AQUI EMBAIXO, e não o
   seletor. Duas tentativas falharam antes:

     `.btn:not([class*="btn-"])` — parecia limpo e deixava de fora justamente
     os 65 botões `class="btn btn-sm"` do painel, porque "btn-sm" também
     contém "btn-";

     a mesma coisa com a lista de variantes nomeada, quebrada em várias
     linhas — em CSS, `.btn
 :not(.btn-primary)` com espaço no meio vira
     DESCENDENTE, e a regra passa a valer para o que estiver dentro do botão.

   Uma passada de JS marca `.btn-neutro` em quem não tem variante de cor. É
   explícito, cabe numa linha, e não depende de decorar como o `:not` combina. */
.btn.btn-neutro, .btn.btn-default, .btn-white {
  background: var(--fp-card);
  border: 1px solid var(--fp-border-forte);
  color: #334155;
}
.btn.btn-neutro:hover, .btn.btn-default:hover, .btn-white:hover {
  background: var(--fp-ground); border-color: var(--fp-muted-claro);
  color: var(--fp-strong);
}
/* o botão marcado dentro de um grupo (as três opções do funil, por exemplo) */
.btn.active, .btn-group .btn.active {
  background: var(--fp-primary-subtle) !important;
  border-color: var(--fp-primary) !important;
  color: var(--fp-primary) !important;
}
.btn-link { color: var(--fp-primary); box-shadow: none; }
.btn-ghost-danger { color: var(--fp-bad); box-shadow: none; }
.btn-ghost-danger:hover { background: var(--fp-bad-bg); color: var(--fp-bad); }

.form-control, .form-select, .input-group-text {
  border-radius: var(--fp-raio-controle);
  border-color: var(--fp-border-forte);
  padding: .5rem .8rem;
  font-size: 13px;
  color: var(--fp-strong);
}
.form-control-sm, .form-select-sm { padding: .35rem .6rem; font-size: 12.5px; }
/* O FOCO É AZUL, com halo. Ver o cabeçalho: o laranja do Acessórias saiu. */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--fp-primary) !important;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
.form-label {
  font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: .3rem;
}
.form-hint, .form-text { font-size: 11.5px; color: var(--fp-muted); }

/* A PÍLULA É ESTADO. Uma forma só, e a cor diz o quê — foi o que o FinPulse
   fez com o `.p-tag`. A regra antiga tinha duas formas (pílula = quantidade,
   retângulo = estado) e ninguém além de quem escreveu sabia disso. */
.badge {
  border-radius: 999px;
  font-family: var(--fp-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em;
  padding: .2rem .6rem;
}
.badge.bg-green-lt   { background: var(--fp-ok-bg)   !important; color: var(--fp-ok)   !important; }
.badge.bg-yellow-lt  { background: var(--fp-warn-bg) !important; color: var(--fp-warn) !important; }
.badge.bg-red-lt     { background: var(--fp-bad-bg)  !important; color: var(--fp-bad)  !important; }
.badge.bg-blue-lt, .badge.bg-azure-lt {
  background: var(--fp-info-bg) !important; color: var(--fp-info) !important;
}
.badge.bg-secondary-lt {
  background: var(--fp-ground) !important; color: var(--fp-muted) !important;
}

.table { font-size: 13px; color: var(--fp-heading); }
.table > thead > tr > th {
  background: var(--fp-ground);
  color: var(--fp-muted);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--fp-border);
}
.table > tbody > tr > td { padding: .7rem 1rem; border-color: var(--fp-border); }
.table > tbody > tr:hover > td { background: var(--fp-ground); }
.card > .table-responsive > .table, .card > .table { margin-bottom: 0; }
.card-table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.card-table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }

.list-group-item { border-color: var(--fp-border); padding: .65rem 1.25rem; }

.alert {
  border-radius: var(--fp-raio-card);
  border: 1px solid transparent;
  padding: .8rem 1rem;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.alert > * { min-width: 0; }
.alert-success { background: var(--fp-ok-bg);   border-color: #bbf7d0; color: #14532d; }
.alert-warning { background: var(--fp-warn-bg); border-color: #fde68a; color: #78350f; }
.alert-danger  { background: var(--fp-bad-bg);  border-color: #fecaca; color: #7f1d1d; }
.alert-info    { background: var(--fp-info-bg); border-color: #bfdbfe; color: #1e3a8a; }

.nav-tabs { border-bottom: 1px solid var(--fp-border); gap: .15rem; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  color: var(--fp-muted); font-size: 13px; font-weight: 500;
  padding: .55rem .85rem; border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--fp-strong); background: transparent; }
.nav-tabs .nav-link.active {
  color: var(--fp-primary); border-bottom-color: var(--fp-primary);
  background: transparent; font-weight: 600;
}

.text-secondary, .text-muted { color: var(--fp-muted) !important; }
hr { border-color: var(--fp-border); opacity: 1; }

/* ===========================================================================
   4. A TABELA VIRA BLOCO NO CELULAR
   ===========================================================================
   Isto vem do visual anterior e continua valendo: no computador comparar
   linhas exige tabela; no telefone, 19 telas rolavam de lado. Empilhada, cada
   valor ganha o rótulo da coluna ao lado. */
@media (max-width: 991px) {
  table.card-table thead { display: none; }
  table.card-table, table.card-table tbody,
  table.card-table tr, table.card-table td { display: block; width: 100%; }
  table.card-table tr {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-raio-controle);
    padding: .5rem .25rem; margin-bottom: .5rem; background: #fff;
  }
  table.card-table td {
    border: 0; padding: .2rem .75rem; text-align: left !important;
    display: flex; gap: .6rem; align-items: baseline;
  }
  table.card-table td::before {
    content: attr(data-rotulo); flex: 0 0 40%;
    color: var(--fp-muted); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
  }
  table.card-table td:empty { display: none; }
  /* as colunas que se escondiam por falta de largura voltam: empilhado não
     há disputa, e o celular passa a mostrar MAIS, não menos */
  table.card-table td.d-none { display: flex !important; }
  table.card-table th.d-none { display: none !important; }
}

/* ===========================================================================
   5. IMPRESSÃO
   ===========================================================================
   O balancete e o relatório de obrigações saem em PDF pelo reportlab, mas
   toda tela ainda pode ser impressa — e um menu lateral de 244px numa folha
   A4 come um quarto do papel. */
@media print {
  .fp-sidebar, .fp-topbar, .fp-rodape, .d-print-none { display: none !important; }
  .fp-content { padding: 0; }
  body { background: #fff; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; }
}

/* 29/08 — o menu virou acordeao (details/summary), pedido do Fernando */
.fp-secao > summary { list-style: none; cursor: pointer; }
.fp-secao > summary::-webkit-details-marker { display: none; }
.fp-secao > summary.fp-grupo::after {
  content: "\25B8"; margin-left: auto; opacity: .55;
  font-size: 10px; transition: transform .15s ease; }
.fp-secao > summary.fp-grupo .conta { margin-left: 0; }
.fp-secao[open] > summary.fp-grupo::after { transform: rotate(90deg); }

/* 29/08 — dia clicado no calendario de obrigacoes */
.ob-escolhido { outline: 2px solid var(--tblr-primary, #206bc4);
  outline-offset: -2px; border-radius: 6px; }
a.ob-dia:hover { background: rgba(32,107,196,.06); }

/* ── O AVATAR DO COLABORADOR (30/08) ──────────────────────────────────────
   "coloque a foto de um boneco, ou as iniciais, e se tiver foto traz a foto"
   (Fernando). Ver core/templates/core/_avatar.html.

   ⚠️ O BONECO NÃO É IMAGEM: é um círculo com as iniciais. Nada para baixar,
   nada que dependa de arquivo em disco — que na nuvem é efêmero. Vinte e oito
   pessoas sem foto custam zero requisição.

   ⚠️ E O TAMANHO VEM POR `style` INLINE, do template. Uma classe por tamanho
   (av-32, av-40, av-64…) obrigaria a mexer no CSS toda vez que uma tela nova
   precisasse de um tamanho diferente. */
.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;          /* a foto preenche o círculo sem esticar */
  flex: 0 0 auto;
  vertical-align: middle;
  background: var(--fp-ground, #eee);
}
.av-boneco {
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  /* ⚠️ SEM SELEÇÃO DE TEXTO: as iniciais são um desenho, não conteúdo. Sem
     isto, arrastar o mouse pela lista pinta metade dos avatares de azul. */
  user-select: none;
}
.av-fila { display: flex; align-items: center; gap: .6rem; }