@charset "UTF-8";
:root {
  /* Brand Colors */
  --brand-primary: #002B49;
  --brand-secondary: #1cabeb;
  --brand-accent: #F37021;
  --brand-alt-1: #0c4474;
  --brand-alt-2: #0c4c7c;
  /* Neutrals & Semantic Colors */
  --bg-body: #f1f5f9;
  --bg-dark: #002B49;
  --bg-nav-top: #002B49;
  --bg-nav-bottom: #001a33;
  --text-main: #1e293b;
  --text-light: #f8fafc;
  --text-muted: #64748b;
  --border-color: rgba(0, 0, 0, 0.08);
  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.5, 0, 0, 1);
  --transition-fast: all 0.2s ease;
  /* Shadows */
  --shadow-premium: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  /* === Sidebar (ACS-style menu — Fase 1) ============================ */
  /* Larguras + header altura. Promovidos a token pra modo collapsed
     Modo collapsed/icon-only foi removido em style v1.0.25 — sidebar fixa.
     Alinhados com o legado: 260px expandido / 70px header. */
  --sidebar-w: 320px;
  --sidebar-header-h: 70px;
  /* Cores específicas do menu (separadas das brand-* pra permitir variação
     visual sem mexer em paleta global). Link inativo em slate-300; link
     hover branco puro. */
  --sidebar-link-text: #cbd5e1;
  --sidebar-link-text-hover: #ffffff;
  /* Sinais semânticos pro .menu-badge (counter pill). Valores tailwindish neutros. */
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-success: #10b981;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

.text-navy {
  color: var(--brand-primary) !important;
}

.bg-navy {
  background-color: var(--brand-primary) !important;
}

.d-none {
  display: none !important;
}

.hover-underline:hover {
  text-decoration: underline !important;
}

@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
}
@media (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }
}
.text-purple {
  color: #6f42c1 !important;
}

.text-orange {
  color: #f37021 !important;
}

.border-purple {
  border-color: rgba(111, 66, 193, 0.3) !important;
}

.border-orange {
  border-color: rgba(243, 112, 33, 0.3) !important;
}

.bg-purple {
  background-color: #6f42c1 !important;
}

.bg-orange {
  background-color: #f37021 !important;
}

.bg-indigo {
  background-color: #6610f2 !important;
  color: #fff !important;
}

/* === Utilitários globais — Bloco B v1.0.2 === */
.pointer {
  cursor: pointer;
}

.transition-all {
  transition: all 0.2s ease;
}

/* === Utilitários globais — Bloco C v1.0.3 === */
.shadow-xs {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.maxw-200 {
  max-width: 200px;
}

.maxw-320 {
  max-width: 320px;
}

.minh-300 {
  min-height: 300px;
}

/* Variantes finas da .progress Bootstrap (override por specificity igual + ordem) */
.progress-h-6 {
  height: 6px;
}

.progress-h-8 {
  height: 8px;
}

/* === Utilitários globais — Bloco D1 v1.0.4 === */
/* Cores de ação (botões-ícone em tabelas admin: editar/reset/excluir/etc.) */
.text-sky {
  color: #0ea5e9;
}

.text-red {
  color: #ef4444;
}

.maxw-600 {
  max-width: 600px;
}

/* === Utilitários globais — Bloco D2 v1.0.5 === */
/* Larguras fixas em pixels (prefixo `w-px-` evita conflito com Bootstrap `.w-N` percent) */
.w-px-40 {
  width: 40px;
}

.w-px-80 {
  width: 80px;
}

.w-px-90 {
  width: 90px;
}

.w-px-100 {
  width: 100px;
}

.w-px-120 {
  width: 120px;
}

.w-px-140 {
  width: 140px;
}

.w-px-150 {
  width: 150px;
}

.w-px-180 {
  width: 180px;
}

.w-px-250 {
  width: 250px;
}

.maxw-120 {
  max-width: 120px;
}

/* Font-sizes pequenos não cobertos por Bootstrap (.fs-1..6 são headings) */
.fs-tiny {
  font-size: 0.5rem;
}

.fs-10 {
  font-size: 10px;
}

.fs-11 {
  font-size: 11px;
}

.fs-13 {
  font-size: 13px;
}

.fs-70 {
  font-size: 0.7rem;
}

.fs-75 {
  font-size: 0.75rem;
}

/* === Utilitários globais — Bloco E2 v1.0.7 === */
/* Variante 4px da .progress (estende a série progress-h-6/8). Usado em mini progress
   bars de itens contratuais (admin/contratos/edit). */
.progress-h-4 {
  height: 4px;
}

/* Font-sizes em pixels muito pequenos (ícone-dot 6px e label de role 9px em
   admin/contratos/edit). */
.fs-6px {
  font-size: 6px;
}

.fs-9 {
  font-size: 9px;
}

/* === Utilitários globais — Bloco E3 v1.0.8 === */
/* Cor indigo (theme semântico para "pending_approval" — promovido do <style>
   page-scoped de admin/tickets/show.php). Mesmo pattern de .text-orange/.text-purple. */
.text-indigo {
  color: #6610f2 !important;
}

/* Font-weight 500 (Bootstrap só tem 400/700). Promovido do <style> de
   admin/tickets/index.php — usado em 5+ arquivos de views. */
.fw-500 {
  font-weight: 500;
}

/* Max-widths complementares (180 para subtítulos truncados em tabelas, 400 para
   conteúdo de respostas rápidas). */
.maxw-180 {
  max-width: 180px;
}

.maxw-400 {
  max-width: 400px;
}

/* Avatares e ícones quadrados — width = height. Padrão `.sq-N` evita conflito
   com Bootstrap (.size-* não existe). Usado em rounded-circle avatars de tabela
   (24/40/45) e icon containers (32/40). */
.sq-24 {
  width: 24px;
  height: 24px;
}

.sq-32 {
  width: 32px;
  height: 32px;
}

.sq-40 {
  width: 40px;
  height: 40px;
}

.sq-45 {
  width: 45px;
  height: 45px;
}

/* === Utilitários globais — Bloco F1 v1.0.9 === */
/* Pixel widths complementares (estende w-px-* da série D2). */
.w-px-200 {
  width: 200px;
}

/* Square sizes complementares (estende sq-* de E3). */
.sq-48 {
  width: 48px;
  height: 48px;
}

.sq-60 {
  width: 60px;
  height: 60px;
}

/* Max-widths complementares (estende maxw-* dos blocos anteriores). */
.maxw-150 {
  max-width: 150px;
}

.maxw-300 {
  max-width: 300px;
}

.maxw-450 {
  max-width: 450px;
}

/* Max/min-heights (Bootstrap não cobre). */
.maxh-80 {
  max-height: 80px;
}

.maxh-900 {
  max-height: 900px;
}

.minh-200 {
  min-height: 200px;
}

/* === Utilitários globais — Bloco F2 v1.0.10 === */
.maxw-280 {
  max-width: 280px;
}

/* Font-size 0.6rem (~9.6px) — ainda menor que `.fs-9`. Usado em badges
   IPv4/IPv6 nas tabelas de recursos ISP. */
.fs-60 {
  font-size: 0.6rem;
}

/* z-index 10 — para empilhar dropdowns de ações sobre rows da tabela. */
.z-10 {
  z-index: 10;
}

/* === Utilitários globais — Bloco F3 v1.0.11 === */
/* Font-sizes em pixels (estende fs-9/10/11/13/etc). */
.fs-8 {
  font-size: 8px;
}

.fs-12 {
  font-size: 12px;
}

.fs-48px {
  font-size: 48px;
}

/* Pixel widths complementares (estende w-px-* da série D2/F1). */
.w-px-60 {
  width: 60px;
}

/* Square sizes complementares (estende sq-* dos blocos E3/F1/F2). */
.sq-38 {
  width: 38px;
  height: 38px;
}

/* Variante 10px da .progress (estende progress-h-4/6/8 das séries C/E2). */
.progress-h-10 {
  height: 10px;
}

/* Sticky-top com offset 100px (Bootstrap só tem `.sticky-top` sem offset). Usado em
   sidebars de formulários (stakeholders/suppliers create/edit) para fixar o card de
   ações no topo durante scroll do form longo. */
.sticky-top-100 {
  top: 100px;
}

/* === Utilitários globais — Bloco F4 v1.0.12 === */
/* Font-sizes em pixels (estende fs-* de F3). */
.fs-14 {
  font-size: 14px;
}

/* Square sizes complementares (estende sq-* de F1/F2/F3). */
.sq-35 {
  width: 35px;
  height: 35px;
}

.sq-100 {
  width: 100px;
  height: 100px;
}

/* Max-widths complementares (estende maxw-* dos blocos anteriores). */
.maxw-70pct {
  max-width: 70%;
}

.maxw-800 {
  max-width: 800px;
}

.maxw-900 {
  max-width: 900px;
}

.maxw-1200 {
  max-width: 1200px;
}

/* Min-heights complementares. */
.minh-500 {
  min-height: 500px;
}

.minh-800 {
  min-height: 800px;
}

/* Scroll wrappers verticais (estende .scroll-y-280 de F3). */
.scroll-y-150 {
  max-height: 150px;
  overflow-y: auto;
}

.scroll-y-400 {
  max-height: 400px;
  overflow-y: auto;
}

/* Line-heights numbered (Bootstrap só tem .lh-1, .lh-sm, .lh-base, .lh-lg). */
.lh-160 {
  line-height: 1.6;
}

.lh-180 {
  line-height: 1.8;
}

/* Letter-spacing 1px (Bootstrap não cobre — usado em códigos em badges). */
.ls-1px {
  letter-spacing: 1px;
}

/* z-index 1060 — para modais empilhados sobre outros modais (Bootstrap padrão).
   Estende a série z-* (.z-10 de F2 + Bootstrap .z-1..3). */
.z-1060 {
  z-index: 1060;
}

/* Border-radius 12px (entre Bootstrap .rounded-3 = 8px e .rounded-15 = 15px). */
.rounded-12px {
  border-radius: 12px;
}

/* Border-radius 10px — promovido pra global (Bloco F4 cleanup, 76 usos órfãos
   detectados no audit pós-Bloco F). Caía pro default Bootstrap 6px. */
.rounded-10 {
  border-radius: 10px;
}

/* Font-family utilities (Bootstrap só tem .font-monospace). */
.font-family-sans {
  font-family: sans-serif;
}

.font-family-serif {
  font-family: serif;
}

/* === Utilitários globais — Bloco E1 v1.0.6 === */
/* white-space pre-wrap (Bootstrap não cobre — usado em timeline messages com nl2br) */
.text-pre-wrap {
  white-space: pre-wrap;
}

.maxw-250 {
  max-width: 250px;
}

.maxw-500 {
  max-width: 500px;
}

/* Min-widths para dropdowns customizados (Bootstrap não cobre min-w-*) */
.minw-200 {
  min-width: 200px;
}

.minw-220 {
  min-width: 220px;
}

.minw-500 {
  min-width: 500px;
}

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

::-webkit-scrollbar-track {
  background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-secondary);
}

/* Pulse vermelho/danger — usado no header "Operação ao Vivo" do dashboard.
   Renomeado em D2 (era 'pulse', conflitava com signal). */
@keyframes pulse-danger {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}
/* Pulse verde/online — usado no badge de status do Signal API (manager.php).
   Combina scale + box-shadow para indicar "ativo/conectado". */
@keyframes pulse-online {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(21, 115, 71, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(21, 115, 71, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(21, 115, 71, 0);
  }
}
/* Pulse fade — usado em indicadores "Cronômetro Ativo" (admin/portal tickets list).
   Diferente dos outros pulse: só opacity, sem scale/shadow. Bloco E3 v1.0.8. */
@keyframes pulse-fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* Utility class que aplica o pulse-fade — promovida do <style> page-scoped de
   admin/tickets/index.php e portal/tickets/list.php (era `animate-pulse`/`pulse`). */
.animate-pulse {
  animation: pulse-fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media print {
  .sidebar,
  .topbar,
  .btn,
  .nav-item {
    display: none !important;
  }
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .card {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
  }
  body {
    background: white !important;
  }
  /* Bloco F4 v1.0.12 — extensões adicionais (consolidado de admin/legal/dossier_view).
     `.container-fluid` reset complementa `.main-content` para wrappers com layout
     print-friendly (dossiê legal). `@page` define tamanho e margem padrão A4. */
  .container-fluid {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@page {
  size: A4;
  margin: 1.5cm;
}
.main-content {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* Em páginas autenticadas (.sidebar logada presente) o .main-footer está
   escondido (ver _footer.scss). O padding-bottom: 80px da .main-content era
   pra dar respiro acima do footer — sem footer, sobra espaço vazio embaixo
   do conteúdo. Removemos o padding nesse contexto. */
body:has(.sidebar) .main-content {
  padding-bottom: 0;
}

.content-body {
  padding: 1.5rem;
}

/* === .list-page-fill (style v1.3.7+) ============================
 * Wrapper de página de lista que faz o card-tabela preencher toda a
 * altura disponível até o rodapé da viewport — sem depender de
 * `calc(100vh - <chrome>)` calibrado por módulo.
 *
 * Aplicar no wrapper imediato dos blocos de header/filtros/card:
 *   <div class="p-3 list-page-fill"> ... <div class="card .{modulo}-card">...</div> </div>
 *
 * Cálculo do height (138px):
 * - topbar: 70px
 * - .content-body padding-top + padding-bottom: 24 + 24 = 48px
 * - folga visual abaixo do card: 20px
 *
 * Regras:
 * - Pai vira flex-column ocupando 100vh menos o chrome calculado.
 * - Filhos de header/filtros (flex-shrink: 0 default) ficam fixos no topo.
 * - O .card filho preenche o espaço restante (flex: 1) e sobrescreve
 *   o `height: calc(...)` do pattern .{modulo}-card existente.
 * - O scroll da tabela continua dentro do .card-body via .table-responsive.
 * ================================================================ */
.list-page-fill {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 138px);
}
.list-page-fill > .card {
  flex: 1;
  min-height: 0;
  height: auto !important;
}

/* Barra "Voltar para Configuração" (header.php) ocupa ~54px no topo do
 * conteúdo. Quando presente, o .list-page-fill desconta essa altura para
 * não empurrar a página além da viewport. */
.content-body:has(> .config-back-bar) .list-page-fill {
  height: calc(100vh - 192px);
}

.sidebar {
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg-nav-top) 0%, var(--bg-nav-bottom) 100%);
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: width 0.4s cubic-bezier(0.5, 0, 0, 1);
  overflow: hidden !important;
  white-space: nowrap;
}

.sidebar-header {
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 70px;
  display: flex;
  align-items: center;
}

.sidebar-logo {
  max-width: 120px;
  max-height: 40px;
  object-fit: contain;
  transition: all 0.3s ease;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}

.nav-list {
  list-style: none;
  padding: 0 1rem;
  margin: 0;
}

.nav-item {
  margin-bottom: 0.25rem;
}

.sidebar .nav-link {
  display: flex !important;
  align-items: center;
  gap: 1.25rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 0.8rem 1.25rem !important;
  border-radius: 10px !important;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.sidebar .nav-link i {
  color: #fff !important;
  width: 20px;
  text-align: center;
  font-size: 1.1rem;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.sidebar .nav-link:hover:not(.active) {
  color: var(--brand-accent) !important;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar .nav-link:hover:not(.active) i {
  color: var(--brand-accent) !important;
  transform: translateX(3px);
}

.sidebar .nav-link.active {
  background: var(--brand-accent) !important;
  color: #fff !important;
  font-weight: 600;
}

.sidebar .nav-link.active:hover {
  background: #e65c00 !important;
  color: #fff !important;
}

.sidebar .nav-link.active:hover i {
  color: #fff !important;
}

/* Nova classe para submenus ativos sem conflitar com o active do pai */
.sidebar .nav-link.active-sub {
  background: rgba(243, 112, 33, 0.08) !important;
  border-radius: 8px;
  color: #f37021 !important;
  font-weight: bold;
}

.sidebar .nav-link.active-sub i {
  color: #f37021 !important;
}

.w-20 {
  width: 20px;
  text-align: center;
}

.nav-section-title {
  color: rgba(255, 255, 255, 0.3) !important;
  letter-spacing: 1px;
  font-size: 0.7rem !important;
}

.small-2 {
  font-size: 0.8rem;
}

.x-small {
  font-size: 0.65rem;
}

/* Custom Scrollbar for Sidebar */
.custom-scrollbar {
  overflow-y: auto;
  overflow-x: hidden;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* === ACS-style menu (Fase 1) ==============================================
 * Bloco portado do acs-rc/scss/layout/_sidebar.scss, adaptado pra paleta
 * brand do rc_control (var(--brand-accent) substitui var(--color-accent)).
 *
 * Coexiste com o bloco legacy `.sidebar .nav-link` acima — Fase 3 troca o
 * markup das views (`<a class="nav-link">` → `<a class="menu-link">`) e
 * remove o bloco legacy. Por enquanto, classes novas ficam disponíveis sem
 * afetar nada que já renderiza.
 *
 * Skeleton esperado (Fase 3):
 *   <aside class="sidebar" id="sidebar">
 *     <div class="sidebar-header"> brand </div>
 *     <nav class="sidebar-menu">
 *       <a class="menu-link"> <i> <span class="menu-text">X</span> </a>
 *       <button class="menu-group" data-group="op"> ... </button>
 *       <div class="submenu" data-group-panel="op"> ...nested links... </div>
 *     </nav>
 *   </aside>
 *   <div class="sidebar-backdrop" id="sidebarBackdrop"></div>
 * ========================================================================== */
/* Aside — width fixa via token. Modo collapsed/icon-only foi removido em
   style v1.0.25 — sidebar é sempre expandida. */
.sidebar {
  width: var(--sidebar-w);
}

/* Header interno (brand) — alinha height com token */
.sidebar-header {
  height: var(--sidebar-header-h);
  justify-content: center; /* logo + versão centrados no cabeçalho */
}

.brand-wrapper {
  display: flex;
  flex-direction: column; /* logo em cima, versão embaixo */
  align-items: center; /* versão centrada sob o logo */
  justify-content: center;
  gap: 2px;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}

/* Versão do app — lida de version.md e exibida sob o logo, alinhada a ele. */
.sidebar-version {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

/* Menu container — antigo `.sidebar-nav` legacy removido em v1.2.6 (audit cleanup) */
.sidebar-menu {
  flex: 1;
  min-height: 0; /* permite que flex: 1 + overflow-y: auto criem scroll real
   no eixo principal sem que o filho force expansão da sidebar. */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 0;
  /* Itens mantêm a altura natural — em telas baixas (notebook) o menu
     ROLA em vez de comprimir os flex-children. Sem isto, o .submenu
     (overflow:hidden) encolhia e cortava os itens nested. */
}
.sidebar-menu > * {
  flex-shrink: 0;
}
.sidebar-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}
.sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.sidebar-menu {
  /* Respiro entre top-level (grupos e links flat soltos no menu).
     Dashboard (.menu-link--bordered) tem margem própria de 12px — preservada. */
}
.sidebar-menu > .menu-group + .menu-group,
.sidebar-menu > .menu-link + .menu-group,
.sidebar-menu > .menu-group + .menu-link:not(.menu-link--bordered),
.sidebar-menu > .submenu + .menu-group,
.sidebar-menu > .submenu + .menu-link:not(.menu-link--bordered),
.sidebar-menu > .menu-link:not(.menu-link--bordered) + .menu-link:not(.menu-link--bordered) {
  margin-top: 14px;
}

/* Item de menu — substitui .sidebar .nav-link */
.menu-link {
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 46px;
  color: var(--sidebar-link-text);
  text-decoration: none;
  margin-bottom: 6px;
  transition: all 0.2s;
  position: relative;
  border-left: 3px solid transparent;
}
.menu-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-link-text-hover);
}
.menu-link:hover i {
  color: var(--brand-accent);
}
.menu-link:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;
}
.menu-link.active {
  background: linear-gradient(90deg, rgba(243, 112, 33, 0.15) 0%, transparent 100%);
  color: var(--sidebar-link-text-hover);
  border-left-color: var(--brand-accent);
}
.menu-link.active i {
  color: var(--brand-accent);
}
.menu-link i {
  min-width: 40px;
  text-align: center;
  font-size: 1.1rem;
  transition: 0.2s;
}
.menu-link i.icon-accent {
  color: var(--brand-accent);
}

/* Modificador "ação primária" — borda + radius + margem (ex: Painel topo). */
.menu-link--bordered {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin: 12px 14px;
  border-left-color: rgba(255, 255, 255, 0.2);
}
.menu-link--bordered:hover {
  border-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
}
.menu-link--bordered.active {
  border-color: var(--brand-accent);
  border-left-color: var(--brand-accent);
}

/* Modificador "centralizado" — alinha conteúdo no eixo principal (ex: ação
   primária no topo combinada com .menu-link--bordered). Zera min-width do
   ícone (que vale 40px no padrão) pra grudar ícone + texto no centro. */
.menu-link--centered {
  justify-content: center;
}
.menu-link--centered i {
  min-width: 0;
  margin-right: 10px;
}

/* Counter pill (ex: "3 chamados em aberto") — escondido em collapsed. */
.menu-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
.menu-badge.menu-badge--warning {
  background: var(--color-warning);
  color: #1e293b;
}
.menu-badge.menu-badge--danger {
  background: var(--color-error);
  color: #fff;
}
.menu-badge.menu-badge--success {
  background: var(--color-success);
  color: #fff;
}

/* Backdrop do drawer mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

/* Mobile — drawer com transform; .mobile-menu-btn aparece */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.25rem;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.mobile-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 180ms ease-out;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.topbar {
  height: 70px;
  background: var(--bg-nav-top);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-premium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 900;
  transition: var(--transition-smooth);
}

.user-card {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition-fast);
}

.user-avatar-wrapper {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Alert Icons & Badges — style v1.3.419: dimensões maiores p/ respiro visual */
.btn-alert {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.05rem;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.alert-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  background: var(--brand-accent);
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
}

/* === Topbar internals — Bloco B v1.0.2 === */
.topbar-toggle-icon {
  font-size: 1.25rem;
}

.alert-dropdown {
  width: 400px;
}

.alert-empty-icon {
  width: 64px;
  height: 64px;
}

.alert-critical-icon {
  width: 72px;
  height: 72px;
}

.global-search-results {
  max-height: 70vh;
  overflow-y: auto;
}

.gsr-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.gsr-item:hover,
.gsr-item.active {
  background: #f1f3f5;
}

.gsr-category {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #6c757d;
  padding: 8px 12px 4px;
}

.footer-brand-link {
  color: var(--brand-secondary);
}

/* Container do ícone no #globalNotificationModal (footer.php) — 60×60. */
.notif-modal-icon-circle {
  width: 60px;
  height: 60px;
}

/* Esconde o copyright em páginas autenticadas (que têm sidebar logada).
   O <aside class="sidebar"> só é renderizado dentro de
   <?php if (isset($_SESSION['user_id'])): ?> em sidebar.php — logo
   :has(.sidebar) equivale a "usuário logado". Footer permanece visível
   em login, setup, lgpd, onboarding e demais páginas pré-auth. */
body:has(.sidebar) .main-footer {
  display: none;
}

.nav-pills-custom .nav-link {
  color: var(--text-main) !important;
  transition: all 0.2s;
  border-radius: 12px !important;
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  background: transparent;
}

.nav-pills-custom .nav-link:hover {
  background: rgba(243, 112, 33, 0.1);
  color: var(--brand-accent) !important;
}

.nav-pills-custom .nav-link.active {
  background: var(--brand-accent) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(243, 112, 33, 0.3);
}

.btn-purple {
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: #fff;
}

.btn-purple:hover {
  background-color: #5a32a3;
  border-color: #5a32a3;
  color: #fff;
}

.btn-orange {
  background-color: #f37021;
  border-color: #f37021;
  color: #fff;
}

.btn-orange:hover {
  background-color: #d65d16;
  border-color: #d65d16;
  color: #fff;
}

/* === Bloco E1 v1.0.6 — sizing extra === */
/* Variante xs do .btn (Bootstrap só tem .btn-sm/.btn-lg). Promovido do <style> de
   financeiro/manager/payables.php — usado em ícones-ação inline (barcode/pix/anexos). */
.btn-xs {
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
}

/* === Bloco E3 v1.0.8 — outline indigo === */
/* Promovido do <style> page-scoped de admin/tickets/show.php. Usado no botão "Reabrir"
   do modal de pending_approval. Bootstrap não tem indigo nativo. */
.btn-outline-indigo {
  color: #6610f2;
  border-color: #6610f2;
}

.btn-outline-indigo:hover {
  background-color: #6610f2;
  color: #fff;
}

/* === Bloco F1 v1.0.9 — btn-navy + btn-yellow promovidos === */
/* .btn-navy — promovido pra global. Definição duplicada em admin/contratos/create.php
   e admin/settings/daemon_logs/index.php (mesmas cores). Cobre 121+ usos órfãs do
   sistema (era visualmente quebrado nessas telas). Hover com translateY do contratos
   (mais polido que o daemon_logs original).
   NOTA: o scope `#contractForm .btn-navy` em pages/_contratos.scss permanece — não
   redundante por especificidade ID > class, mas hoje aplica os mesmos valores. */
.btn-navy {
  background-color: #002B49;
  color: white;
}

.btn-navy:hover {
  background-color: #003d66;
  color: white;
  transform: translateY(-1px);
}

/* .btn-outline-navy — variant outlined (toggle pills, secondary actions).
   Estado .active herda o estilo do .btn-navy preenchido. */
.btn-outline-navy {
  color: #002B49;
  border: 1px solid #002B49;
  background-color: transparent;
}

.btn-outline-navy:hover {
  background-color: #002B49;
  color: white;
}

.btn-outline-navy.active,
.btn-outline-navy:active {
  background-color: #002B49;
  color: white;
  border-color: #002B49;
}

/* .btn-yellow — promovido do <style> de mail_templates create+edit.
   Toggle entre editor visual e modo código HTML. */
.btn-yellow {
  background-color: #f7d54e;
  color: #333;
  border: none;
}

.btn-yellow:hover {
  background-color: #ecc21d;
  color: #000;
}

.card-premium {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-premium);
  border: 1px solid #e2e8f0 !important;
  overflow: hidden;
  transition: var(--transition-smooth);
  padding: 1.5rem !important;
}

.rounded-4 {
  border-radius: 1rem !important;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.card-stat-finance {
  border: none;
  border-radius: 16px;
  transition: transform 0.2s ease-in-out;
}

.card-stat-finance:hover {
  transform: translateY(-5px);
}

.stat-paid {
  background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
  border-left: 4px solid #28a745 !important;
}

.stat-pending {
  background: linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
  border-left: 4px solid #ffc107 !important;
}

.stat-overdue {
  background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
  border-left: 4px solid #dc3545 !important;
}

.form-control,
.form-select {
  border-radius: 0.6rem;
  border: 1px solid #dee2e6;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 43, 73, 0.1);
  outline: none;
}

.form-label.uppercase {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 700;
}

/* Matriz de Níveis de Permissão do Portal
   (/admin/configuracoes/portal-niveis). */
.portal-roles-matrix th,
.portal-roles-matrix td {
  vertical-align: middle;
}
.portal-roles-matrix thead th {
  white-space: nowrap;
}
.portal-roles-matrix .form-check-input {
  cursor: pointer;
}

/* Coluna do nível Administrativo — travada em acesso total. */
.portal-roles-locked {
  background: #f6f8fa;
}

.badge-status-pill {
  border-radius: 50px;
  padding: 0.4rem 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}

/* Bloco A — soft badges com !important (override sobre Bootstrap). */
.bg-success-soft {
  background-color: rgba(40, 167, 69, 0.1) !important;
  color: #28a745 !important;
}

.bg-warning-soft {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #ffc107 !important;
}

.bg-danger-soft {
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
}

.bg-info-soft {
  background-color: rgba(23, 162, 184, 0.1) !important;
  color: #17a2b8 !important;
}

.bg-primary-soft {
  background-color: rgba(0, 43, 73, 0.1) !important;
  color: var(--brand-primary) !important;
}

.bg-secondary-soft {
  background-color: rgba(100, 116, 139, 0.1) !important;
  color: #64748b !important;
}

.bg-purple-soft {
  background-color: rgba(111, 66, 193, 0.1) !important;
  color: #6f42c1 !important;
}

.bg-indigo-soft {
  background-color: rgba(102, 16, 242, 0.1) !important;
  color: #6610f2 !important;
}

.bg-orange-soft {
  background-color: rgba(243, 112, 33, 0.1) !important;
  color: #f37021 !important;
}

/* Indigo-soft — Bloco E3 v1.0.8. Promovido do <style> page-scoped de admin/tickets/show.php.
   Usado no estado "pending_approval" (UAT do cliente). Mesmo padrão dos demais soft badges
   com !important para vencer cascata de Bootstrap e <style> inline. */
.bg-indigo-soft {
  background-color: rgba(102, 16, 242, 0.05) !important;
  color: #6610f2 !important;
}

/* Bloco B — soft badges duplicados (cores pastel sólidas).
   Mantido por paridade; bloco A vence visualmente por ter !important. */
.bg-purple-soft {
  background-color: #f5f3ff;
  color: #7c3aed;
}

.bg-info-soft {
  background-color: #f0f9ff;
  color: #0284c7;
}

.bg-primary-soft {
  background-color: #eef2ff;
  color: #4f46e5;
}

.bg-warning-soft {
  background-color: #fffbeb;
  color: #d97706;
}

.bg-success-soft {
  background-color: #f0fdf4;
  color: #16a34a;
}

.bg-danger-soft {
  background-color: #fef2f2;
  color: #dc2626;
}

/* Card-select: rádios estilizados como cards selecionáveis (E-mail / WhatsApp).
   Usado no #unifiedCommunicationModal (Centro de Comunicação). */
.card-select .form-check-label {
  border: 2px solid #eaedf2;
  background: #fff;
  color: #475569;
}

.card-select .form-check-input:checked + .form-check-label {
  border-color: #F37021;
  background: rgba(243, 112, 33, 0.05);
  color: #002B49;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Modal "Novidades" (#changelogModal) — changelog pós-login. */
.changelog-spark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(243, 112, 33, 0.12);
  color: #F37021;
}

.changelog-release + .changelog-release {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eaedf2;
}

.changelog-release-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.changelog-version {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  color: #002B49;
  background: #eef1f5;
  padding: 2px 8px;
  border-radius: 999px;
}

.changelog-date {
  font-size: 0.75rem;
  color: #94a3b8;
}

.changelog-items {
  margin: 0;
  padding-left: 1.1rem;
}
.changelog-items li {
  font-size: 0.875rem;
  color: #475569;
  margin-bottom: 0.35rem;
}
.changelog-items li:last-child {
  margin-bottom: 0;
}

.alert-error-soft {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.2);
}

.autocomplete-results-dropdown {
  z-index: 1000;
  top: 100%;
}

.menu-group {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding: 0 14px;
  height: 46px;
  color: var(--sidebar-link-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  margin-bottom: 6px;
  transition: var(--transition-fast);
  scroll-margin-top: 16px; /* respiro acima quando o JS faz scrollIntoView ao expandir */
}
.menu-group > i:first-child {
  min-width: 40px;
  text-align: center;
  font-size: 1.1rem;
  transition: 0.2s;
}
.menu-group:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-link-text-hover);
}
.menu-group:hover > i:first-child {
  color: var(--brand-accent);
}
.menu-group:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;
}
.menu-group:has(+ .submenu .menu-link.active) {
  color: var(--sidebar-link-text-hover);
}
.menu-group:has(+ .submenu .menu-link.active) > i:first-child {
  color: var(--brand-accent);
}

.menu-group__chevron {
  margin-left: auto;
  font-size: 0.75rem !important;
  min-width: auto !important;
  color: #64748b;
  transition: transform 180ms ease-out;
}

.menu-group[aria-expanded=true] .menu-group__chevron {
  transform: rotate(180deg);
}

.submenu {
  overflow: hidden;
}

.menu-group[aria-expanded=false] + .submenu {
  display: none;
}

.menu-link--nested {
  padding-left: 56px;
  height: 40px;
  margin-bottom: 4px;
  font-size: 0.9rem;
}
.menu-link--nested > i:first-child {
  min-width: 28px;
  font-size: 0.95rem;
}

.menu-group--indented {
  padding-left: 32px;
}

.pagination-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
  border-top: 1px solid #e2e8f0;
  padding: 0.65rem 1rem;
  background: #f8fafc;
}

.pagination-footer__info {
  font-size: 0.85rem;
  color: #64748b;
}
.pagination-footer__info strong {
  color: #1e293b;
}

.pagination-footer__limit-form {
  display: flex;
  align-items: center;
}

.pagination-footer__limit-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 0;
}
.pagination-footer__limit-label select {
  min-width: 70px;
}

.pagination-footer__nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.pagination-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 36px;
  height: 32px;
  padding: 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pagination-footer__btn:hover:not(:disabled):not(.pagination-footer__btn--disabled):not(.pagination-footer__btn--current) {
  background: var(--brand-accent, #f37021);
  border-color: var(--brand-accent, #f37021);
  color: #fff;
}
.pagination-footer__btn:focus-visible {
  outline: 2px solid var(--brand-accent, #f37021);
  outline-offset: 2px;
}

.pagination-footer__btn--current {
  background: var(--brand-accent, #f37021);
  border-color: var(--brand-accent, #f37021);
  color: #fff;
  cursor: default;
  pointer-events: none;
}

.pagination-footer__btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-footer__btn--disabled:hover {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}

.tabs-listing.nav-tabs .nav-link {
  color: #64748b;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.tabs-listing.nav-tabs .nav-link.active {
  color: #002B49;
  border-bottom: 2px solid #002B49;
  background: #f8fafc;
}

.tabs-listing.nav-tabs .nav-link:hover:not(.active) {
  border-bottom: 2px solid #e2e8f0;
}

.tooltip {
  --bs-tooltip-bg: #1c2b4a;
  --bs-tooltip-color: #ffffff;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-padding-x: 0.6rem;
  --bs-tooltip-padding-y: 0.35rem;
  --bs-tooltip-font-size: 0.75rem;
  --bs-tooltip-border-radius: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.tooltip .tooltip-inner {
  box-shadow: 0 4px 12px rgba(28, 43, 74, 0.25);
  max-width: 240px;
}
.tooltip.fade {
  transition: opacity 0.12s ease-out;
}
.tooltip.tooltip-invalid {
  --bs-tooltip-bg: #dc3545;
  --bs-tooltip-color: #ffffff;
}
.tooltip.tooltip-invalid .tooltip-inner {
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
  font-weight: 600;
}

/* === Pulse dot (live dashboard — header com indicador "ao vivo" piscando) === */
.pulse-dot-danger {
  width: 12px;
  height: 12px;
  animation: pulse-danger 1.5s infinite;
}

/* === Icon stat (KPI cards) ====================================================
 * Container do ícone nos 4 KPI cards do dashboard (Chamados, Receita, Leads,
 * Cotas) e usado também em signal/quick_responses. Combina com
 * .rounded-circle + .p-2 + .bg-{info,success,warning,purple} bg-opacity-10.
 *
 * Largura e altura fixas garantem círculo perfeito independente do glifo
 * Font Awesome (fa-ticket é horizontal, fa-percent é estreito etc).
 * Antes de v1.0.33 a classe era decorativa sem regra — círculo virava oval.
 * ============================================================================ */
.icon-stat {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.login-body {
  background: var(--bg-dark);
  color: var(--text-light);
  overflow: hidden;
}

.login-split {
  display: flex;
  min-height: 100vh;
}

.login-brand {
  flex: 1.4;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-alt-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  position: relative;
  overflow: hidden;
}

.brand-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.logo-large {
  max-width: 240px;
  margin-bottom: 2rem;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.brand-content h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.brand-content p {
  font-size: 1.125rem;
  opacity: 0.7;
  max-width: 400px;
  margin: 0 auto;
}

.login-form-area {
  flex: 0.6;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: #000;
}

.login-box {
  width: 100%;
  max-width: 440px;
  text-align: left;
}

.login-header h1 {
  color: #000;
  font-weight: 800;
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.login-header p {
  color: #000;
  opacity: 0.7;
  margin-bottom: 3rem;
}

.form-group {
  margin-bottom: 2rem;
  text-align: left;
}

.input-wrapper {
  position: relative;
}

.input-wrapper i {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-secondary);
  font-size: 1.25rem;
  transition: var(--transition-fast);
}

.form-control-premium {
  width: 100%;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.25rem 4rem;
  color: #000000;
  font-weight: 600;
  font-size: 1.1rem;
  transition: var(--transition-fast);
}

.form-control-premium:focus {
  outline: none;
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 4px rgba(28, 171, 235, 0.2);
}

.btn-login {
  width: 100%;
  background: var(--brand-secondary);
  border: none;
  border-radius: 12px;
  padding: 1.4rem;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 10px 15px -3px rgba(28, 171, 235, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-login:hover {
  transform: translateY(-2px);
  background: #1499d6;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2.5rem 0;
  color: #000;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  opacity: 0.4;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 2px solid #000;
}

.divider span {
  padding: 0 1.5rem;
}

.btn-passkey {
  background: #f5f3ff;
  border: 2px solid #ddd6fe;
  color: #7c3aed;
  padding: 1.25rem;
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 800;
  transition: var(--transition-fast);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.login-footer {
  margin-top: 3.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #000;
  opacity: 0.4;
  line-height: 1.6;
}

.login-footer a {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}

.alert-premium {
  padding: 1.125rem 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.alert-error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #e11d48;
}

.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}

/* Responsive Login */
@media (max-width: 991px) {
  .login-split {
    flex-direction: column;
  }
  .login-brand {
    min-height: 40vh;
    flex: none;
  }
  .login-form-area {
    flex: 1;
  }
}
/* === Auth pages auxiliares (2fa, activate) — Bloco A v1.0.1 ===
 * Classes específicas pra inlines migrados de auth/2fa.php e auth/activate.php.
 * Não reutilizam .icon-circle (que é usada em portal/context/select.php com 60px,
 * vs 80px aqui) — usamos .activate-icon-circle como modifier dedicado.
 */
.auth-logo-2fa {
  max-height: 60px;
}

.activate-header-logo {
  max-width: 150px;
  filter: brightness(0) invert(1);
}

.activate-icon-circle {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 2rem;
}

/* === Bloco E3 v1.0.8 — Portal pré-login (autorização de tickets) ===
 * 3 telas externas (sem layout admin) que recebem links de autorização do cliente:
 *   - portal/tickets/authorization_result.php  (body.result-page)
 *   - portal/tickets/authorize_opening.php     (body.auth-page)
 *   - portal/tickets/authorize_overage.php     (body.login-full-page; reusa)
 *
 * Migrados dos `<style>` page-scoped originais — preservam paridade visual exata.
 * Cada body class isola o escopo pra evitar vazamento (ex.: .premium-card existe
 * em ambos com regras diferentes — padding 3rem 2rem em result vs sem padding em auth).
 */
body.result-page {
  background: linear-gradient(135deg, #002B49 0%, #001a2e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
body.result-page .result-container {
  max-width: 450px;
  width: 100%;
}
body.result-page .premium-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-align: center;
  padding: 3rem 2rem;
}
body.result-page .icon-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
}
body.result-page .icon-success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}
body.result-page .icon-warning {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}
body.result-page .icon-danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
body.result-page .btn-close-custom {
  background: #f8f9fa;
  color: #002B49;
  font-weight: 700;
  padding: 0.8rem;
  border-radius: 12px;
  border: 1px solid #dee2e6;
  transition: all 0.3s;
  text-decoration: none;
  display: block;
  width: 100%;
}
body.result-page .btn-close-custom:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

/* Logo footer do result-page (max-height 30px + opacity 0.5). */
.result-logo {
  max-height: 30px;
  opacity: 0.5;
}

body.auth-page {
  /* Fix do legado: tinha `min-vh-100;` que era inválido (sem propriedade).
     Substituído pelo equivalente correto. */
  min-height: 100vh;
  background: linear-gradient(135deg, #002B49 0%, #001a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
body.auth-page .auth-container {
  max-width: 550px;
  width: 100%;
}
body.auth-page .premium-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
body.auth-page .auth-header {
  padding: 2.5rem 2.5rem 1.5rem;
  text-align: center;
}
body.auth-page .auth-body {
  padding: 0 2.5rem 2.5rem;
}
body.auth-page .ticket-info-box {
  background: #f8f9fa;
  border-left: 4px solid var(--brand-primary);
  border-radius: 12px;
  padding: 1.5rem;
}
body.auth-page .btn-approve {
  background: #002B49;
  color: #fff;
  padding: 0.8rem;
  font-weight: 700;
  border-radius: 12px;
  transition: all 0.3s;
}
body.auth-page .btn-approve:hover {
  background: #F37021;
  color: #fff;
  transform: translateY(-2px);
}
body.auth-page .btn-reject {
  color: #dc3545;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s;
}
body.auth-page .btn-reject:hover {
  color: #a71d2a;
  opacity: 0.8;
}

/* Logo header de authorize_opening.php (max-height 60px). Estende o pattern
   .auth-logo-2fa pra reuso em outras telas pré-login com logos maiores. */
.auth-logo-60 {
  max-height: 60px;
}

/* Logo de authorize_overage.php (max-height 50px + filter brightness(0)).
   `brightness(0)` força o logo a renderizar 100% preto sobre fundo claro. */
.overage-logo {
  max-height: 50px;
  filter: brightness(0);
}

/* === Bloco F4 v1.0.12 — oauth/authorize ===
 * Card centralizado com max-width 500px + 95% width + border-radius 15px.
 * Página standalone (loaded via header_blank.php) que carrega style.css. */
.oauth-card {
  max-width: 500px;
  width: 95%;
  border-radius: 15px;
}

/* === Tier 2 cleanup pós-Bloco F — auth/2fa + portal/tickets/authorize_overage ===
 *
 * `body.login-full-page` é o layout pré-login standalone (não usa o split do
 * `.login-split` do auth/login). Card centrado em viewport com gradient navy.
 *
 * `.login-card-compact` é o card branco compacto que vai dentro. Largura padrão
 * 500px (era inline `style="max-width: 500px"` em F3 → `.maxw-500`; agora
 * absorvido na própria classe).
 *
 * 2 telas usam: `auth/2fa.php` (login.full-page + card-compact) e
 * `portal/tickets/authorize_overage.php` (mesma combinação).
 */
body.login-full-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--brand-primary) 0%, #001a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin: 0;
}

.login-card-compact {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  padding: 3rem 2rem;
  text-align: center;
}

/* OTP input grande do auth/2fa — texto centralizado, monospace, letter-spacing. */
.otp-input-large {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.5rem;
  font-weight: 700;
  padding: 1rem;
  border: 2px solid #dee2e6;
  border-radius: 12px;
  font-family: "Fira Code", "Courier New", monospace;
  color: var(--brand-primary);
}

.otp-input-large:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(0, 43, 73, 0.1);
}

/* Link "Esqueci minha senha" do auth/login — subtle muted que ganha cor brand
   no hover. Já tem `.small` Bootstrap aplicada via HTML. */
.forgot-password {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
}

.forgot-password:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

body.page-setup .setup-container {
  max-width: 800px;
  margin: 2rem auto;
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
body.page-setup .setup-header {
  text-align: center;
  margin-bottom: 2rem;
}
body.page-setup .setup-logo-img {
  height: 50px;
}
body.page-setup .setup-hint-muted {
  color: gray;
}
body.page-setup .step {
  display: none;
}
body.page-setup .step.active {
  display: block;
}
body.page-setup .form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
body.page-setup .form-row .form-group {
  flex: 1;
}
body.page-setup .setup-actions {
  margin-top: 2rem;
}
body.page-setup .setup-actions--right {
  text-align: right;
}
body.page-setup .setup-actions--between {
  display: flex;
  justify-content: space-between;
}
body.page-setup .setup-message {
  margin-top: 1rem;
  display: none;
  padding: 1rem;
  border-radius: 8px;
}
body.page-setup .setup-message.is-shown {
  display: block;
}
body.page-setup .setup-message--success {
  background: #f0fff4;
  color: #22543d;
}
body.page-setup .setup-message--error {
  background: #fff5f5;
  color: #c53030;
}

/* /admin/operadores — altura dinâmica. */
.operadores-card .pagination-footer {
  flex-shrink: 0;
}

/* === Back link "Voltar para listagem" (create.php / edit.php) === */
.op-form-back-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* === Form em grid vertical (create.php / edit.php) === */
.form-grid-stack {
  display: grid;
  gap: 1.5rem;
}

/* === Abas Network Tools — agora usam .tabs-listing global (style v1.3.57+) ===
 * Sub-navegação entre as 5 ferramentas. Estilo unificado em
 * scss/components/_tabs.scss; aqui só fica o ID #networkToolsTabs como hook
 * HTML (sem mais regras CSS específicas).
 */
/* === IRR Generator (network_tools/tools/irr.php) — específico === */
/* Dropdown de busca de cliente — flutua sobre o form com scroll vertical interno. */
.irr-search-results-dropdown {
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

/* === Console de saída — compartilhado por irr/block/dns/ptr/subnet ===
 * Fundo escuro tipo terminal, monospace, scroll vertical.
 * Renomeado de .irr-console-* em F3 v1.0.11 (era específico do IRR; passou a ser
 * reutilizado pelas 4 outras ferramentas que usam o mesmo padrão visual).
 */
.tool-console-bg {
  background: #1e1e1e;
}

.tool-console-pre {
  font-family: "Fira Code", monospace;
  font-size: 13px;
  color: #d4d4d4;
  overflow: auto;
  max-height: 500px;
}

/* === Pulse online dot (badge "Online" com indicador piscante) === */
.pulse-online-dot {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse-online 2s infinite;
}

/* === Avatar fallback (iniciais quando não há imagem) === */
.signal-avatar-img-bordered {
  border: 3px solid #f8fafc;
}

.signal-avatar-fallback {
  width: 90px;
  height: 90px;
  font-size: 2.5rem;
  background: rgba(28, 171, 235, 0.1);
  color: var(--brand-secondary);
  font-weight: 800;
}

/* === Letter spacing wider em labels uppercase === */
.signal-label-spaced {
  letter-spacing: 0.05em;
}

/* === Icon-stat custom 40×40 (lista de dispositivos) === */
.signal-device-icon-40 {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

/* === Bloco F1 v1.0.9 — Signal chat UI (admin/signal/index.php) ===
 * Toda a interface do messenger interno: container split (sidebar + chat area),
 * lista de contatos com avatar circle, bolhas de mensagem (sent/received),
 * input area com textarea pill e botão circular. Migrado integralmente do
 * <style> page-scoped de admin/signal/index.php.
 */
.signal-container {
  display: flex;
  height: calc(100vh - 200px);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-premium);
}

.signal-sidebar {
  width: 320px;
  background: #fdfdfd;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

.signal-sidebar-header {
  padding: 1.25rem 1.5rem;
  background: #fff;
  color: var(--brand-primary);
  font-weight: 800;
  border-bottom: 2px solid #e2e8f0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-list {
  flex: 1;
  overflow-y: auto;
}

.contact-item {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-item:hover {
  background: #f8fafc;
}

.contact-item.active {
  background: rgba(28, 171, 235, 0.08);
  border-left: 4px solid var(--brand-secondary);
}

.contact-avatar {
  width: 45px;
  height: 45px;
  background: rgba(28, 171, 235, 0.15);
  color: var(--brand-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
}

/* Modifier: avatar de grupo (cor indigo). */
.contact-avatar--group {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

/* Modifier: avatar pequeno do header do chat (36×36). */
.contact-avatar--sm {
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
}

.signal-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

.chat-header {
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-main);
}

.chat-messages {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  max-width: 70%;
  padding: 0.85rem 1.25rem;
  border-radius: 16px;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.message.sent {
  align-self: flex-end;
  background: var(--brand-secondary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.message.received {
  align-self: flex-start;
  background: #fff;
  color: var(--text-main);
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
}

.chat-input-area {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 12px;
  background: #fff;
  align-items: center;
}

.chat-input-area textarea {
  flex: 1;
  resize: none;
  border-radius: 24px;
  padding: 12px 20px;
  border: 1px solid #cbd5e1;
  height: 50px;
  font-size: 0.95rem;
  transition: var(--transition-fast);
  background: #f8fafc;
}

.chat-input-area textarea:focus {
  outline: none;
  border-color: var(--brand-secondary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(28, 171, 235, 0.1);
}

.hidden {
  display: none !important;
}

/* Placeholder grande quando nenhum contato está selecionado (icon 80×80 + 2rem font). */
.signal-placeholder-icon {
  width: 80px;
  height: 80px;
  font-size: 2rem;
}

/* Botão de envio circular (50×50 + cor secundária + sombra cyan). */
.signal-send-btn {
  width: 50px;
  height: 50px;
  background: var(--brand-secondary);
  border: none;
  box-shadow: 0 4px 10px rgba(28, 171, 235, 0.3);
}

/* === Lista de chamados (tickets/index.php) — pattern v1.1.0 (style v1.1.x).
 * Card altura fixa = viewport menos chrome. ~280px = topbar 64 + content
 * padding 32 + header 70 + nav-tabs 50 + folga 64. */
.tickets-card {
  display: flex;
  flex-direction: column;
}
.tickets-card > .card-header {
  flex-shrink: 0;
}
.tickets-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tickets-card .tab-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.tickets-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.tickets-card .pagination-footer {
  flex-shrink: 0;
}

/* 1. Estrutura Flexbox exclusiva para a Aba do Chat */
#tab-chat .card-premium {
  display: flex !important;
  flex-direction: column !important;
  height: 60vh;
  /* Altura fixa menor para o card de chat não ficar gigante */
  padding: 0 !important;
  overflow: visible !important;
  /* Libera para o menu das Respostas Rápidas não sumir */
}

/* 2. O Corpo do Card do Chat gerencia o limite interno */
#tab-chat .card-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  padding: 1.5rem !important;
  overflow: visible !important;
  /* Libera para o menu das Respostas Rápidas não sumir */
}

/* 3. Trava o cabeçalho (Web Soluções) no topo */
#tab-chat .border-bottom.d-flex {
  flex-shrink: 0;
}

/* 4. Timeline de Mensagens - Aqui a mágica do Scroll acontece */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
  /* Pega todo o espaço restante no meio da tela */
  overflow-y: auto;
  /* Ativa a barra de rolagem */
  padding-right: 8px;
  /* Afasta o texto da barra */
  margin-bottom: 0 !important;
}

/* 5. Trava o Formulário de Resposta na base */
#chat-form {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}

.chat-bubble {
  max-width: 80%;
  padding: 1rem;
  border-radius: 15px;
  position: relative;
  font-size: 0.95rem;
}

/* Cliente (Esquerda) */
.chat-bubble-client {
  align-self: flex-start;
  background-color: #f1f5f9;
  color: var(--navy);
  border-bottom-left-radius: 2px;
}

/* Suporte/Admin (Direita) */
.chat-bubble-admin {
  align-self: flex-end;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--navy);
  border-bottom-right-radius: 2px;
}

/* Notas Internas (Diferenciado) */
.chat-bubble-internal {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  background-color: #fffbeb;
  border: 1px dashed #fbbf24;
  color: #92400e;
}

/* Feedback Visual da Caixa de Texto */
.internal-mode {
  background-color: #fffbeb !important;
  border-color: #fbbf24 !important;
}

/* === Bloco E3 v1.0.8 — listagem (admin/portal) + show extras === */
/* Nav-tabs do listing (admin/tickets/index + portal/tickets/list) — agora
   .tabs-listing global (style v1.3.57+). Estilo em scss/components/_tabs.scss;
   ID #ticketTabs continua como hook HTML mas sem regras próprias. */
/* Style v1.3.120: tabs do detalhe do chamado (admin/tickets/show) migradas
   para classe global `.tabs-listing` em components/_tabs.scss. Para a tela
   admin o ID #ticketDetailTabs continua no markup, mas as regras agora vêm
   da classe.

   Portal (portal/tickets/show.php) reusa o mesmo ID porém com markup
   diferente (`bg-white p-2 rounded-4 shadow-sm` no UL — visual de pill-bar,
   não underline). Como o UL do portal NÃO ganha `.tabs-listing`, as regras
   ID-scoped abaixo permanecem APENAS para preservar o feedback visual da
   aba ativa no portal (color navy + background slate). Quando o portal for
   canonizado para .tabs-listing, este bloco pode sair. */
#ticketDetailTabs.nav-tabs .nav-link {
  color: #64748b;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

#ticketDetailTabs.nav-tabs .nav-link.active {
  color: #002B49;
  border-bottom: 2px solid #002B49;
  background: #f8fafc;
}

#ticketDetailTabs.nav-tabs .nav-link:hover:not(.active) {
  border-bottom: 2px solid #e2e8f0;
}

/* Headers ordenáveis das tabelas de tickets — hover sutil + transição do ícone. */
.sortable:hover {
  background-color: rgba(0, 43, 73, 0.03);
}

.sortable i {
  transition: all 0.2s;
}

/* Promovido dos <style> page-scoped — utility global pra qualquer texto monoespaçado. */
.font-mono {
  font-family: "Fira Code", "Courier New", monospace;
}

/* Border indigo soft — usado em admin/tickets/show.php no card UAT pending_approval. */
.indigo-soft-border {
  border: 1px solid rgba(102, 16, 242, 0.2);
}

/* Focus ring custom do textarea de chat (admin/portal/tickets/show). Corrige o legado
   que referenciava var(--primary-color) inexistente — usa --brand-primary. */
#chat-textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 43, 73, 0.1);
}

/* === Priority badges — promovido de inlines dinâmicos PHP === */
/* Antes: style="background: <?= $color ?>20; color: <?= $color ?>; border: 1px solid <?= $color ?>;"
   (admin/tickets/index.php + portal/tickets/list.php). Convertido pra classe semântica.
   `20` no fim do hex é alpha ~12% (Tailwind shorthand). */
.priority-badge--low {
  background: rgba(113, 128, 150, 0.12);
  color: #718096;
  border: 1px solid #718096;
}

.priority-badge--medium {
  background: rgba(49, 130, 206, 0.12);
  color: #3182ce;
  border: 1px solid #3182ce;
}

.priority-badge--high {
  background: rgba(221, 107, 32, 0.12);
  color: #dd6b20;
  border: 1px solid #dd6b20;
}

.priority-badge--critical {
  background: rgba(229, 62, 62, 0.12);
  color: #e53e3e;
  border: 1px solid #e53e3e;
}

/* Card de altura fixa na visão Lista — pattern v1.1.0 (style v1.1.x).
   ~340px = topbar 64 + content padding 32 + header 80 + pills 50 + folga 114. */
.leads-card {
  height: calc(100vh - 340px);
  display: flex;
  flex-direction: column;
}
.leads-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.leads-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.leads-card .pagination-footer {
  flex-shrink: 0;
}

.kanban-board {
  display: flex;
  overflow-x: auto;
  padding-bottom: 20px;
  gap: 1rem;
  align-items: flex-start;
  min-height: 55vh;
}

.kanban-column {
  /* Cada coluna ocupa parte igual do espaço horizontal disponível
     (estilo trello-fluído). min-width preserva legibilidade dos cards
     em viewports estreitas — abaixo disso o board ganha scroll horizontal. */
  flex: 1;
  min-width: 200px;
  background-color: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  /* Limita coluna à viewport menos chrome (topbar 64 + content-body 48 +
     wrap 32 + header 80 + board padding-bottom 20 + folga ~16 = ~260px).
     Items internos rolam dentro da coluna em vez de empurrar a página. */
  max-height: calc(100vh - 260px);
}

.kanban-column-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
}

.kanban-column-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin: 0;
}

.kanban-column-count {
  background-color: #e2e8f0;
  color: #475569;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 700;
}

.kanban-items {
  padding: 0.75rem;
  flex-grow: 1;
  overflow-y: auto;
  /* Sem max-height aqui — a coluna pai (.kanban-column) já limita altura.
     flex-grow: 1 + overflow-y: auto fazem os items rolarem dentro do que
     sobra após o .kanban-column-header (~50px). */
}

.kanban-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: grab;
}

.kanban-card:hover {
  box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

.kanban-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.kanban-card-meta {
  font-size: 0.7rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.kanban-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 0.5rem;
}

.kanban-card-avatar {
  width: 24px;
  height: 24px;
  background-color: var(--brand-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: bold;
}

.kanban-column-prospect {
  border-top: 4px solid #3b82f6;
}

.kanban-column-qualified {
  border-top: 4px solid #6366f1;
}

.kanban-column-proposal {
  border-top: 4px solid #f59e0b;
}

.kanban-column-negotiation {
  border-top: 4px solid #8b5cf6;
}

.kanban-column-lost {
  border-top: 4px solid #ef4444;
}

.kanban-column-converted {
  border-top: 4px solid #10b981;
}

/* Bloco E1 v1.0.6 — extras CRM (modais, timeline, quarentena, drag visuals). */
.kanban-card-ghost {
  opacity: 0.4;
  background: #e9ecef;
}

.kanban-card-drag {
  transform: rotate(1.5deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.crm-catalog-list {
  max-height: 250px;
  overflow-y: auto;
}

.crm-card-rejected {
  background: #fff5f5;
}

.crm-card-pending {
  background: #fff9f0;
}

.crm-timeline .timeline-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Style v1.3.88: scroll interno fixo no card "Linha do Tempo / Notas".
   pagination_footer fica fora do scroll (sempre visível).
   min-height garante um card alto mesmo com poucas notas. */
.crm-timeline-scroll {
  min-height: 600px;
  max-height: 900px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* === Profile Tabs (escopado a #profileTabs pra não conflitar com Bootstrap .nav-tabs) === */
#profileTabs .nav-link {
  color: #64748b;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

#profileTabs .nav-link.active {
  color: #002B49;
  border-bottom: 2px solid #002B49;
  background: #f8fafc;
}

/* === Setup 2FA — input OTP com letter-spacing alto e fonte grande === */
.letter-spacing-2 {
  letter-spacing: 5px;
  font-weight: bold;
  font-size: 1.5rem;
}

/* === Mobile Pairing — QR Code wrapper + avatares grandes === */
.qr-code-wrapper svg {
  max-width: 100%;
  height: auto;
}

.avatar-lg-80 {
  width: 80px;
  height: 80px;
}

/* Progress bar inicial em 100% (countdown timer reduz via JS).
   JS sobreescreve `style.width` a cada tick — esta classe só garante o estado de paint inicial. */
.qr-progress-bar-init-full {
  width: 100%;
}

/* === Avatar de perfil (96px) — style v1.3.153 === */
.profile-avatar-96 {
  width: 96px;
  height: 96px;
  object-fit: cover;
  background: #f1f5f9;
}

/* === Cards altura fixa — pattern v1.1.0 (style v1.1.x) === */
/* /admin/financeiro/gestao — dashboard com botões topo + card Carteiras (altura
   variável conforme nº de contas) + card Últimas Movimentações que cresce até o
   footer. Chrome 138px = topbar 70 + content-body padding 48 + folga 20.
   Pattern style v1.3.30 — usa selector posicional `:last-child` no card Ledger
   pra evitar nova classe; mesmo pattern usado em `.ledger-page`. */
.gestao-page {
  height: calc(100vh - 138px);
  display: flex;
  flex-direction: column;
}
.gestao-page > .d-flex,
.gestao-page > .card:not(:last-child) {
  flex-shrink: 0;
}
.gestao-page > .card:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gestao-page > .card:last-child > .card-header {
  flex-shrink: 0;
}
.gestao-page > .card:last-child > .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.gestao-page > .card:last-child > .pagination-footer {
  flex-shrink: 0;
}

/* /admin/financeiro — card cresce com o conteúdo, sem scroll interno nem altura fixa. */
/* /admin/financeiro/lucros/modelos — altura dinâmica. */
.profit-templates-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/financeiro/pagar — pattern unificado tickets-card (style v1.3.24+):
   tabs no card-header dentro do mesmo card da tabela. Altura do card via
   .list-page-fill no wrapper (sobrescreve `height: calc(...)` deste pattern). */
.payables-card {
  display: flex;
  flex-direction: column;
}
.payables-card > .card-header {
  flex-shrink: 0;
}
.payables-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.payables-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.payables-card .pagination-footer {
  flex-shrink: 0;
}

/* Nav-tabs do listing — agora .tabs-listing global (style v1.3.57+).
   Estilo em scss/components/_tabs.scss; ID #payablesTabs continua como
   hook HTML mas sem regras próprias. */
/* .profit-page migrado para dash-container (style v1.3.591) */
/* .ledger-page migrado para dash-container (style v1.3.591) */
/* /admin/nfse — chrome ~280px. */
.nfse-card {
  display: flex;
  flex-direction: column;
}
.nfse-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nfse-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.nfse-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/suppliers — wrapper análogo a .ledger-page (style v1.3.35). */
.suppliers-page {
  display: flex;
  flex-direction: column;
}
.suppliers-page > .d-flex,
.suppliers-page > .card:not(:last-child) {
  flex-shrink: 0;
}
.suppliers-page > .card:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.suppliers-page > .card:last-child > .card-header {
  flex-shrink: 0;
}
.suppliers-page > .card:last-child > .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.suppliers-page > .card:last-child > .pagination-footer {
  flex-shrink: 0;
}

.fin-table-overflow-visible {
  overflow: visible;
}

.fin-progress-mini {
  height: 4px;
  width: 100px;
  margin-left: auto;
}

/* Dropdown menus customizados (rounded + z-index acima do modal-backdrop).
   Combinar com .minw-200 ou .minw-220 conforme o caso (ver _typography.scss). */
.fin-dropdown-rounded {
  border-radius: 12px;
  z-index: 1060;
}

/* Modifier do .nav-pills-custom (em _buttons.scss) para a aba de payables.
   Override de font-weight e gap horizontal — preserva paridade visual com o <style>
   inline anterior. */
.nav-pills-fin .nav-link {
  font-weight: 600;
  margin-right: 5px;
}

/* Card de altura fixa — pattern v1.1.0 (style v1.1.x).
   ~440px = topbar 64 + content padding 32 + header 80 + stats cards 96
   + filtros 50 + folga 118. */
.contracts-card {
  display: flex;
  flex-direction: column;
}
.contracts-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contracts-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.contracts-card .pagination-footer {
  flex-shrink: 0;
}

/* === Statement (extrato de contrato) — pattern v1.1.0 (sem pagination — filtro client-side por tipo).
 * /admin/contratos/<id>/extrato. Chrome ~340px (header com info do contrato + filtros pills). */
.statement-card {
  height: calc(100vh - 340px);
  display: flex;
  flex-direction: column;
}
.statement-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.statement-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Progress bar grande no header de admin/contratos/edit (consumo de horas). */
.contract-progress-large {
  height: 25px;
  border-radius: 12px;
  background: #edf2f7;
}

/* Hover sutil nas rows da tabela de contratos (admin/contratos/index). */
.contract-row:hover {
  background-color: #fcfcfd;
}

/* Snapshot jurídico em admin/contratos/view_document — card wrapper + iframe. */
.contract-document-card {
  border-radius: 0;
  background: transparent;
}

.contract-document-iframe {
  width: 100%;
  height: 1000px;
  border: none;
  background: white;
}

/* Print rules específicas da view_document (extras sobre _print.scss global):
   esconde a info card e força iframe full-height/no-border. */
@media print {
  .contract-document-view .card-body.p-4 {
    display: none !important;
  }
  .contract-document-view iframe {
    height: 100% !important;
    border: none !important;
  }
}

/* === Overrides locais de classes órfãs (escopo restrito pra preservar status quo) ===

   Bloco C v1.0.3 documentou .btn-white como dead code em vários `<style>` page-scoped:
   manter status quo significa NÃO promovê-la a global. Aqui escopamos só para a tabela
   `#contractsTable` (admin/contratos/index) — único lugar onde o `<style>` legado
   estava de fato estilizando os action buttons. */
#contractsTable .btn-white {
  background-color: #fff;
  color: #4a5568;
}

#contractsTable .btn-white:hover {
  background-color: #f7fafc;
  color: #2d3748;
}

/* .btn-navy — também órfã global. Estava no `<style>` de admin/contratos/create.php.
   Escopamos só para o form de criação (`#contractForm`) pra preservar o look da tela
   sem afetar todas as outras telas do sistema que usam `.btn-navy` sem estilo. */
#contractForm .btn-navy {
  background-color: #002B49;
  color: white;
}

#contractForm .btn-navy:hover {
  background-color: #003d66;
  color: white;
  transform: translateY(-1px);
}

/* Style v1.3.120: tabs canônicas de Editar Contrato (#contractTabs)
   migradas para classe global `.tabs-listing` em components/_tabs.scss.
   ID continua como hook HTML — regras removidas daqui. */
/* === Cards altura fixa — pattern v1.1.0 (style v1.1.x) === */
/* /admin/configuracoes/oauth — pattern v1.1.0+ com .list-page-fill (style v1.3.71).
   Sem height: calc — wrapper .list-page-fill fornece altura via flex. */
.oauth-clients-card {
  display: flex;
  flex-direction: column;
}
.oauth-clients-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.oauth-clients-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.oauth-clients-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/settings/event-mappings — altura dinâmica. */
.event-mappings-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/api-tokens (index) — chrome ~340px (header + alert flash de novo token). */
.api-tokens-card {
  height: calc(100vh - 340px);
  display: flex;
  flex-direction: column;
}
.api-tokens-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.api-tokens-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.api-tokens-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/configuracoes/ai-providers — altura dinâmica. */
.ai-providers-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/configuracoes/privacidade — editor do termo LGPD ocupa a tela inteira:
   o <textarea> cresce para preencher o card até a barra de "Salvar".
   Chrome ~172px: topbar 70 + .content-body padding 48 + config-back-bar 54. */
.lgpd-term-page {
  height: calc(100vh - 172px);
  display: flex;
  flex-direction: column;
}
.lgpd-term-page > form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lgpd-term-page .lgpd-term-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lgpd-term-page .lgpd-term-card > .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lgpd-term-page .lgpd-term-field {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lgpd-term-page .lgpd-term-field textarea {
  flex: 1;
  min-height: 120px;
  resize: none;
}

/* Form de Configuração longo que ocupa a tela: o card preenche a altura, o
   card-body rola internamente e a barra de "Salvar" (irmã do card no form)
   fica fixa/visível no rodapé. Para forms com muitos campos (ex.:
   /admin/configuracoes/juridico). Chrome ~172px: topbar 70 + content-body 48 +
   config-back-bar 54. */
.config-form-page {
  height: calc(100vh - 172px);
  display: flex;
  flex-direction: column;
}
.config-form-page > form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.config-form-page .config-form-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.config-form-page .config-form-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* /admin/api-tokens/logs — chrome ~340px (header 70 + filtros card 110 + folga 96). */
.api-logs-card {
  height: calc(100vh - 340px);
  display: flex;
  flex-direction: column;
}
.api-logs-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.api-logs-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.api-logs-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/settings/quick-responses — altura dinâmica. */
.quick-responses-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/settings/chat-responses (Snippets Chat) — chrome 190px (style v1.3.55+
 * — alinha com .inbox-card v1.3.51 / pattern de toolbar flutuante leve):
 *   topbar 70 + content-body padding 48 + toolbar flutuante (search/btn + mb-3) ~52 + folga 20.
 */
.chat-responses-card {
  height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
}
.chat-responses-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-responses-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.chat-responses-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/settings/mail-templates — altura dinâmica. */
.mail-templates-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/settings/daemon-logs — altura dinâmica. */
.daemon-logs-card .pagination-footer {
  flex-shrink: 0;
}

/* === Dashboard cards (admin/configuracoes — settings/index.php) === */
/* Icon-shape: círculo 60×60 + flex centered. Substitui inline 8x duplicado. */
.icon-shape {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variantes light (rgba 0.1 alpha) — diferentes do .bg-*-soft em _badges.scss
   (cores Bootstrap nativas vs RC palette). Usado nos card icons de settings. */
.bg-light-primary {
  background-color: rgba(0, 43, 73, 0.1);
}

.bg-light-success {
  background-color: rgba(25, 135, 84, 0.1);
}

.bg-light-warning {
  background-color: rgba(255, 193, 7, 0.1);
}

.bg-light-info {
  background-color: rgba(13, 202, 240, 0.1);
}

.bg-light-dark {
  background-color: rgba(33, 37, 41, 0.1);
}

.bg-light-indigo {
  background-color: rgba(102, 16, 242, 0.1);
}

/* Hover lift effect. Aplicado nos cards de settings/index — eleva e adiciona shadow. */
.hover-up {
  transition: all 0.3s ease;
}
.hover-up:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* === daemon_logs/index.php === */
/* Mensagem de log com word-break para conteúdo longo (stack traces, JSON). */
.daemon-log-message {
  max-width: 800px;
  word-break: break-all;
}

/* Background navy-light (rgba 0.05 — mais claro que o .bg-light-primary 0.1). */
.bg-navy-light {
  background-color: rgba(0, 43, 73, 0.05);
}

/* Linha destacada para logs de erro (rgba 0.03 — sutil). */
.table-danger-light {
  background-color: rgba(220, 53, 69, 0.03);
}

/* === mail_templates/create.php + edit.php === */
/* Textarea do editor de código HTML — sem border-radius para não quebrar o tab-content
   wrapper, sem outline/box-shadow no focus. */
.code-editor-textarea {
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

/* Iframe do preview do template renderizado. */
.template-preview-iframe {
  width: 100%;
  height: 600px;
  border: none;
  background: #f8f9fa;
}

/* Sombra inset para dar profundidade ao tab-content do editor. */
.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* Override do accordion-button do Bootstrap 5 (sidebar de variáveis dinâmicas). */
.accordion-button::after {
  background-size: 0.8rem;
}

.accordion-button:not(.collapsed) {
  color: var(--brand-primary);
}

/* === mail_templates/index.php — listagem === */
/* Btn-white scoped pro listing de templates (orphan globally — preserva status quo
   das outras 9+ telas que usam .btn-white sem estilo). Mesma decisão de Bloco C
   e contratos. Diferente de #contractsTable (cores diferentes). */
#mailTemplatesTable .btn-white {
  background: #fff;
  border: 1px solid #edf2f7;
}

#mailTemplatesTable .btn-white:hover {
  background: #f8fafc;
}

/* === api_tokens — overrides globais === */
/* Form-check-input (radio + checkbox) ampliados para 1.25rem (Bootstrap default 1em).
   Promovido dos <style> de api_tokens/create + edit. Aplica em toda a página onde
   estiverem dentro de uma .api-tokens-form. */
.api-tokens-form .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
}

/* Form-check checked → verde (sucesso visual ao ativar token). Scoped a
   #apiTokensList pra não interferir em outras toggles do sistema. */
#apiTokensList .form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
}

/* Pre dos payload JSON em api_tokens/logs.php. */
.payload-pre {
  max-height: 500px;
  overflow-y: auto;
  font-family: "Fira Code", monospace;
  font-size: 13px;
}

/* === Bloco F4 v1.0.12 — document_templates + inbox === */
/* Preview de papel A4 nos editores de templates de documento (admin/document_templates).
   Replica dimensões físicas A4 — 210×297mm com padding 20mm. */
.a4-paper-preview {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm;
}

/* Wrapper do corpo do e-mail recebido (admin/inbox/show). Mínimo de altura para
   garantir que o card "respire" mesmo com conteúdo pequeno. */
.email-body-wrapper {
  min-height: 400px;
  overflow-x: auto;
}

/* Iframe que carrega o HTML do e-mail (sandboxed). */
.email-body-iframe {
  width: 100%;
  border: none;
  min-height: 400px;
}

/* === Bloco F4 v1.0.12 — admin/legal/dossier_view ===
 * Header logo do dossiê de auditoria legal (60px height + margin-bottom 20px).
 * Página standalone com layout print-friendly (footer_blank). */
.dossier-header-logo {
  height: 60px;
  margin-bottom: 20px;
}

/* === Bloco F4 v1.0.12 — admin/resources/hub_list ===
 * Hover lift de cards de orquestração ISP. Promovido do <style> page-scoped. */
.hover-elevated:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-elevated) !important;
}

/* === Lista de clientes (index.php) ===
 * Card de altura fixa = viewport menos chrome acima. Tabela rola por dentro;
 * paginação fica colada no rodapé.
 * ~360px = topbar 64 + content padding 32 + header 80 + filtros pills+busca 50
 *        + folga 134 (legendas, contagens). Pattern v1.1.0 (style v1.1.x).
 */
.clients-card {
  display: flex;
  flex-direction: column;
}
.clients-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.clients-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.clients-card .pagination-footer {
  flex-shrink: 0;
}

/* === Recursos ISP (clientes/resources.php) === */
/* Card de ASN com top-border brand (substitui inline `style="border-top: 4px..."`). */
.asn-card {
  border-top: 4px solid var(--brand-primary) !important;
}

/* Tabela com border-spacing — gaps entre rows pra visual de "cards stack". */
.resources-table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

/* Células sem border (efeito "row card" combinado com .resources-table). */
.cell-borderless {
  border: none;
}

.cell-rounded-left {
  border-radius: 8px 0 0 8px;
  border: none;
}

.cell-rounded-right {
  border-radius: 0 8px 8px 0;
  border: none;
}

/* Border dashed para os botões "Vincular Bloco IP" outline. */
.border-dashed {
  border-style: dashed !important;
  border-width: 2px;
}

/* Hover em ícones com opacity (aparece full ao passar mouse). */
.hover-opacity-100:hover {
  opacity: 1 !important;
}

/* Style v1.3.120: tabs canônicas das telas de clientes (#view360Tabs,
   #hubTabs, #clientTabs) migradas para classe global `.tabs-listing`
   em components/_tabs.scss. Os IDs ficam só como hook HTML — regras
   removidas daqui pra evitar duplicação (eram idênticas à classe). */
/* Style v1.3.93: compactação Editar Cliente — reduz altura dos cards p/
   caber em viewport ≥1024px sem scroll. Escopado p/ não afetar outros
   forms; complementa o `card-body p-2` + `g-2` + `mb-2` aplicados no
   HTML. */
#pane-entity .form-label,
#pane-sot .form-label {
  margin-bottom: 0.25rem;
}
#pane-entity .form-control,
#pane-entity .form-select,
#pane-sot .form-control,
#pane-sot .form-select {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  font-size: 0.875rem;
}
#pane-entity .input-group-text,
#pane-sot .input-group-text {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* === Card altura fixa — pattern v1.1.0 (style v1.1.x) ===
 * /admin/field-service?view=list — chrome ~280px. */
.field-service-card {
  display: flex;
  flex-direction: column;
}
.field-service-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.field-service-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.field-service-card .pagination-footer {
  flex-shrink: 0;
}

/* === field_service/index.php — mapa Leaflet === */
.visits-map {
  height: 70vh;
  width: 100%;
  border-radius: 10px;
}

/* === field_service/show.php — custom pills + chat + cards === */
.custom-pills .nav-link {
  color: #002b49;
  background: #f0f2f5;
  margin-right: 10px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.custom-pills .nav-link.active {
  background: #002b49;
  color: #fff;
  border-color: #002b49;
}
.custom-pills .nav-link:hover:not(.active) {
  background: #e2e6ea;
}

/* Chat de negociação de datas (max-height + overflow + bg). */
.negotiation-chat {
  max-height: 400px;
  overflow-y: auto;
  background: #f8fafc;
}

/* Bolha de mensagem do chat (max-width relativo). */
.message-bubble {
  position: relative;
  max-width: 80%;
}

/* Cards de evidência (galeria fotográfica) com hover lift. */
.evidence-card {
  transition: transform 0.2s;
  cursor: pointer;
}

.evidence-card:hover {
  transform: translateY(-5px);
}

/* Thumbnails de evidências (img ou pdf placeholder). */
.evidence-thumb-150 {
  height: 150px;
}

/* Cards de equipe (rastro GPS por técnico). */
.staff-card {
  background: #fff;
  transition: all 0.2s;
}

.staff-card:hover {
  border-color: #002b49 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* === Timeline de Eventos (App RC ONSITE) === */
/* Linha vertical absoluta entre os ícones da timeline. */
.fs-timeline-line {
  left: 20px;
  top: 30px;
  z-index: 0;
}

/* Ícone circular sobre a linha — z-index para sobrepor. */
.fs-timeline-icon {
  z-index: 1;
}

/* === Utilities locais (alpha + rounded variants) === */
/* Background navy 80% opacidade — usado em badges sobre imagens de evidência. */
.bg-navy-80 {
  background: rgba(0, 43, 73, 0.8);
}

/* Background branco com baixa opacidade — usado em sugestões de data dentro da
   bubble da RC Consultoria (que já tem bg navy). */
.bg-light-opacity {
  background: rgba(255, 255, 255, 0.1);
}

/* Border branca com baixa opacidade — separador entre as colunas do header. */
.border-white-10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Variantes rounded estendidas (Bootstrap só tem rounded-1..5). */
.rounded-15 {
  border-radius: 15px;
}

.rounded-left-10 {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rounded-right-10 {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Em mobile, os "rounded-left-10" e "rounded-right-10" do header viram top/bottom
   pois o layout muda de horizontal para vertical. */
@media (max-width: 767.98px) {
  .rounded-left-10 {
    border-radius: 10px 10px 0 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .rounded-right-10 {
    border-radius: 0 0 10px 10px;
  }
}
/* === rc_diags/index.php === */
/* /admin/diagnostics — wrapper análogo a .ledger-page (style v1.3.36).
   Botões topo + alert opcional + card Listing. Listing cresce até o footer.
   Selector `> :not(:last-child)` cobre alert div + d-flex botões. */
.diagnostics-page {
  height: calc(100vh - 138px);
  display: flex;
  flex-direction: column;
}
.diagnostics-page > :not(:last-child) {
  flex-shrink: 0;
}
.diagnostics-page > .card:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.diagnostics-page > .card:last-child > .card-header {
  flex-shrink: 0;
}
.diagnostics-page > .card:last-child > .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.diagnostics-page > .card:last-child > .pagination-footer {
  flex-shrink: 0;
}

/* === rc_diags/show.php === */
/* Pre escuro do payload JSON cru (footer da tela de diagnóstico). */
.json-payload-pre {
  max-height: 500px;
  overflow-y: auto;
  font-size: 0.8rem;
}

/* Wrapper de scroll para tabelas de wifi vizinhanças e traceroutes (rc_diags/show). */
.scroll-y-280 {
  max-height: 280px;
  overflow-y: auto;
}

/* Parecer da IA renderizado de Markdown (admin/rc_diags/show + portal/rc_diags/show).
   O CommonMark emite h1-h6/p/ul/ol/table crus — sem escopo, herdam os tamanhos
   default do Bootstrap (h1 ~2.5rem) e o parecer fica gigante. Aqui tudo é
   reduzido a uma tipografia compacta de documento, scoped a `.rc-diag-md-body`
   pra não vazar. */
.rc-diag-md-body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-main);
}
.rc-diag-md-body h1, .rc-diag-md-body h2, .rc-diag-md-body h3, .rc-diag-md-body h4, .rc-diag-md-body h5, .rc-diag-md-body h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  margin: 1rem 0 0.4rem;
}
.rc-diag-md-body {
  /* primeiro título não empurra o topo */
}
.rc-diag-md-body > :first-child {
  margin-top: 0;
}
.rc-diag-md-body h1 {
  font-size: 1.15rem;
  color: var(--bg-dark); /* navy */
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-color);
}
.rc-diag-md-body h2 {
  font-size: 1.05rem;
}
.rc-diag-md-body h3 {
  font-size: 0.95rem;
}
.rc-diag-md-body h4, .rc-diag-md-body h5, .rc-diag-md-body h6 {
  font-size: 0.875rem;
}
.rc-diag-md-body p {
  margin: 0 0 0.6rem;
}
.rc-diag-md-body ul, .rc-diag-md-body ol {
  margin: 0 0 0.6rem;
  padding-left: 1.25rem;
}
.rc-diag-md-body li {
  margin-bottom: 0.2rem;
}
.rc-diag-md-body li > ul, .rc-diag-md-body li > ol {
  margin: 0.2rem 0;
}
.rc-diag-md-body strong {
  font-weight: 700;
}
.rc-diag-md-body a {
  color: var(--bg-dark);
  text-decoration: underline;
}
.rc-diag-md-body code {
  font-size: 0.85em;
  background: var(--bg-body);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}
.rc-diag-md-body pre {
  background: var(--bg-body);
  padding: 0.75rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  font-size: 0.8rem;
  margin: 0 0 0.6rem;
}
.rc-diag-md-body pre code {
  background: none;
  padding: 0;
}
.rc-diag-md-body table {
  width: 100%;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  border-collapse: collapse;
}
.rc-diag-md-body table th, .rc-diag-md-body table td {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-color);
}
.rc-diag-md-body table th {
  background: var(--bg-body);
  text-align: left;
  font-weight: 600;
}
.rc-diag-md-body blockquote {
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.75rem;
  border-left: 3px solid var(--border-color);
  color: var(--text-muted);
}
.rc-diag-md-body hr {
  margin: 0.75rem 0;
}

/* === kms/forensic/index.php — overrides scoped a `.kms-audit` === */
/* Página tem `<div class="dash-container kms-audit">` no top. As regras abaixo
   só aplicam dentro desse wrapper, evitando vazar para outras telas. */
.kms-audit .avatar-sm {
  font-size: 0.8rem;
}
.kms-audit .table thead th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.kms-audit .badge {
  font-weight: 500;
  font-size: 0.75rem;
}

/* NOTA: `.bg-success-subtle` local rgba(25,135,84,0.1) **dropado**.
   Bootstrap 5.3 nativo já define essa utility com tom mais vibrante (#d1e7dd).
   Drop accepted como pequena mudança visual semanticamente correta. */
/* === portal/context/select.php — body.context-select-page === */
body.context-select-page {
  background: var(--bg-dark);
}
body.context-select-page .select-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.5, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
body.context-select-page .select-card:hover {
  transform: translateY(-10px);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}
body.context-select-page .select-card .icon-circle {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
}

.context-select-logo {
  max-width: 180px;
  filter: brightness(0) invert(1);
}

/* === portal/contracts/public_signature.php === */
/* Box de preview do contrato com tipografia papel oficial e scroll. */
.signature-document-preview {
  max-height: 500px;
  overflow-y: auto;
  background: #fff;
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* === portal/contracts/view_document.php === */
/* Card que simula papel ofício do documento (sem rounded, fundo do card body branco). */
/* Tipografia do conteúdo do documento (Times New Roman + leading 1.6 + 1.1rem). */
.portal-document-content {
  font-family: "Times New Roman", serif;
  line-height: 1.6;
  font-size: 1.1rem;
}
.portal-document-content h1, .portal-document-content h2, .portal-document-content h3 {
  text-align: center;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.portal-document-content table {
  margin: 30px 0;
}

/* Print rules específicos da view_document portal (esconde ações + reset card). */
@media print {
  .portal-document-card .btn,
  .portal-document-card .btn-outline-secondary,
  .portal-document-card .card-body.p-4 {
    display: none !important;
  }
  .portal-document-card .card {
    box-shadow: none !important;
    margin: 0 !important;
  }
}
/* Gestão de Equipe (/portal/colaboradores) — card de listagem paginada.
 * Mesmo pattern de .dossier-card / .report-profitability-card: a tabela
 * preenche o espaço disponível e o .pagination-footer fica fixo no
 * rodapé do card. Altura é fornecida pelo .list-page-fill no wrapper —
 * com poucas linhas a tabela cabe inteira e não exibe scroll interno. */
.team-card {
  display: flex;
  flex-direction: column;
}
.team-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.team-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.team-card .pagination-footer {
  flex-shrink: 0;
}

/* === public/proposals/status.php — body.proposal-status-page === */
body.proposal-status-page {
  background-color: #f4f7f6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "Inter", sans-serif;
}
body.proposal-status-page .status-card {
  background: white;
  padding: 50px;
  border-radius: 12px;
  text-align: center;
  max-width: 500px;
}
body.proposal-status-page .icon-accepted {
  color: #28a745;
  font-size: 60px;
  margin-bottom: 20px;
}
body.proposal-status-page .icon-rejected {
  color: #dc3545;
  font-size: 60px;
  margin-bottom: 20px;
}

.proposal-status-logo {
  max-height: 40px;
  margin-bottom: 30px;
}

/* === public/proposals/view.php — body.proposal-view-page === */
body.proposal-view-page {
  background-color: #f4f7f6;
  font-family: "Inter", sans-serif;
  padding-top: 50px;
  padding-bottom: 100px;
}
body.proposal-view-page .proposal-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
body.proposal-view-page .proposal-body {
  padding: 40px;
}
body.proposal-view-page {
  /* action-bar fixed bottom — atualmente d-none no HTML, mas mantemos a regra
     caso seja reativado no futuro. */
}
body.proposal-view-page .action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20px;
  border-top: 1px solid #ddd;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}
body.proposal-view-page .btn-accept {
  background-color: var(--brand-primary);
  color: white;
  font-weight: bold;
  border: none;
  padding: 12px 40px;
}
body.proposal-view-page .btn-accept:hover {
  background-color: #002244;
  color: white;
}
body.proposal-view-page .btn-reject {
  color: #dc3545;
  font-weight: 500;
}

/* Card de altura fixa — pattern v1.1.0 (style v1.1.x).
   ~340px = topbar 64 + content padding 32 + header 80 + filtros 50 + folga 114. */
.catalog-card {
  display: flex;
  flex-direction: column;
}
.catalog-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.catalog-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.catalog-card .pagination-footer {
  flex-shrink: 0;
}

/* === Dossiê de Auditoria & Forense (forensic/index.php) ===
 * Card de altura fixa = viewport menos chrome acima (topbar + page padding +
 * header + filtros). Tabela rola por dentro; paginação fica colada no rodapé.
 * ~320px = topbar 64 + content padding 32 + header 70 + filtros card 90 + folga 64.
 */
.kms-audit-card {
  height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
}
.kms-audit-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kms-audit-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.kms-audit-card .pagination-footer {
  flex-shrink: 0;
}

/* === Telemetria de Frota (forensic/telemetry.php) — style v1.3.47 ===
 * Mesmo pattern flex-fill do .kms-audit-card, mas com card-body p-3 (não p-0)
 * porque o conteúdo é grid de cards (.row g-3), não tabela. O scroll vertical
 * fica no card-body diretamente (sem .table-responsive intermediário).
 *
 * Chrome 138px (style v1.3.51 — header card removido):
 *   topbar 70 + content-body padding 48 + folga 20 (sem header próprio).
 */
.telemetria-card {
  height: calc(100vh - 138px);
  display: flex;
  flex-direction: column;
}
.telemetria-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.telemetria-card .pagination-footer {
  flex-shrink: 0;
}

/* === Fila de Aprovação KMS (unclaimed/index.php) — style v1.3.45 ===
 * Mesmo pattern flex-fill do .kms-audit-card. Chrome 138px = topbar 70 +
 * dash padding 48 + folga 20 (sem header/filtros próprios — alerts são
 * dismissíveis e não ocupam altura constante).
 */
.unclaimed-card {
  height: calc(100vh - 138px);
  display: flex;
  flex-direction: column;
}
.unclaimed-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.unclaimed-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.unclaimed-card .pagination-footer {
  flex-shrink: 0;
}

.stakeholders-card .pagination-footer {
  flex-shrink: 0;
}

.chatmix-templates-card .pagination-footer {
  flex-shrink: 0;
}

.document-templates-card {
  height: calc(100vh - 280px);
  display: flex;
  flex-direction: column;
}
.document-templates-card > .card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.document-templates-card .table-responsive {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.document-templates-card .pagination-footer {
  flex-shrink: 0;
}

/* /admin/documentos/variaveis — altura dinâmica. */
.template-vars-card .pagination-footer {
  flex-shrink: 0;
}

.dossier-card .pagination-footer {
  flex-shrink: 0;
}

@media print {
  .dossier-section {
    margin-bottom: 1rem !important;
    page-break-inside: avoid;
  }
}
.report-profitability-card .pagination-footer {
  flex-shrink: 0;
}

.defaults-card .pagination-footer {
  flex-shrink: 0;
}

.wizard-progress .wizard-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  gap: 0.5rem;
}
.wizard-progress .wizard-steps::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 2.5rem;
  right: 2.5rem;
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}
.wizard-progress .wizard-step-indicator {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.wizard-progress .wizard-step-indicator .wizard-step-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cbd5e1;
  color: #64748b;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 1.1rem;
}
.wizard-progress .wizard-step-indicator .wizard-step-label {
  color: #64748b;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.wizard-progress .wizard-step-indicator.active .wizard-step-circle {
  background: #002B49;
  border-color: #002B49;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 43, 73, 0.12);
}
.wizard-progress .wizard-step-indicator.active .wizard-step-label {
  color: #002B49;
}
.wizard-progress .wizard-step-indicator.completed .wizard-step-circle {
  background: #198754;
  border-color: #198754;
  color: #fff;
  font-size: 0;
}
.wizard-progress .wizard-step-indicator.completed .wizard-step-circle::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.05rem;
}
.wizard-progress .wizard-step-indicator.completed .wizard-step-label {
  color: #198754;
}

#clientForm .wizard-step h6 {
  font-size: 1.05rem;
}
#clientForm .wizard-step .form-label {
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
#clientForm .wizard-step .form-control,
#clientForm .wizard-step .form-select {
  font-size: 1rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
#clientForm .wizard-step .form-check-label {
  font-size: 0.95rem;
}
#clientForm .card-footer .btn {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.95rem;
}

.wiki-layout {
  display: grid;
  grid-template-columns: 320px 1fr 240px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1279.98px) {
  .wiki-layout {
    grid-template-columns: 320px 1fr;
  }
  .wiki-layout .wiki-toc-col {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .wiki-layout {
    grid-template-columns: 1fr;
  }
  .wiki-layout .wiki-tree-col {
    display: none;
  }
}

.wiki-tree-col {
  position: sticky;
  top: 1rem;
  align-self: start;
}

.wiki-tree-search {
  position: relative;
  margin-bottom: 0.75rem;
}
.wiki-tree-search i {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.8rem;
  pointer-events: none;
}
.wiki-tree-search input {
  width: 100%;
  padding: 0.45rem 0.5rem 0.45rem 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wiki-tree-search input::placeholder {
  color: #cbd5e1;
}
.wiki-tree-search input:focus {
  outline: none;
  border-color: #1cabeb;
  box-shadow: 0 0 0 3px rgba(28, 171, 235, 0.15);
}

.wiki-tree {
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 0.75rem 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: 0.875rem;
}
.wiki-tree .wiki-tree__empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}
.wiki-tree .wiki-tree__empty i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.wiki-tree .wiki-tree__cat {
  margin-bottom: 0.5rem;
}
.wiki-tree .wiki-tree__cat.is-hidden {
  display: none;
}
.wiki-tree .wiki-tree__cat > .wiki-tree__cat-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  color: #002B49;
  padding: 0.5rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  border-radius: 6px;
  text-align: left;
  transition: background 0.15s ease;
}
.wiki-tree .wiki-tree__cat > .wiki-tree__cat-label:hover {
  background: #f1f5f9;
}
.wiki-tree .wiki-tree__cat > .wiki-tree__cat-label > .wiki-tree__cat-name {
  flex-grow: 1;
}
.wiki-tree .wiki-tree__cat > .wiki-tree__cat-label > i:first-child {
  color: #1cabeb;
}
.wiki-tree .wiki-tree__cat .wiki-tree__cat-count {
  background: #e2e8f0;
  color: #475569;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.wiki-tree .wiki-tree__cat .wiki-tree__chev {
  color: #94a3b8 !important;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
.wiki-tree .wiki-tree__cat.is-collapsed .wiki-tree__chev {
  transform: rotate(-90deg);
}
.wiki-tree .wiki-tree__cat.is-collapsed .wiki-tree__cat-items {
  display: none;
}
.wiki-tree .wiki-tree__cat .wiki-tree__cat-items {
  margin-top: 0.15rem;
}
.wiki-tree .wiki-tree__cat .wiki-tree__art {
  display: block;
  padding: 0.4rem 0.5rem 0.4rem 1.5rem;
  color: #475569;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease-out;
  position: relative;
}
.wiki-tree .wiki-tree__cat .wiki-tree__art.is-hidden {
  display: none;
}
.wiki-tree .wiki-tree__cat .wiki-tree__art::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}
.wiki-tree .wiki-tree__cat .wiki-tree__art:hover {
  color: #002B49;
  background: #f1f5f9;
}
.wiki-tree .wiki-tree__cat .wiki-tree__art:hover::before {
  background: #1cabeb;
}
.wiki-tree .wiki-tree__cat .wiki-tree__art.is-active {
  color: #002B49;
  background: rgba(28, 171, 235, 0.08);
  font-weight: 600;
}
.wiki-tree .wiki-tree__cat .wiki-tree__art.is-active::before {
  background: #002B49;
  width: 3px;
}

.wiki-toc {
  position: sticky;
  top: calc(70px + 1rem);
  font-size: 0.825rem;
}
.wiki-toc .wiki-toc__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}
.wiki-toc .wiki-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #e2e8f0;
}
.wiki-toc .wiki-toc__list a {
  display: block;
  padding: 0.3rem 0.75rem;
  color: #64748b;
  text-decoration: none;
  transition: all 0.15s ease-out;
  margin-left: -2px;
  border-left: 2px solid transparent;
}
.wiki-toc .wiki-toc__list a:hover {
  color: #002B49;
}
.wiki-toc .wiki-toc__list a.is-active {
  color: #002B49;
  font-weight: 600;
  border-left-color: #002B49;
}
.wiki-toc .wiki-toc__list a.is-h3 {
  padding-left: 1.5rem;
  font-size: 0.78rem;
}

.wiki-content {
  font-size: 1rem;
  line-height: 1.75;
  color: #1e293b;
}
.wiki-content h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: #002B49;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.wiki-content h2 {
  font-size: 1.625rem;
  font-weight: 700;
  color: #002B49;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
  scroll-margin-top: 90px;
}
.wiki-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0c4474;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 90px;
}
.wiki-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #475569;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.wiki-content p {
  margin-bottom: 1.1rem;
}
.wiki-content a {
  color: #002B49;
  text-decoration: underline;
  text-decoration-color: rgba(0, 43, 73, 0.3);
  text-underline-offset: 3px;
  transition: all 0.15s ease-out;
}
.wiki-content a:hover {
  color: #1cabeb;
  text-decoration-color: currentColor;
}
.wiki-content ul, .wiki-content ol {
  margin-bottom: 1.1rem;
  padding-left: 1.5rem;
}
.wiki-content ul li, .wiki-content ol li {
  margin-bottom: 0.35rem;
}
.wiki-content ul li::marker {
  color: #1cabeb;
}
.wiki-content ol li::marker {
  color: #1cabeb;
  font-weight: 700;
}
.wiki-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
  margin: 1.25rem 0;
}
.wiki-content blockquote {
  border-left: 4px solid #1cabeb;
  background: #f1f5f9;
  padding: 0.75rem 1.25rem;
  margin: 1.25rem 0;
  border-radius: 0 8px 8px 0;
  color: #334155;
  font-style: italic;
}
.wiki-content blockquote p:last-child {
  margin-bottom: 0;
}
.wiki-content code {
  background: #f1f5f9;
  color: #002B49;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: "JetBrains Mono", "Fira Code", Consolas, Menlo, monospace;
}
.wiki-content pre {
  background: #002B49;
  color: #f8fafc;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.25rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
.wiki-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
}
.wiki-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}
.wiki-content table thead {
  background: #002B49;
  color: #ffffff;
}
.wiki-content table thead th {
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wiki-content table tbody td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.95rem;
}
.wiki-content table tbody tr:hover td {
  background: #f8fafc;
}
.wiki-content hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 2rem 0;
}

.wiki-article-header {
  margin-bottom: 1.75rem;
}
.wiki-article-header .wiki-breadcrumb {
  font-size: 0.825rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}
.wiki-article-header .wiki-breadcrumb a {
  color: #64748b;
  text-decoration: none;
}
.wiki-article-header .wiki-breadcrumb a:hover {
  color: #002B49;
}
.wiki-article-header .wiki-breadcrumb .sep {
  margin: 0 0.5rem;
  color: #cbd5e1;
}
.wiki-article-header .wiki-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.825rem;
  color: #64748b;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
}

.wiki-cat-card {
  display: block;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.wiki-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 43, 73, 0.1);
  border-color: rgba(28, 171, 235, 0.2);
}
.wiki-cat-card .wiki-cat-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(28, 171, 235, 0.1), rgba(0, 43, 73, 0.05));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.wiki-cat-card .wiki-cat-card__icon i {
  font-size: 1.5rem;
  color: #002B49;
}
.wiki-cat-card .wiki-cat-card__title {
  font-weight: 700;
  color: #002B49;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.wiki-cat-card .wiki-cat-card__count {
  font-size: 0.775rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.csat-card {
  max-width: 560px;
}

.star-btn {
  background: none;
  border: 0;
  font-size: 3rem;
  color: #cbd5e1;
  transition: all 0.15s ease-out;
  cursor: pointer;
  padding: 0 0.25rem;
}
.star-btn:hover, .star-btn.is-selected, .star-btn.is-hover {
  color: #f59e0b;
  transform: scale(1.1);
}

.wiki-hero {
  background: linear-gradient(135deg, #002B49 0%, #0c4474 100%);
  color: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  text-align: center;
}
.wiki-hero h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}
.wiki-hero p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
}
.wiki-hero .wiki-hero__search {
  max-width: 600px;
  margin: 0 auto;
}
.wiki-hero .wiki-hero__search .input-group {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  overflow: hidden;
}
.wiki-hero .wiki-hero__search .form-control, .wiki-hero .wiki-hero__search .input-group-text {
  border: 0;
  padding: 0.85rem 1rem;
  font-size: 1rem;
}
.wiki-hero .wiki-hero__search .input-group-text {
  background: #ffffff;
}
.wiki-hero .wiki-hero__search .btn {
  border-radius: 0;
  padding: 0 1.5rem;
}

.wiki-article-tabs {
  border-bottom: 1px solid #e2e8f0;
  margin: 1.5rem 0 1rem;
  gap: 0;
}
.wiki-article-tabs .nav-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #64748b;
  font-weight: 600;
  padding: 0.65rem 1rem;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wiki-article-tabs .nav-link:hover {
  color: #002B49;
  background: #f8fafc;
}
.wiki-article-tabs .nav-link.active {
  color: #002B49;
  border-bottom-color: #1cabeb;
  background: transparent;
}
.wiki-article-tabs__panels { /* container */ }
.wiki-article-tabs__panel {
  display: none;
}
.wiki-article-tabs__panel.is-active {
  display: block;
}

.wiki-feedback {
  margin: 2rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.wiki-feedback__label {
  font-weight: 700;
  color: #002B49;
  margin-bottom: 0.75rem;
}
.wiki-feedback__btn {
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.wiki-feedback__btn.is-active.is-yes {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.wiki-feedback__btn.is-active.is-yes .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
.wiki-feedback__btn.is-active.is-no {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.wiki-feedback__btn.is-active.is-no .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

.wiki-quicksearch {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
}
.wiki-quicksearch.is-open {
  display: block;
}
.wiki-quicksearch__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 43, 73, 0.4);
  backdrop-filter: blur(2px);
}
.wiki-quicksearch__box {
  position: relative;
  margin: 8vh auto 0;
  max-width: 640px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: wiki-quicksearch-pop 0.15s ease-out;
}
.wiki-quicksearch__input-wrap {
  position: relative;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.wiki-quicksearch__input-wrap > i {
  position: absolute;
  left: 1.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}
.wiki-quicksearch__input-wrap input {
  width: 100%;
  padding: 0.4rem 4rem 0.4rem 2rem;
  border: 0;
  outline: none;
  font-size: 1.05rem;
}
.wiki-quicksearch__input-wrap input::placeholder {
  color: #cbd5e1;
}
.wiki-quicksearch__esc {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}
.wiki-quicksearch__results {
  max-height: 60vh;
  overflow-y: auto;
}
.wiki-quicksearch__hint {
  padding: 1.5rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}
.wiki-quicksearch__hint kbd {
  background: #f1f5f9;
  color: #475569;
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  border: 1px solid #e2e8f0;
}
.wiki-quicksearch__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: #1e293b;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s ease;
}
.wiki-quicksearch__item > i {
  color: #1cabeb;
  flex-shrink: 0;
}
.wiki-quicksearch__item-body {
  flex-grow: 1;
  min-width: 0;
}
.wiki-quicksearch__item-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #002B49;
}
.wiki-quicksearch__item-excerpt {
  font-size: 0.8rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.15rem;
}
.wiki-quicksearch__item-cat {
  font-size: 0.7rem;
  color: #94a3b8;
  flex-shrink: 0;
  background: #f1f5f9;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wiki-quicksearch__item.is-active, .wiki-quicksearch__item:hover {
  background: rgba(28, 171, 235, 0.06);
}
.wiki-quicksearch__item.is-active {
  border-left: 3px solid #1cabeb;
  padding-left: calc(1.25rem - 3px);
}

@keyframes wiki-quicksearch-pop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.wiki-recent {
  margin-top: 1rem;
  background: #ffffff;
  border-radius: 12px;
  padding: 0.75rem 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.wiki-recent__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #002B49;
  padding: 0.4rem 0.6rem;
}
.wiki-recent__label i {
  color: #f37021;
  margin-right: 0.4rem;
}
.wiki-recent__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  color: #475569;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.82rem;
  transition: all 0.15s ease-out;
}
.wiki-recent__item > i {
  color: #94a3b8;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.wiki-recent__item:hover {
  background: #f1f5f9;
  color: #002B49;
}
.wiki-recent__item:hover > i {
  color: #1cabeb;
}
.wiki-recent__item.is-active {
  background: rgba(28, 171, 235, 0.08);
  color: #002B49;
  font-weight: 600;
}
.wiki-recent__title {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wiki-recent__time {
  font-size: 0.7rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.wiki-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wiki-article-tags .badge {
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

.wiki-article-cover {
  margin-bottom: 1.25rem;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  max-height: 360px;
}
.wiki-article-cover img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

.wiki-art-row__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.95rem;
}
.wiki-art-row__thumb--placeholder {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
a:hover .wiki-art-row__thumb {
  border-color: #3b82f6;
}

.wiki-callout {
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid;
  margin: 16px 0;
  line-height: 1.55;
}
.wiki-callout strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wiki-callout--info {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e3a8a;
}
.wiki-callout--warn {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
.wiki-callout--ok {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
.wiki-callout--danger {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.wiki-video {
  position: relative;
  padding-top: 56.25%;
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.wiki-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* /admin/agenda — calendário mensal.
   Hospeda os estilos estáticos que estavam inline na view (padronização — sem style="").
   O `display:none` inicial dos combos/ações continua inline porque é alternado em runtime
   pelo JS (`.style.display`), conforme a exceção aceita no CLAUDE_STYLE. */
/* Células do dia: altura fixa, conteúdo alinhado ao topo. */
.agenda-grid td {
  height: 96px;
  vertical-align: top;
}

/* Dropdown dos combos (cliente/contrato) sobre o modal — z-index acima do modal + scroll. */
.agenda-combo-list {
  z-index: 1085;
  max-height: 200px;
  overflow-y: auto;
}

.rcdiag-landing-page {
  background: #f8fafc;
  color: #1e293b;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.rcdiag-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f1e3c;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 56px;
}
.rcdiag-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.rcdiag-nav__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.rcdiag-nav__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.rcdiag-nav__actions {
  display: flex;
  gap: 0.5rem;
}

.rcdiag-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #1e293b;
  text-align: center;
  margin-bottom: 0.75rem;
  letter-spacing: -0.025em;
}
.rcdiag-section-title--light {
  color: #ffffff;
}

.rcdiag-section-subtitle {
  font-size: 1.05rem;
  color: #64748b;
  text-align: center;
  margin-bottom: 2.5rem;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.rcdiag-section-subtitle--light {
  color: rgba(255, 255, 255, 0.8);
}

.rcdiag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  border: 2px solid transparent;
}
.rcdiag-btn--primary {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}
.rcdiag-btn--primary:hover, .rcdiag-btn--primary:focus {
  background: #1e40af;
  border-color: #1e40af;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(29, 78, 216, 0.35);
}
.rcdiag-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}
.rcdiag-btn--ghost:hover, .rcdiag-btn--ghost:focus {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}
.rcdiag-btn--outline {
  background: transparent;
  color: #1d4ed8;
  border-color: #1d4ed8;
}
.rcdiag-btn--outline:hover, .rcdiag-btn--outline:focus {
  background: #1d4ed8;
  color: #ffffff;
}
.rcdiag-btn--download {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
}
.rcdiag-btn--download:hover, .rcdiag-btn--download:focus {
  background: #0d9668;
  border-color: #0d9668;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.rcdiag-hero {
  background: linear-gradient(135deg, #0f1e3c 0%, #1a2f57 60%, #263d6b 100%);
  padding: 5rem 1.5rem 4rem;
  overflow: hidden;
}
.rcdiag-hero__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.rcdiag-hero__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.rcdiag-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.rcdiag-hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}
.rcdiag-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.rcdiag-features {
  padding: 4.5rem 1.5rem;
  background: #ffffff;
}
.rcdiag-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.rcdiag-feature-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rcdiag-feature-card:hover {
  box-shadow: 0 4px 24px rgba(15, 30, 60, 0.1);
  transform: translateY(-2px);
}
.rcdiag-feature-card__icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1.1rem;
}
.rcdiag-feature-card h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.rcdiag-feature-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

.rcdiag-lgpd-seal {
  display: inline-block;
  font-size: 0.75rem;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  margin-top: 0.4rem;
  font-weight: 600;
}

.rcdiag-ia {
  background: #f8fafc;
  padding: 4rem 1.5rem;
}
.rcdiag-ia__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(15, 30, 60, 0.1);
}
@media (max-width: 640px) {
  .rcdiag-ia__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem;
  }
}
.rcdiag-ia__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0f1e3c 0%, #1d4ed8 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.5rem;
}
.rcdiag-ia__content h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.rcdiag-ia__content p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.rcdiag-ia__content p:last-child {
  margin-bottom: 0;
}
.rcdiag-ia__note {
  font-size: 0.85rem !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.07);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

.rcdiag-steps {
  background: #ffffff;
  padding: 4.5rem 1.5rem;
}
.rcdiag-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

.rcdiag-step {
  text-align: center;
  padding: 1.5rem 1rem;
}
.rcdiag-step__num {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 4px 16px rgba(29, 78, 216, 0.3);
}
.rcdiag-step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.rcdiag-step p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

.rcdiag-download {
  background: linear-gradient(135deg, #0f1e3c 0%, #1d4ed8 100%);
  padding: 4.5rem 1.5rem;
}
.rcdiag-download__note {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.rcdiag-plans {
  background: #f8fafc;
  padding: 4.5rem 1.5rem;
}
.rcdiag-plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 780px;
  margin: 0 auto;
}

.rcdiag-plan {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rcdiag-plan:hover {
  box-shadow: 0 8px 40px rgba(15, 30, 60, 0.16);
  transform: translateY(-3px);
}
.rcdiag-plan--pro {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}
.rcdiag-plan__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1d4ed8;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rcdiag-plan__header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.rcdiag-plan__header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}
.rcdiag-plan__price {
  font-size: 1.4rem;
  font-weight: 900;
  color: #1d4ed8;
  letter-spacing: -0.02em;
}
.rcdiag-plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.rcdiag-plan__features li {
  font-size: 0.88rem;
  color: #64748b;
  padding: 0.35rem 0;
  line-height: 1.45;
}

.rcdiag-signup {
  background: #ffffff;
  padding: 4.5rem 1.5rem;
}
.rcdiag-signup__box {
  max-width: 640px;
  margin: 0 auto;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2.5rem;
}
@media (max-width: 480px) {
  .rcdiag-signup__box {
    padding: 1.5rem;
  }
}
.rcdiag-signup__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.5rem;
  text-align: center;
  letter-spacing: -0.025em;
}
.rcdiag-signup__subtitle {
  font-size: 0.92rem;
  color: #64748b;
  text-align: center;
  margin-bottom: 1.75rem;
  line-height: 1.55;
}
.rcdiag-signup__form .form-label {
  font-size: 0.88rem;
  color: #1e293b;
}
.rcdiag-signup__form .form-control {
  font-size: 0.92rem;
  border-color: #e2e8f0;
  background: #ffffff;
}
.rcdiag-signup__form .form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.rcdiag-signup__form .form-text {
  font-size: 0.78rem;
}

.rcdiag-success-section {
  min-height: calc(100vh - 56px - 64px);
  display: flex;
  align-items: center;
  padding: 3rem 1.5rem;
}

.rcdiag-success-box {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 4px 24px rgba(15, 30, 60, 0.1);
}
@media (max-width: 480px) {
  .rcdiag-success-box {
    padding: 2rem 1.5rem;
  }
}
.rcdiag-success-box__icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #10b981 0%, #0a8a5f 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #ffffff;
  font-size: 1.8rem;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
}
.rcdiag-success-box__icon--info {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  box-shadow: 0 4px 20px rgba(29, 78, 216, 0.35);
}
.rcdiag-success-box__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}
.rcdiag-success-box__greeting {
  font-size: 1rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}
.rcdiag-success-box__message {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.rcdiag-success-box__info {
  font-size: 0.85rem;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.75rem;
  text-align: left;
}
.rcdiag-success-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.rcdiag-footer {
  background: #0f1e3c;
  padding: 2.5rem 1.5rem;
}
.rcdiag-footer--minimal {
  padding: 1.25rem 1.5rem;
}
.rcdiag-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .rcdiag-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}
.rcdiag-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
}
.rcdiag-footer__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.rcdiag-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  justify-content: center;
}
.rcdiag-footer__links a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.rcdiag-footer__links a:hover {
  color: #ffffff;
}
.rcdiag-footer__copy {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.55;
}
.rcdiag-footer__copy a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.rcdiag-footer__copy a:hover {
  color: #ffffff;
}