/* ===========================================================================
   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:

     · (até 07/10/2026) azul #2563eb, fundo #f8fafc, borda #e2e8f0 —
       TROCADOS pela repaginação: marinho da logo #1E3466, fundo #F4F6F9,
       borda #E3E7EE, texto #1A2236/#5B6478 (ver o :root)
     · 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: "A · Marinho" da repaginação (07/10/2026) ----
     "Quero repaginar o visual do Gestorize (...) troque o azul #2563eb
     pelo marinho da logo" (Fernando). Valores do protótipo aprovado,
     `gestorize-mockups/gestorize-repaginacao.html`, bloco
     html[data-tema="marinho"]. O azul royal do FinPulse disputava com o
     degradê do "G" da logo; o marinho é a cor DELA, e o verde-água dela
     (--fp-agua) só aparece em detalhe: o foco e a marca do item ativo. */
  --fp-primary: #1E3466;
  --fp-primary-hover: #13234A;
  --fp-primary-subtle: #E9EEF7;
  --fp-ground: #F4F6F9;
  --fp-card: #FFFFFF;
  --fp-border: #E3E7EE;
  --fp-border-forte: #CDD4DF;
  --fp-heading: #1A2236;
  --fp-strong: #1A2236;
  --fp-muted: #5B6478;
  --fp-muted-claro: #8E96A8;

  --fp-ok: #2F7D5B;      --fp-ok-bg: #E5F2EB;
  --fp-warn: #A8671A;    --fp-warn-bg: #FBF0DF;
  --fp-bad: #B4413B;     --fp-bad-bg: #F8E6E4;
  --fp-info: #2B4A86;    --fp-info-bg: #E9EEF7;

  /* a marca da logo e o verde-água dela — detalhe, nunca área grande */
  --fp-marca: #13234A;
  --fp-marca-2: #1E3466;
  --fp-marca-3: #2B4A86;
  --fp-agua: #5FA9AC;
  --fp-agua-claro: #E6F3F3;
  --fp-foco: #5FA9AC;

  /* o menu lateral, escuro na cor da marca */
  --fp-menu-bg: #0F1C3B;
  --fp-menu-borda: #1B2A4F;
  --fp-menu-texto: #AEB8CE;
  --fp-menu-titulo: #FFFFFF;
  --fp-menu-grupo: #6F7C99;
  --fp-menu-ativo-bg: rgba(95, 169, 172, .14);
  --fp-menu-ativo-texto: #FFFFFF;
  --fp-menu-ativo-marca: #5FA9AC;

  /* ⚠️ A MARCA DO PORTAL, E NÃO A DO PRODUTO.            (13/09/2026)
     O azul-marinho do topo da área do cliente. Ele existe para carregar a
     marca da CONTABILIDADE — forçá-lo em `--fp-primary` faria o portal do
     cliente vestir a cor do Gestorize. Ganha nome próprio com o MESMO valor:
     fica nomeado, como o resto, e nenhum pixel muda. */
  --fp-marca-portal: #1F3A5F;

  /* ⚠️ O SEMÁFORO DO ARO DO PAINEL INICIAL.              (27/10/2026)
     As fatias do aro (`_anel_svg.html`) recebem a cor pronta do Python —
     `gestor_views._COR_*`. A legenda e os números de `_painel_visao.html`
     precisam ser O MESMO tom, senão o "concluída" da legenda não bate com a
     fatia. Por isso estes nomes têm o valor do Python, e não o --fp-ok. */
  --fp-aro-concluida: #1e9e4a;
  --fp-aro-no-prazo: #5b8dd6;
  --fp-aro-atrasada: #d9534f;
  --fp-aro-outras: #7a8b99;

  --fp-raio-card: 12px;
  --fp-raio-controle: 10px;
  --fp-sombra-card: 0 1px 2px rgba(16, 24, 40, .03);
  --fp-largura-menu: 244px;
  --fp-topo-h: 52px; /* topbar e cabeçalho do sidebar — mesma altura */

  --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: 30, 52, 102;
  --tblr-primary-bg-subtle: var(--fp-primary-subtle);
  --tblr-primary-border-subtle: #C5CEE0;
  --tblr-primary-text-emphasis: var(--fp-primary-hover);
  --tblr-link-color: var(--fp-primary);
  --tblr-link-color-rgb: 30, 52, 102;
  --tblr-link-hover-color: var(--fp-primary-hover);
  --tblr-link-hover-color-rgb: 19, 35, 74;
  --tblr-muted: var(--fp-muted);
  --tblr-secondary: var(--fp-muted);
  --tblr-secondary-color: var(--fp-muted);
  --tblr-secondary-bg: var(--fp-ground);
  /* as cores de estado do Tabler, na mesma paleta das pílulas */
  --tblr-success: var(--fp-ok);     --tblr-success-rgb: 47, 125, 91;
  --tblr-warning: var(--fp-warn);   --tblr-warning-rgb: 168, 103, 26;
  --tblr-danger: var(--fp-bad);     --tblr-danger-rgb: 180, 65, 59;
  --tblr-info: var(--fp-info);      --tblr-info-rgb: 43, 74, 134;
  /* 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: #EDF0F5;
  --tblr-border-radius: var(--fp-raio-controle);
  --tblr-border-radius-sm: 8px;
  --tblr-border-radius-lg: var(--fp-raio-card);
}

html {
  font-size: 16px;
  height: 100%;
  overflow: hidden; /* scroll só no .fp-content (04/11/2026) */
}

/* ⚠️ O FILETE CLARO À ESQUERDA DO MENU (07/10/2026). O Tabler põe no :root,
   a partir de 992px, `margin-left: calc(100vw - 100%)` — reserva à esquerda
   a largura da barra de rolagem, para a página não "pular" quando ela
   aparece. Com barra de rolagem sempre visível (15px), sobravam 15px do
   fundo da página ANTES do menu: com o menu branco não se via; marinho,
   virou um filete claro. "tire esse filete branco" (Fernando). O menu
   encosta na borda; o preço é a página andar 15px quando surge a rolagem. */
@media (min-width: 992px) {
  :root { margin-left: 0; }
}

body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  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; align-items: stretch;
  flex: 1 1 auto; min-height: 0;
  width: 100%;
  overflow: hidden; /* a página não rola; o content sim */
}

/* ⚠️ O MENU FICOU ESCURO, NA COR DA MARCA (repaginação, 07/10/2026).
   Era a coluna branca do FinPulse; agora é o marinho da logo (--fp-menu-bg),
   como no protótipo aprovado. O "G" tem contorno branco e brilha no escuro —
   e nada saturado encosta nele: o verde-água fica só na barrinha do item
   ativo. No celular a coluna é a gaveta do Bootstrap, e a mesma cor vale lá
   (`--tblr-offcanvas-*`), senão a gaveta abriria branca com texto claro. */
.fp-sidebar {
  position: relative;
  width: var(--fp-largura-menu);
  flex: 0 0 var(--fp-largura-menu);
  background: var(--fp-menu-bg);
  border-right: 1px solid var(--fp-menu-borda);
  color: var(--fp-menu-texto);
  --tblr-offcanvas-bg: var(--fp-menu-bg);
  --tblr-offcanvas-bg-color: var(--fp-menu-bg);
  --tblr-offcanvas-color: var(--fp-menu-texto);
  --tblr-offcanvas-border-color: var(--fp-menu-borda);
}
@media (min-width: 992px) {
  .fp-sidebar {
    position: relative;
    align-self: stretch;
    height: auto; min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible; /* o botão da borda não pode ser cortado */
    /* acima do .fp-main: o círculo da borda invade a área branca e, sem
       isto, o conteúdo (e a topbar z-index 20) pintavam por cima dele */
    z-index: 30;
  }
  .fp-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* barra fina no próprio nav — a clássica (~15px) “comia” a direita
       e, ao expandir uma seção, o menu pulava/desformatava */
    scrollbar-width: thin;
    scrollbar-color: rgba(174, 184, 206, .4) transparent;
  }
  .fp-nav::-webkit-scrollbar { width: 5px; }
  .fp-nav::-webkit-scrollbar-track { background: transparent; }
  .fp-nav::-webkit-scrollbar-thumb {
    background: rgba(174, 184, 206, .35);
    border-radius: 999px;
  }
  .fp-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(174, 184, 206, .55);
  }
}
/* ⚠️ O BOOTSTRAP APAGA ESTE FUNDO NO COMPUTADOR: a partir de 992px a regra
   `.offcanvas-lg` traz `background-color: transparent !important` (a
   gaveta deixa de ser gaveta e "fica sem cor"). Sem esta linha o menu saía
   transparente — o cinza da página por baixo, e o texto claro do menu
   sumia nele. Medido no print de 07/10/2026. */
.fp-sidebar.offcanvas-lg { background-color: var(--fp-menu-bg) !important; }
.fp-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(174, 184, 206, .4) transparent;
}
.fp-sidebar::-webkit-scrollbar { width: 5px; }
.fp-sidebar::-webkit-scrollbar-track { background: transparent; }
.fp-sidebar::-webkit-scrollbar-thumb {
  background: rgba(174, 184, 206, .35); border-radius: 999px;
}

.fp-marca {
  display: flex; align-items: center; gap: .65rem;
  height: 100%;
  padding: 0 .75rem;
  border-bottom: 1px solid var(--fp-menu-borda);
  text-decoration: none; color: var(--fp-menu-titulo);
}
.fp-marca:hover,
.fp-marca:focus,
.fp-marca:focus-visible,
.fp-marca:active {
  color: var(--fp-menu-titulo);
  text-decoration: none; /* Tabler/Bootstrap sublinham o <a>:hover */
}
/* logo à esquerda + GESTORIZE ao lado (GESTOR branco / IZE verde-água,
   adaptação da marca ao fundo escuro do menu) */
.fp-marca img {
  height: 28px; width: auto; border-radius: 6px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}
.fp-marca .nome {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  font-weight: 700; font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase; line-height: 1;
  white-space: nowrap;
}
.fp-marca .nome-gestor { color: #fff; }
.fp-marca .nome-ize { color: var(--fp-agua); }
.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-menu-grupo);
}

/* sem padding horizontal: o menu principal (.fp-grupo) ocupa 100% da largura */
.fp-nav { padding: .35rem 0 1.5rem; }

/* ===========================================================================
   2b. O MENU RECOLHIDO                                          (15/09/2026)
   ===========================================================================
   "esse menu principal deveria ter no canto um botao de ocultar e desocultar,
    ficando somente a logo, sem o escrito Gestorize" (Fernando).

   A classe `fp-menu-recolhido` vai no <html>, posta por um script no <head>
   do `base_gestor.html` ANTES do primeiro desenho — no <body> ela chegaria
   depois, e o menu piscaria largo e encolheria a cada troca de tela.

   Só vale a partir de 992px: abaixo disso a coluna é a gaveta do Bootstrap,
   e as regras daqui não podem encostar nela.

   Em 04/11/2026 o recolhido deixou de esconder o nav: mostra o ícone de cada
   seção, com tooltip no hover e flyout no clique — a árvore de menus é a mesma. */
.fp-cabeca {
  position: relative;
  display: flex; align-items: center;
  height: var(--fp-topo-h);
  min-height: var(--fp-topo-h);
  box-sizing: border-box;
  border-bottom: 1px solid var(--fp-menu-borda);
  background: none; /* sem circuitos */
}
.fp-cabeca .fp-marca { flex: 1 1 auto; min-width: 0; border-bottom: 0; }

/* botão de recolher: aba ao LADO do sidebar (não por cima).
   Esquerda reta, direita arredondada; chevron ‹ expandido / › recolhido.
   top centra o quadrado na topbar (~52px → (52−32)/2 = 10px). */
.fp-recolhe {
  position: absolute;
  top: 10px;
  left: calc(100% + 1px);
  z-index: 31;
  width: 32px; height: 32px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--fp-border);
  border-radius: 0 10px 10px 0;
  background: #fff;
  color: var(--fp-muted);
  box-shadow: 2px 1px 6px rgba(16, 24, 40, .08);
  cursor: pointer; line-height: 1;
  transition: background-color .12s ease, color .12s ease,
              box-shadow .12s ease;
}
.fp-recolhe:hover {
  background: #fff;
  color: var(--fp-primary);
  box-shadow: 2px 2px 8px rgba(16, 24, 40, .12);
}
.fp-recolhe:focus-visible {
  outline: none;
  color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(95, 169, 172, .26);
}
.fp-recolhe svg { transition: transform .15s ease; }

@media (min-width: 992px) {
  /* a transição fica aqui, e não na regra geral: no celular a gaveta tem a
     animação dela, e duas brigando fazem a coluna tremer */
  .fp-sidebar { transition: width .15s ease, flex-basis .15s ease; }
  html.fp-menu-recolhido .fp-sidebar {
    --fp-largura-menu: 64px;
    overflow: visible;
  }
  html.fp-menu-recolhido .fp-cabeca {
    flex-direction: row; justify-content: center;
    padding: 0; height: var(--fp-topo-h);
  }
  html.fp-menu-recolhido .fp-marca { padding: 0; justify-content: center; }
  html.fp-menu-recolhido .fp-marca .nome,
  html.fp-menu-recolhido .fp-marca .sub { display: none; }
  html.fp-menu-recolhido .fp-recolhe svg { transform: rotate(180deg); }
  html.fp-menu-recolhido .fp-nav {
    display: block;
    padding: .35rem 0 1.25rem;
    max-height: calc(100vh - 5.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* recolhido: só o ícone da seção; rótulo vira tooltip; itens viram flyout */
  html.fp-menu-recolhido .fp-secao { position: relative; margin: .15rem 0; }
  html.fp-menu-recolhido .fp-grupo {
    justify-content: center; padding: .55rem 0; gap: 0;
    width: 100%; border-radius: 0;
  }
  html.fp-menu-recolhido .fp-grupo:hover,
  html.fp-menu-recolhido .fp-secao[open] > .fp-grupo,
  html.fp-menu-recolhido .fp-secao.ativa > .fp-grupo {
    background: var(--fp-menu-ativo-bg); color: var(--fp-menu-ativo-texto);
  }
  html.fp-menu-recolhido .fp-secao.ativa > .fp-grupo .fp-secao-icone {
    color: var(--fp-agua);
  }
  html.fp-menu-recolhido .fp-secao-rotulo,
  html.fp-menu-recolhido .fp-secao-seta { display: none; }
  html.fp-menu-recolhido .fp-secao:not([open]) > .fp-grupo:hover .fp-dica,
  html.fp-menu-recolhido .fp-secao:not([open]) > .fp-grupo:focus-visible .fp-dica {
    opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
  }
  html.fp-menu-recolhido .fp-itens {
    display: none;
    position: fixed; z-index: 40;
    min-width: 200px; max-width: 260px;
    /* cresce com o conteúdo; só rola se passar da altura da tela */
    max-height: calc(100vh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0; padding: .65rem 0;
    border: 1px solid var(--fp-menu-borda);
    border-radius: 12px;
    background: var(--fp-menu-bg);
    box-shadow: 0 8px 24px rgba(8, 14, 30, .35);
  }
  html.fp-menu-recolhido .fp-secao[open] > .fp-itens {
    display: block;
    border-left: 0;
    margin: 0;
    padding: .65rem 0;
  }
  html.fp-menu-recolhido .fp-flyout-titulo {
    display: block;
    padding: .15rem .85rem .55rem;
    margin: 0 0 .2rem;
    border-bottom: 1px solid var(--fp-menu-borda);
    font-family: var(--fp-sans);
    /* título de grupo do DS: 11–11,5 px, caixa alta, letter-spacing largo */
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .11em;
    color: var(--fp-menu-titulo);
  }
}

/* título do flyout: oculto no menu expandido (o summary já diz o nome) */
.fp-flyout-titulo { display: none; }

/* o título de grupo: caixa alta pequena e espaçada — etiqueta, não item
   DS §5: 11–11,5 px, peso 600, letter-spacing largo.
   Branco no estado normal (cinza sumia no marinho); hover ganha véu +
   verde-água no ícone/seta para marcar a interação. */
.fp-grupo {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--fp-sans);
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em;
  line-height: 1.2;
  color: var(--fp-menu-titulo);
  /* padding interno só para o texto; o véu do hover vai de borda a borda */
  padding: .55rem .65rem;
  display: flex; align-items: center; gap: .55rem;
  transition: color .12s ease, background-color .12s ease;
  border-radius: 0;
}
.fp-secao > summary.fp-grupo:hover {
  background: var(--fp-menu-ativo-bg);
  color: var(--fp-menu-titulo);
}
.fp-secao > summary.fp-grupo:hover .fp-secao-icone,
.fp-secao > summary.fp-grupo:hover .fp-secao-seta {
  color: var(--fp-agua);
  opacity: 1;
}
.fp-secao[open] > summary.fp-grupo { color: var(--fp-menu-titulo); }
/* seção que contém a página atual — marcada mesmo com o grupo recolhido */
.fp-secao.ativa > summary.fp-grupo {
  background: var(--fp-menu-ativo-bg);
  color: var(--fp-menu-titulo);
  box-shadow: inset 5px 0 0 var(--fp-menu-ativo-marca);
}
.fp-secao.ativa > summary.fp-grupo .fp-secao-icone,
.fp-secao.ativa > summary.fp-grupo .fp-secao-seta {
  color: var(--fp-agua);
}
.fp-secao-icone {
  display: inline-flex; flex: 0 0 auto;
  width: 18px; height: 18px; align-items: center; justify-content: center;
  color: inherit; opacity: .92;
}
.fp-secao-rotulo { min-width: 0; flex: 1 1 auto; }
/* Tooltip — modelo oficial claro (docs/DESIGN_SYSTEM.md §5.1 +
   docs/assets/tooltip-modelo.png). Menu recolhido: balão à direita,
   seta na face esquerda. Topbar: variante .fp-dica-cima (seta embaixo). */
.fp-dica {
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  box-sizing: border-box;
  max-width: min(280px, calc(100vw - 24px));
  width: max-content;
  padding: .45rem .9rem; border-radius: 12px;
  background: var(--fp-card); color: var(--fp-heading);
  border: 1px solid var(--fp-border);
  font-family: var(--fp-sans); font-size: 13px; font-weight: 500;
  line-height: 1.35; letter-spacing: 0; text-transform: none;
  text-align: center;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 50;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
/* seta: borda + preenchimento branco (mesma linguagem do modelo) */
.fp-dica::before,
.fp-dica::after {
  content: ""; position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%);
  border: solid transparent;
}
.fp-dica::before {
  border-width: 6px; border-right-color: var(--fp-border);
  margin-right: 0;
}
.fp-dica::after {
  border-width: 5px; border-right-color: var(--fp-card);
  margin-right: -1px;
}
/* Topbar: balão ABAIXO do ícone, ancorado à direita (ícones ficam no
   canto — centrar estouraria a viewport). Texto quebra em até 280px. */
.fp-dica.fp-dica-cima {
  left: auto; right: 0; top: calc(100% + 10px); bottom: auto;
  transform: translateY(-4px);
  z-index: 1060;
  text-align: left;
}
.fp-dica.fp-dica-cima::before,
.fp-dica.fp-dica-cima::after {
  left: auto; right: 14px; top: auto; bottom: 100%;
  transform: none;
  border-right-color: transparent;
}
.fp-dica.fp-dica-cima::before {
  border-width: 6px; border-bottom-color: var(--fp-border); margin-right: 0;
}
.fp-dica.fp-dica-cima::after {
  border-width: 5px; border-bottom-color: var(--fp-card);
  margin-right: 1px; margin-bottom: -1px;
}
.fp-fav-botao:hover .fp-dica,
.fp-fav-botao:focus-visible .fp-dica,
.fp-sino-botao:hover .fp-dica,
.fp-sino-botao:focus-visible .fp-dica,
.fp-ponte:hover .fp-dica,
.fp-ponte:focus-visible .fp-dica {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* com o menu aberto, o balão some — não compete com o dropdown */
.fp-fav-botao[aria-expanded="true"] .fp-dica,
.fp-sino-botao[aria-expanded="true"] .fp-dica {
  opacity: 0 !important; visibility: hidden !important;
}
/* o topbar não pode cortar o balão que desce sobre o conteúdo */
.fp-topbar,
.fp-topbar .ms-auto,
.fp-fav,
.fp-sino,
.fp-ponte {
  overflow: visible;
}
.fp-grupo .conta {
  margin-left: auto; font-family: var(--fp-mono); font-size: 10px;
  letter-spacing: .02em; color: var(--fp-menu-grupo); font-weight: 500;
  opacity: .8;
}

/* subitens: só recuo à esquerda (sem linhas/ramos) para marcar hierarquia */
.fp-itens {
  position: relative;
  margin: .1rem 0 .35rem;
  padding: 0;
}
.fp-itens .fp-item { margin: 0; }

.fp-item {
  position: relative;
  display: flex; align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: .48rem .65rem;
  border-radius: 0;
  /* DS §2: densidade 14 px no painel — itens do menu acompanham o corpo */
  font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--fp-menu-texto); text-decoration: none;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.fp-itens .fp-item {
  /* indentação = é submenu do grupo acima */
  padding-left: 1.75rem;
}
.fp-item:hover,
.fp-item:focus,
.fp-item:focus-visible,
.fp-item:active {
  background: var(--fp-menu-ativo-bg); color: var(--fp-menu-ativo-texto);
  text-decoration: none; /* Tabler/Bootstrap sublinham o <a>:hover */
}
.fp-item.ativo {
  background: var(--fp-menu-ativo-bg);
  color: var(--fp-menu-ativo-texto);
  font-weight: 600;
  text-decoration: none;
  /* barrinha verde-água à esquerda do item ativo */
  box-shadow: inset 5px 0 0 var(--fp-menu-ativo-marca);
}

/* flyout do recolhido: item encostado nas laterais, sem raio
   — vem DEPOIS de `.fp-item` para vencer no cascata (04/11/2026) */
@media (min-width: 992px) {
  html.fp-menu-recolhido .fp-itens .fp-item,
  html.fp-menu-recolhido .fp-itens .fp-item.futuro {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    padding: .48rem .85rem;
  }
}
/* 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 sinal é a
   etiqueta "a migrar"; o ponto ao lado do rótulo saiu em 04/11/2026. */
.fp-item.futuro {
  color: var(--fp-menu-grupo); cursor: default;
  justify-content: space-between; gap: .5rem;
}
.fp-item.futuro:hover { background: transparent; color: var(--fp-menu-grupo); }
.fp-etiqueta {
  font-family: var(--fp-mono); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--fp-menu-grupo); background: var(--fp-menu-borda);
  border-radius: 999px; padding: .1rem .4rem; white-space: nowrap;
}

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

/* Topbar fixo no topo do .fp-main; o scroll fica só no .fp-content. */
.fp-topbar {
  background: var(--fp-card);
  border-bottom: 1px solid var(--fp-border);
  height: var(--fp-topo-h);
  min-height: var(--fp-topo-h);
  box-sizing: border-box;
  padding: 0 .85rem 0 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  position: relative; z-index: 20;
  flex: 0 0 auto;
}
/* margem esquerda: a aba de recolher o menu invade ~33px da área branca */
@media (min-width: 992px) {
  .fp-topbar { padding-left: 2.75rem; } /* 44px ≈ 32px do botão + folga */
}
/* ícones da direita: gap 8px (escala 4/8/12/16… — DESIGN_SYSTEM §3.2).
   flex-shrink: 0 — a busca larga não pode espremer este grupo, senão o
   avatar sobe por cima do sino (overflow visível). */
.fp-topbar-acoes {
  gap: .5rem;
  flex: 0 0 auto;
  min-width: max-content;
}
.fp-topbar-acoes > * { flex-shrink: 0; }
/* um pouco mais de ar entre o sino e o perfil (foto + nome) */
.fp-topbar-acoes .fp-eu-menu { margin-left: .5rem; }
/* 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: var(--fp-border-forte); margin: 0 .4rem; }
.fp-caminho .tela { font-weight: 600; color: var(--fp-strong); }
/* A BUSCA À ESQUERDA (04/11/2026) — antes centrada; agora abre a topbar,
   com a margem do padding-left liberando a aba de recolher o menu. */
.fp-busca-topo {
  flex: 0 1 720px; min-width: 160px; max-width: 840px; margin: 0;
  position: relative; z-index: 25;
}
.fp-busca-topo .bg-busca { margin-bottom: 0 !important; max-width: none; }
.fp-topbar .fp-caminho {
  flex: 1 1 auto; min-width: 0; max-width: none;
}

.fp-topbar .quem {
  font-family: var(--fp-mono); font-size: 11px; color: var(--fp-muted);
}
/* perfil: botão com foto + nome; menu só no clique (04/11/2026) */
.fp-eu {
  display: inline-flex; align-items: center; gap: .45rem;
  max-width: 200px; height: 36px; padding: 0 .45rem 0 .15rem;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--fp-heading);
  line-height: 1.2; cursor: pointer;
}
.fp-eu:hover { background: var(--fp-ground); }
.fp-eu:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(95, 169, 172, .26);
}
.fp-eu .av {
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--fp-card), 0 0 0 3px var(--fp-border);
}
.av.fp-eu-inicial { background: var(--fp-marca-3); color: #FFFFFF; }
.fp-eu-nome {
  min-width: 0; flex: 1 1 auto;
  font-size: 13px; font-weight: 600; text-align: left;
  color: var(--fp-heading);
}
.fp-eu-seta {
  flex: 0 0 auto; color: var(--fp-muted);
  transition: transform .12s ease;
}
.fp-eu[aria-expanded="true"] .fp-eu-seta { transform: rotate(180deg); }

/* os ícones de exportar ao lado do Filtrar (Clientes, 07/10/2026): quadrados
   da altura do botão, com a cor do tipo de arquivo só no traço */
.cl-exportar {
  width: 38px; min-height: 38px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--fp-card); border: 1px solid var(--fp-border-forte);
}
/* ⚠️ `.btn.` na frente: o JS que marca `.btn-neutro` (botão sem cor) e a
   regra dele vêm depois no arquivo e cobriam a cor; e o Tabler encolhe o
   svg dentro de `.btn-icon` — o tamanho é fixado aqui. */
.btn.cl-exportar.cl-excel { color: var(--fp-ok); }
.btn.cl-exportar.cl-pdf { color: var(--fp-bad); }
.btn.cl-exportar:hover { background: var(--fp-ground); border-color: var(--fp-muted-claro); }
.btn.cl-exportar svg { width: 20px; height: 20px; min-width: 20px; margin: 0; }

/* conexão da Ponte Domínio — antes dos favoritos (04/11/2026).
   Elos unidos verdes = conectada; elos partidos vermelhos = desconectada. */
.fp-ponte {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; overflow: visible;
  border-radius: 10px; cursor: help; line-height: 0;
}
.fp-ponte:hover, .fp-ponte:focus-visible {
  background: var(--fp-ground);
  outline: none;
}
.fp-ponte-ico { width: 20px; height: 20px; display: none; }
.fp-ponte.ligada { color: var(--fp-ok); }
.fp-ponte.desligada { color: var(--fp-bad); }
.fp-ponte.ligada .fp-ponte-ligada { display: block; }
.fp-ponte.desligada .fp-ponte-desligada { display: block; }

/* Menu do perfil: só no clique (JS no base_gestor). */
.fp-eu-menu { position: relative; }
.fp-eu-opcoes {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px; z-index: 40;
  background: var(--fp-card); border: 1px solid var(--fp-border);
  border-radius: var(--fp-raio-controle);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
  padding: .35rem;
}
.fp-eu-opcoes[hidden] { display: none !important; }
.fp-eu-opcoes a, .fp-eu-opcoes .fp-eu-item {
  display: block; margin: 0; padding: .45rem .65rem; border-radius: 8px;
  font-size: 13px; color: var(--fp-heading); text-decoration: none;
  cursor: pointer;
}
.fp-eu-opcoes a:hover, .fp-eu-opcoes .fp-eu-item:hover {
  background: var(--fp-primary-subtle); color: var(--fp-primary);
}
.fp-abre-menu {
  border: 1px solid var(--fp-border); background: var(--fp-card);
  border-radius: var(--fp-raio-controle); padding: .3rem .5rem; line-height: 1;
  color: var(--fp-muted);
}

/* só o content rola (04/11/2026); topbar e rodapé ficam parados */
.fp-content {
  flex: 1 1 auto; min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* direita mais justa — a margem larga vinha do padding + container-xl */
  padding: 1rem .75rem 1rem 1rem;
}
/* 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; }
/* O CONTEÚDO ENCOSTA NA ESQUERDA (15/09/2026) e usa a largura toda
   (04/11/2026): margin-right:auto do Tabler deixava um vão enorme à direita. */
.fp-content > .container-xl,
.fp-content > .container-fluid {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
}
@media (max-width: 575.98px) { .fp-content { padding: .75rem; } }

.fp-rodape {
  flex: 0 0 auto;
  padding: .65rem .75rem 1rem 1rem;
  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: 1rem 1.125rem;
  min-height: 0;
}
.card-body { padding: 1rem 1.125rem 1.125rem; }
.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;
}
/* o rótulo de cima do título ("Prospecção", "Escritório"…), que o Tabler
   pinta em cinza genérico */
.page-pretitle {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fp-muted-claro);
}

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

/* O CABEÇALHO COM AÇÃO À DIREITA.                            (14/09/2026)
   "esse titulo nao fica no centro, coloque sempre para esquerda" (Fernando).

   Eu tinha posto `d-flex` no PRÓPRIO `.page-header` das duas telas novas, e o
   título saiu centralizado com o botão numa linha só dele. A tela de Cargos e
   acessos já resolvia isto certo desde agosto, com um flex ANINHADO — só que
   numa classe local, `.ac-cab`, que ninguém mais podia usar.

   Agora é uma classe do painel. Título à esquerda, ação à direita, e no
   celular a ação desce para baixo do título em vez de espremer os dois. */
.fp-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .75rem; flex-wrap: wrap;
}
.fp-cab > :first-child { text-align: left; }

/* O BOTÃO DO PROTÓTIPO (07/10/2026): 36 px de altura, raio 10, peso médio,
   sem sombra — o primário é o marinho da marca, e o hover escurece. */
.btn {
  border-radius: var(--fp-raio-controle);
  font-weight: 500; font-size: 13px;
  min-height: 36px; padding: .45rem .9rem;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { min-height: 30px; padding: .3rem .65rem; font-size: 12.5px; }
.btn-primary {
  background: var(--fp-primary); border-color: var(--fp-primary);
  color: #FFFFFF; font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--fp-primary-hover); border-color: var(--fp-primary-hover);
  color: #FFFFFF;
}
.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-foco) 30%, transparent) !important;
}
/* 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: var(--fp-heading);
}
.btn.btn-neutro:hover, .btn.btn-default:hover, .btn-white:hover {
  background: var(--fp-card); 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)
   — o "chip ligado" do protótipo: fundo marinho suave, sem borda */
.btn.active, .btn-group .btn.active {
  background: var(--fp-primary-subtle) !important;
  border-color: var(--fp-primary-subtle) !important;
  color: var(--fp-primary) !important;
  font-weight: 600;
}
.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); }

/* O CAMPO DO PROTÓTIPO: fundo cinza-claro da página, borda fina; no foco
   ele fica branco e ganha o halo verde-água — o foco é um detalhe, e é o
   lugar certo para a cor da logo aparecer. */
.form-control, .form-select, .input-group-text {
  border-radius: var(--fp-raio-controle);
  border-color: var(--fp-border);
  background-color: var(--fp-ground);
  padding: .5rem .8rem;
  font-size: 13px;
  color: var(--fp-strong);
}
.form-control::placeholder { color: var(--fp-muted-claro); }
/* o seletor guarda o espaço da setinha: o padding comum acima tirava, e em
   seletor estreito ("outubro") a seta caía em cima do texto */
.form-select { padding-right: 2.1rem; }
.form-select-sm { padding-right: 1.9rem; }
.input-group-text { color: var(--fp-muted); }
.form-control-sm, .form-select-sm { padding: .35rem .6rem; font-size: 12.5px; }
/* O FOCO É VERDE-ÁGUA, com halo (07/10/2026 — era o azul do FinPulse). */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--fp-foco) !important;
  background-color: var(--fp-card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-foco) 22%, transparent) !important;
}
.form-check-input:checked {
  background-color: var(--fp-primary); border-color: var(--fp-primary);
}
.form-label {
  font-size: 12.5px; font-weight: 600; color: var(--fp-muted); 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. */
/* A PÍLULA DO PROTÓTIPO (07/10/2026): texto, não código — sai a fonte mono
   — e as de ESTADO ganham o pontinho na cor dela à esquerda. O pontinho é
   só nas variantes "-lt" (as de estado); a pílula cheia é contagem
   (o "3" vermelho de pendências) e continua sem ele. */
.badge {
  border-radius: 999px;
  font-family: var(--fp-sans);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0;
  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;
  box-shadow: inset 0 0 0 1px var(--fp-border);
}
.badge.bg-green-lt, .badge.bg-yellow-lt, .badge.bg-red-lt,
.badge.bg-blue-lt, .badge.bg-azure-lt, .badge.bg-secondary-lt {
  display: inline-flex; align-items: center; gap: .4rem;
}
/* ⚠️ A PÍLULA CHEIA TINHA TEXTO CINZA (antigo, achado no print de 07/10).
   O Tabler pinta o texto de todo `.badge` com `--tblr-secondary` e espera
   um `text-*-fg` que as telas daqui nunca escreveram — "Sugestão" e
   "Elogio" saíam cinza-escuro sobre azul e verde fortes. A pílula cheia
   passa a usar a cor da paleta, com texto branco. */
.badge.bg-green, .badge.bg-success { background: var(--fp-ok) !important;   color: #FFFFFF !important; }
.badge.bg-red, .badge.bg-danger    { background: var(--fp-bad) !important;  color: #FFFFFF !important; }
.badge.bg-yellow, .badge.bg-warning, .badge.bg-orange {
  background: var(--fp-warn) !important; color: #FFFFFF !important;
}
.badge.bg-blue, .badge.bg-azure, .badge.bg-info {
  background: var(--fp-info) !important; color: #FFFFFF !important;
}
.badge.bg-primary { background: var(--fp-primary) !important; color: #FFFFFF !important; }
.badge.bg-secondary, .badge.bg-dark {
  background: var(--fp-muted) !important; color: #FFFFFF !important;
}
.badge.bg-green-lt::before, .badge.bg-yellow-lt::before, .badge.bg-red-lt::before,
.badge.bg-blue-lt::before, .badge.bg-azure-lt::before, .badge.bg-secondary-lt::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px;
}

.table { font-size: 13px; color: var(--fp-heading); }
/* A TABELA DO PROTÓTIPO (07/10/2026): cabeçalho em caixa alta pequena no
   cinza mais claro, sobre um fundo entre a página e o cartão; a linha sob
   o mouse ganha um véu do marinho suave. */
.table > thead > tr > th {
  background: color-mix(in srgb, var(--fp-ground) 60%, var(--fp-card));
  color: var(--fp-muted-claro);
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--fp-border);
  white-space: nowrap;
}
.table > tbody > tr > td { padding: .75rem 1rem; border-color: var(--fp-border); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
/* o número alinhado à direita (valor, quantidade) fica numa linha só: "R$ /
   784,00" em duas linhas era o espaço do `R$` quebrando a coluna estreita */
.table > tbody > tr > td.text-end, .table > thead > tr > th.text-end {
  white-space: nowrap;
}
.table > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--fp-primary-subtle) 45%, transparent);
}
.card > .table-responsive > .table, .card > .table { margin-bottom: 0; }
.card-table > :not(caption) > * > *:first-child { padding-left: 1.125rem; }
.card-table > :not(caption) > * > *:last-child { padding-right: 1.125rem; }

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

/* ═══════════════════════════════════════════════════════════════════════
   O AVISO EMPILHA, E NÃO FICA LADO A LADO                    (09/09/2026)
   ═══════════════════════════════════════════════════════════════════════
   O Tabler 1.4 define `.alert{display:flex;flex-direction:row}` — ele espera
   a estrutura nova (`.alert-icon` + conteúdo). Os avisos desta casa são
   escritos do jeito de sempre: um texto e, embaixo, um formulário ou uma
   lista.

   Com o flex-row, cada pedaço vira uma COLUNA. Na ficha do cliente, o aviso
   "Falta deste cadastro…" saía com o texto espremido numa coluna de uma
   letra de largura, ao lado do formulário — lendo de cima para baixo, uma
   letra por linha. A tela inteira ficava ocupada por isso.

   O remendo anterior (`.alert > * {min-width:0}`) não resolvia: o texto solto
   não é um elemento, é um item flex ANÔNIMO, e `min-width` não o alcança.

   `display:block` devolve o comportamento que todos os 25 avisos do projeto
   presumem. Nada se perde: ninguém usa `.alert-icon` como ícone lateral, o
   `.alert-title` é um `<h4>` que pertence em cima, e o `.btn-close` do
   `alert-dismissible` é `position:absolute` — continua no canto.

   Quem quiser lado a lado escreve `d-flex` na própria tag, como o
   `gestor_escritas.html` faz: `.d-flex` tem `!important` e ganha desta regra.
   ═══════════════════════════════════════════════════════════════════════ */
.alert {
  display: block;
  border-radius: var(--fp-raio-card);
  border: 1px solid transparent;
  padding: .8rem 1rem;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.alert > * { min-width: 0; }
/* os avisos na paleta de estado — borda e texto saem da própria cor, para
   nenhum verde, âmbar ou vermelho do Tailwind sobrar aqui (07/10/2026) */
.alert-success { background: var(--fp-ok-bg);   border-color: color-mix(in srgb, var(--fp-ok) 25%, transparent);
                 color: color-mix(in srgb, var(--fp-ok) 80%, #000); }
.alert-warning { background: var(--fp-warn-bg); border-color: color-mix(in srgb, var(--fp-warn) 25%, transparent);
                 color: color-mix(in srgb, var(--fp-warn) 75%, #000); }
.alert-danger  { background: var(--fp-bad-bg);  border-color: color-mix(in srgb, var(--fp-bad) 25%, transparent);
                 color: color-mix(in srgb, var(--fp-bad) 80%, #000); }
.alert-info    { background: var(--fp-info-bg); border-color: color-mix(in srgb, var(--fp-info) 22%, transparent);
                 color: var(--fp-marca); }

.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: var(--fp-card);
  }
  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 {
  html, body {
    height: auto !important; overflow: visible !important;
    display: block !important;
  }
  .fp-shell, .fp-main, .fp-content {
    height: auto !important; overflow: visible !important;
    min-height: 0 !important;
  }
  .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 .conta { margin-left: 0; }
/* mesma seta do fp-recolhe: fechado → baixo; aberto → cima */
.fp-secao-seta {
  display: inline-flex; flex: 0 0 auto;
  margin-left: auto;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: #fff; opacity: 1;
  transform: rotate(-90deg);
  transition: transform .15s ease, color .12s ease;
}
.fp-secao[open] > summary .fp-secao-seta {
  transform: rotate(90deg);
  color: #fff;
}

/* 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: var(--fp-primary-subtle); }

/* ── 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; }

/* ═══════════════════════════════════════════════════════════════════════
   TABELA NO TELEFONE: ROLAR É MELHOR QUE ESPREMER          (10/09/2026)
   ═══════════════════════════════════════════════════════════════════════
   `.table-responsive` só rola quando a tabela é MAIS LARGA que a caixa. Uma
   tabela de texto nunca fica: o navegador espreme cada coluna até o conteúdo
   quebrar letra a letra, e o wrapper, achando que coube, não rola. Foi o que
   deixou a lista de clientes com oito alturas por linha.

   `nowrap` devolve à tabela a largura que ela precisa — e aí o wrapper faz o
   que prometia. Rolar de lado dentro da caixa é ruim; ler "AGROPECUARIA" em
   três linhas de quatro letras é pior, e ainda faz a página inteira rolar.

   ⚠️ QUEM VIRA CARTÃO SAI DESTA REGRA. Numa LISTA (achar um cliente e tocar)
   rolar de lado faz perder a linha; essas telas remontam a linha em cartão e
   marcam a caixa com `.tabela-cartao` — ver `clientes_cadastro.html`. */
@media (max-width: 767.98px) {
  .table-responsive:not(.tabela-cartao) > table > * > tr > * { white-space: nowrap; }
  .table-responsive:not(.tabela-cartao) > table { font-size: .86rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   A TABELA QUE VIRA CARTÃO NO TELEFONE                       (10/09/2026)
   ═══════════════════════════════════════════════════════════════════════
   O padrão que saiu da lista de clientes, depois de uma tentativa errada.

   POR QUE NÃO TEM ARRANJO. A primeira versão virava a `<tr>` num contentor
   `flex` e reordenava as células por `order`. Saiu torto: o conteúdo foi
   para o meio da tela com um vão à esquerda, porque reordenar dentro de um
   `flex-wrap` depende de cada célula receber a largura certa — e numa tabela
   isso disputa com regras do Tabler. Aqui TUDO vira texto corrido, e a única
   coisa que decide o desenho é onde a linha quebra. Não há coluna para
   escorregar nem largura para negociar; e fica à esquerda porque é onde
   texto corrido começa.

   COMO SE USA. A caixa ganha `tabela-cartao` ao lado de `table-responsive`;
   a tela diz só DUAS coisas, que são as que mudam de lista para lista:

       .minha-lista td:nth-child(N)::after{ content:"\A"; white-space:pre; }
         → onde a linha quebra (normalmente depois do nome/assunto)
       .minha-lista td:nth-child(M)::before{ content:"·"; ... }
         → os pontinhos que separam o resto

   `!important` na estrutura de propósito: a pergunta "quem ganhou o
   `display`" já custou uma rodada, e a resposta não pode depender da ordem
   em que duas folhas foram carregadas. */
@media (max-width: 767.98px) {
  .tabela-cartao thead { display: none !important; }
  .tabela-cartao table, .tabela-cartao tbody {
    display: block !important; width: 100% !important;
  }
  .tabela-cartao tr {
    display: block !important; width: 100% !important;
    text-align: left !important;
    padding: .65rem .2rem !important;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  }
  .tabela-cartao td {
    display: inline !important; border: 0 !important; padding: 0 !important;
    text-align: left !important; white-space: normal !important;
  }
  /* a linha vazia ("nenhum resultado") não é cartão */
  .tabela-cartao td[colspan] {
    display: block !important; text-align: center !important;
  }
  /* o separador padrão, para quem quiser usar sem escrever de novo */
  .tabela-cartao .sep-ponto::before {
    content: "·"; opacity: .35; margin: 0 .3rem;
  }
}

/* A CONVERSA EMBUTIDA (04/10/2026): aberta ao lado da lista de Conversas, num
   quadro, sem menu nem barra. Ver `embutida` no base_gestor.html. */
.fp-embutida .fp-content { padding: 0; }

/* === Marca do menu: logo à esquerda + GESTORIZE (04/11/2026) ===
   Sem imagem de fundo/circuitos; layout em linha. Recolhido: só o símbolo. */
html:not(.fp-menu-recolhido) .fp-cabeca .fp-marca {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  padding: 0 .75rem;
  text-align: center;
}
html:not(.fp-menu-recolhido) .fp-marca img {
  height: 28px;
  display: block;
}
html:not(.fp-menu-recolhido) .fp-marca .nome {
  font-size: 20px; letter-spacing: .02em;
  line-height: 1;
}