/* ══════════════════════════════════════════════════════════════
   LEVEL HUB — Padrão visual único (identidade Level One)
   Todo módulo usa estes componentes; nenhuma tela cria estilo próprio.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Ponte para o tema oficial (levelone-theme.css, importado DEPOIS deste
     arquivo): os tokens antigos apontam para os --lo-* do kit, então
     botões/badges/flashes de todas as telas herdam a paleta oficial sem
     tocar em nenhum template. Fallback = valores antigos, caso o tema
     não carregue. */
  --primary:       var(--lo-blue-500, #0F91CF);
  --primary-dark:  var(--lo-blue-600, #0B7AB0);
  --primary-light: var(--lo-blue-100, #E3F4FD);
  --primary-xlt:   var(--lo-blue-50, #F0FAFF);
  --grafite:       var(--lo-gray-700, #434444);
  --dark:          var(--lo-gray-900, #2A2A2A);
  --dark2:         var(--lo-gray-800, #3D3D3D);
  --sidebar-bg:    #1C2B38; /* cabeçalho das tabelas — identidade do Hub, fora do kit */
  --sidebar-hover: #253647;
  --gray:          var(--lo-gray-500, #64748B);
  --gray-lt:       var(--lo-gray-400, #94A3B8);
  --border:        var(--lo-border, #E2E8F0);
  --bg:            var(--lo-canvas, #F2F6FA);
  --white:         #FFFFFF;
  --success:       var(--lo-success, #10B981);
  --warning:       var(--lo-warning, #F59E0B);
  --danger:        var(--lo-danger, #EF4444);
  --rail-w:        72px;   /* trocado para --barra-w-aberta quando a barra expande */
  --barra-w-aberta: 240px;
  --radius:        10px;
  --shadow:        0 1px 3px rgba(16, 42, 67, .08), 0 1px 2px rgba(16, 42, 67, .04);

  /* ── Escala de empilhamento (26/07/2026) ──────────────────────────────
     Antes existiam 7 valores dos quais só 3 funcionavam: .barra (fixed) e
     .topbar (sticky) criam contexto de empilhamento, então o z-index de
     qualquer filho só vale ENTRE IRMÃOS — o 90 do .fly e o 60 do dropdown
     eram letra morta contra o resto da página. Estes 4 tokens são a escala
     real; nada no projeto deve declarar z-index fora deles. Dentro de um
     contexto (filhos da barra, filhos da topbar) use 1, 2, 3 — números
     grandes ali dentro só enganam quem lê. */
  --z-topbar: 40;
  --z-barra:  55;
  --z-menu:   60;   /* dropdowns que nascem FORA de barra/topbar */
  --z-flash: 100;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--dark2);
  font-size: 14px;
  min-height: 100vh;
}

a { color: var(--primary-dark); text-decoration: none; }

/* ── Layout ── */
.layout { display: flex; min-height: 100vh; }
.conteudo {
  flex: 1;
  margin-left: var(--rail-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pagina { padding: 24px 28px; flex: 1; }

/* ══ Barra lateral ═════════════════════════════════════════════════════════
   Dois estados no MESMO markup (26/07/2026):
     recolhida  — 72px, só ícones, submenu em painel flutuante
     expandida  — 240px, nomes visíveis, submenu em sanfona DENTRO da barra
   O estado mora em body[data-barra] e a única coisa que muda de verdade é
   --rail-w; .conteudo já usa margin-left: var(--rail-w), então o corpo da
   página acompanha sozinho, sem nenhuma tela precisar saber disso.

   Motivo da sanfona: o painel flutuante do Financeiro tem 12 links (453px) e
   não cabia numa viewport de 640px — era cortado sem rolagem, e Reembolsos e
   Notas (que não têm ícone próprio) ficavam INALCANÇÁVEIS. */
.barra {
  width: var(--rail-w);
  background: var(--white);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  z-index: var(--z-barra);
  transition: width .18s ease;
}
body[data-barra="aberta"] { --rail-w: var(--barra-w-aberta); }
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }

/* Tela estreita (26/07/2026): a barra expandida NÃO empurra o conteúdo —
   240px numa tela de 375px deixariam 135px úteis e tudo estourava na
   horizontal. Aqui o conteúdo fica ancorado nos 72px e a barra aberta
   SOBREPÕE (ela já é fixed com z-index acima da página). */
@media (max-width: 900px) {
  body[data-barra="aberta"] { --rail-w: 72px; }
  body[data-barra="aberta"] .barra {
    width: var(--barra-w-aberta);
    box-shadow: 12px 0 34px rgba(16, 42, 67, .18);
  }
}

/* ── Topo: marca + botão de alternar ── */
.barra-topo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 8px 14px; flex-shrink: 0;
}
body[data-barra="aberta"] .barra-topo {
  flex-direction: row; align-items: center; gap: 8px; padding: 0 12px 16px;
}
.barra-marca { line-height: 0; display: block; }
.barra-marca .marca-icone { height: 32px; display: block; }
.barra-marca .marca-logo  { width: 150px; height: auto; display: none; }
body[data-barra="aberta"] .barra-marca .marca-icone { display: none; }
body[data-barra="aberta"] .barra-marca .marca-logo  { display: block; }

.barra-alternar {
  border: none; background: none; cursor: pointer; padding: 0;
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-lt); transition: all .15s;
}
.barra-alternar svg { width: 18px; height: 18px; }
.barra-alternar:hover { background: var(--bg); color: var(--dark2); }
body[data-barra="aberta"] .barra-alternar { margin-left: auto; }

/* ── Navegação ── */
.barra nav {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  width: 100%; padding: 0 8px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
body[data-barra="aberta"] .barra nav { align-items: stretch; padding: 0 10px; }

/* .ri é o ITEM. flex-shrink:0 é obrigatório: sem ele o nav (flex:1) espremia
   os ícones de 46px para 39px em 1366×768 e 35px em 1280×720 — o sistema
   tinha aparência diferente em cada máquina. */
.ri {
  position: relative;
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--gray-lt);
  text-decoration: none;
  transition: color .18s, background .18s;
}
.ri svg { width: 20px; height: 20px; flex-shrink: 0; }
.ri:hover { color: var(--dark2); background: var(--bg); }
/* Item ativo no padrão do kit (.lo-sidebar__item--active): azul-50 + azul-700 */
.ri.ativo { color: var(--lo-blue-700, var(--primary-dark)); background: var(--lo-blue-50, var(--primary-light)); }
.ri.ativo::before {
  content: ''; position: absolute; left: -13px; top: 50%;
  transform: translateY(-50%) skewX(-12deg);
  width: 3.5px; height: 22px; background: var(--primary); border-radius: 2px;
  box-shadow: 0 0 10px rgba(15,145,207,.5);
}
.ri.desabilitado { color: #C7D1DA; cursor: default; }
.ri-nome, .ri-seta { display: none; }

/* Alvo clicável dentro de um .ri que tem submenu (o .ri em si é <div>, porque
   não se aninha <a> dentro de <a>). Recolhido ele preenche os 46×46 inteiros. */
.ri-alvo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; min-width: 0;
  color: inherit; text-decoration: none;
}
body[data-barra="aberta"] .ri-alvo { justify-content: flex-start; height: auto; }

.barra nav .divisor-menu {
  width: 28px; height: 1px; background: var(--border);
  margin: 4px 0; flex-shrink: 0; align-self: center;
}
body[data-barra="aberta"] .barra nav .divisor-menu { width: 100%; margin: 6px 0; }

.ri .badge-num {
  position: absolute; top: 2px; right: 2px;
  background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ── Estado EXPANDIDO: item vira linha com nome ── */
body[data-barra="aberta"] .ri {
  width: 100%; height: auto; min-height: 38px;
  justify-content: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
}
body[data-barra="aberta"] .ri svg { width: 18px; height: 18px; }
body[data-barra="aberta"] .ri-nome {
  display: block; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-barra="aberta"] .ri.ativo { font-weight: 600; }
body[data-barra="aberta"] .ri.ativo::before { left: -10px; height: 19px; }
body[data-barra="aberta"] .ri .badge-num { position: static; margin-left: auto; }
body[data-barra="aberta"] .ri-seta {
  display: flex; align-items: center; margin-left: auto;
  color: var(--gray-lt); transition: transform .18s;
}
body[data-barra="aberta"] .ri-seta svg { width: 14px; height: 14px; }
body[data-barra="aberta"] .ri-grupo.aberto .ri-seta { transform: rotate(180deg); }
.ri-grupo { width: 46px; flex-shrink: 0; }
body[data-barra="aberta"] .ri-grupo { width: 100%; }

/* ── Dica (módulo sem submenu, só no estado recolhido) ── */
.ri .dica {
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--dark); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: all .15s; pointer-events: none;
  z-index: 3;
}
.ri:hover .dica, .ri:focus-visible .dica { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
body[data-barra="aberta"] .ri .dica { display: none; }

/* ── Submenu ────────────────────────────────────────────────────────────
   RECOLHIDA: painel flutuante à direita. É position:FIXED de propósito — o
   nav tem overflow para os ícones nunca espremerem, e overflow recorta filho
   absoluto: o painel abria e era decepado pelo próprio menu (bug de 26/07).
   Elemento fixed não é recortado por overflow de ancestral; a posição
   (top/left) é calculada pelo JS a cada hover, presa à viewport.

   TODAS as regras do modo flutuante são escopadas em
   body:not([data-barra="aberta"]) — sem isso a regra de :hover (3 classes)
   vencia o transform:none do modo expandido (2 classes + elemento) e
   empurrava a SANFONA meio painel para cima, embaralhando o menu inteiro
   (segundo bug de 26/07, o do print do Felipe). */
.ri-grupo { position: relative; }
body:not([data-barra="aberta"]) .submenu {
  position: fixed; left: calc(var(--rail-w) + 14px);
  transform: translateX(-8px);
  background: #fff; border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 20px 50px rgba(25,45,65,.16);
  padding: 8px; width: 236px;
  max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, transform .2s;
  z-index: var(--z-menu);
}
body:not([data-barra="aberta"]) .ri-grupo:hover .submenu,
body:not([data-barra="aberta"]) .ri-grupo:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateX(0);
}
/* ponte invisível: o mouse atravessa o vão de 14px sem fechar o painel */
body:not([data-barra="aberta"]) .submenu::before {
  content: ''; position: absolute; left: -18px; top: 0; bottom: 0; width: 18px;
}

/* EXPANDIDA: o mesmo elemento vira sanfona no fluxo, rola junto com o nav
   e nunca é cortado pela borda da tela. Nenhuma regra flutuante alcança este
   estado (todas escopadas acima), então aqui não há transform a anular. */
body[data-barra="aberta"] .submenu {
  position: static; transform: none !important;  /* cinto e suspensório: JS inline também não pode vazar */
  opacity: 1; visibility: visible;
  background: none; border: none; box-shadow: none; border-radius: 0;
  width: auto; max-height: none; overflow: visible;
  padding: 2px 0 4px;
  margin-left: 19px; padding-left: 12px; border-left: 1px solid var(--border);
}
body[data-barra="aberta"] .ri-grupo:not(.aberto) .submenu { display: none; }
body[data-barra="aberta"] .submenu .fly-titulo { display: none; }
body[data-barra="aberta"] .submenu .fly-titulo.subgrupo { display: block; padding: 8px 8px 4px; }

.fly-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gray-lt); padding: 8px 12px 6px;
}
.submenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--gray); font-size: 13px; font-weight: 500; transition: all .15s;
}
body[data-barra="aberta"] .submenu a { padding: 6px 8px; font-size: 12.5px; }
.submenu a:hover { color: var(--primary-dark); background: var(--primary-xlt); }
.submenu a.ativo { color: var(--primary-dark); background: var(--primary-xlt); font-weight: 600; }
.fly-fase {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9px;
  background: var(--bg); color: var(--gray-lt);
}

/* ── Rodapé: menu do usuário ── */
.barra-rodape { margin-top: auto; flex-shrink: 0; padding: 10px 8px 0; }
body[data-barra="aberta"] .barra-rodape { padding: 10px 10px 0; }
.barra-rodape .menu-usuario summary { justify-content: center; }
body[data-barra="aberta"] .barra-rodape .menu-usuario summary {
  justify-content: flex-start; padding: 6px 4px; border-radius: 8px;
}
body[data-barra="aberta"] .barra-rodape .menu-usuario summary:hover { background: var(--bg); }
.barra-rodape .usuario-texto { display: none; min-width: 0; }
body[data-barra="aberta"] .barra-rodape .usuario-texto { display: block; }
.barra-rodape .usuario-texto .nome,
.barra-rodape .usuario-texto .cargo {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
.barra-rodape .menu-dropdown { left: calc(100% + 8px); right: auto; top: auto; bottom: 0; }
body[data-barra="aberta"] .barra-rodape .menu-dropdown { left: 0; right: 0; bottom: calc(100% + 6px); }

/* ── Topbar ── */
.topbar {
  height: 64px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 28px;
  gap: 18px;
  position: sticky; top: 0; z-index: var(--z-topbar);
}
.topbar h1 { font-size: 17px; font-weight: 600; color: var(--dark); }
.topbar-direita { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.empresa-pill { position: relative; }
.empresa-pill summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg);
  font-weight: 600; font-size: 12.5px; color: var(--dark2);
  transition: all .18s;
}
.empresa-pill summary::-webkit-details-marker { display: none; }
.empresa-pill[open] summary, .empresa-pill summary:hover { border-color: var(--primary); color: var(--primary-dark); }
.empresa-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.empresa-pill .menu-dropdown { width: 250px; }
.empresa-pill .menu-dropdown button {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; border: none; background: none;
  font: inherit; font-size: 13px; color: var(--dark2); cursor: pointer;
}
.empresa-pill .menu-dropdown button:hover { background: var(--bg); }
.empresa-pill .menu-dropdown button.on { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; }
.empresa-pill .menu-dropdown .pin { width: 7px; height: 7px; border-radius: 50%; background: #C7D1DA; flex-shrink: 0; }
.empresa-pill .menu-dropdown button.on .pin { background: var(--primary); }

.menu-usuario { position: relative; }
.menu-usuario summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.menu-usuario .nome { font-size: 13px; font-weight: 600; color: var(--dark); }
.menu-usuario .cargo { font-size: 11px; color: var(--gray); }
.menu-dropdown {
  position: absolute; right: 0; top: 46px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 180px; padding: 6px; z-index: var(--z-menu);
}
.menu-dropdown a {
  display: block; padding: 9px 12px;
  font-size: 13px; color: var(--dark2); border-radius: 6px;
}
.menu-dropdown a:hover { background: var(--primary-xlt); }

/* Menu de ações "..." genérico (24/07/2026) — mesmo <details>/.menu-dropdown
   do topbar, só troca o gatilho (avatar/pill) por um botão "⋯". */
.menu-acoes { position: relative; }
.menu-acoes summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; line-height: 1;
  border: 1px solid var(--border); background: #fff;
  font-size: 20px; font-weight: 700; color: var(--dark2);
  transition: all .18s;
}
.menu-acoes summary::-webkit-details-marker { display: none; }
.menu-acoes[open] summary, .menu-acoes summary:hover { border-color: var(--primary); color: var(--primary-dark); }
.menu-acoes .menu-dropdown { right: 0; left: auto; min-width: 230px; }
.menu-dropdown form { margin: 0; }
.menu-dropdown button.item {
  width: 100%; text-align: left; display: block;
  padding: 9px 12px; border-radius: 6px; border: none; background: none;
  font: inherit; font-size: 13px; color: var(--dark2); cursor: pointer;
}
.menu-dropdown button.item:hover { background: var(--primary-xlt); }
.menu-dropdown button.item.perigo { color: var(--danger); }
.menu-dropdown button.item.perigo:hover { background: #FDEEEE; }

/* ── Hero do dashboard (assinatura visual: brilho azul + saudação) ── */
.hero-dashboard {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 28px; margin-bottom: 20px;
}
.hero-dashboard::before {
  content: ''; position: absolute; top: -100px; left: -40px;
  width: 420px; height: 260px;
  background: radial-gradient(ellipse, rgba(15,145,207,.14), transparent 65%);
  pointer-events: none;
}
.hero-dashboard::after {
  content: ''; position: absolute; top: -70px; right: 5%;
  width: 320px; height: 200px;
  background: radial-gradient(ellipse, rgba(11,197,234,.10), transparent 65%);
  pointer-events: none;
}
/* Eyebrow no padrão do kit (.lo-eyebrow): espaçamento .38em, azul 600 —
   eco do "C o n t a b i l i d a d e" da marca */
.hero-dashboard .eyebrow {
  position: relative; font-size: 11px; font-weight: 600;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--lo-blue-600, var(--primary));
  margin-bottom: 6px;
}
.hero-dashboard h2 { position: relative; font-size: 24px; font-weight: 700; color: var(--dark); }
.hero-dashboard p { position: relative; color: var(--gray); margin-top: 5px; font-size: 13.5px; }

/* ── Cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
/* Rótulo e número de KPI no padrão do kit (.lo-kpi-label / .lo-kpi-num) */
.card .rotulo { font-size: 10px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: .14em; }
.card .valor {
  font-family: var(--lo-font-display, 'Sora', sans-serif);
  font-size: 26px; font-weight: 800; color: var(--dark); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.card .nota { font-size: 11.5px; color: var(--gray-lt); margin-top: 4px; }
.card.futuro { opacity: .55; background: repeating-linear-gradient(45deg, #fff, #fff 12px, #FAFCFE 12px, #FAFCFE 24px); }
.card.destaque { border-left: 4px solid var(--primary); }

/* Cartões de comparativo (planos, simulação) — mais largos que os .cards de
   KPI acima, um por item, lado a lado (27/07/2026, Felipe: "como no 4C"). */
.cards-comparativo { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; align-items: stretch; }
/* Variante pros cards de faixas de tributação (12/08/2026) — cada card tem
   uma tabela de 4 colunas (De/Até/Valor/×) dentro, precisa de mais largura
   que os cards de plano pra não estourar. Modificador à parte (não mexe no
   .cards-comparativo base, que a aba Planos também usa) + padding mais
   enxuto na tabela só aqui, e a tabela ganha .tabela-envelope (rolagem
   horizontal própria) como cinto de segurança: se a coluna ainda ficar
   apertada numa tela estreita, a tabela rola DENTRO do próprio card em vez
   de vazar pro card vizinho (bug real, 12/08/2026 — "tela ficou toda
   desconfigurada": sem o overflow, a tabela mais larga que o card
   atravessava por cima do próximo, virando uma faixa contínua). Causa raiz
   de fundo do estouro: <input> dentro de <td> não tem largura própria em
   lugar nenhum do CSS — sem isso ele usa o tamanho padrão do navegador
   (~180px, herdado do atributo size=20 implícito), e 4 colunas assim somam
   bem mais que a largura do card. A largura 100% do input em si agora vem
   de ".tbl td.num input" (ver bloco de alinhamento de tabela, mais abaixo)
   — aqui só o resto do ajuste de espaço, restrito a este card. */
.cards-comparativo--faixas { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.cards-comparativo--faixas .tbl th, .cards-comparativo--faixas .tbl td { padding: 7px 8px; }
.plano-card { display: flex; flex-direction: column; }
.plano-card--inativo { opacity: .65; }
.plano-card-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.plano-card-cabecalho h3 { font-size: 15px; font-weight: 700; color: var(--dark); margin: 0; }
.plano-card-valor {
  font-family: var(--lo-font-display, 'Sora', sans-serif);
  font-size: 24px; font-weight: 800; color: var(--dark);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.plano-card-valor small { font-size: 12px; font-weight: 500; color: var(--gray); }
.plano-card-secao { margin-bottom: 14px; }
.plano-card-secao:last-of-type { margin-bottom: 0; }
.plano-card-rotulo {
  display: block; font-size: 10px; font-weight: 600; color: var(--gray);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px;
}
.plano-card-secao ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--gray-lt); }
.plano-card-secao ul li + li { margin-top: 2px; }
.plano-card-rodape { margin-top: auto; padding-top: 14px; }
.plano-card-rodape .btn { width: 100%; }

.painel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-top: 18px;
}
.painel h2 { font-size: 15px; font-weight: 600; color: var(--dark); margin-bottom: 14px; }

/* Painel de formulário: largura travada no CSS (26/07/2026). Antes cada tela
   punha o seu `style="max-width:..."` no template e o projeto acabou com SETE
   larguras diferentes (480/520/560/640/760/820 e telas sem nenhuma). Sem limite,
   a grade de 12 colunas se estica: num monitor de 1600px um .campo--3 vira 343px
   em vez dos 180px para os quais foi desenhado — o "esparramado". */
.painel--form   { max-width: 820px; }
.painel--estreito { max-width: 560px; }   /* cadastros de 1 a 4 campos */

/* ── Botões ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 8px;
  background: var(--primary); color: #fff;
  transition: background .15s;
}
.btn:hover { background: var(--primary-dark); }
.btn.secundario { background: var(--white); color: var(--dark2); border: 1px solid var(--border); }
.btn.secundario:hover { background: var(--bg); }
.btn.perigo { background: #FEF2F2; color: var(--danger); border: 1px solid #FECACA; }
.btn.perigo:hover { background: #FEE2E2; }
.btn.pequeno { padding: 5px 11px; font-size: 12px; }

/* ── Formulários ── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
/* min-width:0 é obrigatório (26/07/2026): sem ele, um <select> com opção
   comprida trava a largura mínima da coluna do grid e a página inteira
   estoura na horizontal no celular — o grid nunca encolhe um item abaixo
   do min-content dele por padrão. */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Rótulo de até 2 linhas reserva sempre a mesma altura (01/08/2026) — sem
   isso, um campo com rótulo comprido ("Quantidade de contas financeiras
   (bancos/cartões)?") empurra só o PRÓPRIO input pra baixo, e ele desalinha
   dos campos vizinhos na mesma linha do grid que têm rótulo de 1 linha só.
   Só no .form-grid (legado, várias telas com pergunta longa) — o .form-grade
   novo desenha a linha campo a campo, então não sofre desse problema. */
.form-grid .campo label { min-height: 2.4em; line-height: 1.2; }
.campo input, .campo select, .campo textarea { width: 100%; min-width: 0; }
.campo label { font-size: 12px; font-weight: 600; color: var(--gray); }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; background: #fff; color: var(--dark);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--primary-light); border-color: var(--primary);
}
.campo textarea { resize: vertical; line-height: 1.5; min-height: 62px; }
/* Campo de data IGUAL a qualquer outro input (pedido do Felipe, 26/07/2026):
   sem variante numérica especial, e o miolo interno que o Chrome renderiza
   (dd/mm/aaaa) herda explicitamente a mesma fonte do formulário. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: inherit; font-size: inherit; color: inherit;
}
.campo-linha { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
/* flex-wrap: no estreito os botões quebram linha em vez de estourar a página */
.acoes-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ── Formulários v2 — grade fixa de 12 colunas (skill level-one-ui) ──
   Cada linha é DESENHADA: os spans somam até 12 (ex.: CEP 3 + Endereço 6 +
   Número 3). Sem modificador, o campo ocupa a linha inteira. A .form-grid
   antiga (auto-fit) permanece para as telas ainda não migradas. */
.form-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 18px; align-items: start; }
.form-grade .campo { grid-column: span 12; }
.form-grade .campo--2 { grid-column: span 2; }
.form-grade .campo--3 { grid-column: span 3; }
.form-grade .campo--4 { grid-column: span 4; }
.form-grade .campo--5 { grid-column: span 5; }
.form-grade .campo--6 { grid-column: span 6; }
.form-grade .campo--8 { grid-column: span 8; }
.form-grade .campo--9 { grid-column: span 9; }

.form-secao {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray-lt); margin: 22px 0 10px;
}
.form-secao:first-of-type, .aba-painel .form-secao:first-child { margin-top: 4px; }

.campo-ajuda { font-size: 11.5px; color: var(--gray-lt); line-height: 1.4; }

/* Título que também é campo editável (01/08/2026) — parece texto normal
   até passar o mouse/focar, aí revela a borda. Evita duplicar "nome"
   como título fixo + campo de edição separado logo abaixo. */
.titulo-editavel {
  display: block; width: 100%; font-family: var(--lo-font-display, 'Sora', sans-serif);
  font-size: 16px; font-weight: 700; color: var(--dark);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 3px 7px; margin: -3px -7px 10px;
}
.titulo-editavel:hover { border-color: var(--border); }
.titulo-editavel:focus { outline: 2px solid var(--primary-light); border-color: var(--primary); background: #fff; }

.campo-com-botao { display: flex; gap: 8px; align-items: stretch; }
.campo-com-botao input { flex: 1; min-width: 0; }
.campo-com-botao .btn { flex-shrink: 0; white-space: nowrap; }

.campo-check label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--dark); cursor: pointer;
}
.campo-check input[type="checkbox"] { width: auto; }
.campo-check--alinhado { align-self: center; }

/* Caixa de seleção por radio (tipo segmented control) — 28/07/2026 */
.grupo-opcoes {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.grupo-opcoes label {
  flex: 1; min-width: 140px; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--dark);
  cursor: pointer; border-right: 1px solid var(--border);
  transition: background .12s;
}
.grupo-opcoes label:last-child { border-right: none; }
.grupo-opcoes label:hover { background: var(--canvas); }
.grupo-opcoes input[type="radio"] { width: auto; accent-color: var(--primary); }
.grupo-opcoes label:has(input:checked) {
  background: #EBF5FC; color: var(--primary); font-weight: 600;
}

/* Busca com sugestões (27/07/2026, autocomplete de CNAE/tributação de
   Fortaleza em Serviços) — visual emprestado do .submenu (mesmo cartão
   flutuante branco, mesma sombra), reaproveitável em qualquer campo de
   busca-e-preenche futuro. `.campo-com-lista` só existe pra dar
   position:relative ao redor do input; a lista se posiciona por conta
   própria, sem depender de nenhum layout de grade em volta. */
.campo-com-lista { position: relative; }
.autocomplete-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(25,45,65,.14);
  max-height: 280px; overflow-y: auto; z-index: var(--z-menu);
}
.autocomplete-lista button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; font-size: 13.5px; color: var(--dark); cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.autocomplete-lista button:last-child { border-bottom: none; }
.autocomplete-lista button:hover { background: var(--primary-xlt); }
.autocomplete-lista button small {
  display: block; font-size: 11.5px; color: var(--gray-lt); font-weight: 400; margin-top: 2px;
}
.autocomplete-lista .vazio { padding: 10px 12px; font-size: 13px; color: var(--gray-lt); }

.form-grade + .acoes-form, .acoes-form.rodape {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* Blocos repetidos (ex.: aba Sócios do cadastro de empresa) — cada bloco
   é uma .form-grade; o divisor separa um sócio do outro. */
.bloco-repetido { padding: 16px 0; border-bottom: 1px solid var(--border); }
.bloco-repetido:first-child { padding-top: 4px; }
.bloco-repetido:last-child { border-bottom: none; padding-bottom: 4px; }

/* ── Formulário + resumo lateral (26/07/2026) ─────────────────────────────
   Layout aprovado pelo Felipe para telas onde o que vai ACONTECER ao salvar
   não é óbvio olhando os campos (abrir OS, faturar, renegociar). O resumo usa
   o espaço que sobra no monitor largo com informação, em vez de esticar campo.
   O painel do formulário NÃO leva .painel--form aqui — quem limita a largura
   é a coluna da grade. */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
  max-width: 1180px;
}
/* .painel traz margin-top:18px; dentro da grade quem espaça é o gap, senão
   as duas colunas começam desalinhadas. */
.form-layout > .painel { margin-top: 0; }
.form-resumo { position: sticky; top: 82px; }   /* topbar 64 + respiro 18 */
.form-resumo .resumo-titulo {
  font-family: var(--lo-font-display, 'Sora', sans-serif);
  font-size: 14px; font-weight: 600; color: var(--dark);
  line-height: 1.35; margin-top: 10px;
}
.form-resumo .rotulo {
  font-size: 10px; font-weight: 600; color: var(--gray);
  text-transform: uppercase; letter-spacing: .12em;
}
.form-resumo .valor {
  font-family: var(--lo-font-display, 'Sora', sans-serif);
  font-size: 24px; font-weight: 800; color: var(--dark);
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.form-resumo .linha {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 4px 0;
}
.form-resumo .linha span:first-child { color: var(--gray); }
.form-resumo .linha span:last-child { color: var(--dark); font-weight: 500; text-align: right; }
.form-resumo hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* Aviso curto dentro do resumo — mesma paleta semântica dos badges */
.nota-resumo { border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.nota-resumo.info { background: var(--primary-light); color: var(--primary-dark); }
.nota-resumo.warn { background: var(--lo-warning-bg, #FEF3C7); color: var(--lo-warning-text, #B45309); }

/* Abaixo de 1100px o resumo não cabe ao lado sem espremer o formulário:
   vira um bloco normal ANTES do form (o usuário lê o contexto e desce). */
@media (max-width: 1100px) {
  .form-layout { grid-template-columns: 1fr; }
  .form-resumo { position: static; order: -1; }
}

@media (max-width: 720px) {
  .form-grade { grid-template-columns: 1fr; }
  .form-grade .campo, .form-grade [class*="campo--"] { grid-column: 1 / -1; }

  /* Grade LEGADA no estreito (26/07/2026): telas antigas têm
     style="grid-column: span 2" inline, que força 2 colunas de 240px num
     celular de 375px e estoura a página na horizontal. O !important é
     deliberado — é o único jeito de vencer style= inline, e morre junto
     com a .form-grid quando a Onda 3 remover o legado. */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .campo { grid-column: 1 / -1 !important; }
}

/* ── Tabela padrão (cabeçalho congelado + filtros) ── */
.tabela-envelope { overflow: auto; max-height: calc(100vh - 240px); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--sidebar-bg); color: #fff;
  font-size: 12px; font-weight: 600; text-align: left;
  padding: 10px 12px; white-space: nowrap;
}
.tbl thead tr.filtros th { top: 37px; background: var(--primary-xlt); padding: 6px 8px; }
.tbl thead tr.filtros input, .tbl thead tr.filtros select {
  width: 100%; font-size: 12px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px;
}
.tbl tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); background: #fff; }
.tbl tbody tr:nth-child(even) td { background: #F8FAFC; }
.tbl tbody tr:hover td { background: var(--primary-xlt); }

/* Alinhamento por significado da coluna (12/08/2026, Felipe: "números não
   estão alinhados a direita e sem formatação") — aplicar a MESMA classe no
   th e no td (nunca por posição: td:nth-child quebra assim que a ordem das
   colunas muda). .num também formata o <input> de dentro: campo de tabela
   não herda font-family/font-variant-numeric do <table> sozinho (form
   controls não herdam fonte do body por padrão em nenhum navegador — só
   texto puro em <td> herda), por isso os valores digitados apareciam
   desalinhados mesmo a tabela já tendo tabular-nums geral
   (levelone-theme.css).
   Fonte: Inter (a de corpo), NÃO a mono — 13/08/2026, Felipe reprovou a
   JetBrains Mono nos campos ("continua com a formatação diferente"): o
   Hub inteiro mostra números de tabela em Inter, então mono aqui destoava
   de todas as outras telas. Inter tem tabular-nums, alinha igual. */
.tbl th.txt, .tbl td.txt { text-align: left; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl th.centro, .tbl td.centro { text-align: center; }
.tbl td.num input, .tbl td.num select {
  width: 100%; min-width: 0; box-sizing: border-box; text-align: right;
  font-family: var(--lo-font-body, 'Inter', sans-serif);
  font-variant-numeric: tabular-nums;
}

/* ── Badges ── */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.badge.azul     { background: var(--primary-light); color: var(--primary-dark); }
.badge.verde    { background: var(--lo-success-bg, #D1FAE5); color: var(--lo-success-text, #047857); }
.badge.amarelo  { background: var(--lo-warning-bg, #FEF3C7); color: var(--lo-warning-text, #B45309); }
.badge.vermelho { background: var(--lo-danger-bg, #FEE2E2); color: var(--lo-danger-text, #B91C1C); }
.badge.cinza    { background: #F1F5F9; color: var(--gray); }
.badge.roxo     { background: #EDE9FE; color: #6D28D9; }

/* ── Faixa de resumo colorida (Contas a Receber/Pagar, ref. Conexa) ── */
.resumo-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.rf-bloco { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 10px; }
.rf-label { font-size: 12px; font-weight: 600; }
.rf-valor { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.rf-n { font-size: 11.5px; opacity: 0.85; }
.rf-bloco.ok      { background: var(--lo-success-bg, #D1FAE5); color: var(--lo-success-text, #047857); }
.rf-bloco.warn    { background: var(--lo-warning-bg, #FEF3C7); color: var(--lo-warning-text, #B45309); }
.rf-bloco.bad     { background: var(--lo-danger-bg, #FEE2E2); color: var(--lo-danger-text, #B91C1C); }
.rf-bloco.info    { background: var(--primary-light); color: var(--primary-dark); }
.rf-bloco.neutral { background: #F1F5F9; color: var(--gray); }

/* ── Flash ─────────────────────────────────────────────────────────────────
   Ficava em `top:70px` — 23px em cima da ação primária do .cabecalho-pagina
   (que começa em y=88px) e SEM pointer-events:none, ou seja, engolia o clique
   no botão por 6 segundos logo depois do POST, que é justo quando o usuário
   quer clicar de novo. Foi para o rodapé à direita, onde não há nada, e o
   contêiner deixou de capturar ponteiro. */
.flashes {
  position: fixed; bottom: 24px; right: 24px; z-index: var(--z-flash);
  display: flex; flex-direction: column-reverse; gap: 8px; max-width: 420px;
  pointer-events: none;
}
.flash {
  position: relative;
  background: #fff; border-radius: var(--radius); box-shadow: 0 4px 16px rgba(16,42,67,.14);
  padding: 12px 38px 12px 16px; font-size: 13px; font-weight: 500;
  border-left: 4px solid var(--primary);
  animation: flash-entra .25s ease;
  pointer-events: auto;
}
.flash.success { border-left-color: var(--success); }
.flash.warning { border-left-color: var(--warning); }
.flash.danger  { border-left-color: var(--danger); }
.flash-fechar {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border: none; background: none; cursor: pointer;
  border-radius: 6px; color: var(--gray-lt); line-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.flash-fechar svg { width: 14px; height: 14px; }
.flash-fechar:hover { background: var(--bg); color: var(--dark2); }
@keyframes flash-entra { from { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* ── Tela de login ── */
.tela-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--sidebar-bg) 0%, #14374E 55%, var(--primary-dark) 130%);
}
.caixa-login {
  background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.30);
  width: 380px; max-width: 92vw; padding: 38px 36px;
}
.caixa-login .marca { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.caixa-login .marca img { height: 44px; }
.caixa-login .marca .texto { font-size: 22px; font-weight: 700; color: var(--dark); letter-spacing: .5px; }
.caixa-login .marca .texto span { color: var(--primary); }
.caixa-login .subtitulo { text-align: center; color: var(--gray); font-size: 12.5px; margin: 4px 0 26px; }
.caixa-login .campo { margin-bottom: 14px; }
.caixa-login .btn { width: 100%; justify-content: center; padding: 11px; font-size: 14px; margin-top: 6px; }
.caixa-login .flash { position: static; margin-bottom: 14px; border: 1px solid var(--border); border-left-width: 4px; box-shadow: none; }

/* ── Kanban (CRM) ── */
.kanban {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: start;
}
.kanban-coluna {
  background: #ECF1F6;
  border-radius: var(--radius);
  padding: 10px;
  min-height: 120px;
}
.kanban-coluna.arrastando-sobre { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-xlt); }
.kanban-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray); padding: 2px 4px 10px;
}
.kanban-qtd {
  background: #fff; border: 1px solid var(--border);
  font-size: 11px; padding: 1px 8px; border-radius: 10px; color: var(--gray);
}
.kanban-final .kanban-cabecalho { color: var(--gray-lt); }
.kanban-cartoes { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kanban-cartao {
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  padding: 11px 12px; cursor: grab; box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s;
}
.kanban-cartao:active { cursor: grabbing; }
.kanban-cartao.arrastando { opacity: .45; }
.kanban-cartao:hover { box-shadow: 0 6px 18px rgba(16,42,67,.13); transform: translateY(-1px); }
.kanban-cartao a { font-weight: 600; font-size: 13px; color: var(--dark); }
.kanban-cartao a:hover { color: var(--primary-dark); }
.kanban-meta { font-size: 11.5px; color: var(--gray); margin-top: 4px; }
.kanban-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.kanban-resp {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1200px) { .kanban { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .kanban { grid-template-columns: 1fr; } }

/* ── Itens de contrato (aba Serviços) ── */
/* Tabela larga rola no próprio contêiner — a página nunca rola na horizontal */
.tabela-rolavel { overflow-x: auto; }
.itens-contrato .col-servico { width: 40%; }

/* Entregáveis do plano escolhido (leitura) */
.lista-entregaveis { margin: 2px 0 0 18px; font-size: 12.5px; color: var(--gray); line-height: 1.7; }

/* Inputs DENTRO das tabelas de itens (contrato e proposta) no mesmo visual
   dos campos normais — apareciam crus, com o estilo default do navegador. */
.itens-contrato input, .itens-contrato select,
.itens-proposta input, .itens-proposta select {
  width: 100%; min-width: 0; font-family: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 7px;
  padding: 7px 9px; background: #fff; color: var(--dark);
}
.itens-contrato input:focus, .itens-contrato select:focus,
.itens-proposta input:focus, .itens-proposta select:focus {
  outline: 2px solid var(--primary-light); border-color: var(--primary);
}
.itens-contrato td { padding: 6px 8px; }
.rodape-itens {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
/* Soma ao vivo do contrato — número no padrão de KPI (Sora + tabulares) */
.total-itens { font-size: 13px; color: var(--gray); }
.total-itens strong {
  font-family: var(--lo-font-display, 'Sora', sans-serif);
  font-size: 16px; font-weight: 700; color: var(--dark);
  font-variant-numeric: tabular-nums; margin-left: 4px;
}

/* ── Itens de proposta ── (estilo dos inputs unificado acima, 27/07/2026) */
.itens-proposta td { padding: 6px 8px; }
.itens-proposta thead th { position: static; }
.itens-contrato thead th { position: static; }

/* ── Diversos ── */
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.cabecalho-pagina h2 { font-size: 18px; font-weight: 700; color: var(--dark); }
.texto-suave { color: var(--gray); font-size: 12.5px; }
/* Texto de textarea exibido em modo leitura: preserva as quebras de linha
   que o usuário digitou, sem virar <pre> (que quebraria a fonte e o wrap). */
.texto-multilinha { white-space: pre-line; font-size: 13.5px; line-height: 1.6; color: var(--dark2); }
.vazio { text-align: center; color: var(--gray-lt); padding: 40px 0; font-size: 13.5px; }
.qr-mfa { display: flex; justify-content: center; margin: 18px 0; }
.qr-mfa svg { width: 200px; height: 200px; }
.paginacao { display: flex; gap: 6px; margin-top: 14px; align-items: center; font-size: 13px; }
.paginacao a, .paginacao span.atual { padding: 6px 11px; border-radius: 6px; border: 1px solid var(--border); background: #fff; }
.paginacao span.atual { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.tabela-permissoes td, .tabela-permissoes th { text-align: center; }
.tabela-permissoes td:first-child, .tabela-permissoes th:first-child { text-align: left; }

/* ── Abas (formulário de item do catálogo de Serviços) ── */
/* flex-wrap: no celular as abas quebram linha em vez de estourar a página */
.abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.aba-botao {
  background: none; border: none; padding: 10px 16px; font-size: 13.5px;
  font-weight: 600; color: var(--gray); cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aba-botao.ativa { color: var(--primary); border-bottom-color: var(--primary); }

/* .oculta virou classe GERAL em 26/07/2026 (antes só valia em .aba-painel).
   É o substituto de todo `style="display:none"` de template e de todo
   `.style.display = "none"` de JS — o design system não admite layout inline. */
.oculta { display: none !important; }