/* =============================================================
   MANUAL DE COMISSÃO — UNIVALORES V.04
   styles.css · Mai/2026
   Base: v04 · Melhorias: UI/UX Pro Max
   ============================================================= */


/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ===== DESIGN TOKENS — MODO ESCURO (padrão) ===== */
:root,
[data-theme="dark"] {

  /* Cor base */
  --bg:               #111116;
  --bg-card:          #181824;
  --bg-card-2:        #1E1E2E;
  --text:             #FFFFFF;
  --text-dim:         rgba(255,255,255,0.72);
  --text-muted:       #8A8A9A;
  --border:           rgba(255,255,255,0.06);
  --border-m:         rgba(255,255,255,0.11);
  --border-strong:    rgba(255,255,255,0.25);

  /* Marca */
  --accent:           #734A00;
  --accent-l:         #AD6F00;
  --gold:             #E6A600;

  /* Sidebar */
  --sidebar-bg:       rgba(17,17,22,0.98);
  --sidebar-border:   rgba(115,74,0,0.18);
  --sidebar-hover:    rgba(255,255,255,0.04);
  --sidebar-active:   rgba(173,111,0,0.12);

  /* Tabs */
  --tab-active-txt:   #AD6F00;
  --tab-active-line:  #AD6F00;
  --tab-inactive-txt: #8A8A9A;
  --tab-hover-bg:     rgba(255,255,255,0.05);
  --tab-bar-bg:       #181824;

  /* Tabelas */
  --th-bg:            rgba(255,255,255,0.04);
  --th-text:          #8A8A9A;
  --tr-stripe:        rgba(255,255,255,0.02);
  --tr-hover:         rgba(255,255,255,0.04);
  --td-first:         #FFFFFF;
  --td-text:          rgba(255,255,255,0.72);

  /* Caixas */
  --info-bg:          rgba(115,74,0,0.12);
  --info-border:      rgba(173,111,0,0.30);
  --info-text:        rgba(255,255,255,0.72);
  --info-label:       #AD6F00;
  --noestorno-bg:     rgba(30,110,55,0.14);
  --noestorno-border: rgba(40,140,70,0.32);
  --noestorno-text:   rgba(255,255,255,0.72);
  --alert-bg:         rgba(160,80,0,0.14);
  --alert-border:     rgba(200,110,0,0.32);
  --alert-text:       rgba(255,255,255,0.72);
  /* Misc */
  --search-bg:        rgba(255,255,255,0.06);
  --toggle-bg:        rgba(255,255,255,0.06);
  --mark-bg:          rgba(230,166,0,0.28);
  --mark-text:        #FFFFFF;
  --fluxo-bg:         #1E1E2E;
  --section-header-bg:#111116;

  /* Cards da home — hover */
  --gold-glow:        rgba(230,166,0,0.06);
  --gold-dim:         rgba(230,166,0,0.12);
  --card-hover-bg:    #1E1E2E;
  --card-hover-border:rgba(173,111,0,0.30);

  /* Pills — cores por estado de tema */
  --pill-green-text:  #78D892;
  --pill-green-border:rgba(120,216,146,0.28);
  --pill-green-bg:    linear-gradient(180deg, rgba(120,216,146,0.13), rgba(120,216,146,0.07));
  --pill-blue-text:   #75A7FF;
  --pill-blue-border: rgba(117,167,255,0.28);
  --pill-blue-bg:     linear-gradient(180deg, rgba(117,167,255,0.13), rgba(117,167,255,0.07));

  /* Avisos — backgrounds unificados */
  --aviso-green-bg:   rgba(120,216,146,0.09);
  --aviso-blue-bg:    rgba(117,167,255,0.09);

  /* Raios — escala consistente */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* Espaçamento — escala 4pt */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Camadas z-index */
  --z-content:  0;
  --z-sticky:   90;
  --z-topbar:   100;
  --z-overlay:  190;
  --z-sidebar:  200;
  --z-modal:    300;

  /* Barras de progresso — track (trilho) */
  --bar-track-bg:     rgba(255,255,255,0.08);

  /* Dimensões fixas */
  --sidebar-w:        264px;
  --sidebar-rail-w:   52px;
  --topbar-h:         52px;

  /* Letter-spacing — labels de componente */
  --ls-label-sm:  1.5px;   /* labels de componente: rule-card, metric, aviso-box, directory */
  --ls-label-md:  2px;     /* th de tabela, fluxo-item, subsection-subtitle */
  --ls-label-lg:  2.5px;   /* nav-group-label, nav-category, info-box box-label */
}


/* ===== DESIGN TOKENS — MODO CLARO ===== */
[data-theme="light"] {
  /* Direção 3 — Editorial Contrastado */
  --bg:               #F8F8FC;
  --bg-card:          #FFFFFF;
  --bg-card-2:        #E8E8F2;
  --text:             #16162A;
  --text-dim:         #38385A;
  /* #6B6B90 sobre #FFFFFF = contraste ~5.2:1 — WCAG AA */
  --text-muted:       #6B6B90;
  --border:           rgba(41,42,66,0.12);
  --border-m:         rgba(41,42,66,0.20);
  --border-strong:    rgba(41,42,66,0.38);
  /* Âmbar — alinhado ao tom do tema escuro */
  --accent:           #734A00;
  --accent-l:         #AD6F00;
  /* Amarelo vivo da marca — usado em destaques e estados ativos */
  --gold:             #E6A600;
  /* Sidebar escura — mesma cor base do tema dark */
  --sidebar-bg:       #292A42;
  --sidebar-border:   rgba(255,255,255,0.08);
  --sidebar-hover:    rgba(255,255,255,0.06);
  --sidebar-active:   rgba(230,166,0,0.14);
  --tab-active-txt:   #16162A;
  --tab-active-line:  #E6A600;
  --tab-inactive-txt: #6B6B90;
  --tab-hover-bg:     rgba(41,42,66,0.05);
  --tab-bar-bg:       #FFFFFF;
  --th-bg:            rgba(41,42,66,0.05);
  /* #50507A sobre #F4F4F8 = contraste ~5.1:1 — WCAG AA */
  --th-text:          #50507A;
  --tr-stripe:        rgba(41,42,66,0.02);
  --tr-hover:         rgba(41,42,66,0.04);
  --td-first:         #16162A;
  --td-text:          #16162A;
  --info-bg:          rgba(230,166,0,0.09);
  --info-border:      rgba(200,140,0,0.45);
  --info-text:        #2A1E00;
  --info-label:       #AD6F00;
  --noestorno-bg:     rgba(20,100,40,0.07);
  --noestorno-border: rgba(20,120,50,0.26);
  --noestorno-text:   #18301F;
  --alert-bg:         rgba(130,60,0,0.07);
  --alert-border:     rgba(150,80,0,0.26);
  --alert-text:       #2E1800;
  --search-bg:        rgba(41,42,66,0.07);
  --toggle-bg:        rgba(41,42,66,0.07);
  --mark-bg:          rgba(230,166,0,0.28);
  --mark-text:        #16162A;
  --fluxo-bg:         #E8E8F2;
  --section-header-bg:#F8F8FC;

  /* Cards da home */
  --gold-glow:        rgba(230,166,0,0.07);
  --gold-dim:         rgba(230,166,0,0.14);
  --card-hover-bg:    #F4F4F8;
  --card-hover-border:rgba(230,166,0,0.40);

  /* Pills — fundo sólido no tema claro */
  --pill-green-text:  #1A6B30;
  --pill-green-border:rgba(20,100,40,0.32);
  --pill-green-bg:    rgba(20,100,40,0.09);
  --pill-blue-text:   #1A4FAD;
  --pill-blue-border: rgba(26,79,173,0.32);
  --pill-blue-bg:     rgba(26,79,173,0.09);

  /* Avisos */
  --aviso-green-bg:   rgba(20,100,40,0.07);
  --aviso-blue-bg:    rgba(26,79,173,0.07);

  /* Barras de progresso */
  --bar-track-bg:     rgba(41,42,66,0.10);
}


/* ===== ACESSIBILIDADE — SKIP LINK ===== */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-l);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 13px;
  font-weight: 400;
  z-index: var(--z-modal);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }


/* ===== FOCO ACESSÍVEL ===== */
:focus-visible {
  outline: 3px solid var(--accent-l);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
/* Campos de texto: outline interno */
input:focus-visible {
  outline: 2px solid var(--accent-l);
  outline-offset: -2px;
}


/* ===== SCROLLBAR GLOBAL — identidade Univalores ===== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
[data-theme="light"] * {
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.20);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.22);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Sidebar — mesma lógica, 3px */
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}


/* ===== BASE ===== */
html { font-size: 16px; }

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.70;
  min-height: 100dvh;
  transition: background 0.22s, color 0.22s;
}

a {
  color: var(--accent-l);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--gold); }

mark {
  background: var(--mark-bg);
  color: var(--mark-text);
  border-radius: 2px;
  padding: 0 2px;
}


/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  /* will-change apenas quando transição ocorre — aplicado via JS com classe */
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1),
              width   0.26s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Desktop: collapsed = icon rail de 52px */
.sidebar.collapsed {
  width: var(--sidebar-rail-w);
  overflow: hidden;
  cursor: pointer;                  /* Indica que a sidebar toda é clicável */
}


/* ----- Sidebar top (logo + botão recolher) ----- */
.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 14px 20px;
  flex-shrink: 0;
}

.sidebar-logo {
  display: block;
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter 0.22s, opacity 0.2s;
}
[data-theme="light"] .sidebar-logo {
  /* Sidebar escura no tema claro — logo fica branca igual ao tema dark */
  filter: brightness(0) invert(1);
}

/* Sidebar escura — textos e interações usam cores claras */
[data-theme="light"] .nav-link {
  color: rgba(255,255,255,0.58);
}
[data-theme="light"] .nav-link:hover {
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.06);
  border-left-color: rgba(255,255,255,0.18);
}
[data-theme="light"] .nav-link.active {
  color: #E6A600;
  background: rgba(230,166,0,0.14);
  border-left-color: #E6A600;
}
[data-theme="light"] .nav-category {
  color: rgba(255,255,255,0.58);
  background: transparent;
}
[data-theme="light"] .nav-category:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
}
[data-theme="light"] .nav-category[aria-expanded="true"] {
  color: #E6A600;
}
[data-theme="light"] .nav-cat-icon { opacity: 0.45; }
[data-theme="light"] .nav-link.active .nav-cat-icon,
[data-theme="light"] .nav-link:hover .nav-cat-icon { opacity: 1; }
[data-theme="light"] .sidebar-collapse-btn {
  color: rgba(255,255,255,0.50);
}
[data-theme="light"] .sidebar-collapse-btn:hover {
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.08);
}
[data-theme="light"] .sidebar-search input {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="light"] .sidebar-search input::placeholder {
  color: rgba(255,255,255,0.30);
}
[data-theme="light"] .sidebar-search input:focus {
  background: rgba(255,255,255,0.12);
  border-color: rgba(230,166,0,0.50);
}
[data-theme="light"] .nav-divider {
  background: rgba(255,255,255,0.08);
}
[data-theme="light"] .nav-group-icon {
  color: rgba(255,255,255,0.45);
}
[data-theme="light"] .nav-group-icon:hover,
[data-theme="light"] .nav-group-icon.active {
  color: #E6A600;
  background: rgba(230,166,0,0.14);
}

/* Botão recolher — fica no topo ao lado da logo */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
  touch-action: manipulation;
  transition: color 0.16s, background 0.16s;
}
.sidebar-collapse-btn:hover { color: var(--text); background: var(--sidebar-hover); }
.sidebar-collapse-btn svg { flex-shrink: 0; }

/* ----- Busca wrapper ----- */
.sidebar-search-area {
  padding: 0 14px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}


/* ----- Busca ----- */
.sidebar-search { position: relative; }

.sidebar-search input {
  width: 100%;
  background: var(--search-bg);
  border: 1px solid var(--border-m);
  border-radius: var(--radius-xs);
  padding: 8px 12px 8px 34px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
.sidebar-search input::placeholder { color: var(--text-muted); }
.sidebar-search input:focus {
  border-color: var(--accent-l);
  background: var(--tab-hover-bg);
}

.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}


/* ----- Modo busca: oculta conteúdo regular enquanto busca está ativa ----- */
.main.search-active .content-section {
  display: none !important;
}

/* ----- View de busca — ocupa a área de conteúdo normalmente ----- */
.search-view {
  padding: 36px 40px 64px;
  max-width: 780px;
  animation: fadeInUp 0.18s ease-out both;
}
.search-view[hidden] { display: none; }

.search-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.search-view-title {
  flex: 1;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
}
.search-view-title strong {
  color: var(--text);
  font-weight: 500;
}
.search-view-close {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border-m);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.search-view-close:hover {
  color: var(--text);
  border-color: var(--border-strong, rgba(255,255,255,0.25));
}

.search-view-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  width: 100%;
  font-family: inherit;
}
.search-result-item:hover {
  background: var(--gold-glow);
  border-color: var(--border-m);
}
.search-result-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-l);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-snippet {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-result-snippet strong {
  font-weight: 500;
  color: var(--text);
}

.search-no-results {
  padding: 16px 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
}
.search-results-more {
  padding: 10px 4px 0;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

mark, mark.mark-current {
  background: var(--mark-bg);
  color: var(--mark-text);
  border-radius: 2px;
  padding: 0 1px;
}
mark.mark-current {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}


/* ----- Nav ----- */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  /* Evita scroll chaining para a página */
  overscroll-behavior: contain;
  padding: 12px 0 28px;
  /* scrollbar herdado do bloco global — ver topo do CSS */
}

.nav-group { padding: 2px 0 2px; }

.nav-group-label {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--ls-label-lg);
  text-transform: uppercase;
  color: var(--accent-l);
  padding: 10px 20px 4px;
}

.nav-sublabel {
  display: block;
  font-size: 10px;
  font-weight: 300;
  color: var(--text-muted);
  padding: 6px 20px 2px;
  letter-spacing: 0.2px;
  margin-top: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 44px; /* touch target mínimo */
  font-size: 12.5px;
  font-weight: 300;
  color: var(--text-muted);
  padding: 5px 20px 5px 30px;
  border-left: 2px solid transparent;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
  cursor: pointer;
  line-height: 1.4;
  touch-action: manipulation;
}
.nav-link:hover {
  color: var(--text);
  background: var(--sidebar-hover);
  border-left-color: var(--border-m);
}
.nav-link.active {
  color: var(--accent-l);
  background: var(--sidebar-active);
  border-left-color: var(--accent-l);
}
.nav-link-top {
  padding-left: 20px;
  font-size: 12.5px;
  font-weight: 400;
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 20px 10px;
}


/* ===== TOPBAR ===== */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 0 16px;
  z-index: var(--z-topbar);
  transition: left 0.26s, background 0.22s;
}
.topbar.expanded { left: var(--sidebar-rail-w); }

.topbar-toggle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: var(--radius-xs);
  background: var(--toggle-bg);
  border: 1px solid var(--border-m);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s, color 0.16s;
  flex-shrink: 0;
  touch-action: manipulation;
}
.topbar-toggle:hover { background: var(--tab-hover-bg); color: var(--text); }

.topbar-title {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-title strong { font-weight: 400; color: var(--text-dim); }

.topbar-email {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.topbar-email:hover {
  color: var(--text-dim);
  border-color: var(--border-m);
  background: var(--tab-hover-bg);
}
.topbar-email svg { flex-shrink: 0; opacity: 0.7; }
@media (max-width: 680px) {
  .topbar-email-text { display: none; }
  .topbar-email { padding: 5px 7px; }
  .topbar-email svg { opacity: 1; }
}


.theme-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--toggle-bg);
  border: 1px solid var(--border-m);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  transition: background 0.16s, color 0.16s;
  flex-shrink: 0;
  white-space: nowrap;
  touch-action: manipulation;
  min-height: 34px;
}
.theme-toggle:hover { background: var(--tab-hover-bg); color: var(--text); }

/* Ícones de tema */
.icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: inline-block; }


/* ===== LOADING STATE ===== */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 300;
}

/* ===== MAIN ===== */
.main {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  min-height: 100dvh;
  transition: margin-left 0.26s;
}
/* Sidebar no icon rail: main recua para 52px */
.main.expanded { margin-left: var(--sidebar-rail-w); }



/* ===== CONTENT SECTION ===== */
.content-section {
  border-bottom: 1px solid var(--border);
  display: none;
}
.content-section.section-active { display: block; }
.content-section:last-child { border-bottom: none; }

.section-header {
  padding: 52px var(--space-16) 20px;
  background: var(--section-header-bg);
}
.section-num {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-l);
  margin-bottom: 8px;
}
.section-title-main {
  font-size: 30px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 10px;
}
.section-title-main span { color: var(--text-muted); }
.section-subtitle {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.65;
  margin-top: 8px;
}

/* ===== MULTI SECTION HEADER (seções multi: cabeçalho em 2 colunas por painel de fornecedor) ===== */
.multi-section-header {
  display: grid;
  /* Esquerda (info): 35% · Direita (op-mode pills): 65% — pills ficam mais largas para quebrar linha */
  grid-template-columns: 35fr 65fr;
  gap: 40px;
  padding: 40px var(--space-16) 28px;
  background: var(--section-header-bg);
}
.multi-section-header-left { display: flex; flex-direction: column; }
.multi-section-header-right {
  display: flex;
  align-items: flex-start;
  /* padding-top: 0 → alinha com section-num "0.1 —" no mesmo nível do topo */
  padding-top: 0;
}
.multi-section-header .section-subtitle { max-width: none; }

/* Divisor entre header e corpo do fornecedor */
.section-divider {
  height: 1px;
  background: var(--border);
}


/* ===== TAB BAR ===== */
.tab-bar-wrap {
  position: sticky;
  top: var(--topbar-h); /* Cola logo abaixo da topbar fixa */
  z-index: var(--z-sticky); /* Abaixo da topbar (100) mas acima do conteúdo */
  background: var(--tab-bar-bg);
  border-bottom: 1px solid var(--border);
}
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 var(--space-16);
}
.tab-btn {
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  color: var(--tab-inactive-txt);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 13px 20px 11px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
  letter-spacing: 0.2px;
  margin-bottom: -1px;
  white-space: nowrap;
  min-height: 44px;
}
.tab-btn:hover {
  color: var(--text);
  background: var(--tab-hover-bg);
}
.tab-btn.active {
  color: var(--tab-active-txt);
  border-bottom-color: var(--tab-active-line);
  font-weight: 400;
}


/* ===== TAB PANEL ===== */
.tab-panel { display: block; }
.tab-panel.hidden { display: none; }


/* ===== FORNECEDOR ===== */
.fornecedor-header {
  padding: 36px var(--space-16) 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.fornecedor-header h3 {
  font-size: 22px;
  font-weight: 300;
  color: var(--text);
  margin-top: 20px;
  margin-bottom: 0;
  line-height: 1.2;
}
/* Se h3 for o primeiro elemento (sem op-mode acima), remove a margem */
.fornecedor-header h3:first-child {
  margin-top: 0;
}
.fornecedor-header .op-mode {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 960px;
}

.fornecedor-body {
  padding: 32px var(--space-16) 52px;
  background: var(--bg);
}


/* ===== SUBSECTION ===== */
.subsection { margin-bottom: 40px; }
.subsection:last-child { margin-bottom: 0; }

.subsection-title {
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.2px;
  padding-bottom: 2px;   /* título colado à linha */
  margin-bottom: 15px;   /* 15px de respiro após a linha */
  border-bottom: 1px solid var(--border);
}
.subsection-subtitle {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-label-md);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  margin-top: 22px;
  display: block;
}
.subsection-note {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.65;
}


/* ===== SINGLE-FORNECEDOR ===== */
.single-content {
  padding: 24px var(--space-16) 52px;
  background: var(--bg);
}

/* C7: sem traço abaixo do título da nota fiscal */
#nota-fiscal .subsection-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2px; /* texto de apoio próximo ao título */
}
/* Nota fiscal — padrão de espaçamento igual ao restante do manual */
#nota-fiscal .subsection-note { margin-top: 0; font-size: 12.5px; }
#nota-fiscal .estorno-rule { margin-top: 6px; margin-bottom: 15px; }


/* ===== OP-MODE CARD (forma de operação) ===== */
.op-mode-card {
  display: grid;
  gap: 10px;
  max-width: 920px;
  padding: 14px 16px;
  border: 1px solid var(--border-m);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.025);
}
.op-mode-card p {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1.6;
}
.pill-link {
  color: var(--gold);            /* escuro: amarelo vivo da marca */
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
  transition: opacity 0.2s;
}
.pill-link:hover {
  opacity: 0.75;
}
[data-theme="light"] .pill-link {
  color: var(--accent-l);        /* claro: âmbar legível sobre fundo branco */
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.pill .icon,
.copy-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.pill.gold {
  color: var(--gold);
  border-color: var(--info-border);
  background: linear-gradient(180deg, rgba(173,111,0,0.18), rgba(173,111,0,0.10));
}
.pill.green {
  color: var(--pill-green-text);
  border-color: var(--pill-green-border);
  background: var(--pill-green-bg);
}
.pill.blue {
  color: var(--pill-blue-text);
  border-color: var(--pill-blue-border);
  background: var(--pill-blue-bg);
}


/* ===== PRODUCT TABS (sub-tabs de produto) ===== */
.product-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.product-tab {
  appearance: none;
  border: 1px solid var(--border-m);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  padding: 10px 14px;
  min-height: 40px;
  touch-action: manipulation;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.product-tab.active {
  color: var(--gold);
  border-color: var(--info-border);
  background: var(--info-bg);
  font-weight: 400;
}
.product-panel.hidden { display: none; }


/* ===== MICROCOPY ===== */
/* Funciona dentro de estorno-plain, cards e demais contextos */
.microcopy {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  margin-top: 0;
}


/* ===== RULE CARDS ===== */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.rule-card {
  border: 1px solid var(--border-m);
  border-radius: var(--radius-md);
  background: var(--bg-card-2);
  padding: 16px;
}
.rule-card span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rule-card strong {
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
}


/* ===== METRIC CARDS ===== */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.metric-grid-five {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}
.metric {
  border: 1px solid var(--border-m);
  border-radius: var(--radius-md);
  background: var(--bg-card-2);
  padding: 16px;
}
.metric span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.metric strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
}


/* ===== ESTORNO LIST ===== */
/*
  Abordagem por linha: cada .estorno-line é um grid independente de 3 colunas.
  Colunas: texto (1fr) | barra (96px fixo) | valor (72px)
  column-gap: 12px garante espaçamento igual texto↔barra e barra↔valor.
*/
.estorno-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.estorno-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 12px;
}

.estorno-line > span {
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 13px;
}
.estorno-line > strong {
  white-space: nowrap;
  color: var(--text);
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* Barra de progresso do estorno */
.bar,
.estorno-bar {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--bar-track-bg); /* token semântico — visível em dark e light */
  overflow: hidden;
  display: block;
  width: 100%; /* garante que preenche os 96px da célula do grid */
}
.bar-fill,
.estorno-bar-fill {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(173,111,0,0.92), rgba(230,166,0,0.74));
}


/* ===== TABELAS ===== */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  /* clip-path força o recorte das bordas arredondadas mesmo com overflow-x:auto */
  clip-path: inset(0 round var(--radius-sm));
  border: 1px solid var(--border-m);
  margin-top: 8px;
  /* Evita scroll chaining */
  overscroll-behavior-x: contain;
}
.table-wrap + .table-wrap { margin-top: 20px; }

.commission-table { /* seletor semântico — herda estilos de table */ }
.table-wrap.table-shell { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
}
thead tr { background: var(--th-bg); }

th {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-label-md);
  text-transform: uppercase;
  color: var(--th-text);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-m);
  white-space: nowrap;
}
td {
  font-size: 13px;
  color: var(--td-text);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.10s;
  /* Números em colunas alinhados mesmo com valores diferentes */
  font-variant-numeric: tabular-nums;
}
tbody tr:last-child td,
tbody tr:last-child th { border-bottom: none; }
tbody tr:nth-child(even) td { background: var(--tr-stripe); }
tbody tr:hover td { background: var(--tr-hover); }
td:first-child { color: var(--td-first); }
td strong { font-weight: 400; color: var(--text); }

.td-center  { text-align: center; }
.td-right   { text-align: right; }
/* Alinhamento de cabeçalho de coluna (espelha td) */
.th-center  { text-align: center; }
.th-right   { text-align: right; }
/* Cabeçalho de linha (th dentro de tbody) — tabela matriz Omint */
.td-label   { text-align: left; font-weight: 500; color: var(--text); white-space: nowrap; }
/* Célula indisponível na matriz — exibe "—" com opacidade reduzida */
.td-unavail { opacity: 0.35; }

/* Tabelas largas com scroll — flush (dentro de card): remove bordas e clip arredondado */
.flush-table {
  margin-top: 0;
  border-radius: 0;
  clip-path: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.wide-table          { min-width: 760px; }
.wide-table-consorcio { min-width: 1180px; }
.compact-shell       { overflow-x: auto; }

/* Tabelas especiais */
.horizon-table { min-width: 1003px; table-layout: fixed; }
.ideal-table   { min-width: 980px; table-layout: fixed; }
.vital-table   { min-width: 860px; table-layout: fixed; }

/* Stripe consistente na matriz: aplica também ao th de linha (agenciamento) em linhas pares */
.ideal-table tbody tr:nth-child(even) th { background: var(--tr-stripe); }
/* Células indisponíveis (—): mesma cor do texto muted, sem opacity global que afeta stripe */
.ideal-table .td-unavail { opacity: 1; color: var(--border); }

/* Horizonte: permite quebra de linha nos cabeçalhos de coluna (ex: "A partir do 6º ano") */
.horizon-table thead th { white-space: normal; line-height: 1.3; }

/* Accordion grupos Horizonte */
.horizon-table thead { display: none; }
.horizon-table .group-row { cursor: pointer; user-select: none; }
.horizon-table .group-row:hover td { filter: brightness(1.12); }

/* Recolhido: fundo neutro (sem dourado), peso normal */
.horizon-table .group-row.horizon-group-collapsed td {
  background: var(--th-bg) !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
  font-weight: 400 !important;
}

/* Mini-cabeçalho por grupo */
.horizon-mini-header th,
.vital-mini-header th {
  background: var(--th-bg);
  border-bottom: 1px solid var(--border-m);
  white-space: nowrap;
}

/* Accordion Vital */
.vital-table thead { display: none; }
.vital-table .subgroup-row { cursor: pointer; user-select: none; }
.vital-table .subgroup-row:hover td { filter: brightness(1.12); }
.vital-table .subgroup-row.horizon-group-collapsed td {
  background: var(--th-bg) !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
  font-weight: 400 !important;
}

/* Oculta bolinha dourada nas tabelas com accordion */
.horizon-table .group-pill::before,
.vital-table .subgroup-pill::before { display: none; }

.horizon-chevron {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  color: var(--accent-l);
  flex-shrink: 0;
  vertical-align: middle;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.horizon-row-hidden { display: none !important; }

/* Tabela matriz Omint Ideal — header de agrupamento e separador de coluna */
.matrix-span-header {
  border-bottom: 1px solid var(--border-m);
  border-left: 1px solid var(--border-m);
}
/* Coluna Corretagem: separador visual da direita */
.matrix-col-sep {
  border-right: 1px solid var(--border-m);
}

/* Linhas de grupo nas tabelas (Horizonte, Vital, Omint Ideal)
   !important necessário: sobrescreve tbody tr:nth-child(even) td e tbody tr:hover td
   que têm especificidade maior e sobrescrevem o gradiente quando o group-row
   cai em posição par ou recebe hover. */
.group-row td,
.subgroup-row td {
  background: linear-gradient(90deg, rgba(173,111,0,.18), rgba(173,111,0,.08)) !important;
  color: var(--text) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 500;
  height: 40px;
  border-bottom: 1px solid var(--info-border);
  border-top: 1px solid var(--info-border);
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Claro: gradiente gold em vez de âmbar escuro */
[data-theme="light"] .group-row td,
[data-theme="light"] .subgroup-row td {
  background: linear-gradient(90deg, rgba(230,166,0,.14), rgba(230,166,0,.06)) !important;
}
.group-pill,
.subgroup-pill { display: inline-flex; align-items: center; gap: 8px; }
.group-pill::before,
.subgroup-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .9;
}



/* Tabela do directory (lista de destinatários) */
.directory-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}
.directory-table thead th {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-label-sm);
  text-align: left;
  font-weight: 500;
  padding: 0 16px 4px;
  border-bottom: 0;
  background: transparent;
}
.directory-table thead th:last-child { text-align: right; }
.directory-table thead tr { background: transparent; }

.directory-table tbody tr,
.directory-table tbody tr:nth-child(even) td,
.directory-table tbody tr:hover td { background: var(--bg-card-2); }

.directory-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}
.directory-table td {
  padding: 16px;
  color: var(--text-dim);
  font-size: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.directory-table td:first-child {
  color: var(--text);
  font-weight: 500;
  border-left: 1px solid var(--border);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  width: 245px;
}
.directory-table td:nth-child(2) { line-height: 1.45; }
.directory-table td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  width: 116px;
  text-align: right;
}

.directory-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: var(--radius-xs);
  background: var(--info-bg);
  color: var(--accent-l);
  font-size: 11px;
  font-weight: 500;
}
.copyable-value { color: var(--text); user-select: all; }

.copy-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid var(--border-m);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  touch-action: manipulation;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.copy-flag:hover {
  color: var(--gold);
  border-color: var(--info-border);
  background: var(--info-bg);
}


/* ===== CAIXAS DE AVISO ===== */
.info-box {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 28px;
}
.info-box .box-label {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--ls-label-lg);
  text-transform: uppercase;
  color: var(--info-label);
  display: block;
  margin-bottom: 8px;
}
.info-box p,
.info-box ul {
  font-size: 13px;
  color: var(--info-text);
  line-height: 1.65;
}
.info-box ul { padding-left: 18px; }
.info-box li { margin-bottom: 4px; }
.info-box strong { font-weight: 400; color: var(--text); }
/* Modificadores contextuais — substituem inline styles do render.js */
.info-box--extra    { margin-top: 18px; margin-bottom: 0; }
.info-box--prefix   { margin-bottom: 20px; }
.info-box--suffix   { margin-top: 14px; margin-bottom: 0; }
.info-box--no-margin { margin: 0; }

/* ===== CAIXAS DE AVISO — SISTEMA UNIFICADO ===== */
.aviso-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  width: 100%;
}
.aviso-box-icon {
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
}
.aviso-box-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.aviso-box p {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* Sem Estorno — verde */
.aviso-box--sem-estorno {
  background: var(--aviso-green-bg);
  border-color: var(--pill-green-border);
}
.aviso-box--sem-estorno .aviso-box-icon,
.aviso-box--sem-estorno .aviso-box-label { color: var(--pill-green-text); }

/* Consultar Especialista — azul */
.aviso-box--consultar {
  background: var(--aviso-blue-bg);
  border-color: var(--pill-blue-border);
}
.aviso-box--consultar .aviso-box-icon,
.aviso-box--consultar .aviso-box-label { color: var(--pill-blue-text); }

/* Riders — dourado (aparece fora do estorno-plain, precisa de espaço próprio) */
.aviso-box--riders {
  background: var(--info-bg);
  border-color: var(--info-border);
  margin-top: 20px;
}
.aviso-box--riders .aviso-box-icon,
.aviso-box--riders .aviso-box-label { color: var(--gold); }

/* Info — âmbar neutro (nota instrutiva antes de tabela, ex: Omint Ideal) */
.aviso-box--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  margin-top: 0;
  margin-bottom: 14px;
}
.aviso-box--info .aviso-box-icon,
.aviso-box--info .aviso-box-label { color: var(--gold); }

/* Dentro de containers que gerenciam espaço via flex gap — reseta margem própria */
.estorno-plain .aviso-box,
.subsection .aviso-box { margin-top: 0; }

/* subsection-title dentro de estorno-plain: flex gap já separa, margin-bottom causaria double-spacing.
   A régua (border-bottom) é desativada aqui — usamos .estorno-rule como elemento separado. */
.estorno-plain .subsection-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }

/* Régua separadora dentro de estorno-plain — aparece entre o aviso/microcopy e o conteúdo tabular.
   NÃO aparece quando o estorno é apenas um aviso box (nenhum/consultar). */
.estorno-rule { height: 1px; background: var(--border); }


/* ===== FLUXOGRAMA ===== */
.fluxo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}
.fluxo-item {
  background: var(--fluxo-bg);
  border: 1px solid var(--border-m);
  border-radius: var(--radius-sm);
  padding: 16px 24px;
  text-align: center;
  flex: 1;
  min-width: 140px;
}
.fluxo-item-label {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--ls-label-md);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.fluxo-item-value {
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.fluxo-item-value.accent { color: var(--accent-l); }
.fluxo-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ===== FOOTNOTE ===== */
.footnote {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.65;
  padding-left: 14px;
  border-left: 2px solid var(--border-m);
}


/* ===== LAYOUTS DE GRID ===== */
.product-group { display: grid; gap: 16px; }

.two-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
  gap: 18px;
  align-items: start;
}
/* Azos: cards de comissão horizontais + estorno plano abaixo */
.azos-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.azos-layout .rule-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Estorno — espaçamentos individuais por elemento (gap zerado para controle fino)
   Sem microcopy : título  →  2px  →  linha  →  15px  →  conteúdo
   Com microcopy : título  →  2px  →  microcopy  →  6px  →  linha  →  15px  →  conteúdo */
.estorno-plain { display: flex; flex-direction: column; gap: 0; }
.estorno-plain .microcopy    { margin-top: 2px; }
.estorno-plain .subsection-note { margin-top: 2px; }
/* Sem microcopy: linha colada ao título */
.estorno-plain .subsection-title + .estorno-rule { margin-top: 2px; }
/* Com microcopy ou nota antes da linha */
.estorno-plain .microcopy     + .estorno-rule { margin-top: 6px; }
.estorno-plain .subsection-note + .estorno-rule { margin-top: 6px; }
.estorno-plain .estorno-rule { margin-bottom: 15px; }
.estorno-plain .table-wrap   { margin-top: 0; }

.three-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.one-plus-side {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: 18px;
  align-items: stretch;
}
.unique-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(300px, 1.28fr);
  gap: 18px;
  align-items: stretch;
}
.ideal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: 18px;
  align-items: stretch;
}

.estorno-split,
.obs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* Multi-tabela lado a lado (Super AP, Essencial, Wealth) */
.multi-tabela-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* Estorno em grade 2×2 (Rodobens: 4 tabelas lado a lado) */
.estorno-tabelas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.estorno-tabelas-grid > div > .subsection-subtitle:first-child { margin-top: 0; }
.estorno-tabelas-grid .table-wrap { margin-top: 8px; overflow-x: auto; }
/* Primeira subsection-subtitle de cada coluna: sem margem-top extra */
.multi-tabela-2col > div > .subsection-subtitle:first-child { margin-top: 0; }
/* Dentro da grid 2col, as table-wrap não precisam de margem-top */
.multi-tabela-2col .table-wrap { margin-top: 8px; }

/* Nota externa abaixo de product-group */
.outside-note { margin-top: 12px; padding: 0 4px; }

/* ===== ESPAÇAMENTOS ESTRUTURAIS (P06) ===== */
.obs-grid { margin-top: 18px; }
.table-wrap + .two-cols { margin-top: 18px; }
.info-box + .estorno-split { margin-top: 18px; }

/* Estorno-plain após card, group ou conteúdo direto — D7/D8/F1 */
article + .estorno-plain,
.product-group + .estorno-plain,
.info-box + .estorno-plain,
.aviso-box--riders + .estorno-plain,
.table-wrap + .estorno-plain,
.metric-grid + .estorno-plain,
.subsection-note + .estorno-plain,
.footnote + .estorno-plain { margin-top: 28px; }
/* rule-grid dentro de azos-layout: gap do flex cobre. Fora dele (ex: Corporate): margin explícita */
.rule-grid + .estorno-plain { margin-top: 28px; }
/* multi-tabela-2col (Super AP, Essencial): quando sem obsGrid/notaPos, espaçamento direto até estorno */
.multi-tabela-2col + .estorno-plain { margin-top: 28px; }

/* Separador vertical entre as duas colunas do split */
.estorno-split > div:first-child { padding-right: 24px; }
.estorno-split > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--border-m);
}

/* Títulos dentro do split (Mensal / Anual): destaque maior — ouro, levemente maior */
.estorno-split > div > .subsection-subtitle {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: var(--ls-label-sm);
}

/* Primeira coluna sem margin-top extra no subtitle */
.estorno-split .subsection-subtitle:first-child,
.estorno-split > div > .subsection-subtitle:first-child { margin-top: 0; }



/* ===== ACCORDION SIDEBAR (G4) ===== */

/* Categoria: botão clicável no nível do grupo */
.nav-category {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 20px 8px 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  gap: 8px;
  min-height: 40px;
  touch-action: manipulation;
  transition: color 0.16s;
}
.nav-category:hover { color: var(--text); }
.nav-category[aria-expanded="true"] { color: var(--accent-l); }

.nav-category-label { flex: 1; text-align: left; }

.nav-chevron {
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
  opacity: 0.55;
}
.nav-category:hover .nav-chevron { opacity: 1; }
.nav-category[aria-expanded="true"] .nav-chevron {
  transform: rotate(90deg);
  opacity: 1;
}

/* Items colapsáveis */
.nav-category-items { padding-bottom: 6px; }
.nav-category-items[hidden] { display: none !important; }

/* Link direto (Início, Repasse Univalores) — mesma visual que .nav-category */
.nav-link-direct {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  min-height: 40px;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.16s;
}
.nav-link-direct:hover { color: var(--text); }
.nav-link-direct.active { color: var(--accent-l); }

/* Ícone inline (modo expandido) nas categorias e links diretos */
.nav-cat-icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.16s;
}
.nav-category:hover .nav-cat-icon,
.nav-category[aria-expanded="true"] .nav-cat-icon,
.nav-link-direct:hover .nav-cat-icon,
.nav-link-direct.active .nav-cat-icon { opacity: 1; }

/* Esconde elementos de texto quando sidebar colapsada */
.sidebar.collapsed .nav-category,
.sidebar.collapsed .nav-category-items,
.sidebar.collapsed .nav-link-direct { display: none; }


/* G1: topbar toggle visível apenas no mobile */
@media (min-width: 961px) {
  .topbar-toggle { display: none; }
}


/* ===== ICON RAIL — sidebar colapsada (P15) ===== */
.nav-group-icon {
  display: none;
  width: var(--sidebar-rail-w);
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0;
  transition: color 0.16s, background 0.16s;
  flex-shrink: 0;
  touch-action: manipulation;
}
.nav-group-icon:hover { color: var(--accent-l); background: var(--sidebar-hover); }
.nav-group-icon.active {
  color: var(--accent-l);
  background: var(--sidebar-active);
}
.nav-group-icon svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Estado collapsed no desktop: exibe icon rail */
.sidebar.collapsed .nav-group-icon { display: flex; }
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .nav-sublabel,
.sidebar.collapsed .nav-link,
.sidebar.collapsed .nav-divider,
.sidebar.collapsed .sidebar-logo,
.sidebar.collapsed .sidebar-search-area { display: none; }
.sidebar.collapsed .sidebar-top {
  justify-content: center;
  padding: 12px 0;
  border-bottom: none;
}
.sidebar.collapsed .sidebar-collapse-btn { width: 36px; height: 36px; }
.sidebar.collapsed .nav-group { padding: 2px 0; }
.sidebar.collapsed .sidebar-nav { padding-top: 8px; overflow-x: hidden; }

/* ===== SIDEBAR RECOLHIDA — ícone U + hover para expandir ===== */

/* U box — oculto por padrão, aparece apenas quando sidebar está colapsada */
.sidebar-icon-u {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.80);
  flex-shrink: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.sidebar-icon-u svg {
  width: 18px;
  height: 18px;
}

/* Colapsada sem hover: mostra U, esconde botão recolher */
.sidebar.collapsed .sidebar-icon-u { display: flex; }
.sidebar.collapsed .sidebar-collapse-btn { display: none; }

/* Colapsada com hover: esconde U, mostra botão recolher */
.sidebar.collapsed:hover .sidebar-icon-u { display: none; }
.sidebar.collapsed:hover .sidebar-collapse-btn { display: flex; }


/* ===== MOBILE OVERLAY ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-overlay);
  /* Backdrop para acessibilidade: fecha ao clicar fora */
  cursor: pointer;
}
.sidebar-overlay.active { display: block; }


/* ===== RESPONSIVO — Tablet e Mobile ===== */
@media (max-width: 960px) {
  .sidebar {
    transform: translateX(-264px);
    z-index: var(--z-sidebar);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 28px rgba(0,0,0,0.45);
  }
  /* Mobile: collapsed continua escondido (sem icon rail) */
  .sidebar.collapsed {
    width: 264px;
    overflow: visible;
    transform: translateX(-264px);
  }

  .main    { margin-left: 0 !important; }
  .topbar  { left: 0 !important; }

  .section-header   { padding: 40px 24px 28px; }
  .tab-bar          { padding: 0 16px; }

  .fornecedor-header,
  .fornecedor-body,
  .single-content   { padding-left: 24px; padding-right: 24px; }

  .multi-section-header { padding: 32px 24px 24px; gap: 16px; }
  /* Remove padding-top de alinhamento (só faz sentido no layout 2-colunas desktop) */
  .multi-section-header-right { padding-top: 0; }

  .section-title-main { font-size: 24px; }

  /* Grids colapsam para 1 coluna */
  .two-cols,
  .azos-layout,
  .estorno-split,
  .obs-grid,
  .multi-tabela-2col,
  .estorno-tabelas-grid,
  .multi-section-header { grid-template-columns: 1fr; }

}

@media (max-width: 1080px) {
  .three-cols,
  .one-plus-side,
  .unique-grid,
  .ideal-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  th, td { padding: 10px 12px; font-size: 12px; }
  .tab-btn { padding: 11px 13px; font-size: 11.5px; }
  .fluxo { flex-direction: column; align-items: stretch; }
  .fluxo-arrow { text-align: center; }
}


/* ===== ANIMAÇÃO & MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================
   HOME — tela inicial de navegação (seção #inicio)
   ============================================================= */

/* ── Padding padrão da seção (igual às demais: var(--space-16) = 64px) ── */
#inicio.content-section {
  padding: 52px var(--space-16) 64px;
}

/* ── Banner de novidades ── */
.home-banner-novidade {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(173,111,0,0.10);
  border: 1px solid rgba(173,111,0,0.26);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 32px;
  animation: homeSlideDown 0.4s ease both;
}
[data-theme="light"] .home-banner-novidade {
  background: rgba(230,166,0,0.07);
  border-color: rgba(230,166,0,0.22);
}
.home-banner-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(230,166,0,0.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
[data-theme="light"] .home-banner-icon { color: var(--accent-l); }
.home-banner-content { flex: 1; }
.home-banner-tag {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--ls-label-md);
  text-transform: uppercase;
  color: var(--accent-l);
  display: block;
  margin-bottom: 3px;
}
.home-banner-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.5;
}
.home-banner-text strong { font-weight: 500; color: var(--text); }
.home-banner-dismiss {
  color: var(--text-muted);
  opacity: 0.5;
  padding: 4px;
  border-radius: 4px;
  transition: opacity 0.16s;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.home-banner-dismiss:hover { opacity: 1; }

/* ── Header da home ── */
.home-header {
  margin-bottom: 24px;
  animation: homeSlideDown 0.35s ease both;
}
.home-eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-l);
  display: block;
  margin-bottom: 10px;
}
.home-title {
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.home-title strong { font-weight: 400; }
.home-subtitle {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Disclaimer / aviso legal ── */
.home-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 28px;
}
[data-theme="light"] .home-disclaimer {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.09);
}
.home-disclaimer-icon {
  color: var(--text-muted);
  opacity: 0.55;
  flex-shrink: 0;
  margin-top: 1px;
}
.home-disclaimer-text {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── Grid uniforme de categorias ── */
.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

/* ── Card de categoria ── */
.home-cat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--radius-md);
  padding: 20px 18px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  animation: homeCardUp 0.38s ease both;
}
.home-cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.18s;
  background: linear-gradient(135deg, var(--gold-glow) 0%, transparent 60%);
  pointer-events: none;
}
.home-cat-card:hover {
  background: var(--card-hover-bg);
  border-color: var(--card-hover-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px var(--card-hover-border);
}
.home-cat-card:hover::before { opacity: 1; }
.home-cat-card:active { transform: translateY(0); }

[data-theme="light"] .home-cat-card { box-shadow: 0 1px 4px rgba(41,42,66,0.07); }
[data-theme="light"] .home-cat-card:hover { box-shadow: 0 6px 24px rgba(41,42,66,0.10), 0 0 0 1px var(--card-hover-border); }

.home-card-icon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.home-card-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color 0.18s, background 0.18s;
}
[data-theme="light"] .home-card-icon { background: rgba(41,42,66,0.05); }
.home-cat-card:hover .home-card-icon {
  color: var(--gold);
  background: var(--gold-dim);
}
[data-theme="light"] .home-cat-card:hover .home-card-icon { color: var(--accent-l); }
.home-card-arrow {
  color: var(--text-muted);
  opacity: 0.3;
  transition: opacity 0.18s, transform 0.18s;
}
.home-cat-card:hover .home-card-arrow { opacity: 0.8; transform: translateX(2px); }
.home-card-name {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 5px;
}
.home-card-counter {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* ── Separador antes do Repasse ── */
.home-section-sep {
  height: 1px;
  background: var(--border);
  margin: 0 0 20px;
}

/* ── Card Repasse Univalores ── */
.home-repasse-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background 0.18s, border-color 0.18s;
  width: 100%;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 8px;
}
.home-repasse-card:hover {
  background: var(--card-hover-bg);
  border-color: var(--border-m);
}
[data-theme="light"] .home-repasse-card { background: rgba(230,166,0,0.07); border-color: rgba(230,166,0,0.25); }
.home-repasse-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.18s, background 0.18s;
}
[data-theme="light"] .home-repasse-icon { background: rgba(230,166,0,0.15); color: var(--accent-l); }

/* Blocos de operação e avisos — fundo azul-acinzentado para destacar do branco */
[data-theme="light"] .op-mode-card {
  background: #FFFFFF;
  border-color: rgba(41,42,66,0.18);
  box-shadow: 0 1px 4px rgba(41,42,66,0.06);
}
/* Texto do op-mode-card no claro — neutro escuro, sem tom azulado */
[data-theme="light"] .op-mode-card p {
  color: var(--text);
}
/* Pill dourada no claro — fundo sólido, texto âmbar alinhado ao token */
[data-theme="light"] .pill.gold {
  color: var(--accent-l);
  border-color: rgba(180,120,0,0.40);
  background: rgba(230,166,0,0.12);
}
/* Pills verde e azul no claro — ícone acompanha a cor do texto */
[data-theme="light"] .pill.green .icon { color: #1A6B30; }
[data-theme="light"] .pill.blue  .icon { color: #1A4FAD; }
[data-theme="light"] .info-box {
  background: rgba(230,166,0,0.10);
  border-color: rgba(200,140,0,0.30);
}
[data-theme="light"] .aviso-box--sem-estorno {
  background: rgba(20,100,40,0.07);
  border-color: rgba(20,120,50,0.22);
}
[data-theme="light"] .aviso-box--consultar {
  background: rgba(26,79,173,0.07);
  border-color: rgba(26,79,173,0.22);
}
[data-theme="light"] .aviso-box--riders,
[data-theme="light"] .aviso-box--info {
  background: rgba(230,166,0,0.12);
  border-color: rgba(200,140,0,0.35);
}
.home-repasse-card:hover .home-repasse-icon { color: var(--gold); background: var(--gold-dim); }
[data-theme="light"] .home-repasse-card:hover .home-repasse-icon { color: var(--accent-l); }
.home-repasse-info { flex: 1; }
.home-repasse-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  display: block;
  margin-bottom: 2px;
}
.home-repasse-desc {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--text-muted);
}
.home-repasse-arrow {
  color: var(--text-muted);
  opacity: 0.3;
  transition: opacity 0.18s, transform 0.18s;
}
.home-repasse-card:hover .home-repasse-arrow { opacity: 0.8; transform: translateX(2px); }

/* ── Animações da home ── */
@keyframes homeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes homeCardUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Animação de entrada genérica (search-view, etc.) ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsivo ── */
@media (max-width: 1100px) {
  .home-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .home-cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-title    { font-size: 22px; }
  /* Busca: padding menor em mobile */
  .search-view { padding: 24px 20px 48px; }
}
@media (max-width: 420px) {
  .home-cat-grid { grid-template-columns: 1fr; }
}