/* =============================================================
   ui-console.css — camada final de design (2026-10-22)

   Direção: console de operações com disciplina tipográfica suíça.
   Não é "tema escuro bonito": é um painel que alguém encara enquanto
   números se mexem. Três decisões guiam tudo abaixo.

   1. COR É ESTADO, NUNCA ENFEITE. Verde = pronto/ao vivo. Âmbar = em
      espera. Vermelho = caiu. Botão comum não é verde — se tudo é
      verde, verde não quer dizer nada e o operador perde o sinal.
   2. FILETE NO LUGAR DE SOMBRA. Havia box-shadow em todo componente, o
      que achata a hierarquia em vez de criar. Profundidade aqui vem da
      rampa de superfície mais uma linha de 1px.
   3. DADO É MONOESPAÇADO E TABULAR. JetBrains Mono já estava carregada
      e não era usada em nenhum número. Dígito que não alinha em coluna
      obriga a reler a tela a cada atualização.

   Por que uma camada e não uma reescrita: o painel acumulou TRÊS blocos
   :root concorrentes (azul, verde-marca, verde-WhatsApp) mais duas
   folhas de tema. Nenhum ponto de vista sobreviveu inteiro — era esse o
   problema, não a falta de enfeite. Em vez de reescrever ~6800 linhas,
   aqui se reaponta os tokens que elas já consomem para um sistema só.
   ============================================================= */

:root {
  /* Superfícies — rampa única, do fundo ao elevado */
  --k-void: #070a0b;
  --k-surface: #0c1113;
  --k-surface-2: #11181b;
  --k-surface-3: #172023;

  /* Filetes */
  --k-line: #1b2427;
  --k-line-hi: #2a3539;

  /* Tinta — os três níveis passam em AA (4.5:1) sobre --k-surface.
     O terceiro carrega rótulo de 10px e dica de 11px; se escurecer
     mais, o texto menor da tela é o primeiro a reprovar. */
  --k-ink: #e8edef; /* 15.4:1 */
  --k-ink-2: #92a0a5; /* 7.0:1  */
  --k-ink-3: #7a878c; /* 4.8:1 — medido contra --k-surface-2, a mais clara */

  /* Semântica de estado — o único lugar onde cor aparece */
  --k-live: #1fe07a;
  --k-hold: #ffc53d;
  --k-down: #ff6b6b;

  --k-r: 3px;
  --k-r-lg: 4px;

  --k-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Ritmo — propositalmente desigual. Seção respira, dado é denso. */
  --k-gap-section: 2.25rem;
  --k-pad-card: 1rem 1.125rem;
  --k-pad-row: 0.5rem 0.875rem;
}

/* --- Tokens legados reapontados ------------------------------------
   Uma troca aqui atravessa o painel inteiro, inclusive as telas que
   este arquivo nunca cita pelo nome. */
:root {
  --bg-deep: var(--k-void);
  --bg-mid: var(--k-void);
  --brand-bg-deep: var(--k-void);
  --brand-bg-mid: var(--k-void);
  --panel: var(--k-surface);
  --brand-panel: var(--k-surface);
  --zm-surface: var(--k-surface);
  --zm-ink: var(--k-void);
  --pro-bg: var(--k-void);
  --pro-panel: var(--k-surface);

  --border: var(--k-line);
  --brand-border: var(--k-line);
  --line: var(--k-line);
  --pro-line: var(--k-line);

  --text: var(--k-ink);
  --text-hi: var(--k-ink);
  --pro-text: var(--k-ink);
  --muted: var(--k-ink-2);
  --text-mid: var(--k-ink-2);
  --pro-muted: var(--k-ink-2);
  --text-lo: var(--k-ink-3);

  --blue: var(--k-live);
  --blue-bright: var(--k-live);
  --brand-green: var(--k-live);
  --zm-green: var(--k-live);
  --pro-green: var(--k-live);
  --pro-green-2: var(--k-live);
  --ok: var(--k-live);
  --warn: var(--k-hold);
  --brand-yellow: var(--k-hold);
  --danger: var(--k-down);
  --brand-danger: var(--k-down);
  --err: var(--k-down);

  /* Brilhos viram nada: o glow era o que dava cara de template */
  --blue-glow: transparent;
  --brand-green-glow: transparent;
  --zm-green-glow: transparent;

  --radius: var(--k-r-lg);
  --radius-sm: var(--k-r);
  --font: var(--k-sans);
  --brand-font: var(--k-sans);
  --brand-font-display: var(--k-sans);
  --brand-font-mono: var(--k-mono);

  --sidebar-w: 232px;
}

/* --- Base -----------------------------------------------------------
   O !important daqui para baixo não é preguiça: zapman-pro.css tem 366
   declarações !important. Ordem de carga não vence isso — só força e
   especificidade iguais. Os seletores abaixo espelham os de lá. */

html,
body {
  background: var(--k-void) !important;
}

body {
  font-family: var(--k-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--k-ink);
  font-feature-settings: "kern", "liga", "tnum";
  -webkit-font-smoothing: antialiased;
}

/* --- Barra lateral -------------------------------------------------- */

.sidebar {
  background: var(--k-surface) !important;
  border-right: 1px solid var(--k-line) !important;
  box-shadow: none !important;
}

/* São 15 itens, ~1050px de menu. Como `position: relative`, a barra
   esticava até a altura da PÁGINA e rolava para fora da tela junto com o
   conteúdo: para trocar de aba era preciso voltar ao topo. Agora ela
   gruda na janela e rola por dentro de si mesma.
   Fora do empilhamento de 900px, onde a barra vira faixa horizontal. */
@media (min-width: 901px) {
  .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--k-line-hi) transparent;
  }

  .sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar::-webkit-scrollbar-thumb {
    background: var(--k-line-hi);
    border-radius: 999px;
  }

  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Recolher nunca estreitou de fato: a barra é item flex, então quem
     manda é o flex-basis, e o `width: 82px !important` herdado era
     ignorado. Recolhido mostrava os mesmos 232px com o rótulo escondido
     — gastava a largura sem mostrar nada. */
  .sidebar--collapsed {
    flex: 0 0 82px !important;
    width: 82px !important;
  }

  .sidebar--collapsed .sidebar-brand h1,
  .sidebar--collapsed .sidebar-label {
    text-align: center;
    font-size: 0.5625rem;
  }
}

.sidebar-top {
  padding: 1rem 1rem 1.25rem !important;
  border-bottom: 1px solid var(--k-line) !important;
}

.sidebar-brand h1 {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--k-ink) !important;
}

.sidebar-brand h1 span:last-child,
.sidebar-brand .sub {
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--k-ink-3) !important;
}

/* Caixa alta pequena e espaçada separa os grupos sem precisar de mais
   uma linha nem de mais um card. */
.sidebar-label {
  margin: 1.375rem 0 0.375rem !important;
  padding: 0 1rem !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--k-ink-3) !important;
}

.sidebar-nav {
  padding: 0 0.5rem !important;
  gap: 1px !important;
}

/* Os ícones eram emoji (🎯 💳 ⚡ 📚) misturados com glifos de outra
   família — vocabulário inconsistente e a marca mais óbvia de UI
   gerada. O menu vira só texto; quem marca o ativo é filete e peso. */
.nav-ic {
  display: none !important;
}

button.nav-side,
a.nav-side {
  position: relative;
  padding: 0.4375rem 0.75rem !important;
  border: 0 !important;
  border-radius: var(--k-r) !important;
  background: transparent !important;
  font-family: var(--k-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--k-ink-2) !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: color 120ms linear, background-color 120ms linear;
}

/* O indicador só existe no item ativo. A regra herdada posiciona por
   top/bottom; manter o mesmo modelo evita caixa sobre-restringida
   (top + bottom + height juntos resolvem para altura zero). */
button.nav-side::before,
a.nav-side::before {
  content: none;
}

button.nav-side:hover,
a.nav-side:hover {
  background: var(--k-surface-2) !important;
  color: var(--k-ink) !important;
}

button.nav-side.active,
a.nav-side.active,
button.nav-side[aria-current="page"],
a.nav-side[aria-current="page"] {
  background: transparent !important;
  color: var(--k-ink) !important;
  font-weight: 500 !important;
}

/* Menu recolhido (82px): o texto some por regra herdada e os ícones
   saíram no redesign — sem isto o botão fica VAZIO, sem nada clicável
   identificável. O código curto em mono é legível a 82px e não traz os
   emoji de volta; o title dá o nome inteiro no hover. */
.sidebar--collapsed button.nav-side::after,
.sidebar--collapsed a.nav-side::after {
  content: attr(data-short);
  font-family: var(--k-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: inherit;
}

button.nav-side.active::before,
a.nav-side.active::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 0 !important;
  background: var(--k-live) !important;
  box-shadow: none !important;
}

/* --- Cabeçalho de página --------------------------------------------
   Contraste de escala: o título carrega a hierarquia sozinho, sem
   precisar de caixa, fundo ou ícone em volta. */

.ops-page {
  padding: 1.5rem 1.75rem 3rem;
}

.ops-hero {
  margin-bottom: 1.5rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--k-line);
}

.ops-hero-title,
.ops-page > header h2,
.view > div > header h2 {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--k-ink) !important;
}

.ops-hero-sub,
.sub {
  font-size: 0.75rem !important;
  line-height: 1.45 !important;
  color: var(--k-ink-3) !important;
  max-width: 68ch;
}

.ops-live {
  font-family: var(--k-mono) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em !important;
  color: var(--k-ink-2) !important;
}

.ops-live-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: var(--k-live) !important;
  box-shadow: none !important;
}

.ops-refresh-meta {
  font-family: var(--k-mono) !important;
  font-size: 0.6875rem !important;
  font-variant-numeric: tabular-nums;
  color: var(--k-ink-3) !important;
}

/* --- KPIs -----------------------------------------------------------
   Eram cartões flutuantes, cada um com um glifo (◎ ⏵ ☎ ✓ $ ! ≡ ✉ ◉ ◆)
   que não mapeava para significado nenhum. Os glifos saíram. Resta o
   que importa: rótulo pequeno, número grande, coluna alinhada. */

.ops-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1px !important;
  margin-bottom: var(--k-gap-section);
  background: var(--k-line);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  overflow: hidden;
}

.ops-card {
  display: block !important;
  padding: var(--k-pad-card) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--k-surface) !important;
  box-shadow: none !important;
  transition: background-color 120ms linear;
}

.ops-card:hover {
  background: var(--k-surface-2) !important;
}

.ops-card-ic {
  display: none !important;
}

.ops-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ops-card-label,
.ful-kpi-label {
  order: 1;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--k-ink-3) !important;
}

.ops-card-value,
.ful-kpi-value {
  order: 2;
  font-family: var(--k-mono) !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: var(--k-ink) !important;
}

.ops-card-hint {
  order: 3;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
  color: var(--k-ink-3) !important;
}

/* Tom do KPI vira régua de 2px no topo — some o cartão colorido inteiro. */
.ops-card[data-tone="green"],
.ops-card--green {
  box-shadow: inset 0 2px 0 var(--k-live) !important;
}
.ops-card[data-tone="warn"],
.ops-card--warn {
  box-shadow: inset 0 2px 0 var(--k-hold) !important;
}
.ops-card[data-tone="danger"],
.ops-card--danger {
  box-shadow: inset 0 2px 0 var(--k-down) !important;
}

/* --- Painéis e widgets ---------------------------------------------- */

.ops-panel,
.widget,
.card,
.copy-card {
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-lg) !important;
  background: var(--k-surface) !important;
  box-shadow: none !important;
}

.ops-panel,
.widget {
  margin-bottom: var(--k-gap-section);
}

.ops-panel-head,
.widget-head,
.copy-card-head {
  padding: 0.75rem 1.125rem !important;
  border-bottom: 1px solid var(--k-line) !important;
  background: transparent !important;
}

.ops-panel-head h2,
.widget-head h2,
.widget-head h3 {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--k-ink-2) !important;
}

/* --- Tabelas --------------------------------------------------------
   Linha densa de propósito: a tela de operação existe pra caber muita
   linha, não pra cada linha ficar confortável. */

.ops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem !important;
}

.ops-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0.875rem !important;
  background: var(--k-surface-2) !important;
  border-bottom: 1px solid var(--k-line) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--k-ink-3) !important;
  text-align: left;
  white-space: nowrap;
}

.ops-table tbody td {
  padding: var(--k-pad-row) !important;
  border-bottom: 1px solid var(--k-line) !important;
  color: var(--k-ink-2) !important;
}

.ops-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.ops-table tbody tr:hover td {
  background: var(--k-surface-2) !important;
  color: var(--k-ink) !important;
}

/* Telefone, id, contador e horário em mono tabular: a coluna alinha e o
   olho acha a diferença sem reler a linha inteira. */
.ops-table td:not(:first-child),
.ops-q-n,
.ops-log-line,
.mono,
code,
kbd {
  font-family: var(--k-mono) !important;
  font-variant-numeric: tabular-nums;
}

.ops-q-n {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: var(--k-ink) !important;
}

.ops-q-l {
  font-size: 0.625rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--k-ink-3) !important;
}

.ops-log-line {
  font-size: 0.6875rem !important;
  line-height: 1.6 !important;
  color: var(--k-ink-2) !important;
}

/* --- Campos ---------------------------------------------------------- */

/* Só campo de texto. Um `input` aberto alcançava os 63 checkboxes, os
   radios, o range e os file inputs da tela — controles que não têm
   caixa de texto e quebram se receberem padding e fundo. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea,
.ops-input,
.fu-input {
  padding: 0.375rem 0.625rem !important;
  border: 1px solid var(--k-line-hi) !important;
  border-radius: var(--k-r) !important;
  background: var(--k-void) !important;
  font-family: var(--k-sans) !important;
  font-size: 0.8125rem !important;
  color: var(--k-ink) !important;
  box-shadow: none !important;
}

input[type="tel"],
input[type="number"],
input[type="time"],
input[type="date"] {
  font-family: var(--k-mono) !important;
  font-variant-numeric: tabular-nums;
}

input::placeholder,
textarea::placeholder {
  color: var(--k-ink-3) !important;
}

.fu-label,
label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-ink-3);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--k-ink-3) !important;
}

/* Foco visível e desenhado — teclado é cidadão de primeira aqui. */
:focus-visible {
  outline: 2px solid var(--k-live) !important;
  outline-offset: 1px;
}

/* --- Botões ----------------------------------------------------------
   Neutros por padrão. Só a ação primária da tela ganha verde, e verde
   aqui significa "isto dispara", não "isto é importante". */

/* Só os botões que este sistema de fato desenha. Um `button:not(...)`
   aberto alcançava 207 dos 239 botões da tela e engolia componentes com
   desenho próprio — o chip ativo de Etiquetas ficava pixel a pixel
   idêntico ao inativo, ou seja, não dava pra ver qual filtro estava on. */
.btn,
.fb-btn,
.ful-btn,
.fu-btn,
button:not([class]) {
  padding: 0.375rem 0.75rem !important;
  border: 1px solid var(--k-line-hi) !important;
  border-radius: var(--k-r) !important;
  background: var(--k-surface-2) !important;
  font-family: var(--k-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--k-ink) !important;
  box-shadow: none !important;
  transition: background-color 120ms linear, border-color 120ms linear;
}

.btn:hover,
.fb-btn:hover,
.ful-btn:hover,
.fu-btn:hover,
button:not([class]):hover {
  background: var(--k-surface-3) !important;
  border-color: var(--k-ink-3) !important;
}

.btn.ghost,
button.ghost {
  background: transparent !important;
  border-color: var(--k-line) !important;
  color: var(--k-ink-2) !important;
}

.btn.ghost:hover,
button.ghost:hover {
  background: var(--k-surface-2) !important;
  color: var(--k-ink) !important;
}

button.primary,
.btn-primary,
.btn.primary,
[data-primary],
.ful-btn-primary,
.fu-btn-primary {
  border: 1px solid var(--k-live) !important;
  border-radius: var(--k-r) !important;
  background: var(--k-live) !important;
  color: #04120a !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

button.primary:hover,
.btn-primary:hover,
.btn.primary:hover,
[data-primary]:hover,
.ful-btn-primary:hover,
.fu-btn-primary:hover {
  background: #17c86c !important;
  border-color: #17c86c !important;
}

.btn.danger,
button.danger {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--k-down) 45%, transparent) !important;
  color: var(--k-down) !important;
}

.btn.sm,
button.sm {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.6875rem !important;
}

.btn:disabled,
button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
}

.btn-icon,
.fu-btn-icon,
.ful-btn-icon {
  padding: 0.375rem !important;
  border: 1px solid var(--k-line-hi) !important;
  border-radius: var(--k-r) !important;
  background: transparent !important;
  color: var(--k-ink-2) !important;
  box-shadow: none !important;
}

/* Chip de filtro: o estado ativo é o que diz qual recorte está na tela,
   então precisa ser legível de relance — borda e preenchimento, não só
   mudança de tom. Pílula aqui é significado, não enfeite. */
.ful-chip,
.fu-chip {
  padding: 0.25rem 0.625rem !important;
  min-height: 0 !important;
  border: 1px solid var(--k-line-hi) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--k-ink-2) !important;
  font-size: 0.75rem !important;
}

.ful-chip:hover,
.fu-chip:hover {
  filter: none !important;
  background: var(--k-surface-2) !important;
  color: var(--k-ink) !important;
}

.ful-chip.is-active,
.fu-chip.is-active {
  border-color: var(--k-live) !important;
  background: color-mix(in srgb, var(--k-live) 14%, transparent) !important;
  color: var(--k-ink) !important;
}

/* --- Resquícios de tema claro ----------------------------------------
   flow-builder.css e o bloco fu-* trazem cinzas cravados na mão (#6b7280,
   #1f2937, #4b5563, #d8dde5) de quando essas telas eram claras. Sobre
   painel escuro o estado vazio do Construtor ficava em 1,29:1 — texto
   invisível na prática, não só feio. Vêm para a rampa de tinta. */

.fb-flow-card span,
.fb-flow-meta,
.fb-toolbox-title,
.fb-field label,
.fb-rand-row .fb-field label,
.fb-field-hint,
.fb-message-variants-head span,
.fb-message-variants-empty,
.fb-edit-panel.empty,
.fu-sep {
  color: var(--k-ink-3) !important;
}

.fb-empty-flow {
  color: var(--k-ink-2) !important;
}

.fb-empty-icon {
  background: var(--k-surface-3) !important;
  color: var(--k-ink-2) !important;
  font-weight: 500 !important;
}

/* Cores de categoria do Construtor: azul em 3.97:1 e roxo em 4.07:1,
   ambos abaixo de AA. O matiz codifica o tipo do bloco, então aqui se
   clareia mantendo a cor — neutralizar apagaria a informação. */
body[data-active-view="flow-builder"] .fb-tool[data-type="condicao"] span:first-child,
body[data-active-view="flow-builder"] .fb-type-condicao .fb-block-ic {
  color: #6d84f7 !important; /* 5.2:1 */
}

body[data-active-view="flow-builder"] .fb-tool[data-type="aguardar_resposta"] span:first-child,
body[data-active-view="flow-builder"] .fb-type-aguardar_resposta .fb-block-ic {
  color: #9a74f7 !important; /* 5.1:1 */
}

/* --- Movimento ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Correções de 2026-10-25
   ============================================================ */

/* --- Barra lateral recolhida: rótulo de grupo não cabe em 82px ---
   O rótulo ("Resumo", "Operação", "Avançado") continuava a ser desenhado
   por inteiro, com letter-spacing, numa coluna de 82px — saía cortado a
   meio da palavra ("RESUM", "OPERAÇ", "AVANÇA"). Recolhido, o grupo passa
   a ser marcado por um traço; o texto some da vista mas continua na árvore
   de acessibilidade, para quem usa leitor de ecrã. */
/* O `.sidebar-label` base declara font-size com !important, que ganha de
   especificidade — daí o !important aqui também. */
.sidebar--collapsed .sidebar-label {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  height: 0;
  padding: 0 !important;
  margin: 0.7rem 0.55rem 0.45rem;
  overflow: hidden;
  border-top: 1px solid var(--k-line, rgba(148, 163, 184, 0.18));
}

/* O primeiro grupo não precisa de traço: já há a borda do cabeçalho. */
.sidebar--collapsed .sidebar-label:first-of-type {
  border-top: 0;
  margin-top: 0.2rem;
}

/* --- Barra lateral recolhida: a marca transbordava ---
   `.sidebar-brand` media 113px numa coluna de 71px úteis: o nome e o
   subtítulo continuavam a ocupar largura e eram cortados ("ZapM…"),
   empurrando a barra para fora. Recolhido fica só o logótipo. */
.sidebar--collapsed .sidebar-brand {
  /* `relative` não é decoração: sem ele os filhos absolutos abaixo escapam
     deste `overflow` e continuam a esticar a barra. */
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Escondido da vista, não da árvore de acessibilidade: continua a ser o
   título da aplicação para quem usa leitor de ecrã. */
.sidebar--collapsed .sidebar-brand h1,
.sidebar--collapsed .sidebar-brand .sub {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap !important;
}

/* --- Construtor de fluxos: cabeçalho ---
   Era um grid de 5 colunas rígidas (minmax fixos) com os botões esticados a
   100%: "Salvar" ficava do tamanho de "Visualização" e a linha parecia
   desarrumada. Em flex cada botão ocupa o que o seu rótulo pede, e o aviso
   de gravação encolhe primeiro em vez de empurrar as acções. */
.fb-top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.fb-top-actions > .fb-btn,
.fb-top-actions > .fb-menu {
  width: auto;
  flex: 0 0 auto;
}

/* Alvo de toque mínimo (24px desktop / 44px toque) — regra da Vercel. */
.fb-top-actions > .fb-btn,
.fb-top-actions > .fb-menu > summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

@media (pointer: coarse) {
  .fb-top-actions > .fb-btn,
  .fb-top-actions > .fb-menu > summary {
    min-height: 44px;
  }
}

/* O aviso ocupa a folga à esquerda e é o primeiro a encolher. */
.fb-autosave {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Foco visível nas acções do cabeçalho (não havia). */
.fb-top-actions > .fb-btn:focus-visible,
.fb-top-actions > .fb-menu > summary:focus-visible {
  outline: 2px solid var(--k-accent, #25d366);
  outline-offset: 2px;
}