/* =========================================================================
   TOKENS DE DESIGN — fonte única de verdade (ver referencias/DESIGN-SYSTEM.md).
   NENHUMA tela deve usar cor/tamanho "cru" (#hex, px soltos). Sempre var(--token).
   Isto é o que faz o dark mode funcionar no sistema inteiro e mantém tudo leve.
   ========================================================================= */
:root {
  /* Marca (fixa nos dois temas) */
  --tinta: #141414;        /* escuro da marca (topo/login/sidebar) */
  /* Texto SOBRE --tinta. Existe porque as telas de autenticação (login, cadeado,
     trocar senha) põem texto FORA do card branco, direto no fundo escuro da marca —
     e --tinta é fixo, não acompanha o tema. Usar --suave ali dava contraste 2,45:1
     (falha WCAG AA); estes dão 9,14:1 e 15,8:1. Não trocar por token temático. */
  --sobre-tinta: #b9b7ab;       /* texto secundário sobre o escuro da marca */
  --sobre-tinta-forte: #ffffff; /* hover/foco do mesmo texto */
  --sobre-tinta-hover-bg: rgba(255, 255, 255, .08);  /* realce do hover ali */
  --polvo: #f2b705;        /* dourado da marca (destaque / primário) */
  --polvo-escuro: #b37f00; /* dourado legível sobre claro (links, acentos) */
  --coral: #d92d20;        /* ação destrutiva */
  --verde: #2e9e2b;        /* sucesso / ação secundária */

  /* Superfícies e texto — neutros QUENTES (escolhidos p/ casar com o dourado) */
  --fundo: #f8f8f5;        /* fundo da página (g50) */
  --card: #ffffff;         /* superfície de card/painel/tabela */
  --branco-fixo: #fff;     /* texto/ícone branco SOBRE cor de marca ou dado do usuário (avatar, badge, chip colorido) — fixo nos 2 temas de propósito */
  --card-2: #f2f1ec;       /* hover / faixa alternada (g100) */
  --borda: #e9e8e1;        /* borda padrão (g200) */
  --borda-forte: #d7d5ca;  /* borda em hover/ênfase (g300) */
  --texto: #1a1a14;        /* texto primário (g900) */
  --suave: #565549;        /* texto secundário / rótulos (g600) */
  --texto-3: #78766b;      /* texto terciário / hints (g500) */
  --ativo-bg: #fdf7e6;     /* fundo do item de menu ativo (tinta dourada) */

  /* Status (fundo / texto / borda) — suaves, estilo Untitled UI */
  --ok-bg: #e9f6ec;   --ok-tx: #137a3a;   --ok-bd: #a7e0b8;
  --warn-bg: #fdf3e3; --warn-tx: #a5610a; --warn-bd: #f3d29a;
  --err-bg: #fdecea;  --err-tx: #b3392c;  --err-bd: #f4c2bc;
  --info-bg: #eef2f8; --info-tx: #3a5478; --info-bd: #cdd8e8;

  /* ── CANAIS DE CONVERSA (Inbox omnichannel) ────────────────────────────────
     Uma família por canal, porque no Inbox unificado "de onde veio" é a primeira
     coisa que a atendente precisa ler numa linha de lista — e reaproveitar as
     famílias de status daria a leitura errada: verde/vermelho ali são SEMÁFORO
     (ok/erro), e canal não é juízo sobre a conversa.
     Escolhidas nas cores que cada plataforma já usa (verde WhatsApp, rosa
     Instagram, azul Telegram) mais um neutro para o e-mail. Tons dessaturados de
     propósito: são pastilhas de 22 px repetidas dezenas de vezes na tela, não
     destaques. Contraste conferido nos dois temas. */
  --canal-wa-bg: #e9f6ec;  --canal-wa-tx: #14713a;  --canal-wa-bd: #b6e2c4;
  --canal-em-bg: #eef0f2;  --canal-em-tx: #4d5762;  --canal-em-bd: #d5dce2;
  --canal-ig-bg: #fdecf3;  --canal-ig-tx: #a5265c;  --canal-ig-bd: #f3c4d8;
  --canal-tg-bg: #eaf3fb;  --canal-tg-tx: #1f5f8f;  --canal-tg-bd: #c3dcf1;

  /* Escala de tipografia (Untitled UI) — base 14px (leveza). px, não rem. */
  --fs-display-sm: 30px;  /* 30/38 */
  --fs-display-xs: 24px;  /* 24/32 — títulos de página (h1) */
  --fs-xl: 20px;   /* 20/30 — h2 de seção */
  --fs-lg: 18px;   /* 18/28 */
  --fs-md: 16px;   /* 16/24 */
  --fs-sm: 14px;   /* 14/20 — CORPO (workhorse). PISO de todo texto de LEITURA. */
  --fs-xs: 13px;   /* 13/18 — rótulos, hints, badges, células de apoio */
  /* PISO ABSOLUTO do sistema: só selo/atalho/contador decorativo — NUNCA texto
     que alguém precise de fato ler. Existe pra que nada volte a nascer em .6rem. */
  --fs-2xs: 11px;
  /* ── FONTE PEQUENA DEMAIS — a regra, pra não repetir o erro (06/08/2026) ────
     Reclamação recorrente do dono: "estou tendo que aproximar demais da tela pra
     ler". A causa nunca foi o token: era CSS escrito com valor CRU em `rem`, e
     `rem` é relativo ao <html> (16px), não ao corpo de 14px do app — então
     `.6rem` virava 9,6px e `.74rem` virava 11,8px, abaixo de qualquer piso de
     leitura confortável. Estavam assim o selo "novo" do menu, o rótulo de grupo,
     o nome no "Sair", o badge de não-lidas, os atalhos do Ctrl+K e a hora das
     notificações — ou seja, o sistema inteiro, um pedacinho por vez.
     REGRA: `font-size` usa SEMPRE var(--fs-*). Nada de `rem`/`px` cru.
       texto de leitura (corpo, rótulo de campo, item de menu) → --fs-sm  (14px)
       apoio (hint, badge, célula secundária, migalha)         → --fs-xs  (13px)
       selo/atalho decorativo                                  → --fs-2xs (11px)
     Abaixo de --fs-2xs não existe caso legítimo neste sistema. */

  /* Espaçamento (base 4px), cantos e sombras (sutis) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --raio-sm: 6px; --raio-md: 8px; --raio-lg: 10px; --raio-xl: 12px;
  --sombra-xs: 0 1px 2px rgba(16,24,40,.05);
  --sombra-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --sombra-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
  --sombra-lg: 0 12px 20px -4px rgba(16,24,40,.10), 0 4px 8px -4px rgba(16,24,40,.05);
  --anel: color-mix(in srgb, var(--polvo) 45%, transparent);   /* foco */
}

/* --------- TEMA ESCURO: só troca os valores dos tokens semânticos --------- */
:root[data-theme="dark"] {
  --polvo-escuro: #f2b705;   /* dourado legível sobre fundo escuro */
  --fundo: #0f0f0c;
  --card: #17170f;
  --card-2: #201f16;
  --borda: #2a2920;
  --borda-forte: #3a382b;
  --texto: #ececdf;
  --suave: #a6a498;
  --texto-3: #85847a;
  --ativo-bg: #2a2410;

  --ok-bg: #122a19;   --ok-tx: #5cd18a;   --ok-bd: #1f5233;
  --warn-bg: #2a2210; --warn-tx: #f0bf6a; --warn-bd: #544216;
  --err-bg: #2c1512;  --err-tx: #f2a79c;  --err-bd: #552420;
  --info-bg: #161f2c; --info-tx: #8fb0d8; --info-bd: #2c3c52;

  /* Canais do Inbox no escuro: fundo profundo, texto claro (mesmo método das
     famílias de status acima — só os valores mudam, o nome do token não). */
  --canal-wa-bg: #10281a; --canal-wa-tx: #6ed49a; --canal-wa-bd: #1e5233;
  --canal-em-bg: #1c2126; --canal-em-tx: #b7c2cc; --canal-em-bd: #384249;
  --canal-ig-bg: #2c1420; --canal-ig-tx: #f0a0c2; --canal-ig-bd: #5c2740;
  --canal-tg-bg: #101f2c; --canal-tg-tx: #7fb8e8; --canal-tg-bd: #21455f;

  --sombra-xs: 0 1px 2px rgba(0,0,0,.4);
  --sombra-sm: 0 1px 3px rgba(0,0,0,.5);
  --sombra-md: 0 4px 8px rgba(0,0,0,.5);
  --sombra-lg: 0 12px 24px rgba(0,0,0,.6);
}
:root[data-theme="dark"] body { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fundo); color: var(--texto); line-height: 1.45;
  font-size: var(--fs-sm);   /* 14px base — leveza (Untitled UI application UI) */
}
a { color: var(--polvo-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }
.logo-mark { width: 26px; height: 26px; display: block; }
.logo-mark-grande { width: 46px; height: 46px; display: block; margin: 0 auto 6px; }
/* Lockup vertical (símbolo + "Octobase" empilhado, `lockup-vertical.svg`) — pras
   telas isoladas de fundo claro que hoje só mostravam o símbolo solto sem marca
   nenhuma (descadastro, link expirado, trocar senha, meu score). Altura maior
   que o `logo-mark-grande` (que é só o símbolo) porque agora carrega texto.
   72px na marca v2: o lockup novo empilha símbolo + palavra numa proporção mais
   alta, e a 64px a palavra ficava pequena demais pra ler de relance. */
.logo-vertical { height: 72px; width: auto; display: block; margin: 0 auto 10px; }

/* ---- Sidebar (VibeUX: sidebar para 4+ itens; Untitled UI: fundo claro, borda sutil) ---- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 100;
  background: var(--card); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
}
/* Bloco da marca escuro: eco do login e da identidade Uni.Destrava, flat.
   Fundo sempre escuro (var(--tinta)), então a logo usa a variante clara (texto claro). */
.sidebar-marca {
  background: var(--tinta); display: flex; align-items: center; padding: 15px 18px;
  flex: 0 0 auto;
}
/* Logo horizontal cheia (sidebar expandida) e símbolo isolado (trilho recolhido)
   dividem o mesmo bloco; qual aparece é decidido por html.sb-mini abaixo. */
/* 28px → 22px na marca v2 (04/08/2026): o lockup novo é mais largo (4,94:1 contra
   3,91:1); 22px devolve os mesmos ~109px de largura que o antigo tinha a 28px. */
.sidebar-marca .logo-horizontal { height: 22px; width: auto; display: block; }
.sidebar-marca .marca-simbolo { display: none; }
/* Botão recolher/expandir: faixa fina de cima a baixo colada na borda direita
   da sidebar — mesmo padrão visual da faixa que já existe no Inbox (.ix-alca em
   conversa.html), reaproveitado aqui em vez de inventar um controle novo.
   position:absolute ancorado no .sidebar (que é position:fixed) acompanha a
   largura da sidebar sozinho quando ela anima pro modo trilho — sem JS extra. */
.sb-alternar {
  position: absolute; top: 0; bottom: 0; right: -14px; width: 14px; z-index: 1;
  padding: 0; border: 0; border-left: 1px solid var(--borda);
  background: var(--card); color: var(--suave); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sb-alternar:hover { background: var(--card-2); color: var(--texto); }
.sb-alternar:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--anel); }
.sb-alternar svg { width: 12px; height: 12px; transition: transform .15s; }
/* seta inverte: aponta pra fora (esquerda) quando o menu está aberto (clicar recolhe);
   pra dentro (direita) quando já está recolhido (clicar expande) */
html.sb-mini .sb-alternar svg { transform: rotate(180deg); }
.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px; }
.sidebar-rodape { flex: 0 0 auto; border-top: 1px solid var(--borda); padding: 6px 10px 12px; }
/* Rótulo de grupo: pequeno, maiúsculo, discreto (600 — nada de negrito pesado) */
.menu-grupo {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .7px;
  color: #98a2b3; font-weight: 600; margin: 16px 10px 4px;
}
.sidebar-rodape .menu-grupo { margin-top: 8px; }
.menu-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 13px; margin: 1px 0; border-radius: 8px;
  color: var(--texto); font-size: .9rem; font-weight: 500; line-height: 1.3;
}
.menu-item:hover { background: var(--card-2); text-decoration: none; }
.menu-item .mi-ico { flex: 0 0 18px; color: var(--suave); }
.menu-item:hover .mi-ico { color: var(--texto); }
.mi-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Item ativo sempre destacado (VibeUX): fundo dourado-claro + barra à esquerda */
.menu-item.ativo { background: var(--ativo-bg); color: var(--tinta); font-weight: 600; }
.menu-item.ativo .mi-ico { color: var(--polvo-escuro); }
.menu-item.ativo::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 3px; background: var(--polvo);
}
.menu-item.sair, .menu-item.sair .mi-ico { color: var(--coral); }
.menu-item.sair:hover { background: #fde8e6; }
.sair-nome {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 500; color: var(--suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px;
}
/* Badge de pendência no menu (nº de conversas não lidas) */
.badge-menu {
  background: var(--polvo); color: #141414; font-size: var(--fs-2xs); font-weight: 700;
  padding: 1px 7px; border-radius: 20px; vertical-align: 2px;
}
.menu-item .badge-menu { margin-left: auto; vertical-align: 0; }
/* Selo "novo" no menu: tela recém-lançada (some sozinho após DIAS_MOSTRAR_NOVO). */
.mi-novo { margin-left: auto; background: var(--verde); color: #fff; font-size: var(--fs-2xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px;
  border-radius: 20px; }
html.sb-mini .menu-item .mi-novo { display: none; }

/* Conteúdo ao lado da sidebar; min-width:0 deixa filhos largos (kanban) rolarem por dentro.
   position:relative ancora o selo de módulo no canto superior direito. */
.conteudo { min-height: 100vh; position: relative; }
/* Margem de página (MD3: 24-40dp). TODA tela ganha respiro nas laterais/topo —
   antes só quem usava .container tinha padding, então as telas novas (aquisição,
   públicos, páginas, recuperação, destinos) ficavam coladas na sidebar/topo. */
.conteudo.com-sidebar { margin-left: 232px; min-width: 0; padding: 36px 40px 56px; }
/* Telas de app em tela cheia (Inbox) não levam a margem de página. */
.conteudo.full-bleed { padding: 0; }

/* Topo mobile + véu do overlay (só aparecem abaixo de 900px) */
.topo-mobile { display: none; }
.veu { display: none; }
@media (max-width: 900px) {
  .topo-mobile {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 90;
    background: var(--tinta); color: #fff; padding: 10px 14px;
  }
  /* Barra mobile tem fundo escuro fixo (var(--tinta)) — logo horizontal clara, pequena */
  .topo-mobile .marca-mini { display: flex; align-items: center; }
  .topo-mobile .marca-mini .logo-horizontal { height: 18px; width: auto; display: block; }
  .btn-menu { background: none; border: 0; color: #fff; padding: 4px; cursor: pointer; display: flex; }
  .conteudo.com-sidebar { margin-left: 0; padding: 20px 16px 40px; }   /* MD3 compact: 16dp lateral */
  .conteudo.full-bleed { padding: 0; }
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; }
  body.menu-aberto .sidebar { transform: none; box-shadow: 0 0 44px rgba(0,0,0,.3); }
  body.menu-aberto .veu { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(20,20,20,.45); }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTES (Fase 5) — as classes que os macros de _componentes.html usam.
   Global e semântico: toda tela nova herda daqui (nunca CSS por tela).
   ═══════════════════════════════════════════════════════════════════════ */
.ui-cabecalho { margin-bottom: var(--sp-5); }
.ui-cabecalho h1 { margin: 0; }
.ui-cabecalho .sub { margin: var(--sp-1) 0 0; }

/* ── Migalha de pão (macro ui.migalha) — Onda 0, pacote 0.7 ────────────────
   O achado §7.4 da crítica adversarial: nenhuma das 15 telas da família Central
   tinha caminho de volta escrito. Quem clicava num card da biblioteca caía num
   painel sem saber de onde veio — só o botão "voltar" do navegador salvava.
   É `<nav><ol>` de verdade (semântica de trilha), com o separador vindo do CSS
   para não poluir o leitor de tela com "barra barra barra".
   Traz o PRÓPRIO respiro de baixo (regra 04/08/2026 do DESIGN-SYSTEM). */
.ui-migalha { margin: 0 0 var(--sp-4); font-size: var(--fs-xs); line-height: 1.4; }
.ui-migalha ol { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.ui-migalha li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ui-migalha li + li::before { content: "/"; color: var(--texto-3); }
.ui-migalha a { color: var(--suave); text-decoration: none; }
.ui-migalha a:hover { color: var(--texto); text-decoration: underline; }
.ui-migalha [aria-current="page"] { color: var(--texto); font-weight: 500; }

/* ── Cabeçalho da CENTRAL + barra de lentes (macro ui.central) ─────────────
   As cinco portas de entrada (`/`, `/cockpit`, `/mapa`, `/funcionalidades`,
   `/relatorios`) passam a ter o MESMO cabeçalho, para serem lidas como um
   produto com cinco recortes (plano da Central Painel §1.5, Movimento 1).
   São LINKS estilizados como abas — nunca botões (ver comentário do macro). */
.ui-central-topo { margin-bottom: var(--sp-6); }
.ui-central-head { display: flex; justify-content: space-between; gap: var(--sp-6);
  align-items: flex-end; margin-bottom: var(--sp-4); }
.ui-central-head h1 { margin: 0; }
.ui-central-head .sub { margin: var(--sp-1) 0 0; }
.ui-central-acao { flex: 0 0 auto; display: flex; gap: var(--sp-2); align-items: center; }
/* Eyebrow: o rótulo da família acima do h1. Discreto de propósito — informa a que
   conjunto a tela pertence sem competir com o título. */
.ui-eyebrow { color: var(--polvo-escuro); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .1em; font-weight: 600; margin-bottom: var(--sp-1); }

/* A barra de 5 lentes foi EXTINTA no pacote 7.3 (05/08/2026, decisão PA-1 —
   ver o bloco no fim de app/modulos/comum.py). As regras .ui-lentes / .ui-lente /
   .ui-lente.ativa / .ui-lente-off / .ui-lente-selo saíram daqui junto com o HTML
   que as usava (macro `ui.central` em _componentes.html) — CSS sem dono é CSS que
   ressuscita componente morto. O cabeçalho da família (.ui-central-*, .ui-eyebrow)
   continua acima, porque continua sendo usado. */

/* Ações do modal "Solicitar acesso" (base.html) — mesmo par de botões à direita
   que os outros modais do sistema usam. */
.sa-acoes { display: flex; justify-content: flex-end; gap: var(--sp-2);
  margin-top: var(--sp-5); }
.sa-acoes .btn { width: auto; margin: 0; }
@media (max-width: 720px) {
  .ui-central-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* Variação Δ% (promovido do vendas/financeiro pra global — dedupe) */
.d-badge { font-size: var(--fs-xs); font-weight: 600; margin-left: 6px; vertical-align: 1px; }
.d-up { color: var(--ok-tx); }
.d-down { color: var(--err-tx); }
.d-flat { color: var(--suave); }

/* Aviso inline (faixa no topo — chip caído, pendência). tipo = err|warn|ok|info

   RESPIRO DOS DOIS LADOS (06/08/2026 — reclamação repetida do dono: "a mensagem
   fica toda colada"). A regra tinha `margin: var(--sp-4) 0 0`, ou seja, margem
   só EM CIMA: o que vinha depois do balão encostava nele. Como a faixa quase
   sempre é seguida do conteúdo da tela (abas → aviso → primeiro cartão), o
   resultado era "salvo" grudado no formulário. Mesma classe de bug que já foi
   corrigida em `.secao-rotulo` e `.aviso`: o respiro é PROPRIEDADE do componente,
   nunca um acidente do vizinho. `line-height` explícito porque a faixa costuma
   ter duas linhas e o 1.45 do body deixava as linhas apertadas. */
.ui-aviso { display: block; margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raio-lg); font-size: var(--fs-sm); line-height: 1.5;
  text-decoration: none;
  border: 1px solid var(--info-bd); background: var(--info-bg); color: var(--info-tx); }
/* Primeiro/último de um bloco não dobram o respiro do container. */
.ui-aviso:first-child { margin-top: 0; }
a.ui-aviso:hover { border-color: var(--borda-forte); }
.ui-aviso.err { background: var(--err-bg); border-color: var(--err-bd); color: var(--err-tx); }
.ui-aviso.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); }
.ui-aviso.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx); }

/* Estado vazio (convite pra agir) */
.ui-vazio { text-align: center; padding: var(--sp-8) var(--sp-6); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-xl); color: var(--suave); }
.ui-vazio-tit { font-weight: 600; color: var(--texto); }
.ui-vazio-txt { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); }
.ui-vazio .btn { width: auto; margin: 0; }

/* ── Expansor (`ui.expansor`): o cabeçalho clicável de um <details> ───────────
   Ver o porquê inteiro na macro, em `_componentes.html`. Resumo: um <summary>
   estilizado como TÍTULO faz a pessoa descobrir o conteúdo por acidente. Aqui ele
   se parece com controle: cor de ação, seta que roda ao abrir e cursor de clique. */
.ui-exp > .ui-exp-cab { display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; color: var(--polvo); font-size: var(--fs-sm); font-weight: 600;
  padding: var(--sp-1) 0; list-style: none; border-radius: var(--raio-sm); }
.ui-exp > .ui-exp-cab::-webkit-details-marker { display: none; }
.ui-exp > .ui-exp-cab:hover .ui-exp-tit { text-decoration: underline; }
.ui-exp > .ui-exp-cab:focus-visible { outline: 2px solid var(--polvo);
  outline-offset: 3px; }
.ui-exp-seta { flex: none; transition: transform .15s ease; }
.ui-exp[open] > .ui-exp-cab .ui-exp-seta { transform: rotate(90deg); }
.ui-exp-sub { color: var(--suave); font-size: var(--fs-xs); font-weight: 400; }
.ui-exp-corpo { margin-top: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .ui-exp-seta { transition: none; } }

/* ── Só pra leitor de tela (o rótulo que o olho não precisa e a voz precisa) ──
   Nasceu com `ui.avatar`: a bolinha de iniciais é `aria-hidden` (duas letras lidas
   em voz alta não dizem nada), então o NOME e o CANAL entram por aqui. Não usa
   `display:none` nem `visibility:hidden` — os dois tiram o texto do leitor de tela
   junto com a tela, que é o oposto do objetivo. */
.ui-so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── AVATAR (macro ui.avatar) — o avatar diz QUEM, o badge diz POR ONDE ──────
   Fonte única (ONDA 1 · pacote 1.2). Antes eram 3 desenhos independentes:
   `.ix-avatar` (Inbox), `.dc-avatar` (Direct) e `.user-avatar` (menu do usuário).
   Os tamanhos abaixo reproduzem os que já existiam, pra a migração não mexer em
   layout: sm 36px = o cabeçalho do chat; md 42px = a linha da lista; lg 72px = o
   topo da ficha na coluna da direita. */
.ui-avatar { position: relative; display: inline-flex; flex: 0 0 auto; vertical-align: middle; }
.ui-avatar-face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  position: relative; display: flex; align-items: center; justify-content: center;
  color: var(--branco-fixo); font-weight: 600; line-height: 1; letter-spacing: .3px; }
/* A foto COBRE as iniciais. Se a imagem quebrar, o `onerror` remove a <img> e as
   iniciais reaparecem — nunca sobra um quadrado cinza de imagem quebrada. */
.ui-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; }
.ui-avatar--xs { width: 24px; height: 24px; font-size: var(--fs-2xs); }
/* 36px, e não 32: é o tamanho que os cabeçalhos de chat do Inbox já usavam por
   `style=` inline. O degrau existe pra apagar aquele inline, não pra redesenhar. */
.ui-avatar--sm { width: 36px; height: 36px; font-size: .95rem; }
.ui-avatar--md { width: 42px; height: 42px; font-size: var(--fs-sm); }
.ui-avatar--lg { width: 72px; height: 72px; font-size: 1.5rem; }
/* O badge de canal, sobreposto no canto inferior direito. O anel na cor do FUNDO
   da página separa o badge do avatar sem depender de contraste entre as duas cores
   (a cor do avatar é sorteada — não dá pra garantir que ela contraste com o badge). */
.ui-avatar-canal { position: absolute; right: -2px; bottom: -2px; display: inline-flex;
  align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--fundo); }
.ui-avatar--xs .ui-avatar-canal { width: 12px; height: 12px; }
.ui-avatar--lg .ui-avatar-canal { width: 22px; height: 22px; right: 0; bottom: 0; }
.ui-avatar--lg .ui-avatar-canal svg { width: 14px; height: 14px; }

/* ── ABAS (macro ui.abas) — a barra única, resolvida no servidor por ?aba= ────
   Mesmo desenho das abas da ficha da pessoa (`.pes-abas`), que era a única
   implementação correta entre as 7 do repositório: sublinhado dourado na ativa,
   `<a href>` de verdade (funciona sem JavaScript e vira link compartilhável). */
.ui-abas { display: flex; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--borda); overflow-x: auto; }
.ui-abas a { padding: 8px 2px; margin-bottom: -1px; font-size: var(--fs-sm);
  color: var(--suave); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.ui-abas a:hover { color: var(--texto); text-decoration: none; border-bottom-color: var(--borda-forte); }
.ui-abas a.ativa { color: var(--texto); font-weight: 600; border-bottom-color: var(--polvo); }
/* Contagem discreta. Zero aparece do mesmo jeito, de propósito: aba que some
   quando zera ensina a equipe a ignorar a barra inteira. */
.ui-abas-num { font-size: var(--fs-xs); color: var(--texto-3); font-weight: 600; margin-left: 4px; }

/* Cabeçalho de seção com ação à direita */
.ui-secao-acao { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-2); }
.ui-secao-acao .btn { width: auto; margin: 0; }

/* (?) com tooltip no hover/foco — explica sem poluir (AJ-1) */
/* Sigla de produto que revela o nome no hover (macro ui.sigla_produto, #35).
   O tracejado é o único sinal de que há informação escondida ali — sem ele o
   usuário não descobre que pode passar o mouse. Só entra quando existe nome de
   verdade pra mostrar (a macro decide). */
.ui-sigla { border-bottom: 1px dotted var(--borda-forte); cursor: help; }

.ui-ajuda { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--card-2);
  border: 1px solid var(--borda-forte); color: var(--suave); font-size: var(--fs-2xs);
  font-weight: 700; cursor: help; position: relative; vertical-align: 1px; margin-left: 4px; }
.ui-ajuda::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px;
  background: var(--tinta); color: #fff; font-size: var(--fs-xs); font-weight: 400;
  line-height: 1.4; text-align: left; padding: 8px 10px; border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg); opacity: 0; visibility: hidden; transition: opacity .12s;
  z-index: 1000; pointer-events: none; }
/* Bug (Madson 2026-07-25): a dica da (?) ficava ATRÁS do painel de cima. Elevar o
   z-index da dica e, no hover/foco, elevar o próprio (?) faz o contexto de
   empilhamento dele vencer os painéis vizinhos. */
.ui-ajuda:hover, .ui-ajuda:focus, .ui-ajuda:focus-within { z-index: 1000; }
.ui-ajuda:hover::after, .ui-ajuda:focus::after { opacity: 1; visibility: visible; }

/* Variante que abre PARA BAIXO (ver o macro `ajuda(texto, baixo=true)`). Um `<th>`
   de tabela fica perto do topo do trilho `.tab-rol`, e esse trilho corta overflow
   vertical (overflow-x:auto promove overflow-y a auto também — regra do CSS); a
   dica que abre pra cima extrapola a borda de cima do trilho e some cortada. Pra
   baixo ela continua dentro da área do trilho (a tabela inteira) e não é cortada. */
.ui-ajuda--baixo::after { bottom: auto; top: calc(100% + 8px); }

/* ── Alternar tema (S-3): botão de acesso rápido, ao lado do sino. Mesmo
   tamanho/estilo do sino pra formar um par visual no topo. ── */
.tema-btn {
  position: fixed; top: 14px; right: 66px; z-index: 120;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--borda); color: var(--suave);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--sombra-sm); transition: background .12s, border-color .12s;
}
.tema-btn:hover { background: var(--card-2); border-color: var(--borda-forte); color: var(--texto); }
@media (max-width: 900px) {
  .tema-btn { top: 9px; right: 56px; width: 36px; height: 36px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
  .tema-btn:hover { background: rgba(255,255,255,.24); color: #fff; }
}

/* ── Sininho de notificações (NT-2): flutua no canto superior direito ── */
.sino-wrap { position: fixed; top: 14px; right: 18px; z-index: 120; }
.sino-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--borda); color: var(--suave);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--sombra-sm); transition: background .12s, border-color .12s;
}
.sino-btn:hover { background: var(--card-2); border-color: var(--borda-forte); color: var(--texto); }
.sino-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 20px; background: var(--coral); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--card);
}
.sino-painel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg); overflow: hidden;
}
.sino-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--borda);
}
.sino-topo strong { font-size: var(--fs-sm); color: var(--texto); }
.sino-lertodas {
  background: none; border: 0; color: var(--polvo-escuro); font-size: var(--fs-xs);
  cursor: pointer; padding: 2px 4px;
}
.sino-lertodas:hover { text-decoration: underline; }
.sino-lista { max-height: 360px; overflow-y: auto; }
.sino-item {
  display: block; padding: 11px 14px; border-bottom: 1px solid var(--borda);
  text-decoration: none; color: var(--texto); transition: background .1s;
}
.sino-item:hover { background: var(--card-2); }
.sino-item.nao-lida { background: var(--ativo-bg); }
.sino-item.nao-lida:hover { background: color-mix(in srgb, var(--ativo-bg) 70%, var(--card-2)); }
.sino-item-titulo { display: block; font-size: var(--fs-sm); font-weight: 600; }
.sino-item-detalhe {
  display: block; font-size: var(--fs-xs); color: var(--suave); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sino-item-quando { display: block; font-size: var(--fs-2xs); color: var(--texto-3); margin-top: 3px; }
.sino-vazio { padding: 24px 14px; text-align: center; color: var(--texto-3); font-size: var(--fs-sm); }
.sino-rodape {
  display: block; padding: 11px 14px; text-align: center; font-size: var(--fs-xs);
  color: var(--polvo-escuro); text-decoration: none; border-top: 1px solid var(--borda);
}
.sino-rodape:hover { background: var(--card-2); }
@media (max-width: 900px) {
  /* no mobile o topo escuro ocupa a direita; desce o sino um pouco e clareia */
  .sino-wrap { top: 9px; right: 12px; }
  .sino-btn { width: 36px; height: 36px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
  .sino-btn:hover { background: rgba(255,255,255,.24); color: #fff; }
  .sino-badge { border-color: var(--tinta); }
}

/* ── Botões flutuantes: Ocultar valores + Bloquear tela (pedido do dono,
   29/07/2026). Canto inferior direito — livre ali (sino/tema ficam no topo,
   o botão de recolher sidebar fica na borda superior dela). Empilha em coluna,
   subindo a partir do canto; fica um degrau ACIMA do canto onde os toasts (T-6)
   nascem, pra uma torre de toasts não tampar os botões o tempo todo. */
.acoes-flutuantes {
  position: fixed; right: var(--sp-5); bottom: calc(var(--sp-5) + 64px); z-index: 150;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.af-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--borda); color: var(--suave);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--sombra-lg); transition: background .12s, border-color .12s, color .12s;
}
.af-btn:hover { background: var(--card-2); border-color: var(--borda-forte); color: var(--texto); }
.af-btn svg { width: 20px; height: 20px; }
/* F-6 UX: o botão de ocultar valores precisa mostrar visualmente que está ATIVO
   (não só os números sumirem) — dono relatou confusão sobre se o clique "pegou". */
.af-btn.ativo { background: var(--ativo-bg); border-color: var(--polvo); color: var(--polvo-escuro); }
.af-btn.ativo:hover { background: var(--ativo-bg); border-color: var(--polvo); color: var(--polvo-escuro); }
@media (max-width: 640px) {
  /* mais perto do canto e um pouco menor, igual aos outros controles flutuantes */
  .acoes-flutuantes { right: var(--sp-4); bottom: calc(var(--sp-4) + 56px); gap: var(--sp-2); }
  .af-btn { width: 38px; height: 38px; }
  .af-btn svg { width: 18px; height: 18px; }
}

/* .container agora só CENTRALIZA e limita a largura (MD3: o corpo cresce até um
   teto e depois só a margem aumenta). O respiro vem do padding de .conteudo. */
.container { max-width: 960px; margin: 0 auto; padding: 0; }
/* Largura ÚNICA da família Central (Onda 0, pacote 0.7 — achado I-1 da crítica
   adversarial: as 15 telas usavam 1040/1100/1120px e 1 sem teto nenhum, então
   trocar de painel fazia a coluna "pular" na frente do usuário).
   1120px é a largura MAJORITÁRIA do sistema hoje (11 telas) — a régua foi
   escolhida por ser a que já vencia, não por gosto novo. Quem for criar uma tela
   da Central: use esta classe, nunca um `style="max-width:…"` avulso.
   Seletor com as duas classes de propósito: garante que ganha de `.container`
   independentemente da ordem em que as regras aparecerem no arquivo. */
.container.container-central { max-width: 1120px; }
/* Tipografia leve (Untitled UI): títulos 600 com tracking justo, nada de negrito pesado */
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
h2, h3 { font-weight: 600; }
b, strong { font-weight: 600; }
.sub { color: var(--suave); margin-bottom: 26px; font-size: .9rem; }

/* Títulos globais (Untitled UI) — título de página 24/600, seção 20/600 */
h1 { font-size: var(--fs-display-xs); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: var(--texto); }
h2 { font-size: var(--fs-xl); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--texto); }
h3 { font-size: var(--fs-md); line-height: 1.4; font-weight: 600; color: var(--texto); }
.sub { color: var(--suave); font-size: var(--fs-sm); margin: 6px 0 20px; }

/* Cards de funcionalidade */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-xl);
  padding: 20px; box-shadow: var(--sombra-xs); transition: border-color .12s, box-shadow .12s;
}
/* Hover leve (Untitled UI): sombra rasa — sem "pular" */
.card:hover { box-shadow: var(--sombra-sm); }
.card .modulo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--polvo-escuro); font-weight: 600; }
.card h3 { font-size: var(--fs-md); margin: 6px 0 4px; }
.card p { font-size: var(--fs-sm); color: var(--suave); }
/* Ação do card: link discreto com seta (terciário) — a tela não vira um mar de botões */
.card-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--polvo-escuro);
}
.card-link svg { transition: transform .12s ease; }
.card:hover .card-link svg { transform: translateX(2px); }

/* ---- KPIs do painel (Untitled UI: número grande e FINO, rótulo pequeno acima,
   muito respiro — nada de negrito pesado nem borda gritando) ---- */
.kpi-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 16px; margin: 4px 0 36px;
}
.kpi {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--borda); border-radius: 12px;
  padding: 20px; color: inherit; transition: border-color .12s, box-shadow .12s;
}
.kpi { box-shadow: var(--sombra-xs); }
.kpi:hover { text-decoration: none; box-shadow: var(--sombra-sm); }
.kpi-rotulo { font-size: var(--fs-sm); font-weight: 500; color: var(--suave); }
.kpi-numero {
  font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
  color: var(--texto); font-variant-numeric: tabular-nums;
}
.kpi-numero.kpi-alerta { color: var(--coral); }
.kpi-desc { font-size: var(--fs-xs); color: var(--suave); line-height: 1.45; }

/* Rótulo de seção (macro ui.secao() em _componentes.html) — separa uma seção da
   anterior. CLASSE DO DESIGN SYSTEM, não remendo por tela: até 04/08/2026 esta
   classe só tinha margin-bottom, então o respiro ACIMA da seção dependia de o
   elemento vizinho por acaso já ter margin-bottom suficiente (acidente, não
   garantia) — telas que não tinham esse acidente ficavam com a seção colada no
   bloco anterior (bug reportado várias vezes pelo dono). Agora o margin-top é
   PRÓPRIO da classe, do mesmo tamanho do respiro que `.ck-secao` do Cockpit já
   usava (--sp-8), então nenhuma tela mais depende de sorte. `:first-child` zera
   o topo quando a seção é o primeiro elemento dentro de um card/painel com
   padding próprio (senão dobraria o respiro ali). */
.secao-rotulo {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .7px;
  color: var(--suave); margin: var(--sp-8) 0 var(--sp-3);
}
.secao-rotulo:first-child { margin-top: 0; }

/* Login */
.login-tela { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--tinta); position: relative; overflow: hidden; }
.login-caixa { background: #fff; padding: 34px 30px; border-radius: 16px; width: 100%; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.25); position: relative; z-index: 2; }
.login-caixa .logo { display: flex; justify-content: center; margin-bottom: 10px; }
/* .login-caixa tem fundo claro (#fff) fixo — a logo horizontal usa a variante clara (texto escuro).
   Pedido do dono 31/07/2026: aumentar pelo menos +50% (era 46px → 70px, +52%).
   Marca v2 (04/08/2026): o lockup novo é mais largo que o antigo (4,94:1 contra
   3,91:1). Mantendo 70px de altura ele daria 345px de largura e ESTOURARIA o
   card (300px úteis). 56px devolve ~276px — a mesma LARGURA de antes, que é o
   que a pessoa enxerga como "tamanho da logo" num lockup horizontal. */
.login-caixa .logo .logo-horizontal { height: 56px; width: auto; display: block; }
.login-caixa .tag { text-align: center; color: var(--suave); font-size: var(--fs-sm); margin-bottom: 22px; }

/* ---- Símbolo da marca INLINE (só telas de autenticação) --------------------
   As 3 telas de autenticação (login, confirmação de senha/2FA e tela bloqueada)
   trazem o símbolo como <svg> dentro do HTML, e não como <img>, porque cada um
   dos 8 elementos precisa se mover sozinho — dentro de um <img> o CSS da página
   não alcança os paths. As outras telas seguem com <img>, que é mais leve.
   Ver `marca/prompt-telas-autenticacao.md` e `app/templates/_marca_simbolo.html`. */
.logo-auth { flex-direction: column; align-items: center; gap: 6px; }
.octo-simbolo { width: 76px; height: 76px; display: block; }
/* Origem de toda transformação = o NÚCLEO (base do manto, onde os 8 nascem).
   É o que faz "fechar o leque" e "recolher para perto do núcleo" serem uma
   rotação/escala só, sem redesenhar nada. */
.octo-simbolo .octo-t { transform-origin: 512px 480px; }
.logo-wordmark { height: 22px; width: auto; display: block; }

/* Tela 1 — Login (convite): os 8 elementos "assentam" no lugar, um a um, como
   se o núcleo ativasse os módulos. Atraso de 40ms entre eles, 7×40+260 = 540ms
   no total (< 600ms), UMA vez só — nunca em loop, nunca vira mascote. */
@keyframes octo-assentar {
  from { transform: rotate(calc(var(--ang) * -1)) scale(.86); opacity: .3; }
  to   { transform: none; opacity: 1; }
}
.octo-assentar .octo-t {
  animation: octo-assentar 260ms cubic-bezier(.22,.9,.3,1) both;
  animation-delay: calc(var(--i) * 40ms);
}

/* Tela 2 — Confirmação de senha (reconhecimento): mesmo símbolo ~15% menor e
   mais colado no topo, pra abrir espaço visual pro "quem está entrando", que é
   a informação nova desta tela. Nenhuma animação de entrada: ela sucede o login
   na MESMA sessão, repetir o assentamento pareceria bug. */
.octo-menor { width: 64px; height: 64px; }

/* Tela 3 — Sessão bloqueada (pausa, não ameaça): leque fechado em 30% (cada
   elemento rotaciona -30% do PRÓPRIO ângulo em torno do núcleo) e escala 0,93
   também a partir do núcleo, o que os aproxima dele. Continua o dourado CHEIO
   (var(--polvo)): "pausado" não é "desabilitado" — nada de vermelho, cadeado
   ou dourado esmaecido aqui. */
.octo-recolhido .octo-t { transform: rotate(calc(var(--ang) * -.3)) scale(.93); }

@media (prefers-reduced-motion: reduce) {
  .octo-assentar .octo-t { animation: none; }
}

/* O painel decorativo dos dominós FOI REMOVIDO (dono, 04/08/2026). Ele existia
   desde 31/07 ligado à frase "Dominós enfileirados...", ocupava 40% da tela à
   esquerda e obrigava o cartão a ser empurrado pra direita. As regras de
   `.login-decor` saíram junto com o markup em `login.html`; o cartão volta a
   ficar CENTRALIZADO, que é o padrão de toda tela de login. */

/* Rodapé "não é da equipe / aluno / ajuda" — pedido do dono 31/07/2026: fixo, embaixo,
   alinhado à esquerda da tela (antes ficava solto, centralizado, embaixo da caixa). */
.login-rodape {
  position: fixed; left: 28px; right: 28px; bottom: 22px; z-index: 2;
  max-width: 320px; text-align: left; font-size: var(--fs-xs); line-height: 1.5; color: #b9b7a9;
}
.login-rodape a { color: #d7d5c4; text-decoration: underline; }

/* Botão Voltar (etapa senha → etapa e-mail) — pedido do dono 31/07/2026: topo, canto
   superior esquerdo da tela, estilizado como botão cinza (não o botão de ação principal). */
.login-voltar {
  display: none; position: fixed; top: 22px; left: 28px; z-index: 3;
  width: auto; margin: 0; padding: 8px 14px 8px 10px;
  background: rgba(255,255,255,.08); color: #ececdf; border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--raio-md); font-size: var(--fs-sm); font-weight: 500; font-family: inherit;
  cursor: pointer; align-items: center; gap: 6px; box-shadow: none;
}
.login-voltar svg { width: 16px; height: 16px; }
.login-voltar:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); }
.login-voltar.mostrar { display: inline-flex; }

@media (min-width: 900px) {
  /* `.login-tela { justify-content: flex-end }` saiu junto com os dominós — era
     ele que jogava o cartão pra direita pra abrir espaço pra ilustração. Sem a
     ilustração, o `center` do `.login-tela` volta a valer sozinho. */
  .login-rodape { left: 52px; }
}

/* ---- Rótulos e campos (Untitled UI) ---- */
label { display: block; font-size: var(--fs-sm); color: var(--texto); margin: 12px 0 4px; font-weight: 500; }
.hint { font-size: var(--fs-xs); color: var(--texto-3); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=search], input[type=time], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-md);
  font-size: var(--fs-sm); font-family: inherit; color: var(--texto); background: var(--card);
  box-shadow: var(--sombra-xs); transition: border-color .12s, box-shadow .12s;
}
textarea { line-height: var(--lh-sm, 1.45); min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--polvo); box-shadow: 0 0 0 4px var(--anel); }

/* ---- Botões ---- */
.btn {
  width: 100%; margin-top: 18px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--raio-md);
  background: var(--polvo); color: var(--tinta); font-weight: 600; font-size: var(--fs-sm); font-family: inherit;
  cursor: pointer; box-shadow: var(--sombra-xs); transition: background .12s, box-shadow .12s, border-color .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2;
}
.btn:hover { background: #e0a800; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--anel); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-mini, .btn-sm { width: auto; margin: 0; padding: 8px 12px; font-size: var(--fs-xs); }
/* Secundário: superfície + borda */
.btn-sec { background: var(--card); color: var(--texto); border-color: var(--borda-forte); }
.btn-sec:hover { background: var(--card-2); }
/* Terciário: fantasma */
.btn-ter { background: transparent; color: var(--suave); box-shadow: none; border-color: transparent; }
.btn-ter:hover { background: var(--card-2); color: var(--texto); }
/* Destrutivo */
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: #b42318; }

/* ── `.ix-btn` (Inbox) passa a ser definido AQUI (ONDA 1 · pacote 1.2) ───────
   O Inbox tinha uma família de botões PRÓPRIA, declarada dentro de
   `_inbox_estilo.html`: `.ix-btn`, `.ix-btn-prim`, `.ix-btn-alerta`,
   `.ix-btn-perigo`. A razão histórica escrita no arquivo era que o Inbox
   precisava de um botão compacto e neutro por padrão, enquanto o `.btn` global
   nasce dourado e de largura cheia.

   Essa razão CADUCOU: `.btn-mini`/`.btn-sm` (largura automática, compacto) e
   `.btn-sec` (neutro) já existem no global e entregam exatamente isso. O que
   sobrava era uma segunda verdade sobre o que é um botão — e ela já tinha
   divergido: anel de foco, `:disabled` e sombra existiam só de um lado, e o
   Inbox era a única família de botão do sistema sem foco visível.

   Aqui `.ix-btn` vira um apelido composto, ao lado do original:
       .ix-btn      ≡ .btn.btn-mini.btn-sec   (compacto, neutro)
       .ix-btn-prim ≡ .btn                    (o dourado da marca)
   Os ~45 pontos de chamada continuam escritos como estão — trocar as classes
   nos templates é mudança de layout, e o pacote 1.2 é explicitamente "sem mudar
   layout ainda". O que muda é a FONTE: existe um botão só, definido aqui. */
.ix-btn { border-radius: var(--raio-md); border: 1px solid var(--borda-forte);
  font-family: inherit; font-weight: 600; font-size: var(--fs-xs); line-height: 1.2;
  padding: 7px 11px; width: auto; margin: 0; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--card); color: var(--texto); box-shadow: var(--sombra-xs);
  transition: background .12s, box-shadow .12s, border-color .12s; }
.ix-btn:hover { background: var(--card-2); }
.ix-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--anel); }
.ix-btn:disabled { opacity: .5; cursor: not-allowed; }
.ix-btn svg { width: 16px; height: 16px; }
/* Primário do Inbox = o dourado da marca. UM por tela (no chat é o "Enviar"). */
.ix-btn-prim { background: var(--polvo); border-color: var(--polvo); color: var(--tinta); }
.ix-btn-prim:hover { background: var(--polvo-escuro); }
/* Atenção (âmbar): "Marcar como lido" — frequente, mas não é a ação que vende. */
.ix-btn-alerta { color: var(--warn-tx); border-color: var(--warn-bd); background: var(--warn-bg); }
.ix-btn-perigo { color: var(--coral); border-color: var(--err-bd); }
.ix-btn-perigo:hover { background: var(--err-bg); }

/* Botão-ícone (ações em lista: editar/desligar/excluir) */
.iconbtn { width: 32px; height: 32px; padding: 0; margin: 0; display: inline-grid; place-items: center;
  border-radius: var(--raio-md); border: 1px solid var(--borda); background: var(--card); color: var(--suave);
  cursor: pointer; box-shadow: var(--sombra-xs); transition: background .12s, color .12s, border-color .12s; }
.iconbtn:hover { background: var(--card-2); color: var(--texto); }
.iconbtn.danger:hover { color: var(--err-tx); border-color: var(--err-bd); background: var(--err-bg); }
.iconbtn svg { width: 16px; height: 16px; }

.erro { background: var(--err-bg); color: var(--err-tx); border: 1px solid var(--err-bd); padding: 9px 12px; border-radius: var(--raio-md); font-size: var(--fs-sm); margin-bottom: 8px; }

/* ---- Tabelas (Untitled UI) ---- */
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--raio-xl); overflow: hidden; border: 1px solid var(--borda); box-shadow: var(--sombra-xs); }

/* TRILHO DE ROLAGEM DA TABELA (Madson #19: "no widescreen com meia tela, corta").
   A causa era o `overflow: hidden` da regra acima — ele existe pro canto arredondado
   não vazar, mas quando a tabela não cabe ele CORTA a coluna em vez de deixar rolar,
   e a informação simplesmente some da tela sem aviso nenhum.
   Aqui a moldura (borda, raio, sombra) passa pro trilho e o trilho rola de lado; a
   tabela por dentro fica sem moldura e livre pra crescer. `min-width: 100%` mantém
   ela ocupando a largura toda quando cabe — ou seja, tabela pequena continua igual,
   nada de barra de rolagem que não precisa existir.
   O trilho é aplicado sozinho pelo `envolverTabelas()` do base.html: não dá pra
   pedir pra 46 telas lembrarem de envolver a tabela na mão. */
.tab-rol {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-xs);
}
.tab-rol > table {
  width: auto;
  min-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* A linha de baixo já é a borda do trilho — sem isso fica borda dupla no rodapé. */
.tab-rol > table tr:last-child td { border-bottom: 0; }
th, td { text-align: left; padding: 12px 16px; font-size: var(--fs-sm); border-bottom: 1px solid var(--borda); }
th { background: var(--card-2); color: var(--suave); font-size: var(--fs-xs); font-weight: 600; text-transform: none; letter-spacing: normal; }
td { line-height: 1.5; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--card-2); }
.num { font-variant-numeric: tabular-nums; }
.tag-papel { font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; font-weight: 500; }
.tag-admin { background: var(--ativo-bg); color: var(--polvo-escuro); }
.tag-suporte { background: var(--card-2); color: var(--suave); }

/* ---- Pílulas / badges de status ---- */
.pilula { display: inline-flex; align-items: center; font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; font-weight: 500; border: 1px solid transparent; }
.on { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-bd); }
.off { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd); }
.badge { font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; font-weight: 500; text-transform: none; letter-spacing: normal; }
.badge-pronto { background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-bd); }
.badge-breve { background: var(--card-2); color: var(--suave); border: 1px solid var(--borda); }
.card-off { opacity: .62; }

.painel { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-xl); padding: 20px 24px; margin-top: 18px; box-shadow: var(--sombra-xs); }
.painel h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 12px; }
.linha-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.linha-form > div { flex: 1; min-width: 140px; }
.check-linha { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-sm); }
.check-linha input { width: auto; }
/* Mesma classe de bug do .secao-rotulo acima (só margin-bottom, respiro de cima
   por acidente) — o dono citou o aviso de pessoas sem consentimento como outro
   exemplo. margin-top menor que --sp-8 porque aviso normalmente já está DENTRO
   de uma seção (não abre uma nova), só precisa de respiro do bloco anterior. */
.aviso { background: var(--info-bg); border: 1px solid var(--info-bd); color: var(--info-tx); padding: 10px 14px; border-radius: var(--raio-md); font-size: var(--fs-sm); margin: var(--sp-4) 0 14px; }
.aviso:first-child { margin-top: 0; }

/* ---- Grupos colapsáveis da sidebar (clique no rótulo; estado por grupo em localStorage) ---- */
/* O rótulo vira botão mas mantém o visual de .menu-grupo; só ganha o chevron e a área de clique */
button.grupo-rotulo {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: calc(100% - 20px); background: none; border: 0; padding: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
button.grupo-rotulo:hover, button.grupo-rotulo:hover .chev { color: var(--texto); }
.grupo-rotulo .chev { flex: 0 0 12px; color: var(--suave); transition: transform .15s ease; }
/* Grupo fechado: chevron aponta pro lado e os itens somem (classe g-*-off no <html>) */
/* ⚠️ Um par de seletores por grupo do menu. Grupo novo em base.html (a lista
   GRUPOS do script) precisa entrar NAS DUAS listas abaixo, senão ele nunca fecha. */
html.g-conversas-off .grupo-rotulo[data-grupo="conversas"] .chev,
html.g-atendimento-off .grupo-rotulo[data-grupo="atendimento"] .chev,
html.g-whatsapp-off .grupo-rotulo[data-grupo="whatsapp"] .chev,
html.g-crescimento-off .grupo-rotulo[data-grupo="crescimento"] .chev,
html.g-relatorios-off .grupo-rotulo[data-grupo="relatorios"] .chev,
html.g-biblioteca-off .grupo-rotulo[data-grupo="biblioteca"] .chev,
html.g-financeiro-off .grupo-rotulo[data-grupo="financeiro"] .chev,
html.g-entrega-off .grupo-rotulo[data-grupo="entrega"] .chev,
html.g-importar-off .grupo-rotulo[data-grupo="importar"] .chev,
html.g-config-off .grupo-rotulo[data-grupo="config"] .chev { transform: rotate(-90deg); }
html.g-conversas-off .grupo-itens[data-grupo="conversas"],
html.g-atendimento-off .grupo-itens[data-grupo="atendimento"],
html.g-whatsapp-off .grupo-itens[data-grupo="whatsapp"],
html.g-crescimento-off .grupo-itens[data-grupo="crescimento"],
html.g-relatorios-off .grupo-itens[data-grupo="relatorios"],
html.g-biblioteca-off .grupo-itens[data-grupo="biblioteca"],
html.g-financeiro-off .grupo-itens[data-grupo="financeiro"],
html.g-entrega-off .grupo-itens[data-grupo="entrega"],
html.g-importar-off .grupo-itens[data-grupo="importar"],
html.g-config-off .grupo-itens[data-grupo="config"] { display: none; }

/* ---- Modo trilho (sb-mini no <html>): sidebar de 56px só com ícones — desktop apenas;
   no celular a sidebar segue como overlay completo ---- */
@media (min-width: 901px) {
  .sidebar { transition: width .18s ease; }
  .conteudo.com-sidebar { transition: margin-left .18s ease; }
  html.sb-mini .sidebar { width: 56px; }
  html.sb-mini .conteudo.com-sidebar { margin-left: 56px; }
  /* No trilho a logo horizontal não cabe em 56px — troca pro símbolo isolado e centraliza
     (o botão de recolher não mora mais aqui: é a faixa fixada na borda da sidebar) */
  html.sb-mini .sidebar-marca { justify-content: center; padding: 15px 0; }
  html.sb-mini .sidebar-marca .logo-horizontal { display: none; }
  html.sb-mini .sidebar-marca .marca-simbolo { display: block; width: 26px; height: 26px; }
  html.sb-mini .sidebar-nav { padding: 12px 6px; }
  html.sb-mini .sidebar-rodape { padding: 6px 6px 8px; }
  /* Some texto e rótulos; nomes seguem acessíveis pelo title (tooltip nativo) */
  html.sb-mini .mi-rotulo, html.sb-mini .sair-nome, html.sb-mini .grupo-rotulo { display: none; }
  /* No trilho os grupos ficam sempre "expandidos" (só os ícones); vence o g-*-off por especificidade */
  html.sb-mini .sidebar .grupo-itens[data-grupo] { display: block; }
  html.sb-mini .menu-item { justify-content: center; padding: 9px 0; }
  /* Badge de não lidas vira pontinho dourado sobre o ícone do Inbox */
  html.sb-mini .menu-item .badge-menu {
    position: absolute; top: 4px; right: 12px; margin: 0;
    width: 10px; height: 10px; padding: 0; border-radius: 50%;
    font-size: 0; line-height: 0; overflow: hidden; border: 2px solid var(--card);
  }
}
@media (max-width: 900px) {
  /* No celular o menu é overlay: recolher em trilho não se aplica */
  .sb-alternar { display: none; }
}

/* ---- Selo de módulo: sobrescrita ACIMA do h1, no fluxo da página. ----

   ERA uma pílula com `position:absolute; top:14px; right:72px`, flutuando no
   canto superior direito. O dono cobrou a mudança de lugar VÁRIAS VEZES e as
   correções anteriores só mexeram em espaçamento — por isso nunca resolveram.
   A causa é geométrica, não de respiro: o `<main>` tem 36px de padding no topo,
   então o selo ocupava a faixa y≈14–35px e o `<h1>` começava em y=36. O selo
   ficava por cima da linha do título, e essa linha termina, à direita,
   justamente na AÇÃO PRIMÁRIA da tela ("Novo setor", "Adicionar domínio"...).
   Os dois disputavam o mesmo canto. Aumentar margem só empurrava a colisão.

   Agora ele é uma sobrescrita em fluxo, à esquerda, logo acima do h1: é
   contexto de navegação, e contexto pertence junto do título, não no canto
   reservado à ação. Como é o primeiro elemento em fluxo do `<main>`, isso vale
   automaticamente para TODAS as telas que têm selo — não só as três em que o
   problema foi relatado.

   O `@media (max-width:900px) { display:none }` saiu junto: ele existia porque a
   pílula flutuante brigava com o sino no celular. Em fluxo não briga com nada, e
   o contexto passa a aparecer também no celular, onde antes simplesmente sumia.

   Sem `position`, sem `z-index`, sem `pointer-events`, sem fundo e sem borda —
   nada disso fazia sentido fora do modo flutuante. (27/07/2026) */
.selo-modulo {
  display: block;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .7px; text-transform: uppercase;
  color: var(--suave); white-space: nowrap;
  margin: 0 0 var(--sp-1);
}

/* ---- Rodapé da sidebar enxuto: um único item "Configurações" (engrenagem) que
   expande os itens administrativos, + "Sair". Fechado por padrão (Krug:
   progressive disclosure — o eventual fica escondido até precisar). ---- */
button.menu-item.config-toggle {
  width: 100%; background: none; border: 0; font-family: inherit; font-size: .9rem;
  font-weight: 500; cursor: pointer;
}
.menu-item.config-toggle .chev {
  margin-left: auto; flex: 0 0 12px; color: var(--suave); transition: transform .15s ease;
}
html.g-config-off .menu-item.config-toggle[data-grupo="config"] .chev { transform: rotate(-90deg); }
/* Itens internos levemente recuados: lê-se como "dentro de Configurações" */
.grupo-itens.grupo-config .menu-item { padding-left: 24px; }
@media (min-width: 901px) {
  /* No trilho (sb-mini) o toggle segue visível como ícone e continua mandando:
     este seletor (2 classes) vence o "grupo-itens sempre visíveis" do modo mini */
  html.sb-mini .menu-item.config-toggle { justify-content: center; padding: 9px 0; }
  html.sb-mini .menu-item.config-toggle .chev { display: none; }
  html.sb-mini.g-config-off .sidebar .grupo-itens[data-grupo="config"] { display: none; }
  html.sb-mini .grupo-itens.grupo-config .menu-item { padding-left: 0; }
}

/* ==================== MODAL / POP-UP reutilizável ====================
   Uso: um <div class="modal" id="meu-modal" hidden> com .modal-caixa dentro.
   Abrir: abrirModal('meu-modal'); Fechar: fecharModal('meu-modal') (helpers em base.html).
   Fecha no X, no fundo escuro e no ESC. Serve pra "adicionar mídia/link" etc. */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(16,24,40,.55); }
.modal[hidden] { display: none; }
.modal-caixa { background: var(--card); color: var(--texto); border: 1px solid var(--borda);
  border-radius: var(--raio-xl); box-shadow: var(--sombra-lg); width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: var(--sp-4); }
.modal-topo h2 { font-size: var(--fs-lg); margin: 0; }
.modal-fechar { background: none; border: 0; color: var(--suave); cursor: pointer; padding: 4px;
  border-radius: var(--raio-sm); display: flex; }
.modal-fechar:hover { background: var(--card-2); color: var(--texto); }
/* Variante larga: formulários de criação com várias colunas (DS-4) */
.modal-caixa.modal-larga { max-width: 760px; }

/* ==================== PAINEL LATERAL (drawer) ====================
   Vocabulário do DESIGN-SYSTEM (ver referencias/mockups/OCTOSITES-COMPARACAO-E-PLANO.md
   §2.3): desliza da borda DIREITA da tela, cobre só uma FAIXA (não a tela toda),
   NÃO escurece o resto (sem overlay/backdrop — por isso não tem `.modal` aqui) e
   NÃO trava a navegação por trás — a pessoa continua clicando/rolando o que está
   atrás. Serve pra VER detalhe/contexto de algo que já existe sem perder o lugar
   onde estava. Diferente do `.modal`, que interrompe o fluxo pra decidir algo
   (formulário, confirmação) e por isso escurece e trava.
   Reaproveita os MESMOS tokens do `.modal-caixa` (cor, raio, sombra, espaçamento)
   pra parecer da mesma família visual — só a posição/comportamento mudam.
   Macro: `ui.painel_lateral()` em _componentes.html.
   Abrir: abrirPainel('meu-id'); Fechar: fecharPainel('meu-id') (helpers em base.html).
   Fecha no X e no ESC — não tem "clicar fora" porque não existe fundo pra clicar
   (o resto da tela continua normal, clicável, atrás do painel). */
.ui-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(420px, 100vw); background: var(--card); color: var(--texto);
  border-left: 1px solid var(--borda); box-shadow: var(--sombra-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
  pointer-events: none; }
.ui-drawer.ui-drawer-aberto { transform: translateX(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ui-drawer { transition: none; } }
@media (max-width: 480px) { .ui-drawer { width: 100vw; } }
.ui-drawer-topo { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--borda);
  flex: 0 0 auto; }
.ui-drawer-topo h2 { font-size: var(--fs-lg); margin: 0; }
.ui-drawer-sub { color: var(--suave); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; }
.ui-drawer-fechar { background: none; border: 0; color: var(--suave); cursor: pointer; padding: 4px;
  border-radius: var(--raio-sm); display: flex; flex: 0 0 auto; }
.ui-drawer-fechar:hover { background: var(--card-2); color: var(--texto); }
.ui-drawer-fechar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anel); }
.ui-drawer-corpo { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); }

/* ==================== BUSCA DE FUNCIONALIDADES (Ctrl+K) ====================
   Existe porque o sistema tem ~100 funcionalidades e o menu mostra 29 — quem
   entra a primeira vez não acha as coisas. Abre por cima de qualquer tela, perto
   do topo (não centralizada): a lista cresce pra baixo sem empurrar o campo. */
.bc-modal { align-items: flex-start; padding-top: 8vh; }
/* A caixa é um flex column com teto de altura: o campo e o rodapé ficam fixos e
   SÓ a lista rola. Antes a lista tinha altura fixa (52vh) e, somada ao resto,
   estourava a tela — o rodapé e os últimos itens ficavam cortados. */
.bc-caixa { width: 100%; max-width: 560px; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--card); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-xl); box-shadow: var(--sombra-lg);
  overflow: hidden; }
.bc-caixa input[type=search] { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--borda);
  border-radius: 0; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); background: transparent;
  flex: 0 0 auto; line-height: 1.5; text-overflow: ellipsis;
  /* Reset do "appearance" nativo do type=search: sem isto o Chrome desenha o texto
   dentro de uma caixa interna (shadow DOM) com line-box mais baixa que a nossa
   font-size/padding — resultado: a parte de cima da letra (acento, "ê"/"ç") fica
   cortada bem no instante em que o popup abre. Achado do dono (31/07/2026). */
  -webkit-appearance: none; appearance: none; }
.bc-caixa input[type=search]::-webkit-search-decoration,
.bc-caixa input[type=search]::-webkit-search-cancel-button,
.bc-caixa input[type=search]::-webkit-search-results-button,
.bc-caixa input[type=search]::-webkit-search-results-decoration { display: none; }
.bc-caixa input[type=search]:focus { outline: none; box-shadow: none; }
.bc-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Item bloqueado (sem acesso): apagado, sem cara de clicável. */
.bc-item.bloq { opacity: .62; }
.bc-item.bloq .bc-nome { color: var(--suave); }
.bc-lock { color: var(--err-tx) !important; border-color: var(--err-bd) !important; background: var(--err-bg); }
.bc-item { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-3);
  padding: var(--sp-3) var(--sp-5); text-decoration: none; color: var(--texto);
  border-bottom: 1px solid var(--borda); }
.bc-item:last-child { border-bottom: 0; }
/* Item selecionado = fundo sólido. Regra T-11: contorno amarelo não destaca. */
.bc-item.sel, .bc-item:hover { background: var(--card-2); }
.bc-item.sel { box-shadow: inset 3px 0 0 var(--polvo); }
.bc-nome { font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--sp-2); }
/* Fonte pequena demais (achado do dono, 31/07/2026): nome/descrição/área usavam
   --fs-xs (12px, reservado a rótulos e badges no resto do sistema — ver linha 46).
   O corpo de leitura padrão do sistema é --fs-sm (14px, "CORPO workhorse"); é o
   token que os outros textos legíveis do app usam, não um tamanho novo. */
.bc-desc { grid-column: 1; color: var(--suave); font-size: var(--fs-sm); line-height: 1.45; }
.bc-area { grid-row: 1; grid-column: 2; color: var(--texto-3); font-size: var(--fs-sm); white-space: nowrap; }
.bc-tag { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .4px; color: var(--texto-3);
  border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 1px 5px; font-weight: 500; }
.bc-vazio { padding: var(--sp-6) var(--sp-5); color: var(--suave); font-size: var(--fs-sm); }
.bc-rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--borda); background: var(--card-2);
  font-size: var(--fs-xs); color: var(--texto-3); }
.bc-rodape a { color: var(--suave); }
.bc-rodape kbd { border: 1px solid var(--borda-forte); border-bottom-width: 2px; border-radius: 4px;
  padding: 0 4px; margin: 0 1px; font-size: var(--fs-2xs); background: var(--card); }
/* Gatilho da busca no menu lateral — é um <button>, precisa parecer item de menu.
   FIXO NO TOPO (pedido do Madson): o menu tem ~30 itens e rola; a busca é a saída de
   quem não está achando as coisas, então some justamente na hora em que é mais
   necessária. `sticky` a prende no alto do trilho enquanto o resto rola por baixo.
   O fundo opaco e o z-index existem pra o item que passa por baixo não transparecer. */
.menu-item.mi-busca { width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit;
  position: sticky; top: 0; z-index: 3;
  background: var(--card); box-shadow: 0 6px 6px -6px var(--borda); }
.mi-atalho { margin-left: auto; font-size: var(--fs-2xs); color: var(--texto-3);
  border: 1px solid var(--borda); border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
.sb-mini .mi-atalho { display: none; }   /* menu recolhido: só o ícone */
@media (max-width: 640px) { .bc-modal { padding-top: 6vh; } .mi-atalho { display: none; } }

/* ---------- T-1: LINK QUE ABRE EM NOVA ABA GANHA ÍCONE (seta saindo da caixa) ----------
   Regra sistêmica: em vez de caçar link por link, todo <a target="_blank"> recebe
   o ícone automaticamente — a pessoa sabe ANTES de clicar que vai sair dali.
   O ícone é SVG embutido (data-URI) pra não pedir arquivo ao servidor, e usa
   currentColor, então acompanha o tema claro/escuro e a cor do link.
   Para excluir um caso específico (ex.: card inteiro clicável), use .sem-icone-externo. */
a[target="_blank"]:not(.sem-icone-externo):not(.btn):not(.btn-mini):not(.btn-sm)::after {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  background-color: currentColor;
  opacity: .65;
  -webkit-mask: var(--icone-externo) no-repeat center / 12px 12px;
  mask: var(--icone-externo) no-repeat center / 12px 12px;
}
:root {
  --icone-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* ---------- T-5: BOTÃO COPIAR (ícone, nunca a palavra "copiar") ----------
   Vale em todo lugar que mostra URL/chave/JSON pra colar em outro sistema. */
.btn-copiar { background: none; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  color: var(--suave); cursor: pointer; padding: 4px; display: inline-flex; align-items: center;
  justify-content: center; line-height: 0; vertical-align: middle; }
.btn-copiar:hover { background: var(--card-2); color: var(--texto); border-color: var(--borda-forte); }
.btn-copiar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anel); }
.btn-copiar svg { width: 14px; height: 14px; }
.btn-copiar.copiado { color: var(--ok-tx); border-color: var(--ok-bd); background: var(--ok-bg); }

/* ---------- T-7: LIGA/DESLIGA (switch) com o estado escrito ao lado ----------
   O dono reclamou que o liga/desliga "não está intuitivo": não dava pra saber se
   aquilo mostrava o estado ou era o botão de mudar. Agora o trilho mostra a
   posição E o texto diz em palavras ("Ativo"/"Inativo"), que é o que a pessoa lê. */
.ui-switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  user-select: none; font-size: var(--fs-sm); }
.ui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-switch-trilho { width: 40px; height: 22px; border-radius: 999px; background: var(--borda-forte);
  position: relative; flex: 0 0 auto; transition: background .18s ease; }
.ui-switch-bolinha { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--sombra-xs); transition: transform .18s ease; }
.ui-switch input:checked + .ui-switch-trilho { background: var(--verde); }
.ui-switch input:checked + .ui-switch-trilho .ui-switch-bolinha { transform: translateX(18px); }
.ui-switch input:focus-visible + .ui-switch-trilho { box-shadow: 0 0 0 3px var(--anel); }
.ui-switch input:disabled + .ui-switch-trilho { opacity: .5; cursor: not-allowed; }
.ui-switch-txt { color: var(--suave); }
.ui-switch input:checked ~ .ui-switch-txt { color: var(--ok-tx); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .ui-switch-trilho, .ui-switch-bolinha { transition: none; }
}

/* ---------- PAINEL DE CONFIGURAÇÃO (5ª classe do design system) ----------
   `referencias/DESIGN-SYSTEM.md` §"As cinco classes de superfície" · ONDA 3
   pacote 3.2 do redesenho das Centrais.

   É o formulário que edita a CONFIGURAÇÃO ÚNICA (singleton) daquela tela e cujo
   efeito se vê na mesma tela — NÃO é modal, de propósito: o ciclo de valor é
   "configurar → ver o efeito → ligar", e ele só existe se config e efeito
   dividirem a tela. Herda a superfície do `.painel` (mesma família visual) e
   acrescenta o que faz dele uma classe e não uma brecha: rodapé próprio com UM
   Salvar por bloco e o dirty-tracking escrito.

   O dirty-tracking é o padrão nascido em /recuperacao: o Salvar NASCE neutro
   (`.btn-sec`) e só vira primário (dourado) quando o formulário muda de verdade.
   Numa tela com N painéis, "dourado" precisa significar "aqui tem algo a salvar";
   se todos nascem dourados a tela inteira parece alterada e o sinal morre.
   Quem tira/põe a classe é o JS global do base.html — a tela não reimplementa. */
.ui-config { display: block; background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--raio-xl); padding: 20px 24px; margin-top: 18px; box-shadow: var(--sombra-xs); }
.ui-config-topo { margin-bottom: var(--sp-4); }
.ui-config-topo h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.ui-config-sub { color: var(--suave); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; line-height: 1.5; }
.ui-config-corpo > :first-child { margin-top: 0; }
/* Rodapé: régua fina + Salvar à direita, com o estado do formulário à esquerda.
   O Salvar mora DENTRO do painel (regra 2 da classe: um Salvar por bloco, junto
   do bloco — nunca um Salvar de tela para N blocos). */
.ui-config-rodape { display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--borda); }
.ui-config-estado { margin-right: auto; font-size: var(--fs-xs); color: var(--suave); }
.ui-config-sujo .ui-config-estado { color: var(--warn-tx); }
.ui-config-rodape .btn { width: auto; margin: 0; }

/* ---------- T-3: caixa de CONFIRMAÇÃO do sistema (mata o confirm() do navegador) ----------
   Usada por confirmar() / confirmarEnvio() / confirmarLink() (base.html). Mais
   estreita que o modal comum: é uma pergunta curta, não um formulário. */
/* A CAIXA DE CONFIRMAÇÃO FICA ACIMA DE TUDO — inclusive do overlay de carregamento
   (#octo-carregando, z-index 500 em base.html). Confirmação é decisão que BLOQUEIA:
   se algo cobre ela, a pessoa não consegue decidir e a ação morre em silêncio.
   Foi exatamente o que aconteceu (Madson, 27/07): `.modal` é z-index 200, o overlay
   500 — a confirmação de "Limpar dados de exemplo" abria ATRÁS do overlay, o botão
   "Remover" ficava inclicável, e 15s depois tudo sumia sem ter feito nada. Valia pra
   TODA ação destrutiva do sistema (75 formulários).
   Já existe uma guarda no JS pra o spinner nem subir nesse caso; este z-index é a
   segunda trava — se algum caminho novo mostrar o spinner, a confirmação continua
   clicável. NÃO baixar este valor abaixo de 500. */
.modal-confirma { z-index: 600; }
.modal-confirma .modal-caixa { max-width: 420px; padding: var(--sp-6); }
.cf-titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 600; }
.cf-texto { margin: 0 0 var(--sp-6); color: var(--suave); font-size: var(--fs-sm); line-height: 1.55; }
.cf-acoes { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.cf-acoes .btn { width: auto; margin: 0; }

/* ---------- T-6: TOAST — toda ação do usuário dá retorno visível ----------
   Canto inferior direito, empilha, some sozinho. Erro fica mais tempo na tela. */
#octo-toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 300;
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; }
.toast { position: relative; min-width: 240px; max-width: 380px;
  padding: var(--sp-3) calc(var(--sp-4) + 24px) var(--sp-3) var(--sp-4);
  border-radius: var(--raio-md); border: 1px solid var(--borda); background: var(--card);
  color: var(--texto); box-shadow: var(--sombra-lg); font-size: var(--fs-sm);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto; }
.toast-visivel { opacity: 1; transform: translateY(0); }
/* Botão "×" pra fechar manualmente: aviso com texto grande (ex.: instrução de
   DNS) precisa ficar tempo suficiente pra ler, então quem já leu tem que poder
   fechar na hora em vez de esperar o timer. O JS que CRIA o botão e calcula a
   duração vive em `window.aviso` (base.html). As duas metades foram escritas em
   dias diferentes — o CSS em 05/08/2026 (commit 2c20e74) e o JS só em 06/08 —
   e nesse meio-tempo a correção esteve pela metade no ar. Ao mexer numa, confira
   a outra. */
.toast-fechar { position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: inherit; opacity: .6; cursor: pointer;
  font-size: 16px; line-height: 1; border-radius: var(--raio-sm, 4px); pointer-events: auto; }
.toast-fechar:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.toast-fechar:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }
.toast-ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-tx); }
.toast-erro { background: var(--err-bg); border-color: var(--err-bd); color: var(--err-tx); }
.toast-info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-tx); }
/* ÂMBAR: o resultado que não é acerto nem erro ("não testado", "sem chave",
   "ainda rodando"). Faltava — o toast só tinha verde, vermelho e neutro, então
   todo resultado INDETERMINADO era espremido no verde e a tela dava um acerto
   que não houve. Chame com window.aviso(texto, "aviso"). */
.toast-aviso { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-tx); }
@media (max-width: 640px) {
  #octo-toasts { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); }
  .toast { max-width: none; }
}
/* Quem prefere menos movimento não recebe a animação (acessibilidade). */
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ==================== MENU DO USUÁRIO (DS-3 — padrão Google/Material) ====================
   Rodapé da sidebar: uma linha só (avatar + nome + chevron); clicar abre o menu
   flutuante pra cima com as ações pessoais (segurança, tema, valores, bloquear, sair). */
.user-menu { position: relative; margin-top: 4px; }
.user-chip {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 0; background: none; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.user-chip:hover { background: var(--card-2); }
.user-avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--ativo-bg); color: var(--polvo-escuro); border: 1px solid var(--borda);
  font-weight: 600; font-size: var(--fs-xs); display: grid; place-items: center;
  letter-spacing: .3px;
}
.user-nome {
  flex: 1; min-width: 0; text-align: left; font-size: .9rem; font-weight: 500;
  color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-chip .chev { flex: 0 0 12px; color: var(--suave); transition: transform .15s ease; }
.user-chip[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu-usuario {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 150;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg); padding: 6px;
}
.menu-usuario[hidden] { display: none; }
.menu-usuario form { margin: 0; }
.um-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; background: none; border-radius: var(--raio-md); cursor: pointer;
  color: var(--texto); font-size: var(--fs-sm); font-weight: 500; font-family: inherit;
  text-align: left; line-height: 1.3;
}
.um-item:hover { background: var(--card-2); text-decoration: none; }
.um-item .mi-ico { flex: 0 0 18px; color: var(--suave); }
.um-item:hover .mi-ico { color: var(--texto); }
.um-atalho { margin-left: auto; font-size: var(--fs-xs); color: var(--texto-3); font-family: inherit; }
.um-sep { height: 1px; background: var(--borda); margin: 6px 4px; }
.um-item.sair, .um-item.sair .mi-ico { color: var(--coral); }
.um-item.sair:hover { background: var(--err-bg); }
.um-item.sair:hover .mi-ico { color: var(--coral); }
/* F-6 UX: mesmo feedback de "ativo" do botão flutuante, aqui dentro do menu. */
.um-item.ativo, .um-item.ativo .mi-ico { background: var(--ativo-bg); color: var(--polvo-escuro); }
@media (min-width: 901px) {
  /* Modo trilho: só o avatar; o menu abre igual, ancorado à esquerda com largura fixa */
  html.sb-mini .user-chip { justify-content: center; padding: 7px 0; }
  html.sb-mini .user-nome, html.sb-mini .user-chip .chev { display: none; }
  html.sb-mini .menu-usuario { left: 6px; right: auto; width: 224px; }
  /* Os rótulos do menu do usuário não somem no trilho (a regra global esconde .mi-rotulo) */
  html.sb-mini .menu-usuario .mi-rotulo { display: inline; }
}

/* ==================== OCULTAR VALORES (F-6 — estilo banco) ====================
   Classe valores-ocultos no <html> (botão do rodapé da sidebar / localStorage).
   §16.3 reunião Thiago: o número SOME de verdade (vira ••••), NÃO borra — o Thiago
   apontou que blur "ofende" (parece falta de confiança). Bolinhas neutras alinhadas
   à direita, como um extrato de banco. Hover não revela (é pra quem passa do lado). */
html.valores-ocultos .kpi-numero,
html.valores-ocultos .num,
html.valores-ocultos .dinheiro {
  color: transparent !important; user-select: none; position: relative;
}
html.valores-ocultos .kpi-numero::after,
html.valores-ocultos .num::after,
html.valores-ocultos .dinheiro::after {
  content: "••••"; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); color: var(--suave);
  letter-spacing: .12em; font-size: .72em; pointer-events: none;
}

/* Paginação reutilizável (T-4) — usada pelo macro ui.paginacao em todas as listas */
.ui-paginacao { display:flex; gap:12px; align-items:center; justify-content:center;
  margin-top:16px; flex-wrap:wrap; font-size: var(--fs-sm); }
.ui-paginacao .ui-pag-info { color:var(--suave); font-variant-numeric:tabular-nums; }
.ui-paginacao .ui-pag-off { opacity:.4; pointer-events:none; }

/* ==================== FILTRO DE PERÍODO (widget único — ONDA 3 · 3.4) ========
   Era reimplementado em ~16 telas: cada uma com a sua classe (.vd-periodo,
   .fn-periodo, .mv-periodo, .an-periodo, .pnl-periodo, .rd-periodo, .vg-periodo,
   .vr-periodo, .mt-periodo, .da-periodo, .periodo…) e a MESMA regra copiada. Duas
   verdades sobre o mesmo widget é dívida garantida — aqui é a única. O markup vem
   do macro `ui.filtro_periodo` (_componentes.html), a lista de pílulas de
   `comum.PERIODOS_PADRAO` e a resolução de `comum.janela_periodo`. */
.ui-periodo { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2);
  flex-wrap: wrap; align-items: center; }
.ui-periodo a { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--borda);
  border-radius: 999px; font-size: var(--fs-xs); color: var(--texto);
  background: var(--card); }
.ui-periodo a:hover { text-decoration: none; border-color: var(--borda-forte); }
.ui-periodo a.ativo { background: var(--polvo); border-color: var(--polvo);
  color: var(--tinta); font-weight: 600; }
.ui-periodo-custom { display: flex; gap: var(--sp-2); align-items: center;
  flex-wrap: wrap; margin: 0 0 var(--sp-5); }
.ui-periodo-custom label { margin: 0; font-size: var(--fs-xs); color: var(--suave); }
.ui-periodo-custom input[type=date] { width: auto; }
.ui-periodo-custom.ativo input[type=date] { border-color: var(--polvo); }
.ui-periodo-limpar { font-size: var(--fs-xs); }
/* Selo curto de bloco que NÃO obedece ao filtro de período da tela (A13 da §7 da
   crítica da Fase C'): o aviso de tela inteira não serve quando 4 blocos de 7
   ignoram o filtro — cada bloco declara o seu, do lado do próprio título. */
.ui-periodo-selo { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--suave); border: 1px dashed var(--borda);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap; vertical-align: middle; }