/* 64 Inteligente — tokens do sistema de design (ver DESIGN.md).
   Carregado por último em index.html: é a fonte única de cores, fontes, tamanhos e cantos.
   As variáveis antigas (--lime, --panel, --bg-card, --mac-*…) apontam para os tokens novos. */
:root {
  color-scheme: dark;

  /* Neutros: grafite frio */
  --bg: #0B0D0F;
  --sidebar: #0E1013;
  --surface: #121519;
  --surface-2: #181C21;
  --surface-3: #1E2329;
  --border: #262B32;
  --border-strong: #343A42;
  --text: #E8EAED;
  --text-2: #A8AFB8;
  --text-3: #8A929C;

  /* Destaque: laranja 64 (só ação principal, item ativo e foco) */
  --accent: #FF6B00;
  --accent-hover: #FF7D1F;
  --accent-text: #FF8A33;
  --accent-ink: #140A02;
  --accent-soft: color-mix(in srgb, #FF6B00 12%, transparent);

  /* Situação */
  --ok: #3FB27F;
  --warn: #E0A43A;
  --danger: #E5534B;
  --info: #5B9BD5;
  --protocol: #8E7CE0;

  /* Tipografia */
  --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  /* Rótulos usam a fonte de texto; mono fica só para identificadores (CPF, protocolo, série, datas). */
  --font-label: var(--font-body);
  --fs-page: 28px; --fs-section: 20px; --fs-card: 15px; --fs-body: 14px; --fs-table: 13px; --fs-caption: 12px;

  /* Espaço e forma */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --ease: 160ms cubic-bezier(.2, .6, .2, 1);

  /* Compatibilidade com nomes antigos */
  --panel: var(--surface); --panel2: var(--surface-2); --muted: var(--text-3); --lime: var(--accent); --orange: var(--accent);
  --orange-hover: var(--accent-hover); --orange-brand: var(--accent); --orange-subtle: var(--accent-soft); --orange-glow: transparent;
  --bg-root: var(--bg); --bg-sidebar: var(--sidebar); --bg-topbar: rgba(11, 13, 15, .92); --bg-card: var(--surface); --bg-card-hover: var(--surface-2);
  --bg-surface: var(--surface); --bg-surface-elevated: var(--surface-2); --bg-input: var(--bg);
  --border-subtle: var(--border); --border-card: var(--border); --border-hover: var(--border-strong); --border-focus: var(--accent);
  --text-white: var(--text); --text-primary: var(--text); --text-secondary: var(--text-2); --text-muted: var(--text-3);
  --danger-color: var(--danger); --warning-color: var(--warn); --info-color: var(--info); --success-color: var(--ok);
  --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-lg);
  --shadow-card: none; --shadow-glow: none;
  --mac-bg-base: var(--bg); --mac-bg-surface: var(--surface); --mac-bg-elevated: var(--surface-2); --mac-bg-higher: var(--surface-3);
  --mac-border-subtle: var(--border); --mac-border-default: var(--border-strong); --mac-border-focus: var(--accent);
  --mac-text-primary: var(--text); --mac-text-secondary: var(--text-2); --mac-text-muted: var(--text-3);
  --mac-accent-orange: var(--accent); --mac-accent-hover: var(--accent-hover); --mac-accent-soft: var(--accent-soft);
  --mac-green: var(--ok); --mac-green-soft: color-mix(in srgb, var(--ok) 14%, transparent);
  --mac-radius-sm: var(--r-sm); --mac-radius-md: var(--r-md); --mac-radius-lg: var(--r-lg);

  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}

html, body { background: var(--bg) !important; color: var(--text); }
body {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
button, input, select, textarea { font-family: inherit; }

/* Títulos usam a face de display condensada */
h1, h2, h3, .page-heading h1, .card-heading h2, .module-card h2, .brand-mark, .metric-card strong, .login-card h1 {
  font-family: var(--font-display) !important;
  font-stretch: 87.5%;
  letter-spacing: -0.01em !important;
  text-wrap: balance;
}
.page-heading h1 { font-size: var(--fs-page) !important; font-weight: 700 !important; }
.page-heading h1 em { color: var(--text) !important; }

/* Números e identificadores alinham em coluna */
.data-table td, .metric-card strong, time, .mono, .num, [data-mono] { font-variant-numeric: tabular-nums; }

/* Rótulos em maiúsculas: 12 px com tracking moderado, nunca mono minúsculo */
.eyebrow, .metric-top, .rail-title, .side-label, .breadcrumb, .data-table th {
  font-family: var(--font-body) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  color: var(--text-3) !important;
}

/* Tabelas */
.data-table td { font-size: var(--fs-table); color: var(--text-2); height: 44px; }
.data-table th { background: var(--bg); position: sticky; top: 0; z-index: 1; }
.data-table tr:hover td { background: var(--surface) !important; }

/* Barra lateral: laranja só no item ativo */
.sidebar { background: var(--sidebar) !important; border-right: 1px solid var(--border) !important; }
.nav-item { font-size: var(--fs-body) !important; color: var(--text-2) !important; border-radius: var(--r-md) !important; transition: background var(--ease), color var(--ease); }
.nav-item:hover { background: var(--surface) !important; color: var(--text) !important; }
.nav-item:not(.active):hover { box-shadow: none !important; border-color: transparent !important; }
.nav-item::before, .nav-item::after { display: none !important; }
.nav-item[href="#assistant"] { background: transparent !important; }
.nav-item, .nav-item.active { border: 1px solid transparent !important; outline: 0; }
.nav-item.active { background: var(--surface-2) !important; color: var(--text) !important; box-shadow: inset 2px 0 0 var(--accent) !important; }
.nav-icon { color: var(--text-3) !important; }
.nav-item.active .nav-icon { color: var(--accent) !important; }

/* Botões */
.button.primary, .primary, .import-button, .send-button { background: var(--accent) !important; color: var(--accent-ink) !important; border-radius: var(--r-md) !important; }
.button.primary:hover, .import-button:hover:not(:disabled), .send-button:hover:not(:disabled) { background: var(--accent-hover) !important; }
.secondary-button, .table-pagination button {
  background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important; font-size: var(--fs-table) !important; padding: 7px 12px !important;
}
.secondary-button:hover, .table-pagination button:hover:not(:disabled) { border-color: var(--text-3) !important; }

/* Cards: borda fina, sem sombra nem brilho */
.metric-card, .chat-card, .rail-card, .module-card, .login-card {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important;
}
.metric-card strong { color: var(--text) !important; }

/* Campos */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea {
  font-size: var(--fs-table);
}

/* Foco visível e consistente */
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

/* Regra do laranja: valores, números e títulos ficam neutros; o laranja é para ação, item ativo e foco. */
.stat-green, .stat-orange, .dash-stat-row b.stat-green, .banner-number, .text-orange, .proc-pend-card strong,
.msg-h2, .msg-h3, .msg-h4, .msg-num, .brand-copy small, .privacy-banner, .rail-title span, .scope-check, .scope-lock {
  color: var(--text) !important;
}
.msg-bullet, .brand-copy small { color: var(--text-3) !important; }
.scope-on { color: var(--ok) !important; }
.green, .metric-icon.green, .integration-symbol { color: var(--text-2) !important; background: var(--surface-2) !important; }
.dash-pill.green, .process-status-pill.status-concluido { color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 35%, transparent) !important; background: color-mix(in srgb, var(--ok) 12%, transparent) !important; }
.metric-line i, .blue-line i, .amber-line i, .lilac-line i { background: var(--text-2) !important; }
.pulse, .online-dot { box-shadow: none !important; background: var(--ok) !important; }
.avatar, .message-mark, .assistant-avatar { color: var(--text) !important; background: var(--surface-2) !important; }

/* Associados: rótulos, avatares e seleção neutros; laranja só no botão principal e na página ativa */
.macos-crumb-tag { color: var(--text-3) !important; border-color: var(--border) !important; background: transparent !important; }
.user-avatar-micro, .inspector-avatar { color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border-strong) !important; }
.macos-table-row.selected, .macos-table-row.selected td { background: var(--surface-2) !important; }
.macos-table-row.selected td:first-child { box-shadow: inset 2px 0 0 var(--text-2) !important; }
.macos-micro-badge.orange { color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 12%, transparent) !important; border-color: color-mix(in srgb, var(--warn) 30%, transparent) !important; }
.table-action-link, .native-card-action, .popover-link { color: var(--accent-text) !important; }
.th-cpf, td.th-cpf, .member-cpf, .td-cpf { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; font-size: var(--fs-table); }

/* Ficha do associado */
.detail-avatar-box { border-color: var(--border-strong) !important; box-shadow: none !important; color: var(--text) !important; background: var(--surface-2) !important; }
.macos-kpi-box.highlight-orange { border-color: var(--border) !important; box-shadow: none !important; background: var(--surface) !important; }
.segment-badge.orange, .kpi-pill-tag.orange { color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 12%, transparent) !important; border-color: color-mix(in srgb, var(--warn) 30%, transparent) !important; }

/* Documentos: nada estoura a largura; uma ação laranja por região */
.module-card-head { flex-wrap: wrap; }
.word-template-upload { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; align-items: end; }
.word-template-upload .import-button { width: auto !important; min-width: 160px; }
.word-placeholder-guide, .word-placeholder-guide > div, .word-batch-controls { flex-wrap: wrap !important; min-width: 0; }
.word-template-item { flex-wrap: wrap; gap: var(--s2) var(--s3); }
.word-template-actions { flex-wrap: wrap; gap: var(--s2); }
/* "Gerar" em cada modelo vira ação secundária; o laranja fica em "Salvar modelos" */
.word-template-actions .button.primary {
  background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important;
}
.word-template-actions .button.primary:hover { border-color: var(--accent) !important; color: var(--accent-text) !important; }
.word-placeholder-guide > code, .word-fields-help code, .module-footnote code, [data-module-view] code {
  font-family: var(--font-mono) !important; color: var(--text) !important; background: var(--surface-2) !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-sm); padding: 1px 6px;
}
.word-template-icon { color: var(--text-2) !important; background: var(--surface-2) !important; border-color: var(--border) !important; }
.calendar-icon { color: var(--text-3) !important; }
#finance-import-module-status, .import-grid [role=status] { color: var(--ok) !important; }
small { font-size: max(12px, .85em); }
.word-field-token { min-width: 0; overflow: hidden; }
.word-field-token small { overflow-wrap: anywhere; }
.download-template { color: var(--text) !important; border-color: var(--border-strong) !important; background: var(--surface-2) !important; border-radius: var(--r-md) !important; }
.download-template:hover { border-color: var(--text-3) !important; }

/* Filtros ativos (chips/abas de alerta) são estado, não ação: neutros */
.alert-pill.active, .alert-tab-btn.active {
  background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--text-3) !important; box-shadow: none !important;
}

/* Login: logo sem brilho laranja */
.login-card .brand-mark, .login-card img, .login-card [class*="logo"] { box-shadow: none !important; filter: none !important; }

/* Identificadores em mono */
.mono, time, .proc-type, [data-mono] { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; }

/* Links */
a { color: var(--accent-text); }

/* Barra de rolagem discreta */
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }

/* Celular/tablet: barra lateral recolhida mostra só os ícones */
@media (max-width: 800px) {
  .nav-item { font-size: 0 !important; justify-content: center; padding: 0 !important; }
  .nav-icon { font-size: 18px !important; }
  .brand-copy, .side-label, .sidebar-bottom .connection div { display: none !important; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }