/* ============================================================
   Design System — AIOX Dark Cockpit v2.2
   Brutalist-technical · Neon Lime #D1FF00 · Zero Radius
   ============================================================ */

/* ─────── AIOX Token Layer ─────── */
:root {
  /* Brand primitives */
  --lime:             #D1FF00;
  --lime-deep:        #A8CC00;
  --void:             #000000;
  --ink:              #1D1F19;
  --cream:            #F4F4E8;
  --warm-white:       #FFFFED;
  --fg-meta:          #9C9C9C;
  --fg-muted:         #BCBCBC;
  --flare:            #ED4609;

  /* Surface ladder (dark cockpit) */
  --surface-deep:     #0A0A0C;
  --surface-panel:    #111113;
  --surface-dark:     #0F0F11;
  --surface-alt:      #1C1E19;
  --surface-hover:    #151518;
  --surface-overlay:  #1A1A1C;
  --surface-console:  #12130F;

  /* Semantic tokens (dark = default product context) */
  --background:           #050505;
  --foreground:           #F4F4E8;
  --primary:              #D1FF00;
  --primary-foreground:   #050505;
  --card:                 #0F0F11;
  --card-foreground:      #F4F4E8;
  --border:               rgba(156, 156, 156, 0.15);
  --border-strong:        rgba(156, 156, 156, 0.45);
  --border-subtle:        rgba(156, 156, 156, 0.10);
  --ring:                 rgba(209, 255, 0, 0.50);
  --muted:                #1A1A1C;
  --muted-foreground:     #9C9C9C;
  --destructive:          #ED4609;
  --success:              #22C55E;
  --warning:              #F59E0B;
  --info:                 #0099FF;

  /* Voice tokens — uma cor por voz do sistema (consolidado de hardcodes
     em automacao_kanban, automacao_config, tarefas_board, automacao_msg_detalhe) */
  --voice-flavia:   #ec4899;
  --voice-venae:    #a78bfa;
  --voice-one:      #10b981;
  --voice-clarissa: #14b8a6;
  --voice-oculto:   #fbbf24;
  --voice-lara:     #38bdf8;
  --voice-larissa:  #f472b6;

  /* Lime alpha scale — the depth mechanism */
  --lime-2:   rgba(209, 255, 0, 0.02);
  --lime-5:   rgba(209, 255, 0, 0.05);
  --lime-8:   rgba(209, 255, 0, 0.08);
  --lime-10:  rgba(209, 255, 0, 0.10);
  --lime-12:  rgba(209, 255, 0, 0.12);
  --lime-15:  rgba(209, 255, 0, 0.15);
  --lime-20:  rgba(209, 255, 0, 0.20);
  --lime-25:  rgba(209, 255, 0, 0.25);
  --lime-40:  rgba(209, 255, 0, 0.40);
  --lime-50:  rgba(209, 255, 0, 0.50);
  --lime-glow:      rgba(209, 255, 0, 0.25);
  --lime-glow-soft: rgba(209, 255, 0, 0.10);

  /* Typography — TASA Orbiter not publicly available; Geist Bold fallback */
  --font-display: 'Geist', system-ui, sans-serif;
  --font-sans:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Layout */
  --nav-height:   72px;
  --container-max: 1400px;
  --gutter: max(1.5rem, calc((100% - 1400px) / 2 + 1.5rem));

  /* Status (badge/dot tier) */
  --status-success: #4ADE80;
  --status-warning: #FBBF24;
  --status-error:   #F87171;
  --status-info:    #60A5FA;

  /* Mantidos por precaução (podem ser usados por libs Bootstrap) */
  --text-muted:   var(--muted-foreground);
  --accent:       var(--lime);

  /* Radius — ZERO everywhere. Brutalist. */
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-full: 0px;

  /* Bootstrap v5 dark-mode variable overrides */
  --bs-body-bg:              var(--background);
  --bs-body-color:           var(--foreground);
  --bs-primary:              var(--lime);
  --bs-primary-rgb:          209, 255, 0;
  --bs-link-color:           var(--lime);
  --bs-link-color-rgb:       209, 255, 0;
  --bs-link-hover-color:     var(--lime);
  --bs-border-color:         var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-card-bg:              var(--card);
  --bs-card-border-color:    var(--border);
  --bs-modal-bg:             var(--surface-overlay);
  --bs-modal-header-border-color: var(--border);
  --bs-secondary-bg:         var(--surface-panel);
  --bs-tertiary-bg:          var(--surface-hover);
  --bs-secondary-color:      var(--muted-foreground);
  --bs-tertiary-color:       var(--muted-foreground);
  --bs-emphasis-color:       var(--foreground);
  --bs-heading-color:        var(--foreground);

  /* Radius — override Bootstrap */
  --bs-border-radius:     0px;
  --bs-border-radius-sm:  0px;
  --bs-border-radius-lg:  0px;
  --bs-border-radius-xl:  0px;
  --bs-border-radius-xxl: 0px;
  --bs-border-radius-pill: 0px;

  /* Dropdown */
  --bs-dropdown-bg:           var(--surface-overlay);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color:   var(--foreground);
  --bs-dropdown-link-hover-bg: var(--lime-10);
  --bs-dropdown-link-hover-color: var(--lime);
  --bs-dropdown-link-active-bg: var(--lime);
  --bs-dropdown-link-active-color: var(--primary-foreground);
  --bs-dropdown-header-color: var(--muted-foreground);

  /* List group */
  --bs-list-group-bg:           var(--card);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-action-color: var(--foreground);
  --bs-list-group-action-hover-bg: var(--lime-10);
  --bs-list-group-action-hover-color: var(--lime);
  --bs-list-group-action-active-bg: var(--lime-15);
  --bs-list-group-active-bg:    var(--lime);
  --bs-list-group-active-color: var(--primary-foreground);
  --bs-list-group-active-border-color: var(--lime);

  /* Nav/tabs */
  --bs-nav-link-color:        var(--muted-foreground);
  --bs-nav-link-hover-color:  var(--foreground);
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-active-color: var(--foreground);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) transparent;

  /* Form */
  --bs-form-control-bg:           var(--surface-dark);
  --bs-form-select-bg:            var(--surface-dark);
  --bs-body-bg-rgb:               5, 5, 5;

  /* ═══════════════════════════════════════════════════════════════
     R1 — Foundation Tokens (typography, motion, shadow, z, soft variants)
     ═══════════════════════════════════════════════════════════════ */

  /* Typography scale — Major Third 1.25 ratio */
  --text-2xs:  9px;
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;

  --leading-tight:   1.1;
  --leading-snug:    1.4;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.10em;
  --tracking-widest:  0.18em;

  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    800;

  /* Motion */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-pulse:  1800ms;
  --duration-pulse-slow: 2000ms;

  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);

  /* Elevation */
  --shadow-none:     none;
  --shadow-overlay:  0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-dropdown: 0 16px 40px rgba(0, 0, 0, 0.40);
  --shadow-glow-lime: 0 0 24px var(--lime-glow);
  --shadow-focus-ring: 0 0 0 3px var(--ring);

  /* Z-index scale */
  --z-base:     1;
  --z-overlay:  6;
  --z-sticky:   100;
  --z-dropdown: 1000;
  --z-modal:    1050;
  --z-toast:    1100;

  /* Border widths */
  --border-width:        1px;
  --border-width-strong: 2px;

  /* Breakpoints (referência CSS-only — usado em comments / @container futuro) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1400px;

  /* Soft variants — gerados pra cada semantic (resolve 14 rgba duplicados) */
  --success-bg:        rgba(34, 197, 94, 0.08);
  --success-bg-strong: rgba(34, 197, 94, 0.15);
  --success-border:    rgba(34, 197, 94, 0.30);
  --warning-bg:        rgba(245, 158, 11, 0.08);
  --warning-bg-strong: rgba(245, 158, 11, 0.15);
  --warning-border:    rgba(245, 158, 11, 0.30);
  --destructive-bg:        rgba(237, 70, 9, 0.08);
  --destructive-bg-strong: rgba(237, 70, 9, 0.15);
  --destructive-border:    rgba(237, 70, 9, 0.30);
  --info-bg:        rgba(0, 153, 255, 0.08);
  --info-bg-strong: rgba(0, 153, 255, 0.15);
  --info-border:    rgba(0, 153, 255, 0.30);

  /* Voice soft variants */
  --voice-flavia-bg:     rgba(236, 72, 153, 0.15);
  --voice-flavia-border: rgba(236, 72, 153, 0.30);
  --voice-venae-bg:      rgba(139, 92, 246, 0.15);
  --voice-venae-border:  rgba(139, 92, 246, 0.30);
  --voice-one-bg:        rgba(16, 185, 129, 0.15);
  --voice-one-border:    rgba(16, 185, 129, 0.30);
  --voice-clarissa-bg:   rgba(20, 184, 166, 0.15);
  --voice-clarissa-border: rgba(20, 184, 166, 0.30);
  --voice-oculto-bg:     rgba(245, 158, 11, 0.15);
  --voice-oculto-border: rgba(245, 158, 11, 0.30);

  /* Phase colors (consolida fase de lançamento) */
  --phase-gravacao:        #C084FC;
  --phase-gravacao-bg:     rgba(192, 132, 252, 0.10);
  --phase-gravacao-border: rgba(192, 132, 252, 0.40);

  /* fg semantic unificado (consolida --fg-muted, --muted-foreground, --fg-meta) */
  --fg-subtle:  #9C9C9C;  /* texto meta — alias de --fg-meta / --muted-foreground */
  /* --fg-muted (#BCBCBC) mantém papel: texto secundário */
}

/* ─────── Reset / base ─────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use display font with AIOX scale */
h1, h2, h3, h4, h5, h6 {
  color: var(--foreground);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; }
h3 { font-size: 24px; line-height: 1.1;  letter-spacing: -0.02em; }
h4 { font-size: 20px; line-height: 1.2;  letter-spacing: -0.02em; }
h5 { font-size: 18px; line-height: 1.3;  letter-spacing: -0.01em; font-family: var(--font-sans); font-weight: 600; text-transform: none; }
h6 { font-size: 14px; line-height: 1.4;  letter-spacing: 0; font-family: var(--font-sans); font-weight: 600; text-transform: none; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
}

a {
  color: var(--foreground);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

a:hover {
  color: var(--lime);
  border-bottom-color: transparent;
}

/* ============================================================
   App Shell — Sidebar + Topbar (SaaS cockpit layout)
   ============================================================ */
:root {
  --sidebar-w:  248px;
  --topbar-h:   var(--nav-height);   /* 72px */
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ─────── Sidebar ─────── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-deep);
  border-right: 1px solid var(--border);
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--border);
  border-bottom-color: var(--border);
}
.sidebar-brand:hover { border-bottom: 1px solid var(--border); }
.sidebar-logo { height: 30px; width: auto; display: block; }

.sidebar-nav {
  flex: 1 1 auto;
  padding: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar-group { display: flex; flex-direction: column; }

.sidebar-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-meta);
  padding: 0 var(--space-lg) var(--space-sm);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--space-lg);
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sidebar-link:hover {
  color: var(--foreground);
  background: var(--surface-hover);
  border-left-color: var(--border-strong);
}
.sidebar-link.active {
  color: var(--lime);
  background: var(--lime-8);
  border-left-color: var(--lime);
}
.sidebar-link i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke-width: 1.75;
}

.sidebar-foot {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-meta);
  line-height: 1.5;
}
.sidebar-foot-path code {
  color: var(--fg-meta);
  background: transparent;
  padding: 0;
  word-break: break-all;
}
.sidebar-foot-time { margin-top: 2px; color: var(--fg-muted); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 150;
  backdrop-filter: blur(2px);
}

/* ─────── Área principal + Topbar ─────── */
.app-main {
  flex: 1 1 auto;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  padding: 0 var(--space-lg);
  background: rgba(5, 5, 5, 0.88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
}
.topbar-toggle:hover { border-color: var(--border-strong); color: var(--lime); }

.topbar-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.topbar-crumb { color: var(--fg-meta); text-transform: uppercase; font-size: 10px; letter-spacing: 0.12em; }
.topbar-sep { width: 13px; height: 13px; color: var(--fg-meta); }
.topbar-section {
  color: var(--foreground);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.10em;
}

.topbar-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  width: min(360px, 40vw);
}
.topbar-search i {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--fg-meta);
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-md) 0 36px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.topbar-search input::placeholder { color: var(--fg-meta); }
.topbar-search input:focus {
  outline: none;
  border-color: var(--lime-40);
  box-shadow: 0 0 0 2px var(--lime-10);
}

.topbar-actions { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; }
.topbar-quicklink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 40px;
  padding: 0 var(--space-md);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 13px;
  transition: border-color 0.15s, color 0.15s;
}
.topbar-quicklink:hover, .topbar-quicklink.active {
  color: var(--foreground);
  border-color: var(--lime-40);
}
.topbar-quicklink i { width: 16px; height: 16px; color: var(--fg-meta); }
.topbar-quicklink:hover i, .topbar-quicklink.active i { color: var(--lime); }
@media (max-width: 640px) { .topbar-quicklink span { display: none; } }
.topbar-env {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--lime);
  padding: 4px 10px;
  border: 1px solid var(--lime-25);
  background: var(--lime-8);
}

/* ─────── Main / conteúdo ─────── */
main {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--topbar-h));
}

/* ─────── Responsivo: sidebar off-canvas < 992px ─────── */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }
  .sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .topbar-toggle { display: inline-flex; }
  .topbar-search { width: auto; flex: 1 1 auto; }
}
@media (min-width: 992px) {
  .sidebar-backdrop { display: none !important; }
}

/* ─────── Section Titles (HUD eyebrow style) ─────── */
.section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.20em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.section-title::before {
  content: '[';
  opacity: 0.6;
}

.section-title::after {
  content: ']';
  opacity: 0.6;
}

.section-title i {
  color: var(--lime);
  margin-right: var(--space-sm);
}

/* ─────── Stat Cards ─────── */
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s;
}

.stat-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: none;
}

.stat-card .card-body {
  padding: var(--space-lg);
  text-align: center;
}

.stat-icon {
  font-size: 1.5rem;
  color: var(--lime);
  margin-bottom: var(--space-sm);
}

.stat-value {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--foreground);
  letter-spacing: -0.04em;
  font-family: var(--font-display);
}

.stat-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 10px;
  color: var(--muted-foreground);
  margin-top: var(--space-sm);
  font-weight: 600;
}

/* ─────── Generic Cards ─────── */
.launch-card, .copy-card, .cerebro-card, .skill-card, .ref-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--foreground);
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s;
}

.launch-card:hover, .copy-card:hover, .cerebro-card:hover,
.skill-card:hover, .ref-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: none;
  box-shadow: none;
}

.launch-card h5, .copy-card h5 {
  color: var(--foreground);
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
  font-family: var(--font-sans);
}

/* ─────── Card de lançamento: título padronizado + avatar ─────── */
.launch-card-head { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 12px; }
.launch-card-headtext { min-width: 0; }

/* Avatar do expert (foto de perfil ou iniciais) */
.expert-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
}
.expert-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.expert-avatar-fallback {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--lime);
  line-height: 1;
}
.expert-avatar--sm { width: 34px; height: 34px; }
.expert-avatar--sm .expert-avatar-fallback { font-size: 13px; }

.expert-handle {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 1px;
  border-bottom: 1px solid transparent;
}
.expert-handle:hover { color: var(--lime); border-bottom-color: transparent; }

.min-w-0 { min-width: 0; }

/* ─────── Agentes: fluxograma / workflow (n8n) ─────── */
.fluxo-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-top: 2px solid var(--lime-40);
  background:
    radial-gradient(circle at 20% 20%, rgba(0,153,255,0.05), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(209,255,0,0.04), transparent 40%),
    var(--surface-deep);
}
.fluxo-canvas { width: 100%; height: 600px; }
.fluxo-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 600px; color: var(--muted-foreground); font-size: 14px;
}
.fluxo-legenda {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 8px 12px;
  background: rgba(5, 5, 5, 0.78);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  max-width: calc(100% - 2 * var(--space-md));
}
.fluxo-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fluxo-legenda .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ─────── Agentes: fluxo de etapas do lançamento (mapa mental) [legado] ─────── */
.agentes-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-sm);
}
.agente-fase {
  flex: 1 1 220px;
  min-width: 210px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--lime-40);
}
.agente-fase-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--foreground);
}
.agente-fase-head i { width: 15px; height: 15px; color: var(--lime); flex: 0 0 auto; }
.agente-fase-nome { min-width: 0; }
.agente-fase-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lime);
  color: var(--void);
  font-weight: 800;
  font-size: 12px;
  border-radius: 50%;
}
.agente-fase-skills { display: flex; flex-direction: column; padding: var(--space-sm); gap: 4px; flex: 1 1 auto; }
.agente-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  color: var(--foreground);
  background: var(--surface-dark);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  position: relative;
}
.agente-chip:hover {
  background: var(--surface-hover);
  border-left-color: var(--lime);
  color: var(--foreground);
}
.agente-chip-dot {
  display: none;
}
.agente-chip-title { font-size: 13px; font-weight: 600; line-height: 1.25; }
.agente-chip-slug { font-family: var(--font-mono); font-size: 10px; color: var(--fg-meta); }
.agente-conector {
  display: flex;
  align-items: center;
  color: var(--lime-40);
  flex: 0 0 auto;
  align-self: center;
}
.agente-conector i { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .agente-fase { max-width: none; }
  .agente-conector { display: none; }
}

/* ─────── Cérebro: grafo de conhecimento (Obsidian) ─────── */
.cerebro-grafo-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-top: 2px solid var(--lime-40);
  background: var(--surface-deep);
}
.cerebro-grafo { width: 100%; height: 560px; }
.cerebro-grafo canvas { display: block; }
.cerebro-grafo-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 560px; color: var(--muted-foreground); font-size: 14px;
}
.cerebro-grafo-legenda {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 8px 12px;
  background: rgba(5, 5, 5, 0.75);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.cerebro-grafo-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cerebro-grafo-legenda .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cerebro-grafo-legenda .dot--nicho { background: var(--lime); }
.cerebro-grafo-legenda .dot--core { background: var(--info); }
.cerebro-grafo-legenda .dot--aprendizado { background: var(--fg-meta); }

/* ─────── Grafo neural em cheio (Agentes / Cérebro) — a tela É o grafo ─────── */
.grafo-page { display: flex; flex-direction: column; }
.grafo-topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md);
}
.grafo-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-foreground); border-bottom: 1px solid transparent;
}
.grafo-back:hover { color: var(--lime); }
.grafo-back i { width: 14px; height: 14px; }
.grafo-full-wrap {
  position: relative;
  height: calc(100vh - var(--topbar-h) - 150px);
  min-height: 460px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--lime-40);
  background:
    radial-gradient(circle at 30% 30%, rgba(0,153,255,0.05), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(209,255,0,0.05), transparent 45%),
    var(--surface-deep);
  overflow: hidden;
}
.grafo-full { width: 100%; height: 100%; }
.grafo-full canvas { display: block; cursor: grab; }
.grafo-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--muted-foreground); font-size: 14px;
}
.grafo-legenda {
  position: absolute; left: var(--space-md); bottom: var(--space-md);
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  padding: 8px 12px;
  background: rgba(5, 5, 5, 0.78);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-foreground);
  max-width: calc(100% - 2 * var(--space-md));
}
.grafo-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafo-legenda .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.grafo-cam {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font: inherit; text-transform: inherit; letter-spacing: inherit;
  color: var(--foreground); opacity: 0.92;
  transition: opacity 0.12s ease;
}
.grafo-cam:hover { opacity: 1; }
.grafo-cam.off { opacity: 0.32; }
.grafo-cam.off .dot { filter: grayscale(1); }
.grafo-cam .dot { border-radius: 50%; }
/* Texto da nota dentro do modal reusa o .md-content já existente */
#notaModalBody .md-content { font-size: 0.95rem; }

/* ─────── Referências por nicho ─────── */
.ref-nicho { margin-bottom: var(--space-xl); }
.ref-nicho-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.ref-nicho-head > i { width: 18px; height: 18px; color: var(--lime); }
.ref-nicho-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--foreground);
}
.ref-nicho-cerebro {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--info);
  border: 1px solid rgba(0, 153, 255, 0.25);
  padding: 3px 8px;
}
.ref-nicho-cerebro:hover { color: var(--info); border-color: rgba(0, 153, 255, 0.5); background: rgba(0,153,255,0.08); }
.ref-nicho-cerebro i { width: 13px; height: 13px; }

.ref-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime);
  margin-bottom: 6px;
}
.ref-card-tag i { width: 12px; height: 12px; }

.ref-transcricoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ref-transcricao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 7px 12px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 12px;
  transition: border-color 0.15s, color 0.15s;
}
.ref-transcricao:hover { color: var(--foreground); border-color: var(--border-strong); }
.ref-transcricao i { width: 14px; height: 14px; color: var(--fg-meta); }
.ref-transcricao code { background: transparent; border: 0; color: inherit; padding: 0; }
.ref-transcricao-words { color: var(--fg-meta); font-family: var(--font-mono); font-size: 10px; }
.launch-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.launch-card-marca {
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────── Copy ID badge ─────── */
.copy-id {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  color: var(--lime);
  background: var(--lime-10);
  border: 1px solid var(--lime-25);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 0;
}

.copy-gancho {
  font-style: italic;
  color: var(--muted-foreground);
  border-left: 2px solid var(--lime);
  padding-left: var(--space-md);
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ─────── Nota Circle (Score badge) — squared per AIOX ─────── */
.nota-circle {
  width: 80px;
  height: 80px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid transparent;
}

.nota-excelente  { background: var(--success);     border-color: var(--success); color: #050505; }
.nota-aprovada   { background: rgba(34,197,94,0.15); border-color: var(--success); color: var(--success); }
.nota-revisar    { background: rgba(245,158,11,0.15); border-color: var(--warning); color: var(--warning); }
.nota-reescrever { background: rgba(237,70,9,0.15);  border-color: var(--destructive); color: var(--destructive); }

.nota-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: var(--font-display);
}

.nota-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 4px;
}

/* ─────── Section Cards ─────── */
.section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.section-card .card-header {
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--lime);
  padding: var(--space-md) var(--space-lg);
}

.section-card .card-body {
  padding: var(--space-lg);
}

.section-card .lead {
  font-size: 1.1rem;
  color: var(--foreground);
  font-weight: 400;
}

/* ─────── Roteiro (copy detail layout) ─────── */
.copy-roteiro {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-xl) var(--space-xl) var(--space-xl) 0;
  box-shadow: none;
  margin-bottom: var(--space-md);
}

.roteiro-bloco {
  position: relative;
  padding-left: 9rem;
  margin-bottom: var(--space-lg);
}

.roteiro-bloco::before {
  content: attr(data-label);
  position: absolute;
  left: var(--space-lg);
  top: 0.4rem;
  width: 6.5rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  border-right: 1px solid var(--border);
  padding-right: var(--space-sm);
  padding-top: 0.25rem;
}

.roteiro-bloco[data-label="Gancho"]::before {
  color: var(--lime);
  border-right-color: var(--lime);
}

.roteiro-bloco[data-label="CTA"]::before {
  color: var(--success);
  border-right-color: var(--success);
}

.roteiro-gancho {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--foreground);
  margin: 0;
  font-style: italic;
}

.roteiro-corpo {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--foreground);
  margin: 0;
}

.roteiro-corpo p { margin-bottom: var(--space-md); }
.roteiro-corpo p:last-child { margin-bottom: 0; }

.roteiro-cta {
  font-size: 1rem;
  font-weight: 600;
  color: var(--success);
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: rgba(34, 197, 94, 0.08);
  border-left: 2px solid var(--success);
  border-radius: 0;
}

@media (max-width: 768px) {
  .copy-roteiro { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
  .roteiro-bloco {
    padding-left: var(--space-lg);
    border-left: 2px solid var(--border);
    margin-left: var(--space-md);
  }
  .roteiro-bloco::before {
    position: static;
    display: block;
    width: auto;
    border: none;
    text-align: left;
    padding: 0;
    margin-bottom: var(--space-sm);
  }
}

/* ─────── Buttons — AIOX flat, lime primary ─────── */
.btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-radius: 0;
  padding: 12px 20px;
  height: 44px;
  border-width: 1px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:focus, .btn:active {
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}

.btn-sm {
  padding: 8px 14px;
  height: 36px;
  font-size: 10px;
}

.btn-primary,
.btn-dark {
  background: var(--lime);
  color: var(--primary-foreground);
  border-color: var(--lime);
}

.btn-primary:hover,
.btn-dark:hover {
  background: var(--lime);
  color: var(--primary-foreground);
  border-color: var(--lime);
  box-shadow: var(--lime-glow) 0 0 24px;
}

.btn-secondary {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: var(--lime-10);
  color: var(--lime);
  border-color: var(--lime);
  box-shadow: none;
}

.btn-light,
.btn-outline-light {
  background: var(--surface-panel);
  color: var(--foreground);
  border-color: var(--border);
}

.btn-light:hover,
.btn-outline-light:hover {
  background: var(--surface-hover);
  color: var(--foreground);
  border-color: var(--border-strong);
}

.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border-strong);
}

.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover {
  background: var(--lime-10);
  color: var(--lime);
  border-color: var(--lime);
}

.btn-outline-primary:focus,
.btn-outline-dark:focus,
.btn-outline-secondary:focus {
  box-shadow: 0 0 0 3px var(--ring);
}

.btn-ghost {
  background: transparent;
  color: var(--foreground);
  border-color: transparent;
}

.btn-ghost:hover {
  color: var(--lime);
  background: var(--lime-8);
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #050505;
}

.btn-success:hover {
  background: var(--success);
  border-color: var(--success);
  opacity: 0.9;
}

.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: #050505;
}

.btn-warning:hover { opacity: 0.9; }

.btn-danger {
  background: var(--destructive);
  border-color: var(--destructive);
  color: var(--warm-white);
}

.btn-danger:hover { opacity: 0.9; }

.btn-link {
  color: var(--muted-foreground);
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 4px 8px;
  height: auto;
}

.btn-link:hover {
  color: var(--lime);
  text-decoration: none;
}

/* ─────── Forms ─────── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  background: var(--surface-dark);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: var(--surface-dark);
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  color: var(--foreground);
}

.form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-foreground);
  margin-bottom: var(--space-sm);
}

.form-text {
  color: var(--muted-foreground);
  font-size: 12px;
}

.form-check-input {
  background-color: var(--surface-dark);
  border-color: var(--border-strong);
  border-radius: 0;
}

.form-check-input:checked {
  background-color: var(--lime);
  border-color: var(--lime);
}

/* ─────── Markdown Content ─────── */
.md-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--foreground);
}

.md-content h1, .md-content h2, .md-content h3, .md-content h4 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--foreground);
}

.md-content h1 { font-size: 1.75rem; }
.md-content h2 { font-size: 1.4rem;  }
.md-content h3 { font-size: 1.15rem; }
.md-content h4 { font-size: 1rem; color: var(--muted-foreground); }

.md-content code {
  background: var(--surface-panel);
  color: var(--lime);
  padding: 2px 6px;
  border-radius: 0;
  font-size: 0.875em;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
}

.md-content pre {
  background: var(--surface-console);
  color: var(--foreground);
  padding: var(--space-md);
  border-radius: 0;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.md-content pre code {
  background: transparent;
  color: var(--lime);
  padding: 0;
  border: none;
}

.md-content table {
  width: 100%;
  margin: var(--space-md) 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.md-content table th,
.md-content table td {
  border: 1px solid var(--border);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
}

.md-content table th {
  background: var(--surface-panel);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime);
}

.md-content table tr:hover td {
  background: var(--lime-2);
}

.md-content blockquote {
  border-left: 2px solid var(--lime);
  padding-left: var(--space-md);
  color: var(--muted-foreground);
  font-style: italic;
  margin: var(--space-md) 0;
}

.md-content ul, .md-content ol {
  margin: var(--space-sm) 0 var(--space-md);
}

.md-content li { margin-bottom: 0.3rem; }

/* ─────── Pegada Obsidian: links internos + painel de conexões ─────── */
.md-content a {
  color: var(--lime);
  border-bottom: 1px solid var(--lime-25);
}
.md-content a:hover { border-bottom-color: var(--lime); }
/* Link interno (wikilink) — pílula discreta, cara de nota linkada */
.md-content a.md-wikilink {
  display: inline;
  color: var(--info);
  background: rgba(0, 153, 255, 0.08);
  border: 1px solid rgba(0, 153, 255, 0.20);
  border-radius: 3px;
  padding: 0 5px;
  font-weight: 500;
  white-space: normal;
  transition: background 0.15s, border-color 0.15s;
}
.md-content a.md-wikilink::before { content: "🔗"; font-size: 0.75em; margin-right: 3px; opacity: 0.6; }
.md-content a.md-wikilink:hover {
  background: rgba(0, 153, 255, 0.16);
  border-color: rgba(0, 153, 255, 0.45);
}

/* Grafo local (Obsidian local graph) — a nota + vizinhos, visual */
.md-localgraph-wrap {
  border: 1px solid var(--border);
  border-top: 2px solid var(--lime-40);
  background:
    radial-gradient(circle at 50% 40%, rgba(209,255,0,0.05), transparent 60%),
    var(--surface-deep);
}
.md-localgraph-head {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 10px var(--space-md);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted-foreground);
}
.md-localgraph-head i { width: 15px; height: 15px; color: var(--lime); }
.md-localgraph { width: 100%; height: 300px; }
.md-localgraph canvas { display: block; }

/* Painel de conexões (backlinks) — right rail sticky, estilo Obsidian */
.md-connections {
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-md));
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--lime-40);
  padding: var(--space-md);
}
.md-connections-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.md-connections-head i { width: 15px; height: 15px; color: var(--lime); }
.md-connections-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.md-connection {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 10px;
  color: var(--muted-foreground);
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.35;
}
.md-connection i { width: 15px; height: 15px; flex: 0 0 15px; }
.md-connection:hover {
  color: var(--foreground);
  background: var(--surface-hover);
  border-left-color: var(--lime);
}
.md-connection--cerebro i { color: var(--info); }
.md-connection--aprendizado i { color: var(--warning); }
.md-connection--agente i { color: var(--lime); }

/* ─────── Tabs ─────── */
.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 0;
}

.nav-tabs .nav-item { margin-bottom: 0; }

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
}

.nav-tabs .nav-link:hover {
  color: var(--foreground);
  border-bottom-color: var(--border-strong);
  background: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--lime);
  background: transparent;
  border-bottom: 2px solid var(--lime);
}

.tab-content {
  background: var(--card);
  border-color: var(--border) !important;
  border-radius: 0 !important;
}

/* ─────── Breadcrumb ─────── */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--muted-foreground);
  content: "·";
}

.breadcrumb-item a {
  color: var(--muted-foreground);
  text-decoration: none;
  border: none;
  transition: color 0.15s;
}

.breadcrumb-item a:hover { color: var(--lime); }
.breadcrumb-item.active { color: var(--foreground); }

/* ─────── Badges ─────── */
.badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 0;
  border: 1px solid transparent;
}

/* Bootstrap badge overrides */
.badge.bg-primary,
.badge.bg-dark {
  background: var(--lime) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--lime) !important;
}

.badge.bg-secondary {
  background: var(--surface-panel) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

.badge.bg-light,
.badge.bg-light.text-dark {
  background: var(--surface-panel) !important;
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
}

.badge.bg-success  { background: rgba(34, 197, 94, 0.15) !important; color: var(--success) !important; border-color: var(--success) !important; }
.badge.bg-warning  { background: rgba(245, 158, 11, 0.15) !important; color: var(--warning) !important; border-color: var(--warning) !important; }
.badge.bg-danger   { background: rgba(237, 70, 9, 0.15) !important; color: var(--destructive) !important; border-color: var(--destructive) !important; }
.badge.bg-info     { background: rgba(0, 153, 255, 0.15) !important; color: var(--info) !important; border-color: var(--info) !important; }

/* Bootstrap 5.3 subtle badges */
.badge.bg-success-subtle  { background: rgba(34, 197, 94, 0.12) !important; color: var(--success) !important; border-color: rgba(34,197,94,0.3) !important; }
.badge.bg-warning-subtle  { background: rgba(245, 158, 11, 0.12) !important; color: var(--warning) !important; border-color: rgba(245,158,11,0.3) !important; }
.badge.bg-danger-subtle   { background: rgba(237, 70, 9, 0.12) !important; color: var(--destructive) !important; border-color: rgba(237,70,9,0.3) !important; }
.badge.bg-info-subtle     { background: rgba(0, 153, 255, 0.12) !important; color: var(--info) !important; border-color: rgba(0,153,255,0.3) !important; }
.badge.bg-primary-subtle  { background: var(--lime-10) !important; color: var(--lime) !important; border-color: var(--lime-25) !important; }
.badge.bg-secondary-subtle { background: var(--surface-panel) !important; color: var(--muted-foreground) !important; border-color: var(--border) !important; }

/* Voice badges */
.badge.bg-pink   { background: rgba(236, 72, 153, 0.15) !important; color: var(--voice-flavia) !important; border-color: rgba(236,72,153,0.3) !important; }
.badge.bg-purple { background: rgba(139, 92, 246, 0.15) !important; color: var(--voice-venae) !important; border-color: rgba(139,92,246,0.3) !important; }

/* ─────── Tables ─────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--lime-2);
  --bs-table-hover-bg: var(--lime-5);
  color: var(--foreground);
}

.table thead th {
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime);
  padding: var(--space-md);
}

.table tbody td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--foreground);
}

.table tbody tr:hover td {
  background: var(--lime-2);
}

/* ─────── Cards (Bootstrap generic) ─────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  color: var(--foreground);
}

.card-header {
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
}

/* Override Bootstrap's .bg-light on card-header */
.card-header.bg-light {
  background: var(--surface-panel) !important;
  color: var(--foreground) !important;
}

.card-footer {
  background: var(--surface-panel);
  border-top: 1px solid var(--border);
}

/* bg-white and bg-light overrides (dark context) */
.bg-white,
.bg-light {
  background: var(--surface-panel) !important;
  color: var(--foreground) !important;
}

/* ─────── List Group ─────── */
.list-group {
  border-radius: 0;
}

.list-group-item {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
  border-radius: 0 !important;
  transition: background 0.15s, color 0.15s;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--lime-10);
  color: var(--lime);
  border-color: var(--border);
}

.list-group-item.active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--primary-foreground);
}

/* ─────── Alerts ─────── */
.alert {
  border-radius: 0;
  border: 1px solid;
  padding: var(--space-md) var(--space-lg);
  box-shadow: none;
}

.alert-info {
  background: rgba(0, 153, 255, 0.08);
  border-color: rgba(0, 153, 255, 0.25);
  color: var(--foreground);
}

.alert-success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--foreground);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: var(--foreground);
}

.alert-danger {
  background: rgba(237, 70, 9, 0.08);
  border-color: rgba(237, 70, 9, 0.25);
  color: var(--foreground);
}

.alert-secondary {
  background: var(--surface-panel);
  border-color: var(--border);
  color: var(--foreground);
}

/* ─────── Modal ─────── */
.modal-content {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.modal-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface-panel);
}

.modal-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-panel);
}

.modal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime);
}

.modal-backdrop {
  background-color: rgba(61, 61, 61, 0.5);
}

.btn-close {
  filter: invert(1) opacity(0.6);
}

.btn-close:hover {
  filter: invert(1) opacity(1);
}

/* ─────── Dropdown ─────── */
.dropdown-menu {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40);
  padding: var(--space-sm) 0;
}

.dropdown-item {
  color: var(--foreground);
  font-size: 13px;
  padding: var(--space-sm) var(--space-md);
  transition: background 0.1s, color 0.1s;
  border-radius: 0;
  font-family: var(--font-sans);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--lime-10);
  color: var(--lime);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--lime);
  color: var(--primary-foreground);
}

.dropdown-header {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-foreground);
  padding: var(--space-sm) var(--space-md);
}

.dropdown-divider {
  border-color: var(--border);
  opacity: 1;
}

/* ─────── Collapse panel ─────── */
.collapse-header {
  cursor: pointer;
  user-select: none;
}

.collapse-header:hover {
  background: var(--lime-5) !important;
}

/* Pasta card ─────── */
.pasta-card .card-header {
  cursor: pointer;
  background: var(--surface-panel) !important;
  color: var(--foreground) !important;
  transition: background 0.15s;
}

.pasta-card .card-header:hover {
  background: var(--lime-8) !important;
}

/* Launch card hover (override inline style) */
.launch-card { transition: border-color 0.15s, background 0.15s; }
.launch-card:hover { transform: none; box-shadow: none; border-color: var(--border-strong); background: var(--surface-hover); }

/* ─────── HUD Label Components ─────── */
.hud-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--lime);
  display: block;
  margin-bottom: var(--space-sm);
}

.hud-bracket {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime);
  opacity: 0.6;
}

.label-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
}

/* ─────── Progress ─────── */
.progress {
  background: var(--surface-panel);
  border-radius: 0;
  height: 4px;
}

.progress-bar {
  background: var(--lime);
}

/* ─────── Accordion ─────── */
.accordion-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 !important;
}

.accordion-button {
  background: var(--surface-panel);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-radius: 0 !important;
}

.accordion-button:not(.collapsed) {
  background: var(--lime-10);
  color: var(--lime);
  box-shadow: none;
}

.accordion-button::after {
  filter: invert(1);
}

.accordion-button:not(.collapsed)::after {
  filter: invert(75%) sepia(100%) saturate(1000%) hue-rotate(55deg);
}

.accordion-body {
  background: var(--card);
  color: var(--foreground);
}

/* ─────── Footer ─────── */
footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  color: var(--muted-foreground);
}

footer code {
  background: transparent;
  color: var(--muted-foreground);
  font-size: 10px;
  font-family: var(--font-mono);
}

/* ─────── Utility classes ─────── */
.text-muted   { color: var(--muted-foreground) !important; }
.text-lime    { color: var(--lime) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--destructive) !important; }
.text-info    { color: var(--info) !important; }

/* Subtle color classes (BS5.3 emphasis overrides) */
.text-success-emphasis { color: var(--success) !important; }
.text-warning-emphasis { color: var(--warning) !important; }
.text-danger-emphasis  { color: var(--destructive) !important; }
.text-info-emphasis    { color: var(--info) !important; }
.text-primary-emphasis { color: var(--lime) !important; }
.text-secondary-emphasis { color: var(--muted-foreground) !important; }

.text-uppercase { letter-spacing: 0.08em !important; }

/* Surface background utilities */
.bg-surface-panel   { background: var(--surface-panel) !important; }
.bg-surface-dark    { background: var(--surface-dark) !important; }
.bg-surface-console { background: var(--surface-console) !important; }
.bg-lime-glow       { background: var(--lime-10) !important; }

/* Border utility */
.border-lime  { border-color: var(--lime) !important; }
.border-aiox  { border-color: var(--border) !important; }

/* Scrollbar (AIOX dark) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-deep); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--lime-50); }

/* Selection */
::selection {
  background: var(--lime-25);
  color: var(--foreground);
}

/* Focus ring (global) */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* ─────── Case audit media gallery ─────── */
.case-media-card {
  overflow: hidden;
}

.case-media-preview {
  aspect-ratio: 9 / 14;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.case-media-preview video,
.case-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-media-preview video {
  background: #000;
}

.case-doc-section {
  scroll-margin-top: 90px;
}

/* ============================================================
   Launch card — fase / progresso / alerta (Dashboard home)
   ============================================================ */

/* Badge de fase no canto superior direito do card */
.launch-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface-overlay);
  color: var(--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.launch-phase-badge--rascunho     { color: var(--fg-meta);       border-color: var(--border-subtle); }
.launch-phase-badge--em-producao  { color: var(--info);          border-color: rgba(0, 153, 255, 0.35); background: rgba(0, 153, 255, 0.08); }
.launch-phase-badge--revisao      { color: var(--warning);       border-color: rgba(245, 158, 11, 0.40); background: rgba(245, 158, 11, 0.08); }
.launch-phase-badge--gravacao     { color: #C084FC;              border-color: rgba(192, 132, 252, 0.40); background: rgba(192, 132, 252, 0.10); }
.launch-phase-badge--no-ar        { color: var(--success);       border-color: rgba(34, 197, 94, 0.50); background: rgba(34, 197, 94, 0.12); animation: launch-pulse 2s ease-in-out infinite; }
.launch-phase-badge--concluido    { color: var(--success);       border-color: rgba(34, 197, 94, 0.30); background: rgba(34, 197, 94, 0.05); opacity: 0.85; }
.launch-phase-badge--pausado      { color: var(--flare);         border-color: rgba(237, 70, 9, 0.40); background: rgba(237, 70, 9, 0.08); }

@keyframes launch-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  50%      { opacity: 0.78; box-shadow: 0 0 8px 0 rgba(34, 197, 94, 0.45); }
}

/* Barra de progresso fina (3px) — cor herdada pela fase do card pai */
.launch-progress {
  height: 3px;
  background: var(--border-subtle);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 4px;
}

.launch-progress-bar {
  height: 100%;
  background: var(--fg-muted);
  transition: width 0.3s ease;
}

.launch-card--em-producao .launch-progress-bar { background: var(--info); }
.launch-card--revisao    .launch-progress-bar { background: var(--warning); }
.launch-card--gravacao   .launch-progress-bar { background: #C084FC; }
.launch-card--no-ar      .launch-progress-bar { background: var(--success); }
.launch-card--concluido  .launch-progress-bar { background: var(--success); opacity: 0.55; }
.launch-card--pausado    .launch-progress-bar { background: var(--flare); }
.launch-card--rascunho   .launch-progress-bar { background: var(--fg-meta); }

.launch-progress-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-meta);
  letter-spacing: 0.02em;
}

/* Dot de alerta no canto superior esquerdo */
.launch-alert-dot {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--destructive);
  box-shadow: 0 0 0 0 rgba(237, 70, 9, 0.6);
  animation: launch-alert-pulse 1.8s ease-in-out infinite;
  z-index: 6;
}

@keyframes launch-alert-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(237, 70, 9, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(237, 70, 9, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(237, 70, 9, 0);    }
}

/* Card concluído fica visualmente "descansado" */
.launch-card--concluido {
  opacity: 0.78;
}
.launch-card--concluido:hover {
  opacity: 1;
}

/* Acessibilidade: desliga animações pra quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .launch-phase-badge--no-ar { animation: none; }
  .launch-alert-dot          { animation: none; }
  .launch-progress-bar       { transition: none; }
}

/* Mobile: badges do card de lançamento não estouram com nomes longos.
   Ex: "Dra. Camila Souza" cabe; "Larissa Pulmonare" cabe; nomes maiores
   ganham ellipsis no fim em vez de quebrar layout. */
.launch-card .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* R3: badges clicáveis (expert/nicho) precisam vencer o stretched-link.
   z-index > 1 (Bootstrap stretched-link usa ::after z-index:1). */
.launch-badge-link {
  position: relative;
  z-index: 5;
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-out);
}
.launch-badge-link:hover {
  filter: brightness(1.2);
}

/* Data de abertura do carrinho — destaque forte no card */
.launch-cart-open {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border-radius: 0;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.10);
  color: var(--success);
  font-size: var(--text-sm, 13px);
  line-height: 1.3;
}
.launch-cart-open .bi {
  font-size: 1.05em;
}
.launch-cart-open-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.04em);
  font-size: var(--text-xs, 11px);
  font-weight: var(--fw-medium);
  opacity: 0.85;
}
.launch-cart-open-date {
  font-weight: var(--fw-bold);
  color: var(--foreground);
}

/* Quick-links do card (Instagram + página de vendas) — acesso rápido logo de cara */
.launch-quick-links {
  flex-wrap: wrap;
}
.launch-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs, 12px);
  font-weight: var(--fw-medium, 500);
  padding: 3px 10px;
  border-radius: 0;
  text-decoration: none;
  color: var(--info);
  border: 1px solid rgba(0, 153, 255, 0.30);
  background: rgba(0, 153, 255, 0.07);
}
.launch-quick-link:hover {
  background: rgba(0, 153, 255, 0.15);
  color: var(--info);
}

/* ═══════════════════════════════════════════════════════════════
   R5 — A11y + Mobile polish
   ═══════════════════════════════════════════════════════════════ */

/* Page title: h1 raiz de cada página. Mais display que h2, mas brutalist. */
.page-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  margin-bottom: var(--space-sm, 8px);
  line-height: var(--leading-tight);
}

/* Prosa legível — limite ergonômico de 65-75ch em containers de texto longo */
.md-content,
.copy-roteiro,
.roteiro-corpo {
  max-width: 72ch;
}
.md-content table,
.md-content pre,
.md-content blockquote {
  max-width: none;  /* tabelas/code respiram livre */
}

/* Reduced motion: aplicado a TODAS as transitions/animations que antes eram só locais */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch targets: garantir mínimo 44x44 em controles críticos em mobile */
@media (max-width: 768px) {
  .btn-link.p-1 {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Underline default em links dentro de prosa (a11y de identificação) */
.md-content a:not(.btn):not(.badge),
.copy-roteiro a:not(.btn):not(.badge) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ═══════════════════════════════════════════════════════════════
   R2 — Inline styles migrados (home, murall, conectar)
   ═══════════════════════════════════════════════════════════════ */

/* Dropdown de "mover lançamento" na home */
.mover-dropdown .dropdown-menu { font-size: 0.875rem; }

/* Caixa de prompt MurALL (mono, scroll, console) */
.prompt-box {
  background: var(--surface-console);
  color: var(--foreground);
  padding: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DBG-2 — Chips de status das instâncias Evolution (kanban header)
   ═══════════════════════════════════════════════════════════════ */

.instance-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.instance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  padding: 3px 8px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.instance-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-meta);
  flex-shrink: 0;
}

.instance-chip--ok {
  color: var(--success);
  border-color: var(--success-border);
  background: var(--success-bg);
}
.instance-chip--ok .instance-chip-dot {
  background: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.instance-chip--warn {
  color: var(--warning);
  border-color: var(--warning-border);
  background: var(--warning-bg);
}
.instance-chip--warn .instance-chip-dot {
  background: var(--warning);
  animation: instance-pulse var(--duration-pulse) ease-in-out infinite;
}

.instance-chip--err {
  color: var(--destructive);
  border-color: var(--destructive-border);
  background: var(--destructive-bg);
}
.instance-chip--err .instance-chip-dot {
  background: var(--destructive);
  animation: instance-pulse var(--duration-pulse) ease-in-out infinite;
}

.instance-chip--loading,
.instance-chip--na {
  color: var(--fg-meta);
}

@keyframes instance-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .instance-chip-dot { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   DBG-1 — Histórico de eventos do disparo (msg_detalhe)
   ═══════════════════════════════════════════════════════════════ */

.msg-eventos-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
}

.msg-evento-row {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.msg-evento-row--erro { border-left-color: var(--destructive); background: var(--destructive-bg); }
.msg-evento-row--ok   { border-left-color: var(--success);     background: var(--success-bg); }

.msg-evento-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.msg-evento-icon { font-size: 14px; }
.msg-evento-label {
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  font-size: 10px;
}
.msg-evento-time {
  color: var(--fg-meta);
  font-size: 10px;
  margin-left: auto;
}
.msg-evento-detalhes {
  margin: 6px 0 0 22px;
  padding: 6px 8px;
  background: var(--surface-dark);
  color: var(--fg-muted);
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid var(--border-subtle);
  max-height: 200px;
  overflow-y: auto;
}

/* ============================================================
   Project progress card (página de detalhe do lançamento)
   Antes estava inline em lancamento.html como <style>.
   ============================================================ */

.proj-progress {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  padding: .7rem 1rem;
  margin-bottom: 1.25rem;
  text-decoration: none;
  transition: border-color .15s;
}
.proj-progress:hover { border-color: var(--success); }
.proj-progress .pp-bar-wrap { flex: 1; min-width: 0; }
.pp-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.pp-pct {
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--success);
  letter-spacing: -.02em;
}
.pp-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-foreground);
}
.pp-track {
  background: var(--border-subtle);
  height: 7px;
  overflow: hidden;
}
.pp-fill { background: var(--success); height: 100%; }
.pp-nums {
  display: flex;
  gap: 1rem;
  font-family: var(--font-mono, monospace);
  font-size: .8rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.pp-nums b { color: var(--foreground); }
.pp-late { color: var(--warning); font-weight: 700; }
.proj-progress-empty { color: var(--muted-foreground); font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════
   R6 — Onda 1: componentes compartilhados do DS (padronização)
   Consumidos por config / kanban / tarefas / métricas / home.
   Lift dos <style> embutidos + fim do hex chumbado.
   ═══════════════════════════════════════════════════════════════ */

/* Lucide: ícone herda cor (currentColor) e alinha com o texto */
[data-lucide] { width: 1em; height: 1em; vertical-align: -0.125em; display: inline-block; }
.icon-sm  [data-lucide], [data-lucide].icon-sm  { width: 14px; height: 14px; }
.icon-md  [data-lucide], [data-lucide].icon-md  { width: 18px; height: 18px; }

/* 1) Empty state (home, métricas, listas vazias) */
.empty-state {
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  padding: var(--space-xl);
  text-align: center;
}
.empty-state-icon { color: var(--lime); opacity: 0.6; display: block; margin-bottom: var(--space-md); }
.empty-state-icon [data-lucide] { width: 44px; height: 44px; }

/* 2) Switch-row (config) — estado seguro / armado / perigo via faixa de acento */
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--border-strong);
}
.switch-row--safe   { border-left-color: var(--success);     background: var(--success-bg); }
.switch-row--armed  { border-left-color: var(--lime);        background: var(--lime-8); }
.switch-row--danger { border-left-color: var(--destructive); background: var(--destructive-bg); }
.switch-row--idle   { border-left-color: var(--border-strong); background: var(--surface-panel); }
.switch-row__label  { font-weight: var(--fw-medium); color: var(--foreground); }
.switch-row__hint   { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }

/* 3) Kanban status (kanban) — estende .badge; UMA cor por estado de disparo */
.kanban-status {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.kanban-status--pendente { color: var(--warning);     background: var(--warning-bg);     border-color: var(--warning-border); }
.kanban-status--agendada { color: var(--info);        background: var(--info-bg);        border-color: var(--info-border); }
.kanban-status--enviada  { color: var(--success);     background: var(--success-bg);     border-color: var(--success-border); }
.kanban-status--erro     { color: var(--destructive); background: var(--destructive-bg);     border-color: var(--destructive-border); }
.kanban-status--enviando { color: var(--destructive); background: var(--destructive-bg-strong); border-color: var(--destructive); animation: instance-pulse var(--duration-pulse) ease-in-out infinite; }
.kanban-status--pausada  { color: var(--muted-foreground); background: var(--muted); border: 1px dashed var(--border-strong); }

/* 4) Status chip genérico (board de tarefas) — borda + bg translúcido, não bloco sólido */
.status-chip {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-chip--neutral { color: var(--muted-foreground); background: var(--muted);          border-color: var(--border-strong); }
.status-chip--info    { color: var(--info);             background: var(--info-bg);        border-color: var(--info-border); }
.status-chip--warning { color: var(--warning);          background: var(--warning-bg);     border-color: var(--warning-border); }
.status-chip--success { color: var(--success);          background: var(--success-bg);     border-color: var(--success-border); }
.status-chip--danger  { color: var(--destructive);      background: var(--destructive-bg); border-color: var(--destructive-border); }
.status-chip--accent  { color: var(--phase-gravacao);   background: var(--phase-gravacao-bg); border-color: var(--phase-gravacao-border); }

/* 5) Stat delta (contexto ▲▼) + stat hero (métricas, home) */
.stat-delta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.stat-delta--up   { color: var(--success); }
.stat-delta--down { color: var(--destructive); }
.stat-delta--flat { color: var(--muted-foreground); }
.stat-card--hero               { border-color: var(--lime); }
.stat-card--hero .stat-value   { color: var(--lime); }
.stat-foot {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-top: var(--space-xs);
  letter-spacing: 0.04em;
}

/* 6) Progress bar reutilizável (painel/board) — reusa o idioma .pp-track/.launch-progress
   já existentes; alias semântico pra quem não está num card de lançamento. */
.ds-bar-track { background: var(--border-subtle); height: 7px; overflow: hidden; border-radius: 0; }
.ds-bar-fill  { background: var(--lime); height: 100%; transition: width var(--duration-normal) var(--ease-out); }
.ds-bar-fill--success { background: var(--success); }
.ds-bar-fill--warning { background: var(--warning); }

/* ═══════════════════════════════════════════════════════════════
   R6 — Onda 1: CSS migrado dos <style> embutidos (por tela)
   ═══════════════════════════════════════════════════════════════ */

/* Voice token novo (rename/descrição de grupo) */
:root { --voice-rename: #06b6d4; }

/* ─── home.html ─── */
.launch-mover { z-index: var(--z-overlay); }

/* ─── automacao_config.html ─── */
.btn-voice-flavia { border-color: var(--voice-flavia); color: var(--voice-flavia); }

/* ─── lancamento_metricas.html ─── */
.metr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
}
.metr-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 14px 16px;
  position: relative;
}
.metr-kpi-card--hero { border-color: var(--lime); background: var(--lime-5); }
.metr-kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-meta);
}
.metr-kpi-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -0.02em;
  margin-top: 4px;
  line-height: 1;
}
.metr-kpi-card--hero .metr-kpi-value { color: var(--lime); }
.metr-kpi-foot {
  font-size: 10px;
  color: var(--fg-meta);
  margin-top: 6px;
  font-family: var(--font-mono);
}
.metr-panel {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.metr-panel--scroll { max-height: 380px; overflow-y: auto; }
.metr-panel--auto { height: auto; }
.metr-panel--grow { flex: 1; }
.metr-panel-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-meta);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.metr-panel-title-tag { text-transform: none; letter-spacing: 0; }
.metr-panel-body { flex: 1; min-height: 0; }
.metr-chart-wrapper { height: 360px; position: relative; }
.metr-chart-wrapper > canvas { height: 100% !important; width: 100% !important; }
.metr-breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}
.metr-breakdown-bar { flex: 1; height: 6px; background: var(--border-subtle); overflow: hidden; }
.metr-breakdown-bar-fill {
  height: 100%;
  background: var(--lime);
  transition: width var(--duration-normal) var(--ease-out);
}
.metr-breakdown-row strong { min-width: 36px; text-align: right; color: var(--fg-meta); font-family: var(--font-mono); font-size: 11px; }
.metr-breakdown-row .metr-b-name { min-width: 0; flex: 1; }
.metr-breakdown-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-meta);
  min-width: 42px;
  text-align: right;
}
.metr-breakdown-val { min-width: 90px; }
.metr-vendas-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  font-family: var(--font-mono);
}
.metr-vendas-table thead th {
  background: var(--surface-overlay);
  color: var(--fg-meta);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.metr-vendas-table tbody td { padding: 6px; border-bottom: 1px solid var(--border-subtle); }
.metr-vendas-table tr:hover td { background: var(--surface-hover); }
.metr-v-aprov { color: var(--success); }
.metr-v-cancel { color: var(--destructive); opacity: 0.7; }
.metr-v-expirou { color: var(--fg-meta); opacity: 0.6; }
.metr-vendas-wrap { overflow-x: auto; max-height: 500px; }
.metr-code-sm { font-size: 10px; }
.metr-upload-input { max-width: 280px; }
.metr-empty-card { background: var(--surface-overlay); }
.metr-empty-icon { font-size: 3rem; color: var(--lime); opacity: 0.6; }

/* ─── automacao_kanban.html (.stats-row → .kanban-stats p/ não colidir c/ board) ─── */
.kanban-wrapper { overflow-x: auto; padding: var(--space-md) 0; margin-bottom: var(--space-xl); }
.kanban-board { display: flex; gap: var(--space-md); min-width: max-content; padding: 0 2px var(--space-md); }
.kanban-col {
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
  box-sizing: border-box;
  background: var(--surface-panel);
  border-radius: 0;
  border: 1px solid var(--border);
  padding: var(--space-sm);
}
.kanban-col-header {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm) var(--space-sm);
  background: var(--surface-dark);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  text-align: center;
}
.kanban-col-header.fase-prep { border-color: var(--warning); color: var(--warning); }
.kanban-col-header.fase-0a   { border-color: var(--success); color: var(--success); }
.kanban-col-header.fase-0b   { border-color: var(--info); color: var(--info); }
.kanban-col-header.fase-1    { border-color: var(--destructive); color: var(--destructive); }
.kanban-col-header.fase-d0   { border-color: var(--lime); color: var(--lime); background: var(--lime-10); }
.kanban-col-header.fase-3    { border-color: var(--muted-foreground); color: var(--muted-foreground); }
.kanban-col-date {
  font-size: var(--text-2xs);
  color: var(--muted-foreground);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  display: block;
  margin-top: 2px;
}
.msg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0;
  padding: 0.65rem var(--space-sm);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.8125rem;
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.msg-card:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.msg-card.voz-flavia { border-left-color: var(--voice-flavia); }
.msg-card.voz-venae  { border-left-color: var(--voice-venae); }
.msg-card.voz-oculto { border-left-color: var(--voice-oculto); border-left-style: dashed; }
.msg-card.voz-one      { border-left-color: var(--voice-one); }
.msg-card.voz-clarissa { border-left-color: var(--voice-clarissa); }
.msg-card.status-enviada { opacity: 0.5; }
.msg-card.precisa-arquivo { border-color: var(--warning); background: var(--warning-bg); }
.msg-card.msg-card-rename { border-left-color: var(--voice-rename); border-left-style: dashed; background: rgba(6,182,212,0.04); }
.msg-card.msg-card-rename:hover { background: rgba(6,182,212,0.09); }
.msg-rename-preview { margin-top: 4px; font-size: 0.78rem; color: var(--voice-rename); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rename-arrow { opacity: 0.6; margin-right: 3px; }
.msg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.msg-card-voz { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: 2px; min-width: 0; }
.msg-hora { font-weight: var(--fw-medium); color: var(--foreground); font-size: 0.8125rem; font-family: var(--font-mono); }
.voz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 0; margin-right: var(--space-xs); vertical-align: middle; }
.msg-voz-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 0;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-mono);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voz-flavia .msg-voz-pill { background: var(--voice-flavia-bg); color: var(--voice-flavia); border: 1px solid var(--voice-flavia-border); }
.voz-venae  .msg-voz-pill { background: var(--voice-venae-bg); color: var(--voice-venae); border: 1px solid var(--voice-venae-border); }
.voz-oculto .msg-voz-pill { background: var(--voice-oculto-bg); color: var(--voice-oculto); border: 1px solid var(--voice-oculto-border); }
.voz-one      .msg-voz-pill { background: var(--voice-one-bg); color: var(--voice-one); border: 1px solid var(--voice-one-border); }
.voz-clarissa .msg-voz-pill { background: var(--voice-clarissa-bg); color: var(--voice-clarissa); border: 1px solid var(--voice-clarissa-border); }
.msg-tipo-icon { font-size: 0.95rem; margin-right: var(--space-xs); }
.msg-titulo {
  margin-top: 2px;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-preview {
  margin-top: 6px;
  padding: 5px 8px;
  background: var(--surface-console);
  border-left: 2px solid var(--border-strong);
  font-size: 0.72rem;
  color: var(--muted-foreground);
  overflow: hidden;
  line-height: 1.45;
  font-family: var(--font-mono);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.msg-status-badge {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 2px 6px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: 0;
  white-space: nowrap;
}
.status-pendente { background: var(--warning-bg-strong); color: var(--warning); border: 1px solid var(--warning-border); }
.status-pausada  { background: var(--muted); color: var(--muted-foreground); border: 1px dashed var(--border-strong); }
.status-agendada { background: var(--info-bg-strong); color: var(--info); border: 1px solid var(--info-border); }
.status-enviada  { background: var(--success-bg-strong); color: var(--success); border: 1px solid var(--success-border); }
.status-erro     { background: var(--destructive-bg); color: var(--destructive); border: 1px solid var(--destructive-border); }
.status-enviando { background: var(--destructive-bg-strong); color: var(--destructive); border: 1px solid var(--destructive); animation: pulse-enviando 1.2s infinite; }
@keyframes pulse-enviando { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.kanban-col-header.is-today { box-shadow: 0 0 0 2px var(--success); }
.status-pausada_manual { background: var(--muted); color: var(--muted-foreground); border: 1px dashed var(--border-strong); }
.msg-card.status-pausada_manual { opacity: 0.7; }
.msg-card.is-manual { border-left-style: double; }
.msg-manual-pill { font-size: var(--text-xs); margin-left: 3px; vertical-align: middle; opacity: 0.85; }
.msg-card[draggable="true"] { cursor: grab; }
.msg-card.dragging { opacity: 0.4; }
.kanban-col.drop-target { outline: 2px dashed var(--lime); outline-offset: -4px; background: var(--lime-10); }
.kanban-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.kanban-stats .stat-card {
  background: var(--card);
  padding: var(--space-sm) var(--space-sm);
  border: 1px solid var(--border);
  text-align: center;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.kanban-stats .stat-num {
  font-size: 1.35rem;
  font-weight: var(--fw-bold);
  color: var(--foreground);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.kanban-stats .stat-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.25;
}
.kanban-stats .stat-card.alerta .stat-num { color: var(--warning); }
.kanban-stats .stat-card.sucesso .stat-num { color: var(--success); }
.kanban-stats .stat-card.erro { border-color: var(--destructive-border); }
.kanban-stats .stat-card.erro .stat-num { color: var(--destructive); }

/* ─── tarefas_board.html ─── */
.tboard-group { margin-bottom: 1.75rem; }
.tboard-group-header {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--foreground); padding: .5rem .25rem .5rem .75rem; user-select: none;
  border-left: 3px solid var(--border-strong);
}
.tboard-group-header .count { font-weight: 500; color: var(--muted-foreground); letter-spacing: 0; }
.tboard-group-header .chev { transition: transform .15s; margin-left: auto; color: var(--muted-foreground); }
.tboard-group-header.collapsed .chev { transform: rotate(-90deg); }
table.tboard-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--border); margin-top: .4rem;
}
table.tboard-table th {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--muted-foreground);
  background: var(--surface-dark); padding: .55rem .75rem; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tboard-table td {
  padding: .25rem .5rem; border-bottom: 1px solid var(--border);
  font-size: .82rem; color: var(--foreground); vertical-align: middle;
}
table.tboard-table tr:last-child td { border-bottom: none; }
table.tboard-table tr.feito .t-titulo { text-decoration: line-through; opacity: .55; }
table.tboard-table tr.erro { box-shadow: inset 3px 0 0 var(--destructive); }
.t-titulo {
  width: 100%; background: transparent; border: 1px solid transparent;
  color: var(--foreground); padding: .35rem .5rem; font-size: .82rem; border-radius: 0;
}
.t-titulo:hover { border-color: var(--border); }
.t-titulo:focus { outline: none; border-color: var(--info); background: var(--surface-console); }
.cell-select {
  border: none; border-radius: 0; font-size: 11px; font-weight: 700;
  padding: .3rem .5rem; width: 100%; cursor: pointer; text-align: center;
  text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-mono);
  -webkit-appearance: none; appearance: none;
}
.cell-select option { background: var(--card); color: var(--foreground); font-weight: 600; }
.st-pendente     { background: var(--muted);           color: var(--muted-foreground); }
.st-em_andamento { background: var(--warning-bg-strong); color: var(--warning); }
.st-feito        { background: var(--success-bg-strong); color: var(--success); }
.st-parado       { background: var(--destructive-bg-strong); color: var(--destructive); }
.st-erro         { background: var(--destructive-bg-strong); color: var(--status-error); font-weight: 700; }
.prio-baixa { background: var(--info-bg);          color: var(--info); }
.prio-media { background: var(--voice-venae-bg);   color: var(--voice-venae); }
.prio-alta  { background: var(--phase-gravacao-bg); color: var(--phase-gravacao); }
.resp-select {
  background: var(--surface-console); color: var(--foreground); border: 1px solid var(--border);
  font-size: 11px; padding: .3rem .4rem; border-radius: 0; width: 100%; cursor: pointer;
  font-family: var(--font-mono);
}
.t-prazo {
  background: var(--surface-console); color: var(--foreground); border: 1px solid var(--border);
  font-size: 11px; padding: .28rem .4rem; border-radius: 0; font-family: var(--font-mono);
  width: 130px; color-scheme: dark;
}
td.prazo-atrasado .t-prazo { border-color: var(--destructive); color: var(--status-error); }
.t-del { color: var(--muted-foreground); background: none; border: none; padding: .2rem .4rem; cursor: pointer; }
.t-del:hover { color: var(--destructive); }
.t-link { color: var(--muted-foreground); padding: .2rem .4rem; text-decoration: none; }
.t-link:hover { color: var(--info); }
.add-row td { background: var(--surface-dark); }
.add-row .add-link { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 11px; text-decoration: none; }
.add-row .add-link:hover { color: var(--info); }
.tboard-cell-saved { transition: background .15s; background: var(--success-bg-strong); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.stats-row .stat-card { background: var(--card); padding: .875rem; border: 1px solid var(--border); text-align: center; }
.stats-row .stat-num { font-size: 1.6rem; font-weight: 800; color: var(--foreground); font-family: var(--font-display); letter-spacing: -.03em; }
.stats-row .stat-label { font-family: var(--font-mono); font-size: 9px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: 4px; }
.stats-row .stat-card.alerta  .stat-num { color: var(--warning); }
.stats-row .stat-card.sucesso .stat-num { color: var(--success); }
.stats-row .stat-card.perigo  .stat-num { color: var(--destructive); }

/* ─── tarefas_painel.html ─── */
.tpainel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px,1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.tpainel-stats .stat-card { background: var(--card); padding: .9rem; border: 1px solid var(--border); text-align: center; }
.tpainel-stats .stat-num { font-size: 1.7rem; font-weight: 800; color: var(--foreground); font-family: var(--font-display); letter-spacing: -.03em; }
.tpainel-stats .stat-label { font-family: var(--font-mono); font-size: 9px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: 4px; }
.tpainel-stats .stat-card.c-andamento .stat-num { color: var(--warning); }
.tpainel-stats .stat-card.c-feito     .stat-num { color: var(--success); }
.tpainel-stats .stat-card.c-parado    .stat-num { color: var(--destructive); }
.tpainel-stats .stat-card.c-atraso    .stat-num { color: var(--destructive); }
.tpainel-panels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px,1fr)); gap: 1rem; }
.tpainel-panel { background: var(--card); border: 1px solid var(--border); padding: 1rem 1.1rem 1.25rem; }
.tpainel-panel h3 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--muted-foreground); margin-bottom: .9rem;
  display: flex; align-items: center; gap: .4rem;
}
.tpainel-canvas-wrap { position: relative; height: 280px; }
.tpainel-subnav { margin-bottom: 1.25rem; }
.tpainel-subnav .nav-link { font-size: .85rem; }
.tpainel-hero { background: var(--card); border: 1px solid var(--border); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.tpainel-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tpainel-hero-pct { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--success); line-height: 1; }
.tpainel-hero-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--muted-foreground); }
.tpainel-hero-frac { font-family: var(--font-mono); font-size: .95rem; color: var(--muted-foreground); }
.tpainel-grp-row { display: grid; grid-template-columns: 1fr 56px; gap: .75rem; align-items: center; margin-bottom: .7rem; }
.tpainel-grp-row:last-child { margin-bottom: 0; }
.tpainel-grp-name { font-size: .82rem; color: var(--foreground); margin-bottom: .3rem; }
.tpainel-grp-frac { font-family: var(--font-mono); font-size: .8rem; color: var(--muted-foreground); text-align: right; }
.tpainel-bar-info { background: var(--info); }
.tpainel-op-list { display: flex; flex-direction: column; }
.tpainel-op-item { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.tpainel-op-item:last-child { border-bottom: none; }
.tpainel-op-date { font-family: var(--font-mono); font-size: .72rem; color: var(--muted-foreground); white-space: nowrap; min-width: 52px; }
.tpainel-op-date.late { color: var(--destructive); font-weight: 700; }
.tpainel-op-title { flex: 1; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpainel-op-title a { color: inherit; text-decoration: none; }
.tpainel-op-title a:hover { text-decoration: underline; }
.tpainel-op-tag {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 2px 6px; border: 1px solid currentColor; border-radius: 0;
  background: transparent; white-space: nowrap;
}
.tpainel-op-resp { font-family: var(--font-mono); font-size: .72rem; color: var(--muted-foreground); white-space: nowrap; }
.tpainel-op-empty { color: var(--muted-foreground); font-size: .85rem; padding: .5rem 0; display: flex; align-items: center; gap: .4rem; }
.tpainel-op-scroll { max-height: 360px; overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════════
   R7 — Onda 2: redesenhos de UX (por tela)
   ═══════════════════════════════════════════════════════════════ */

/* ─── kanban: card 3 faixas + ação inline + "hoje" lime ─── */
.msg-card-rail { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: 5px; min-width: 0; }
.msg-card-status { margin-left: auto; flex: 0 0 auto; }
.msg-mark { flex: 0 0 auto; width: 14px; height: 14px; opacity: 0.85; }
.msg-mark--todos  { color: var(--destructive); }
.msg-mark--manual { color: var(--muted-foreground); }
.msg-card-rail .msg-hora     { flex: 0 0 auto; }
.msg-card-rail .msg-voz-pill { flex: 0 1 auto; min-width: 0; }
.msg-card-arquivo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-xs); }
.msg-upload-btn { height: 24px; padding: 2px 8px; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-family: var(--font-mono); white-space: nowrap; }
.msg-upload-btn [data-lucide] { width: 12px; height: 12px; }
.kanban-col-header.is-today { box-shadow: none; outline: 2px solid var(--lime); border-color: var(--lime); }

/* ─── board: prioridade com contraste, foco lime, células-chip, hierarquia stats ─── */
.t-titulo:focus { outline: none; border-color: var(--lime); background: var(--surface-console); }
.st-pendente     { background: var(--muted);          color: var(--muted-foreground); border: 1px solid var(--border); }
.st-em_andamento { background: var(--warning-bg);     color: var(--warning);     border: 1px solid var(--warning-border); }
.st-feito        { background: var(--success-bg);     color: var(--success);     border: 1px solid var(--success-border); }
.st-parado       { background: var(--destructive-bg); color: var(--destructive); border: 1px solid var(--destructive-border); }
.st-erro         { background: var(--destructive-bg); color: var(--status-error); border: 1px solid var(--destructive-border); font-weight: 700; }
.prio-baixa { background: var(--info-bg);        color: var(--info);    border: 1px solid var(--info-border); }
.prio-media { background: var(--warning-bg);     color: var(--warning); border: 1px solid var(--warning-border); }
.prio-alta  { background: var(--destructive-bg); color: var(--flare);   border: 1px solid var(--destructive-border); }
.stats-row .stat-card.secundario     { opacity: .75; }
.stats-row .stat-card.perigo.ativo   { border-top: 2px solid var(--destructive); }

/* ─── config: painéis tokenizados + banner-semáforo (read-only) ─── */
.config-panel   { background: var(--surface-alt);     border: 1px solid var(--border); border-radius: 0; padding: var(--space-md); }
.config-callout { background: var(--surface-console); border: 1px solid var(--border); border-radius: 0; padding: var(--space-md); }
.form-check.form-switch.switch-row { display: block; border-radius: 0; }
.disparo-semaforo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md);
  background: var(--surface-alt); border: 1px solid var(--border);
  border-left-width: 3px; border-left-color: var(--border-strong); border-radius: 0;
}
.disparo-semaforo__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.disparo-semaforo__msg { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: 0.03em; color: var(--muted-foreground); }
.disparo-semaforo--danger { background: var(--destructive-bg-strong); border-color: var(--destructive-border); border-left-color: var(--destructive); }
.disparo-semaforo--danger .disparo-semaforo__msg { color: var(--destructive); }

/* ─── home: stat acionável "atenção" + linha de inventário ─── */
.stat-card--alert             { border-color: var(--destructive); }
.stat-card--alert .stat-value { color: var(--destructive); }
.home-inventory-line { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); letter-spacing: 0.06em; text-transform: uppercase; }
.home-inventory-line span { color: var(--foreground); }
.home-inventory-link { color: var(--lime); border-bottom: 1px solid transparent; }
.home-inventory-link:hover { color: var(--lime); border-bottom-color: var(--lime-40); }

/* ─────── Página Lançamentos: barra de busca ─────── */
.lanc-toolbar { max-width: 720px; }
.lanc-search .input-group-text {
  background: var(--surface-panel);
  border-color: var(--border);
  color: var(--fg-meta);
}
.lanc-search .form-control {
  background: var(--surface-panel);
  border-color: var(--border);
  height: 46px;
  font-size: 14px;
}
.lanc-search .form-control:focus {
  border-color: var(--lime-40);
  box-shadow: 0 0 0 2px var(--lime-10);
}

/* ─── métricas: hierarquia dos KPIs + tabela colapsável ─── */
.metr-kpi-row { display: grid; gap: 12px; margin-bottom: 12px; }
.metr-kpi-row--money { grid-template-columns: 1.4fr 1fr 1fr; }
.metr-kpi-row--money .stat-card--hero { background: var(--lime-5); }
.metr-kpi-row--health { grid-template-columns: repeat(2, minmax(180px, 280px)); margin-bottom: 1.5rem; }
.metr-kpi-row .stat-card--sm .card-body { padding: var(--space-md); }
.metr-kpi-row .stat-card--sm .stat-value { font-size: 26px; }
.stat-card--watch { border-color: var(--destructive-border); }
.stat-card--watch .stat-value { color: var(--destructive); opacity: 0.85; }
.stat-card--watch:hover { border-color: var(--destructive); background: var(--destructive-bg); }
@media (max-width: 720px) {
  .metr-kpi-row--money, .metr-kpi-row--health { grid-template-columns: 1fr; }
}

/* ── MAESTRO OS-6 · Pré-flight de cronograma ───────────────────────────── */
.preflight-strip {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  padding: 13px 16px; margin: -2px 0 18px; border: 1px solid var(--border);
  border-left: 3px solid var(--success); border-radius: 10px; color: inherit;
  text-decoration: none; background: color-mix(in srgb, var(--card) 94%, var(--success));
}
.preflight-strip:hover { color: inherit; border-color: color-mix(in srgb, var(--success) 55%, var(--border)); transform: translateY(-1px); }
.preflight-strip--desatualizado { border-left-color: var(--warning); background: color-mix(in srgb, var(--card) 94%, var(--warning)); }
.preflight-strip--bloqueado { border-left-color: var(--destructive); background: color-mix(in srgb, var(--card) 94%, var(--destructive)); }
.preflight-strip-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--muted); }
.preflight-strip small, .preflight-strip strong { display: block; }
.preflight-strip small { color: var(--muted-foreground); font-size: .66rem; letter-spacing: .08em; }
.preflight-strip strong { font-size: .88rem; }
.preflight-strip-counts { color: var(--muted-foreground); font: 700 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; }

.preflight-page { max-width: 1440px; margin: 0 auto; }
.preflight-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 10px 0 22px; }
.preflight-head h1 { margin: 5px 0 3px; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.055em; }
.preflight-head p { margin: 0; color: var(--muted-foreground); }
.preflight-eyebrow { color: var(--muted-foreground); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.preflight-eyebrow span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); }
.preflight-state { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.preflight-state--pronto { color: var(--success); }
.preflight-state--desatualizado { color: var(--warning); }
.preflight-state--bloqueado { color: var(--destructive); }

.preflight-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: var(--muted); }
.preflight-mode a { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; padding: 10px 12px; border-radius: 8px; color: var(--muted-foreground); text-decoration: none; font-size: .82rem; font-weight: 700; }
.preflight-mode a small { grid-column: 2; font-weight: 500; font-size: .7rem; }
.preflight-mode a.active { color: var(--foreground); background: var(--card); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }

.preflight-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 20px; }
.preflight-kpis article { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.preflight-kpis span, .preflight-kpis small { display: block; color: var(--muted-foreground); }
.preflight-kpis span { font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.preflight-kpis strong { display: block; margin: 3px 0; font: 800 1.55rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.preflight-kpis small { font-size: .7rem; }
.preflight-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, .7fr); gap: 18px; align-items: start; }
.preflight-grid main, .preflight-grid aside { display: grid; gap: 16px; }

.preflight-alerts, .preflight-changes, .preflight-operation, .preflight-confirm { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.preflight-alerts { padding: 15px; border-left: 3px solid var(--warning); }
.preflight-alerts--block { border-left-color: var(--destructive); }
.preflight-alerts h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .9rem; }
.preflight-alerts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.preflight-alerts > div strong { font-size: .78rem; }
.preflight-alerts > div small { color: var(--muted-foreground); font-size: .68rem; text-align: right; }
.preflight-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.preflight-section-head > div { display: flex; align-items: center; gap: 9px; }
.preflight-section-head span { color: var(--muted-foreground); font: 700 .65rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.preflight-section-head h2 { margin: 0; font-size: .92rem; }
.preflight-section-head small { color: var(--muted-foreground); font-size: .68rem; }
.preflight-change-list { max-height: 620px; overflow: auto; }
.preflight-change { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.preflight-change:last-child { border-bottom: 0; }
.preflight-change-kind { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--muted); font: 900 .9rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.preflight-change--criar .preflight-change-kind { color: var(--success); }
.preflight-change--atualizar .preflight-change-kind, .preflight-change--recriar .preflight-change-kind { color: var(--warning); }
.preflight-change--remover .preflight-change-kind { color: var(--destructive); }
.preflight-change > div small, .preflight-change > div strong, .preflight-change > div em { display: block; }
.preflight-change > div small { color: var(--muted-foreground); font: 650 .63rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.preflight-change > div strong { margin: 2px 0; font-size: .82rem; }
.preflight-change > div em { color: var(--muted-foreground); font-size: .7rem; font-style: normal; }
.preflight-change-type { padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted-foreground); font-size: .63rem; }
.preflight-empty { display: grid; place-items: center; gap: 5px; padding: 36px 18px; text-align: center; }
.preflight-empty svg { color: var(--success); }
.preflight-empty span { color: var(--muted-foreground); font-size: .75rem; }

.preflight-operation dl { margin: 0; padding: 4px 16px 12px; }
.preflight-operation dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.preflight-operation dl > div:last-child { border: 0; }
.preflight-operation dt { color: var(--muted-foreground); font-size: .72rem; font-weight: 500; }
.preflight-operation dd { margin: 0; font-size: .72rem; font-weight: 750; text-align: right; }
.preflight-operation dd.danger { color: var(--destructive); }
.preflight-confirm { padding: 18px; }
.preflight-confirm-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 9px; color: var(--success); background: var(--muted); }
.preflight-confirm h2 { margin: 12px 0 6px; font-size: 1rem; }
.preflight-confirm p { color: var(--muted-foreground); font-size: .75rem; line-height: 1.55; }
.preflight-check { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; padding: 10px; margin: 10px 0; border: 1px solid color-mix(in srgb, var(--destructive) 35%, var(--border)); border-radius: 8px; font-size: .7rem; }
.preflight-check input { margin-top: 2px; }
.preflight-disabled { display: block; margin-top: 9px; color: var(--destructive); text-align: center; font-size: .68rem; }
.preflight-foot { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 12px 3px; color: var(--muted-foreground); font-size: .68rem; }
.preflight-foot span { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 980px) {
  .preflight-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preflight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .preflight-strip { grid-template-columns: auto 1fr auto; }
  .preflight-strip-counts { display: none; }
  .preflight-head { align-items: flex-start; flex-direction: column; }
  .preflight-mode { grid-template-columns: 1fr; }
  .preflight-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preflight-alerts > div, .preflight-section-head { align-items: flex-start; flex-direction: column; }
  .preflight-alerts > div small { text-align: left; }
  .preflight-change { grid-template-columns: 30px 1fr; }
  .preflight-change-type { display: none; }
  .preflight-foot { align-items: flex-start; flex-direction: column; }
}
.metr-vendas-details { background: var(--card); border: 1px solid var(--border); }
.metr-vendas-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); transition: background 0.15s, color 0.15s;
}
.metr-vendas-summary::-webkit-details-marker { display: none; }
.metr-vendas-summary:hover { background: var(--surface-hover); color: var(--foreground); }
.metr-vendas-summary-label { display: inline-flex; align-items: center; gap: 8px; }
.metr-vendas-chevron { width: 14px; height: 14px; transition: transform var(--duration-normal, 0.2s) var(--ease-out, ease); }
.metr-vendas-details[open] .metr-vendas-chevron { transform: rotate(90deg); }

/* ═══════════════════════════════════════════════════════════════
   R8 — Migração final de ícones (Lucide) + lift dos <style> restantes
   caça-receita / automacao_vendas / automacao_conectar / payt / murall
   / lancamento / lancamento_engajamento
   ═══════════════════════════════════════════════════════════════ */

/* ─── caça-receita: painel inset (hub) ─── */
.cr-panel { background: var(--surface-hover); border-radius: var(--radius-md); }

/* ─── automacao_vendas: cockpit de vendas ─── */
.venda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.venda-card { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); padding: 0.75rem; font-size: 0.8125rem; color: var(--foreground); }
.venda-card:hover { background: var(--surface-hover); }
.venda-card.ev-compra    { border-left-color: var(--success); }
.venda-card.ev-abandono  { border-left-color: var(--warning); }
.venda-card.ev-expirado  { border-left-color: var(--destructive); }
.venda-card.ev-cancelada { border-left-color: var(--voice-venae); }
.venda-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.venda-tipo-icon { font-size: 0.875rem; }
.venda-titulo { font-weight: var(--fw-medium); font-size: 0.8125rem; flex: 1; }
.venda-meta { margin-top: 6px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); display: flex; gap: 8px; flex-wrap: wrap; }
.venda-meta code { font-size: 0.68rem; background: var(--surface-dark); border: 1px solid var(--border); padding: 0 4px; color: var(--muted-foreground); }
.status-ativo    { background: var(--success-bg-strong); color: var(--success);         border: 1px solid var(--success-border); }
.status-simulado { background: var(--warning-bg-strong); color: var(--warning);         border: 1px solid var(--warning-border); }
.status-inativo  { background: var(--border-subtle);     color: var(--muted-foreground); border: 1px dashed var(--border-strong); }
.voz-lara    .msg-voz-pill { background: rgba(56,189,248,0.12);  color: var(--voice-lara);    border: 1px solid rgba(56,189,248,0.25); }
.voz-larissa .msg-voz-pill { background: rgba(244,114,182,0.15); color: var(--voice-larissa); border: 1px solid rgba(244,114,182,0.3); }
.venda-card .msg-preview { padding: 6px 8px; max-height: 72px; white-space: pre-wrap; position: relative; -webkit-line-clamp: initial; -webkit-box-orient: initial; display: block; }
.venda-card .msg-preview::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(transparent, var(--surface-console)); }
.webhook-panel { background: var(--surface-panel); border: 1px solid var(--border); padding: 0.75rem 1rem; margin-bottom: var(--space-lg); }
.webhook-label { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); margin-bottom: 4px; }
.webhook-url { font-family: var(--font-mono); font-size: 0.75rem; color: var(--lime); word-break: break-all; }
.webhook-hint { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted-foreground); margin-top: 4px; }
.log-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.log-table th { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; background: var(--surface-dark); }
.log-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--foreground); vertical-align: middle; }
.log-table tr:hover td { background: var(--surface-hover); }
.log-table .td-muted { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.7rem; }
.ev-badge { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 0; }
.ev-compra    { background: var(--success-bg-strong); color: var(--success);     border: 1px solid var(--success-border); }
.ev-abandono  { background: var(--warning-bg-strong); color: var(--warning);     border: 1px solid var(--warning-border); }
.ev-expirado  { background: var(--destructive-bg);    color: var(--destructive); border: 1px solid var(--destructive-border); }
.ev-cancelada { background: var(--voice-venae-bg);    color: var(--voice-venae); border: 1px solid var(--voice-venae-border); }
.ev-ok   { background: var(--success-bg-strong); color: var(--success);     border: 1px solid var(--success-border); }
.ev-err  { background: var(--destructive-bg);    color: var(--destructive); border: 1px solid var(--destructive-border); }
.ev-sim  { background: var(--warning-bg-strong); color: var(--warning);     border: 1px solid var(--warning-border); }
.ev-par  { background: var(--info-bg-strong);    color: var(--info);        border: 1px solid var(--info-border); }
.log-panel { background: var(--surface-panel); border: 1px solid var(--border); }
.log-panel-header { padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface-dark); display: flex; align-items: center; justify-content: space-between; }
.log-panel-title { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted-foreground); }
.log-empty { padding: 1rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-foreground); }

/* ─── automacao_conectar: pareamento (⚠ .conectar-qr-box mantém #fff = fundo do QR) ─── */
.conectar-wrap { max-width: 560px; margin: 0 auto; text-align: center; }
.conectar-qr-box { background: #fff; padding: var(--space-md); display: inline-block; margin: var(--space-md) 0; border: 1px solid var(--border); }
.conectar-qr-box img { width: 280px; height: 280px; display: block; }
.conectar-pair-code { font-size: 1.6rem; letter-spacing: 0.25em; font-weight: var(--fw-bold); background: var(--surface-overlay); padding: 10px 18px; display: inline-block; font-family: var(--font-mono); border: 1px solid var(--border); }
.conectar-ok  { font-size: 1.4rem; color: var(--success); font-weight: var(--fw-bold); }
.conectar-err { color: var(--destructive); font-weight: 700; }
.conectar-steps { text-align: left; max-width: 420px; margin: 12px auto; color: var(--muted-foreground); font-size: .92rem; line-height: 1.6; }
.conectar-reload-indicator { color: var(--fg-meta); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; }

/* ─── admin_payt_roteamento ─── */
.payt-card-title { letter-spacing: var(--tracking-wide); }
.payt-subhead    { letter-spacing: var(--tracking-wide); }
.payt-pattern-cell { font-family: var(--font-mono); font-size: var(--text-base, 12px); background: var(--surface-overlay); padding: 3px 8px; border: 1px solid var(--border); display: inline-block; }
.payt-regra-inativa { opacity: 0.45; }
.payt-regra-inativa .payt-pattern-cell { background: transparent; border-style: dashed; }
.payt-match-count { font-family: var(--font-mono); font-size: var(--text-sm, 11px); color: var(--success); min-width: 50px; display: inline-block; }
.payt-pendente-card { background: var(--surface-overlay); border: 1px solid var(--warning-border); border-left-width: var(--border-width-strong); border-left-style: solid; padding: var(--space-md); margin-bottom: 10px; }
.payt-pendente-info { font-family: var(--font-mono); font-size: var(--text-sm, 11px); color: var(--fg-meta); margin-bottom: var(--space-sm); }
.payt-webhook-url { background: var(--surface-overlay); border: 1px solid var(--border); font-size: var(--text-base, 12px); word-break: break-all; }

/* ─── murall ─── */
.murall-sticky-form { top: calc(var(--nav-height) + var(--space-sm)); }

/* ─── lancamento ─── */
.lanc-arquivo-icon { font-size: var(--text-2xl); color: var(--lime); line-height: 1; }
.lanc-arquivo-icon [data-lucide] { width: 32px; height: 32px; }

/* ─── lancamento_engajamento ─── */
.engaj-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.engaj-kpi-card { background: var(--card); border: 1px solid var(--border); padding: 14px 16px; position: relative; }
.engaj-kpi-card--hero { border-color: var(--lime); background: var(--lime-5); }
.engaj-kpi-label { font-family: var(--font-mono); font-size: var(--text-xs, 10px); text-transform: uppercase; letter-spacing: 0.15em; color: var(--fg-meta); }
.engaj-kpi-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--foreground); letter-spacing: -0.02em; margin-top: 4px; line-height: 1; }
.engaj-kpi-card--hero .engaj-kpi-value { color: var(--lime); }
.engaj-kpi-foot { font-size: var(--text-xs, 10px); color: var(--fg-meta); margin-top: 6px; font-family: var(--font-mono); }
.engaj-panel { background: var(--card); border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 1rem; }
.engaj-panel-title { font-family: var(--font-mono); font-size: var(--text-xs, 10px); text-transform: uppercase; letter-spacing: 0.15em; color: var(--fg-meta); margin-bottom: 10px; }
.engaj-chart-wrapper { height: 340px; position: relative; }
.engaj-chart-wrapper > canvas { height: 100% !important; width: 100% !important; }
.engaj-table { width: 100%; font-size: var(--text-base, 12px); border-collapse: collapse; font-family: var(--font-mono); }
.engaj-table thead th { background: var(--surface-overlay); color: var(--fg-meta); font-size: var(--text-xs, 10px); text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.engaj-table tbody td { padding: 6px; border-bottom: 1px solid var(--border-subtle); }
.engaj-table tr:hover td { background: var(--surface-hover); }
.engaj-table .num { text-align: right; }
.engaj-taxa-hero { color: var(--lime); font-weight: var(--fw-bold); }
.engaj-table-wrap { overflow-x: auto; max-height: 500px; }
.engaj-filtro-bar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.engaj-filtro-bar label { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: var(--text-xs, 10px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-meta); gap: 3px; }
.engaj-empty-card { background: var(--surface-overlay); }
.engaj-empty-icon { font-size: 3rem; color: var(--lime); opacity: 0.6; }
.engaj-empty-icon[data-lucide] { width: 44px; height: 44px; }
.engaj-setup-list { max-width: 520px; }

/* ─────── Cockpit de faturamento (home) ─────── */
.cockpit-card { background: var(--card); border: 1px solid var(--border); border-radius: 0; }
.cockpit-head {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  justify-content: space-between; align-items: center; margin-bottom: var(--space-lg);
}
.cockpit-filtros { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.cockpit-range { display: flex; gap: var(--space-xs); align-items: center; margin: 0; }
.cockpit-range input[type="date"] { width: auto; }

.cockpit-totais {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (max-width: 767px) { .cockpit-totais { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 419px) { .cockpit-totais { grid-template-columns: 1fr; } }
.cockpit-total {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-md);
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  transition: border-color 0.15s;
}
.cockpit-total:hover { border-top-color: var(--lime-40); }
.cockpit-total-label {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 10px; color: var(--muted-foreground); font-weight: 600;
}
.cockpit-total-value {
  font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em; color: var(--foreground);
}
.cockpit-total-sub { font-size: 12px; color: var(--muted-foreground); }
/* KPI de destaque (faturamento) — único em lime pra reduzir ruído */
.cockpit-total--primary { border-top-color: var(--lime); }
.cockpit-total--primary .cockpit-total-value { color: var(--lime); }

.cockpit-subtitle {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11px; color: var(--muted-foreground); font-weight: 600;
  margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-xs);
}
.cockpit-subtitle i[data-lucide] { width: 14px; height: 14px; color: var(--lime); }

.cockpit-rank { display: block; text-decoration: none; margin-bottom: var(--space-md); }
.cockpit-rank:hover .cockpit-rank-name { color: var(--lime); }
.cockpit-rank-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-sm); margin-bottom: var(--space-xs);
}
.cockpit-rank-name { color: var(--foreground); font-weight: 600; font-size: 14px; }
.cockpit-rank-pos {
  display: inline-block; min-width: 18px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); font-weight: 700;
}
.cockpit-rank-val { font-family: var(--font-mono); font-size: 13px; color: var(--foreground); white-space: nowrap; }
.cockpit-rank-qtd { color: var(--muted-foreground); font-size: 11px; }
.cockpit-bar { height: 6px; background: var(--muted); border-radius: 0; overflow: hidden; }
.cockpit-bar-fill { height: 100%; background: var(--lime); }

.cockpit-prod { list-style: none; padding: 0; margin: 0; }
.cockpit-prod li {
  display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline;
  padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle);
}
.cockpit-prod li:last-child { border-bottom: 0; }
.cockpit-prod-name {
  color: var(--foreground); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.cockpit-prod-val { font-family: var(--font-mono); font-size: 12px; color: var(--foreground); white-space: nowrap; }

/* ============================================================
   Cockpit v3 — "Soft Cockpit" (home) — cards arredondados + charts
   Escopo isolado em .ck2 pra NÃO tocar o resto (DS brutalista radius-0).
   ============================================================ */
.ck2 { --ck2-radius: 16px; --ck2-radius-sm: 12px; }
.ck2-head {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  justify-content: space-between; align-items: center; margin-bottom: var(--space-lg);
}
.ck2-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); margin: 0; }
.ck2-title i[data-lucide] { width: 20px; height: 20px; color: var(--lime); }
.ck2-filtros { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.ck2 .btn-group-sm .btn { border-radius: 999px !important; }
.ck2 .btn-group-sm > .btn + .btn { margin-left: 6px; }
.ck2-range { display: flex; gap: var(--space-xs); align-items: center; margin: 0; }
.ck2-range input[type="date"] { width: auto; border-radius: 999px; }
.ck2-range .btn { border-radius: 999px; }

/* ---- Grid de KPIs ---- */
.ck2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 991px) { .ck2-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 519px) { .ck2-kpis { grid-template-columns: 1fr; } }

.ck2-tile {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 0; overflow: hidden;
  background: var(--surface-panel); border: 1px solid var(--border);
  border-radius: var(--ck2-radius);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ck2-tile:hover { transform: translateY(-2px); border-color: var(--lime-25);
  box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.ck2-tile--accent { background:
  radial-gradient(120% 140% at 100% 0%, var(--lime-10), transparent 55%), var(--surface-panel);
  border-color: var(--lime-25); }
.ck2-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck2-chip {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: var(--lime-10); color: var(--lime);
}
.ck2-chip i[data-lucide] { width: 17px; height: 17px; }
.ck2-tile--accent .ck2-chip { background: var(--lime); color: var(--primary-foreground); }
.ck2-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: 10px; color: var(--muted-foreground); font-weight: 600; }
.ck2-val { font-family: var(--font-display); font-size: 27px; font-weight: 800;
  line-height: 1.05; letter-spacing: -0.03em; color: var(--foreground); }
.ck2-tile--accent .ck2-val { color: var(--lime); }
.ck2-sub { font-size: 12px; color: var(--muted-foreground); line-height: 1.35; }
/* Link de conferência dentro do subtítulo do KPI: discreto até o hover, porque só
   interessa a quem já desconfiou do número. */
.ck2-sub-link { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  opacity: .7; margin-left: .35em; }
.ck2-sub-link:hover { opacity: 1; color: var(--foreground); }

/* trend badge */
.ck2-trend { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
  border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.ck2-trend i[data-lucide] { width: 12px; height: 12px; }
.ck2-trend--up { color: var(--success); background: rgba(34,197,94,.12); }
.ck2-trend--down { color: var(--destructive); background: rgba(237,70,9,.12); }
.ck2-trend--flat { color: var(--muted-foreground); background: var(--muted); }
.ck2-trend--warn { color: var(--warning); background: rgba(245, 158, 11, .12); }

/* sparkline colado no rodapé do tile */
.ck2-spark { margin: 6px -18px 0; height: 42px; display: block; }
.ck2-spark svg { width: 100%; height: 100%; display: block; }
.ck2-spark-area { fill: var(--lime); opacity: .14; }
.ck2-spark-line { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ck2-chart-area { fill: url(#ckgrad); }

/* ---- Painéis grandes (chart + donut + ranking) ---- */
/* `minmax(0, …)` é obrigatório: o mínimo automático de uma faixa `fr` é o min-content
   do painel, então UM nome de produto comprido ("7 Frascos de cada de: Lipo Vvero…")
   estoura a proporção e inverte as colunas — foi o que acontecia no filtro "Tudo",
   onde esses produtos aparecem. Com o mínimo travado em 0, a razão 1.7:1 vale sempre
   e o nome é elipsado dentro do painel. */
.ck2-panels { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-md); margin-top: var(--space-md); }
/* `1fr` é minmax(auto,1fr): o mínimo automático não deixa a coluna encolher abaixo do
   min-content dos .ck2-rank-val (nowrap), e a PÁGINA passa a rolar na horizontal —
   93px em /panorama e 148px em /financeiro, medidos no 390 em 27/08. Com minmax(0,1fr)
   a coluna cai de 459px para 342px. Mesma correção que `.an` já usava. */
@media (max-width: 991px) { .ck2-panels { grid-template-columns: minmax(0, 1fr); } }
.ck2-panels > .ck2-panel { min-width: 0; }
.ck2-panel {
  background: var(--surface-panel); border: 1px solid var(--border);
  border-radius: var(--ck2-radius); padding: 18px;
}
.ck2-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ck2-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--foreground); }
.ck2-panel-title i[data-lucide] { width: 15px; height: 15px; color: var(--lime); }

/* área chart principal */
.ck2-chart { width: 100%; height: auto; display: block; }
.ck2-chart .ck2-grid-line { stroke: var(--border-subtle); stroke-width: 1; }
.ck2-chart-line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ck2-chart-dot { fill: var(--lime); stroke: var(--surface-panel); stroke-width: 3; }
.ck2-chart-x { display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }

/* donut de margem (conic-gradient puro) */
.ck2-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; }
.ck2-donut { --p: 0; position: relative; width: 156px; height: 156px; border-radius: 50%;
  background: conic-gradient(var(--lime) calc(var(--p) * 1%), var(--muted) 0);
  display: grid; place-items: center; }
.ck2-donut::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--surface-panel); }
.ck2-donut-center { position: relative; text-align: center; }
.ck2-donut-pct { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--lime); line-height: 1; }
.ck2-donut-cap { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.ck2-legend { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ck2-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-foreground); }
.ck2-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ck2-legend-row b { color: var(--foreground); font-family: var(--font-mono); margin-left: auto; }

/* ranking + produtos (dentro de painel) */
.ck2-rank { display: block; text-decoration: none; margin-bottom: 14px; }
.ck2-rank:last-child { margin-bottom: 0; }
.ck2-rank:hover .ck2-rank-name { color: var(--lime); }
.ck2-rank-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ck2-rank-name { color: var(--foreground); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ck2-rank-pos { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 7px;
  background: var(--lime-10); color: var(--lime); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.ck2-rank-val { font-family: var(--font-mono); font-size: 12px; color: var(--foreground); white-space: nowrap; }
.ck2-rank-qtd { color: var(--muted-foreground); font-size: 11px; }
.ck2-bar { height: 8px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.ck2-bar-fill { height: 100%; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); border-radius: 999px; }

/* ============================================================
   Maestro OS · Sala de Comando "Operação agora"
   Canvas técnico inspirado no mapa operacional, sem virar grafo decorativo.
   ============================================================ */
.ops { position: relative; isolation: isolate; --ops-radius: 14px; }
.ops-grid-bg { position: absolute; z-index: -1; inset: -24px; pointer-events: none;
  background-image: linear-gradient(rgba(209,255,0,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(209,255,0,.025) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000 0, transparent 72%); }
.ops-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 4px 0 22px; }
.ops-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--lime); font: 600 10px/1 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.ops-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.ops-title { margin: 0; font: 800 clamp(28px, 4vw, 44px)/.98 var(--font-display); letter-spacing: -.045em; }
.ops-lead { margin: 9px 0 0; color: var(--muted-foreground); font-size: 13px; }
.ops-snapshot { display: grid; grid-template-columns: auto auto; gap: 0 10px; align-items: baseline; min-width: 120px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(5,5,5,.62); }
.ops-snapshot span { grid-column: 1/-1; color: var(--fg-meta); font: 600 9px var(--font-mono); letter-spacing: .14em; }
.ops-snapshot strong { color: var(--lime); font: 800 23px var(--font-display); }
.ops-snapshot small { color: var(--muted-foreground); font: 11px var(--font-mono); }

.ops-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.ops-kpi { display: flex; gap: 13px; min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: var(--ops-radius);
  background: linear-gradient(145deg, rgba(255,255,255,.025), transparent), var(--surface-panel); }
.ops-kpi--accent { border-color: var(--lime-25); background: radial-gradient(circle at 0 0, var(--lime-10), transparent 62%), var(--surface-panel); }
.ops-kpi--danger { border-color: var(--destructive-border); }
.ops-kpi-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border);
  border-radius: 10px; color: var(--muted-foreground); background: var(--muted); }
.ops-kpi--accent .ops-kpi-icon { color: var(--lime); border-color: var(--lime-25); background: var(--lime-10); }
.ops-kpi--danger .ops-kpi-icon { color: var(--destructive); background: var(--destructive-bg); }
.ops-kpi-icon i { width: 17px; height: 17px; }
.ops-kpi > div:last-child { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; width: 100%; }
.ops-kpi span { color: var(--fg-meta); font: 600 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ops-kpi strong { grid-row: 1/3; grid-column: 2; color: var(--foreground); font: 800 29px var(--font-display); letter-spacing: -.04em; }
.ops-kpi small { grid-column: 1; overflow: hidden; color: var(--muted-foreground); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }

.ops-recommend { position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 16px; align-items: center;
  margin-bottom: 12px; padding: 17px 18px 23px; overflow: hidden; border: 1px solid var(--lime-25); border-radius: var(--ops-radius);
  background: radial-gradient(circle at 0 0, var(--lime-10), transparent 46%), linear-gradient(120deg, rgba(255,255,255,.025), transparent), var(--surface-panel); }
.ops-recommend::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--lime); content: ''; }
.ops-recommend--critica { border-color: var(--destructive-border); background: radial-gradient(circle at 0 0, var(--destructive-bg), transparent 46%), var(--surface-panel); }
.ops-recommend--critica::before { background: var(--destructive); }
.ops-recommend--alta::before { background: var(--warning); }
.ops-recommend-mark { display: grid; place-items: center; align-self: stretch; border-right: 1px solid var(--border-subtle); color: var(--lime); }
.ops-recommend--critica .ops-recommend-mark { color: var(--destructive); }
.ops-recommend-mark i { width: 22px; height: 22px; }
.ops-recommend-mark span { color: var(--fg-meta); font: 700 8px var(--font-mono); }
.ops-recommend-main { min-width: 0; }
.ops-recommend-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--lime); font: 700 8.5px var(--font-mono); letter-spacing: .13em; }
.ops-recommend--critica .ops-recommend-kicker { color: var(--destructive); }
.ops-priority { padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg-meta); font-size: 7.5px; text-transform: uppercase; }
.ops-priority--critica { color: var(--destructive); border-color: var(--destructive-border); }
.ops-priority--alta { color: var(--warning); }
.ops-priority--media { color: var(--info); }
.ops-recommend h2 { margin: 0 0 10px; font: 750 17px var(--font-display); letter-spacing: -.02em; }
.ops-recommend-reasoning { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.ops-recommend-reasoning > div { min-width: 0; padding-left: 10px; border-left: 1px solid var(--border-subtle); }
.ops-recommend-reasoning span { color: var(--fg-meta); font: 600 7.5px var(--font-mono); letter-spacing: .12em; }
.ops-recommend-reasoning p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 10px; line-height: 1.4; }
.ops-recommend-link { display: inline-flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--lime-25); border-radius: 9px;
  color: var(--lime); font: 600 9px var(--font-mono); text-decoration: none; white-space: nowrap; }
.ops-recommend-link:hover { color: var(--primary-foreground); background: var(--lime); }
.ops-recommend-link i { width: 13px; height: 13px; }
.ops-recommend-safe { display: inline-flex; align-items: center; gap: 7px; color: var(--success); font: 600 9px var(--font-mono); }
.ops-recommend-safe i { width: 16px; height: 16px; }
.ops-recommend-foot { position: absolute; right: 18px; bottom: 7px; display: flex; align-items: center; gap: 5px; color: var(--fg-meta); font: 7.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ops-recommend-foot i { width: 10px; height: 10px; }

.ops-main-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .85fr); gap: 12px; align-items: start; }
.ops-side-stack { display: grid; gap: 12px; }
.ops-panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--ops-radius); background: rgba(15,15,15,.92); }
.ops-panel-head, .ops-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle); }
.ops-panel-head > div, .ops-section-head > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ops-panel h2, .ops-section-head h2 { margin: 0; font: 700 13px var(--font-display); letter-spacing: -.01em; }
.ops-index { color: var(--lime); font: 700 9px var(--font-mono); }
.ops-count, .ops-readonly, .ops-section-head > span { color: var(--fg-meta); font: 600 9px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.ops-list { display: grid; }
.ops-action { position: relative; display: grid; grid-template-columns: 8px minmax(0,1fr) 18px; gap: 12px; align-items: center;
  min-height: 67px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); color: inherit; text-decoration: none; transition: background .14s; }
.ops-action:last-child { border-bottom: 0; }
.ops-action:hover { background: rgba(255,255,255,.03); }
.ops-action > i { width: 15px; color: var(--fg-meta); }
.ops-action-signal { width: 6px; height: 32px; border-radius: 6px; background: var(--warning); }
.ops-action--error .ops-action-signal { background: var(--destructive); box-shadow: 0 0 14px rgba(237,70,9,.28); }
.ops-action--late .ops-action-signal { background: var(--warning); }
.ops-action--high .ops-action-signal { background: var(--info); }
.ops-action-body { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ops-action-body .ops-action-meta { color: var(--fg-meta); font: 600 9px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.ops-action-body strong { overflow: hidden; color: var(--foreground); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.ops-action-body > span:last-child { color: var(--muted-foreground); font-size: 10.5px; }
.ops-panel-foot { padding: 9px 15px; border-top: 1px solid var(--border-subtle); color: var(--fg-meta); font: 10px var(--font-mono); text-align: center; }

.ops-event-card { display: grid; grid-template-columns: auto auto minmax(0,1fr) 18px; gap: 11px; align-items: center; padding: 17px;
  color: inherit; text-decoration: none; background: radial-gradient(circle at 0 50%, var(--lime-10), transparent 53%); }
.ops-event-card:hover { background-color: rgba(255,255,255,.025); }
.ops-event-time { color: var(--lime); font: 800 28px var(--font-display); letter-spacing: -.04em; }
.ops-event-date { align-self: stretch; display: grid; place-items: center; padding-left: 11px; border-left: 1px solid var(--lime-25);
  color: var(--fg-meta); font: 10px var(--font-mono); }
.ops-event-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ops-event-copy span { color: var(--lime); font: 600 9px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.ops-event-copy strong { overflow: hidden; color: var(--foreground); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.ops-event-copy small { color: var(--muted-foreground); font: 10px var(--font-mono); }
.ops-event-card > i { width: 15px; color: var(--lime); }
.ops-safe-state { display: flex; gap: 12px; align-items: center; padding: 18px; }
.ops-safe-state > i { width: 28px; height: 28px; color: var(--success); }
.ops-safe-state div { display: flex; flex-direction: column; gap: 3px; }
.ops-safe-state strong { font-size: 12px; }
.ops-safe-state span { color: var(--muted-foreground); font-size: 10.5px; line-height: 1.45; }

.ops-health-list { display: grid; }
.ops-health-row { display: grid; grid-template-columns: 9px minmax(0,1fr) 14px; gap: 10px; align-items: center; min-height: 48px;
  padding: 8px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
.ops-health-row:last-child { border-bottom: 0; }
.ops-health-row:hover { background: rgba(255,255,255,.025); }
.ops-health-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.ops-health-row strong { color: var(--foreground); font: 600 10.5px var(--font-mono); }
.ops-health-row small { overflow: hidden; color: var(--muted-foreground); font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; }
.ops-health-row > i { width: 13px; color: var(--fg-meta); }
.ops-status { width: 7px; height: 7px; border-radius: 50%; }
.ops-status--saudavel { background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,.45); }
.ops-status--atencao { background: var(--warning); }
.ops-status--erro { background: var(--destructive); box-shadow: 0 0 8px rgba(237,70,9,.45); }
.ops-status--sem_dados { background: var(--fg-meta); }

.ops-activity { margin-top: 12px; }
.ops-activity-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--border-subtle); }
.ops-activity-item { display: grid; grid-template-columns: 31px minmax(0,1fr) 14px; gap: 10px; align-items: center; min-height: 68px;
  padding: 11px 14px; color: inherit; text-decoration: none; background: var(--surface-panel); }
.ops-activity-item:hover { background: var(--surface-elevated); }
.ops-activity-item > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ops-activity-item small { color: var(--fg-meta); font: 8px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ops-activity-item strong { color: var(--foreground); font-size: 10.5px; }
.ops-activity-item em { overflow: hidden; color: var(--muted-foreground); font-size: 9px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-activity-item > i { width: 12px; color: var(--fg-meta); }
.ops-activity-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; color: var(--info); background: var(--muted); }
.ops-activity-icon i { width: 14px; height: 14px; }
.ops-activity-item--erro .ops-activity-icon { color: var(--destructive); border-color: var(--destructive-border); background: var(--destructive-bg); }
.ops-activity-item--enviada .ops-activity-icon { color: var(--success); }

.ops-control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.ops-quality { margin-top: 12px; scroll-margin-top: 84px; }
.ops-quality-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--border-subtle); }
.ops-quality-card { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) auto 13px; gap: 10px; align-items: center; min-height: 84px; padding: 13px 14px; color: var(--foreground); background: var(--surface-panel); text-decoration: none; box-shadow: inset 0 2px 0 var(--fg-meta); }
.ops-quality-card:hover { background: var(--surface-elevated); }
.ops-quality-card--aprovado { box-shadow: inset 0 2px 0 var(--success); }
.ops-quality-card--pronto { box-shadow: inset 0 2px 0 var(--success); }
.ops-quality-card--bloqueado, .ops-quality-card--erro, .ops-quality-card--indisponivel { box-shadow: inset 0 2px 0 var(--destructive); }
.ops-quality-card--desatualizado, .ops-quality-card--nunca_validado { box-shadow: inset 0 2px 0 var(--warning); }
.ops-quality-card--em_andamento { box-shadow: inset 0 2px 0 var(--lime); }
.ops-quality-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; color: var(--warning); background: var(--muted); }
.ops-quality-icon i { width: 16px; height: 16px; }
.ops-quality-card--aprovado .ops-quality-icon { color: var(--success); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.ops-quality-card--pronto .ops-quality-icon { color: var(--success); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.ops-quality-card--bloqueado .ops-quality-icon, .ops-quality-card--erro .ops-quality-icon, .ops-quality-card--indisponivel .ops-quality-icon { color: var(--destructive); border-color: var(--destructive-border); background: var(--destructive-bg); }
.ops-quality-card--em_andamento .ops-quality-icon { color: var(--lime); }
.ops-quality-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ops-quality-copy small { color: var(--fg-meta); font: 7.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.ops-quality-copy strong { font-size: 10.5px; }
.ops-quality-copy em { overflow: hidden; color: var(--muted-foreground); font-size: 8.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-quality-run { padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--fg-meta); font: 7px var(--font-mono); white-space: nowrap; }
.ops-quality-card > i { width: 11px; color: var(--fg-meta); }
.ops-panel-link { display: inline-flex; align-items: center; gap: 5px; color: var(--lime); font: 8.5px var(--font-mono); text-decoration: none; }
.ops-panel-link i { width: 11px; height: 11px; }
.ops-gate-compact-list, .ops-run-list { display: grid; }
.ops-gate-compact, .ops-run-row { display: grid; grid-template-columns: 30px minmax(0,1fr) 13px; gap: 10px; align-items: center; min-height: 61px;
  padding: 9px 13px; border-bottom: 1px solid var(--border-subtle); color: inherit; text-decoration: none; }
.ops-gate-compact:last-child, .ops-run-row:last-child { border-bottom: 0; }
.ops-gate-compact:hover, .ops-run-row:hover { background: rgba(255,255,255,.025); }
.ops-gate-compact > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--warning-border); border-radius: 8px; color: var(--warning); background: var(--warning-bg); }
.ops-gate-compact > span:first-child i { width: 13px; height: 13px; }
.ops-gate-compact > span:nth-child(2), .ops-run-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.ops-gate-compact small, .ops-run-row small { color: var(--fg-meta); font: 7.5px var(--font-mono); text-transform: uppercase; }
.ops-gate-compact strong, .ops-run-row strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.ops-gate-compact em, .ops-run-row em { overflow: hidden; color: var(--muted-foreground); font-size: 8.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-gate-compact > i, .ops-run-row > i { width: 11px; color: var(--fg-meta); }
.ops-run-row { grid-template-columns: 8px minmax(0,1fr) 13px; }
.ops-run-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-meta); }
.ops-run-row--rodando .ops-run-pulse { background: var(--lime); box-shadow: 0 0 9px var(--lime); }
.ops-run-row--falhou .ops-run-pulse { background: var(--destructive); box-shadow: 0 0 8px rgba(237,70,9,.5); }
.ops-run-row--aguardando_aprovacao .ops-run-pulse { background: var(--warning); }

.ops-launches { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--ops-radius); background: rgba(10,10,10,.76); overflow: hidden; }
.ops-launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--border-subtle); }
.ops-launch { min-width: 0; padding: 16px; background: var(--surface-panel); box-shadow: inset 3px 0 0 var(--fg-meta); }
.ops-launch--saudavel { box-shadow: inset 3px 0 0 var(--success); }
.ops-launch--atencao { box-shadow: inset 3px 0 0 var(--warning); }
.ops-launch--erro { box-shadow: inset 3px 0 0 var(--destructive); }
.ops-launch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ops-slug { color: var(--fg-meta); font: 600 8px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ops-launch h3 { margin: 3px 0 0; font: 700 13px var(--font-display); }
.ops-launch-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ops-state-label { padding: 3px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg-meta);
  font: 600 8px var(--font-mono); text-transform: uppercase; white-space: nowrap; }
.ops-autonomy-label { color: var(--lime); font: 600 7.5px var(--font-mono); white-space: nowrap; }
.ops-progress-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; margin: 15px 0; }
.ops-progress-row strong { color: var(--foreground); font: 700 15px var(--font-mono); }
.ops-progress-row small { color: var(--fg-meta); font: 9px var(--font-mono); }
.ops-progress { height: 4px; overflow: hidden; border-radius: 99px; background: var(--muted); }
.ops-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime-deep), var(--lime)); }
.ops-launch-flow { display: grid; grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr); gap: 9px; align-items: center; padding: 12px;
  border: 1px solid var(--border-subtle); border-radius: 10px; background: rgba(0,0,0,.17); }
.ops-launch-flow > i { width: 14px; color: var(--lime); }
.ops-launch-flow > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ops-launch-flow span { color: var(--fg-meta); font: 600 8px var(--font-mono); letter-spacing: .08em; }
.ops-launch-flow strong { overflow: hidden; color: var(--foreground); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.ops-launch-flow small { color: var(--muted-foreground); font-size: 9px; }
.ops-launch-next { display: grid; grid-template-columns: 14px minmax(0,1fr) 13px; gap: 9px; align-items: center; margin-top: 9px; padding: 10px 11px;
  border: 1px solid var(--lime-25); border-radius: 9px; color: inherit; text-decoration: none; background: var(--lime-10); }
.ops-launch-next:hover { border-color: var(--lime); background: var(--lime-20); }
.ops-launch-next > i { width: 13px; height: 13px; color: var(--lime); }
.ops-launch-next > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ops-launch-next small { color: var(--lime); font: 600 7.5px var(--font-mono); letter-spacing: .09em; }
.ops-launch-next strong { overflow: hidden; color: var(--foreground); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.ops-launch-next em { overflow: hidden; color: var(--muted-foreground); font-size: 8.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-launch-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ops-launch-foot span, .ops-launch-foot a { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-meta); font: 9.5px var(--font-mono); text-decoration: none; }
.ops-launch-foot a { color: var(--lime); }
.ops-launch-foot i { width: 12px; height: 12px; }
.ops-launch-foot .ops-launch-links { display: inline-flex; gap: 12px; }
.ops-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 150px;
  padding: 24px; color: var(--muted-foreground); text-align: center; }
.ops-empty i { width: 28px; height: 28px; color: var(--success); margin-bottom: 3px; }
.ops-empty strong { color: var(--foreground); font-size: 12px; }
.ops-empty span { font-size: 10.5px; }
.ops-empty--compact { min-height: 82px; font-size: 10.5px; }
.ops-footnote { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 3px 0; color: var(--fg-meta);
  font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.ops-footnote span { display: inline-flex; align-items: center; gap: 6px; }
.ops-footnote i { width: 12px; height: 12px; }

/* Ficha Operacional: a gaveta densa do Bennett traduzida para o domínio real do Maestro. */
.ops-detail { max-width: 1180px; margin: 0 auto; }
.ops-detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; color: var(--fg-meta); font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ops-detail-nav a { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); text-decoration: none; }
.ops-detail-nav i { width: 13px; height: 13px; }
.ops-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 0; border-block: 1px solid var(--border-subtle); }
.ops-detail-head h1 { margin: 0; font: 800 clamp(28px,4vw,46px)/1 var(--font-display); letter-spacing: -.045em; }
.ops-detail-head p { margin: 8px 0 0; color: var(--muted-foreground); font-size: 13px; }
.ops-detail-state { display: flex; min-width: 185px; flex-direction: column; align-items: flex-end; }
.ops-detail-state span { color: var(--fg-meta); font: 8px var(--font-mono); letter-spacing: .14em; }
.ops-detail-state strong { margin: 4px 0 2px; color: var(--lime); font: 700 16px var(--font-mono); text-transform: uppercase; }
.ops-detail-state small { color: var(--muted-foreground); font: 9px var(--font-mono); }
.ops-detail-summary { display: grid; grid-template-columns: 1.35fr 1fr 1fr; margin: 12px 0; border: 1px solid var(--border); border-radius: var(--ops-radius); overflow: hidden; background: var(--border-subtle); gap: 1px; }
.ops-detail-summary article { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 16px; background: var(--surface-panel); }
.ops-detail-summary span, .ops-sop-meta span { color: var(--lime); font: 700 8px var(--font-mono); letter-spacing: .12em; }
.ops-detail-summary p { margin: 0; color: var(--foreground); font-size: 12px; line-height: 1.5; }
.ops-detail-summary strong { font-size: 12px; }
.ops-detail-summary small { color: var(--muted-foreground); font-size: 9.5px; line-height: 1.4; }
.ops-detail-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(360px,.82fr); gap: 12px; align-items: start; }
.ops-sop-steps { display: grid; margin: 0; padding: 8px 16px 4px; list-style: none; counter-reset: sop; }
.ops-sop-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: center; min-height: 50px; border-bottom: 1px solid var(--border-subtle); }
.ops-sop-steps li:last-child { border-bottom: 0; }
.ops-sop-steps li > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--lime-25); border-radius: 50%; color: var(--lime); font: 700 8px var(--font-mono); }
.ops-sop-steps p { margin: 0; color: var(--foreground); font-size: 11px; line-height: 1.45; }
.ops-sop-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; border-top: 1px solid var(--border-subtle); background: var(--border-subtle); }
.ops-sop-meta > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 13px; background: var(--surface-panel); }
.ops-sop-meta small { overflow: hidden; color: var(--muted-foreground); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.ops-ladder-level { color: var(--lime); font: 700 8px var(--font-mono); letter-spacing: .08em; }
.ops-ladder-list { display: grid; }
.ops-ladder-step { display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; gap: 10px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); opacity: .5; }
.ops-ladder-step:last-child { border-bottom: 0; }
.ops-ladder-step--ativo, .ops-ladder-step--concluido { opacity: 1; }
.ops-ladder-step--ativo { background: radial-gradient(circle at 0 50%,var(--lime-10),transparent 48%); }
.ops-ladder-num { color: var(--fg-meta); font: 700 9px var(--font-mono); }
.ops-ladder-step > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.ops-ladder-step strong { color: var(--foreground); font: 700 11px var(--font-mono); }
.ops-ladder-step p { margin: 0; color: var(--muted-foreground); font-size: 9.5px; line-height: 1.4; }
.ops-ladder-step small { color: var(--fg-meta); font: 8px/1.4 var(--font-mono); }
.ops-ladder-step > i { width: 14px; color: var(--fg-meta); }
.ops-ladder-step--ativo > i, .ops-ladder-step--concluido > i { color: var(--lime); }
.ops-ladder-regression { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 16px; border-top: 1px solid var(--border-subtle); color: var(--warning); font: 8.5px/1.4 var(--font-mono); }
.ops-ladder-regression i { flex: none; width: 13px; height: 13px; }
.ops-artifacts { margin-top: 12px; }
.ops-artifact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--border-subtle); }
.ops-artifact { display: grid; grid-template-columns: 29px minmax(0,1fr) 13px; gap: 9px; align-items: center; min-height: 68px; padding: 11px 13px; color: inherit; text-decoration: none; background: var(--surface-panel); }
.ops-artifact:hover { background: var(--surface-elevated); }
.ops-artifact > i { width: 15px; color: var(--lime); }
.ops-artifact > i:last-child { width: 11px; color: var(--fg-meta); }
.ops-artifact > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ops-artifact small { color: var(--lime); font: 7.5px var(--font-mono); text-transform: uppercase; }
.ops-artifact strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.ops-artifact em { overflow: hidden; color: var(--fg-meta); font: 8px var(--font-mono); font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-detail-actions { display: flex; align-items: center; gap: 18px; padding: 14px 3px 0; }
.ops-detail-actions a, .ops-detail-actions span { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font: 9px var(--font-mono); text-decoration: none; }
.ops-detail-actions span { margin-left: auto; color: var(--fg-meta); }
.ops-detail-actions i { width: 12px; height: 12px; }

.ops-trace { margin-top: 12px; }
.ops-trace-flow, .ops-gate-chain { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); gap: 7px; align-items: center; padding: 17px; }
.ops-trace-flow > div, .ops-gate-chain > div { display: flex; min-width: 0; min-height: 82px; flex-direction: column; gap: 4px; justify-content: center; padding: 11px; border: 1px solid var(--border-subtle); border-radius: 9px; background: rgba(0,0,0,.18); }
.ops-trace-flow > div.is-active, .ops-gate-chain > div.is-active { border-color: var(--lime-25); background: var(--lime-10); }
.ops-trace-flow > div > span, .ops-gate-chain > div > span { color: var(--lime); font: 700 8px var(--font-mono); }
.ops-trace-flow small, .ops-gate-chain small { color: var(--fg-meta); font: 7px var(--font-mono); letter-spacing: .1em; }
.ops-trace-flow strong, .ops-gate-chain strong { overflow: hidden; font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; }
.ops-trace-flow em { overflow: hidden; color: var(--muted-foreground); font-size: 8px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-trace-flow > i, .ops-gate-chain > i { width: 13px; color: var(--lime); }
.ops-trace-ledger { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border-top: 1px solid var(--border-subtle); background: var(--border-subtle); }
.ops-trace-ledger > a, .ops-trace-ledger > div { display: grid; grid-template-columns: 19px minmax(0,1fr) 13px; gap: 9px; align-items: center; min-height: 52px; padding: 9px 13px; color: inherit; text-decoration: none; background: var(--surface-panel); }
.ops-trace-ledger > a:hover { background: var(--surface-elevated); }
.ops-trace-ledger i { width: 12px; color: var(--lime); }
.ops-trace-ledger span { display: flex; min-width: 0; flex-direction: column; }
.ops-trace-ledger small { color: var(--fg-meta); font: 7.5px var(--font-mono); }
.ops-trace-ledger strong { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }

.ops-gates-page, .ops-gate-detail { max-width: 1180px; margin: 0 auto; }
.ops-gate-history { margin-top: 12px; }
.ops-gate-list { display: grid; }
.ops-gate-row { display: grid; grid-template-columns: 120px minmax(0,1.4fr) minmax(180px,.65fr) 14px; gap: 14px; align-items: center; min-height: 77px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: inherit; text-decoration: none; }
.ops-gate-row:last-child { border-bottom: 0; }
.ops-gate-row:hover { background: rgba(255,255,255,.025); }
.ops-gate-row > span:not(.ops-gate-state) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ops-gate-row small { color: var(--fg-meta); font: 7.5px var(--font-mono); text-transform: uppercase; }
.ops-gate-row strong { overflow: hidden; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.ops-gate-row em { overflow: hidden; color: var(--muted-foreground); font-size: 9px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-gate-row > i { width: 12px; color: var(--lime); }
.ops-gate-state { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 5px 8px; border: 1px solid var(--warning-border); border-radius: 999px; color: var(--warning); font: 8px var(--font-mono); text-transform: uppercase; background: var(--warning-bg); }
.ops-gate-state i { width: 11px; height: 11px; }
.ops-gate-chain { margin: 12px 0; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); border: 1px solid var(--border); border-radius: var(--ops-radius); background: var(--surface-panel); }
.ops-decision-form { display: grid; gap: 14px; padding: 17px; }
.ops-decision-form label { display: flex; flex-direction: column; gap: 7px; }
.ops-decision-form label > span { color: var(--fg-meta); font: 8px var(--font-mono); letter-spacing: .1em; }
.ops-decision-form textarea { min-height: 100px; resize: vertical; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--foreground); background: var(--muted); font: 11px/1.5 var(--font-sans); }
.ops-decision-form textarea:focus { outline: none; border-color: var(--lime-25); box-shadow: 0 0 0 3px var(--lime-10); }
.ops-decision-form .ops-confirm { flex-direction: row; align-items: center; }
.ops-confirm input { accent-color: var(--lime); }
.ops-decision-actions { display: flex; justify-content: flex-end; gap: 9px; }
.ops-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--foreground); background: transparent; font: 600 9px var(--font-mono); cursor: pointer; }
.ops-btn i { width: 13px; height: 13px; }
.ops-btn--reject { color: var(--destructive); border-color: var(--destructive-border); }
.ops-btn--approve { color: var(--primary-foreground); border-color: var(--lime); background: var(--lime); }
.ops-decision-result { display: flex; gap: 14px; align-items: center; padding: 20px; }
.ops-decision-result > i { width: 34px; height: 34px; color: var(--lime); }
.ops-decision-result > div { display: flex; flex-direction: column; gap: 3px; }
.ops-decision-result span { color: var(--fg-meta); font: 8px var(--font-mono); }
.ops-decision-result strong { color: var(--lime); font: 700 14px var(--font-mono); text-transform: uppercase; }
.ops-decision-result p { margin: 0; color: var(--muted-foreground); font-size: 10px; }

.ops-graph-page { max-width: 1500px; margin: 0 auto; }
.ops-graph-stats { display: flex; gap: 1px; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--border-subtle); }
.ops-graph-stats span { display: flex; flex-direction: column; gap: 2px; min-width: 82px; padding: 10px 12px; color: var(--fg-meta); font: 7.5px var(--font-mono); text-transform: uppercase; background: var(--surface-panel); }
.ops-graph-stats strong { color: var(--lime); font-size: 14px; }
.ops-lenses { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.ops-lenses a { display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted-foreground); text-decoration: none; background: var(--surface-panel); }
.ops-lenses a.active { color: var(--lime); border-color: var(--lime-25); background: var(--lime-10); }
.ops-lenses i { width: 16px; height: 16px; }
.ops-lenses span { display: flex; flex-direction: column; color: var(--foreground); font: 600 9.5px var(--font-mono); }
.ops-lenses small { color: var(--fg-meta); font: 8px var(--font-sans); }
.ops-graph-canvas { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--ops-radius); background: radial-gradient(circle at 50% 0,var(--lime-10),transparent 44%),rgba(7,7,7,.92); }
.ops-graph-axis { display: flex; align-items: center; justify-content: center; gap: 13px; min-width: 1050px; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-meta); font: 7.5px var(--font-mono); letter-spacing: .12em; }
.ops-graph-axis i { width: 11px; color: var(--lime); }
.ops-graph-layers { display: grid; grid-template-columns: minmax(150px,1fr) 24px minmax(180px,1.05fr) 24px minmax(190px,1.12fr) 24px minmax(190px,1.12fr) 24px minmax(170px,1fr) 24px minmax(170px,1fr); gap: 7px; align-items: stretch; min-width: 1180px; padding: 18px; }
.ops-graph-layer { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 10px; background: rgba(18,18,18,.74); transition: opacity .18s,filter .18s; }
.ops-graph-layer-head { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: center; min-height: 42px; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
.ops-graph-layer-head span { color: var(--lime); font: 700 8px var(--font-mono); }
.ops-graph-layer-head strong { font: 600 8.5px var(--font-mono); text-transform: uppercase; }
.ops-graph-layer-head small { color: var(--fg-meta); font: 7px var(--font-mono); }
.ops-graph-nodes { display: grid; gap: 7px; padding: 9px; align-content: start; }
.ops-graph-node { display: grid; grid-template-columns: 27px minmax(0,1fr) 11px; gap: 7px; align-items: center; min-height: 58px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; color: inherit; text-align: left; background: var(--surface-panel); cursor: pointer; transition: border-color .14s,transform .14s; }
.ops-graph-node:hover { transform: translateY(-1px); border-color: var(--lime-25); }
.ops-graph-node > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ops-graph-node small { color: var(--fg-meta); font: 6.8px var(--font-mono); text-transform: uppercase; }
.ops-graph-node strong { overflow: hidden; font-size: 8.8px; white-space: nowrap; text-overflow: ellipsis; }
.ops-graph-node em { overflow: hidden; color: var(--muted-foreground); font-size: 7.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.ops-graph-node > i { width: 10px; color: var(--fg-meta); }
.ops-graph-node-icon { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px; color: var(--lime); background: var(--muted); }
.ops-graph-node-icon i { width: 12px; height: 12px; }
.ops-graph-node--humano .ops-graph-node-icon { color: #38bdf8; }
.ops-graph-node--agente .ops-graph-node-icon,.ops-graph-node--run .ops-graph-node-icon { color: #a78bfa; }
.ops-graph-node--gate .ops-graph-node-icon { color: var(--warning); }
.ops-graph-node--ausente { opacity: .5; border-style: dashed; }
.ops-graph-node--falhou,.ops-graph-node--rejeitada { border-color: var(--destructive-border); }
.ops-graph-node--rodando { border-color: var(--lime-25); box-shadow: inset 2px 0 0 var(--lime); }
.ops-graph-connector { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: var(--lime); }
.ops-graph-connector i { width: 14px; }
.ops-graph-connector span { color: var(--fg-meta); font: 6px var(--font-mono); writing-mode: vertical-rl; }
.ops-graph-empty { padding: 20px 5px; color: var(--fg-meta); font: 7.5px var(--font-mono); text-align: center; }
.ops-graph-canvas--evidencia .ops-graph-layer--executores,.ops-graph-canvas--evidencia .ops-graph-layer--operacao { opacity: .25; filter: grayscale(1); }
.ops-graph-canvas--runtime .ops-graph-layer--fontes,.ops-graph-canvas--runtime .ops-graph-layer--artefatos,.ops-graph-canvas--runtime .ops-graph-layer--gates,.ops-graph-canvas--runtime .ops-graph-layer--resultado { opacity: .25; filter: grayscale(1); }
.ops-graph-evidence { margin-top: 12px; }
.ops-edge-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; max-height: 330px; overflow-y: auto; background: var(--border-subtle); }
.ops-edge-list > div { display: grid; grid-template-columns: minmax(0,1fr) 12px auto 12px minmax(0,1fr); gap: 7px; align-items: center; padding: 10px 12px; background: var(--surface-panel); }
.ops-edge-list span { overflow: hidden; color: var(--muted-foreground); font: 7.5px var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
.ops-edge-list strong { color: var(--lime); font: 7.5px var(--font-mono); }
.ops-edge-list i { width: 10px; color: var(--fg-meta); }
.ops-edge-list small { grid-column: 1/-1; color: var(--fg-meta); font-size: 7.5px; }
.ops-node-drawer { position: fixed; z-index: 1200; top: 0; right: 0; width: min(430px,92vw); height: 100vh; padding: 28px; border-left: 1px solid var(--lime-25); color: var(--foreground); background: rgba(10,10,10,.98); box-shadow: -25px 0 60px rgba(0,0,0,.45); transform: translateX(105%); transition: transform .2s ease; }
.ops-node-drawer.is-open { transform: translateX(0); }
.ops-node-drawer-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted-foreground); background: var(--muted); }
.ops-node-drawer-close i { width: 14px; }
.ops-node-drawer-kicker { margin: 42px 0 9px; color: var(--lime); font: 8px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.ops-node-drawer h2 { margin: 0; font: 750 25px/1.1 var(--font-display); }
.ops-node-drawer > p { margin: 13px 0 24px; color: var(--muted-foreground); font-size: 11px; line-height: 1.55; }
.ops-node-drawer-section { padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.ops-node-drawer-section > span { color: var(--fg-meta); font: 8px var(--font-mono); letter-spacing: .12em; }
.ops-node-drawer ul { display: grid; gap: 8px; margin: 12px 0 24px; padding: 0; list-style: none; }
.ops-node-drawer li { padding: 9px 10px; border-left: 2px solid var(--lime); color: var(--muted-foreground); font-size: 9px; background: var(--lime-10); }
.ops-node-drawer > a { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); font: 9px var(--font-mono); text-decoration: none; }
.ops-node-drawer > a i { width: 12px; }
.ops-node-drawer-backdrop { position: fixed; z-index: 1190; inset: 0; pointer-events: none; opacity: 0; background: rgba(0,0,0,.55); transition: opacity .2s; }
.ops-node-drawer-backdrop.is-open { pointer-events: auto; opacity: 1; }

@media (max-width: 1100px) {
  .ops-kpis { grid-template-columns: repeat(2, 1fr); }
  .ops-recommend { grid-template-columns: 42px minmax(0,1fr); }
  .ops-recommend-link, .ops-recommend-safe { grid-column: 2; justify-self: start; }
  .ops-main-grid { grid-template-columns: 1fr; }
  .ops-side-stack { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ops-detail-grid { grid-template-columns: 1fr; }
  .ops-edge-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ops-head { align-items: flex-start; }
  .ops-snapshot { display: none; }
  .ops-kpis, .ops-side-stack, .ops-launch-grid, .ops-activity-list, .ops-detail-summary, .ops-artifact-grid, .ops-sop-meta, .ops-control-grid, .ops-quality-grid, .ops-trace-ledger { grid-template-columns: 1fr; }
  .ops-recommend { grid-template-columns: 1fr; padding-bottom: 28px; }
  .ops-recommend-mark { display: none; }
  .ops-recommend-link, .ops-recommend-safe { grid-column: 1; }
  .ops-recommend-reasoning { grid-template-columns: 1fr; }
  .ops-launch-flow { grid-template-columns: 1fr; }
  .ops-launch-flow > i { transform: rotate(90deg); }
  .ops-footnote { align-items: flex-start; flex-direction: column; }
  .ops-detail-head { align-items: flex-start; flex-direction: column; }
  .ops-detail-state { align-items: flex-start; }
  .ops-detail-actions { align-items: flex-start; flex-direction: column; }
  .ops-detail-actions span { margin-left: 0; }
  .ops-trace-flow, .ops-gate-chain { grid-template-columns: 1fr; }
  .ops-trace-flow > i, .ops-gate-chain > i { transform: rotate(90deg); }
  .ops-gate-row { grid-template-columns: 1fr 14px; }
  .ops-gate-row > span:nth-child(3) { grid-column: 1; }
  .ops-decision-actions { align-items: stretch; flex-direction: column; }
  .ops-graph-stats { display: none; }
  .ops-lenses { grid-template-columns: 1fr; }
}

.ck2-prod { list-style: none; padding: 0; margin: 0; }
.ck2-prod li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.ck2-prod li:last-child { border-bottom: 0; }
.ck2-prod-name { color: var(--foreground); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; }
.ck2-prod-val { font-family: var(--font-mono); font-size: 12px; color: var(--foreground); white-space: nowrap; }
/* lista COMPLETA de produtos (rola dentro do painel) — cada linha filtra a tela */
/* teto perto da altura típica do ranking ao lado, pra não sobrar meio painel vazio */
.ck2-prod--scroll { max-height: 520px; overflow-y: auto; padding-right: 4px; }
.ck2-prod-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
  text-decoration: none; }
.ck2-prod-link .ck2-prod-name { max-width: 100%; display: block; }
.ck2-prod-link:hover .ck2-prod-name { color: var(--lime); }
.ck2-prod-ativo { box-shadow: inset 2px 0 0 var(--lime); padding-left: 10px; }
.ck2-prod-ativo .ck2-prod-name { color: var(--lime); }
.ck2-prod-marca { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* filtro de marca/produto — pílula com chevron próprio (o reset global de form
   apaga a seta nativa do select ao redefinir `background`) */
.ck2-filtros--produto { margin: calc(-1 * var(--space-sm)) 0 var(--space-md); }
.ck2-filtros--produto .ck2-select {
  width: auto; max-width: 260px; border-radius: 999px; font-size: 12px;
  padding: 7px 30px 7px 14px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
.ck2-filtros--produto .ck2-select--wide { max-width: 340px; }
.ck2-filtros--produto .ck2-select option,
.ck2-filtros--produto .ck2-select optgroup { background: var(--surface-dark); color: var(--foreground); }
/* chip de item selecionado no filtro — clicar remove aquele item */
.ck2-chip-filtro {
  display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
  padding: 5px 10px; border-radius: 999px; text-decoration: none;
  background: var(--lime-10); border: 1px solid var(--lime-25); color: var(--foreground);
  font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck2-chip-filtro:hover { background: var(--lime); color: var(--primary-foreground); }
.ck2-chip-filtro i[data-lucide] { width: 12px; height: 12px; flex: none; }
.ck2-chip-filtro i[data-lucide="tag"], .ck2-chip-filtro i[data-lucide="package"] { color: var(--lime); }
.ck2-chip-filtro:hover i[data-lucide] { color: inherit; }
.ck2-filtro-clear { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--muted-foreground); text-decoration: none; }
.ck2-filtro-clear:hover { color: var(--lime); }
.ck2-filtro-clear i[data-lucide] { width: 13px; height: 13px; }

/* faixa de custos (breakdown do lucro) */
.ck2-costs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 767px) { .ck2-costs { grid-template-columns: repeat(2, 1fr); } }
.ck2-cost { padding: 12px 14px; background: var(--surface-hover); border: 1px solid var(--border-subtle); border-radius: var(--ck2-radius-sm); }
.ck2-cost-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.ck2-cost-val { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--foreground); margin-top: 3px; }
.ck2-cost--out .ck2-cost-val { color: var(--lime); }
/* flex-start, não center: em nota de 2-3 linhas o ícone ficava boiando no meio
   vertical do bloco em vez de ancorado na primeira linha. */
.ck2-note { font-size: 12px; color: var(--muted-foreground); margin: 12px 0 0; display: flex; align-items: flex-start; gap: 6px; }
.ck2-note i[data-lucide] { width: 14px; height: 14px; flex: none; }

/* ============================================================
   Disparos — timeline/calendário + linha do AGORA
   ============================================================ */
/* Dias que já passaram — levemente recuados, pra focar no que vem (sutil) */
.kanban-col.is-past { opacity: 0.82; }
.kanban-col.is-past:hover { opacity: 1; }

/* Régua de datas (timeline) + marcador AGORA */
.kanban-timeline {
  margin: 0 0 var(--space-md);
  padding: 26px var(--space-lg) 10px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--lime-40);
}
.ktl-track { position: relative; height: 30px; }
.ktl-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 21px;
  height: 2px; background: var(--border-strong);
}
.ktl-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em;
  color: var(--fg-meta);
}
.ktl-tick .ktl-label { white-space: nowrap; }
.ktl-tick .ktl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-meta); }
.ktl-tick:hover { color: var(--foreground); }
.ktl-tick:hover .ktl-dot { background: var(--foreground); transform: scale(1.3); }
.ktl-tick.is-today { color: var(--lime); font-weight: 700; }
.ktl-tick.is-today .ktl-dot { background: var(--lime); box-shadow: 0 0 0 3px var(--lime-20); }
.ktl-now { position: absolute; top: -4px; bottom: -6px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.ktl-now-flag {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--void); background: var(--lime); padding: 1px 6px; white-space: nowrap;
}
.ktl-now-stem {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: var(--lime); box-shadow: 0 0 8px var(--lime-50);
}

/* HOJE — coluna e header destacados em lime */
.kanban-col.is-today {
  background: var(--lime-5);
  border-color: var(--lime-40);
  box-shadow: inset 0 0 0 1px var(--lime-15);
}
.kanban-col-header.is-today {
  background: var(--lime) !important;
  color: var(--void) !important;
  border-color: var(--lime) !important;
  outline: none !important;
}
.kanban-col-header.is-today .kanban-col-date { color: rgba(0, 0, 0, 0.72); }
.hoje-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--void);
  color: var(--lime);
  padding: 1px 6px;
  vertical-align: middle;
}

/* Linha do AGORA — corre entre as mensagens já passadas e as que vêm */
.kanban-now-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kanban-now-line .now-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-20), 0 0 10px var(--lime-40);
  flex: 0 0 auto;
  animation: nowpulse 2s ease-in-out infinite;
}
.kanban-now-line .now-track {
  flex: 1 1 auto; height: 2px;
  background: linear-gradient(90deg, var(--lime), var(--lime-15));
}
@keyframes nowpulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--lime-20), 0 0 8px var(--lime-40); }
  50%      { box-shadow: 0 0 0 5px var(--lime-10), 0 0 16px var(--lime-50); }
}
/* Mensagens de hoje cujo horário já passou — levemente recuadas */
.msg-card.is-past-msg { opacity: 0.58; }

/* ════════════════════════════════════════════════════════════
   SOFT THEME LAYER — evolução do DS pra "soft cockpit" no app INTEIRO
   (aprovado pelo Nathan 15/07/2026). Camada aditiva no FIM do arquivo:
   vence os `border-radius: 0` espalhados por ordem de fonte (mesma
   especificidade, última regra ganha; `!important` onde o original usava).
   Reversível: é só apagar este bloco pra voltar ao brutalista radius-0.
   Ref: dashboard dark GROWTECH que o Nathan mandou. Ver .ck2 (home).
   ════════════════════════════════════════════════════════════ */
:root {
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 999px;
  /* Bootstrap herda tudo daqui → arredonda .card/.btn/.form-control/.modal/… */
  --bs-border-radius:     12px;
  --bs-border-radius-sm:  8px;
  --bs-border-radius-lg:  16px;
  --bs-border-radius-xl:  20px;
  --bs-border-radius-xxl: 24px;
  --bs-border-radius-pill: 999px;
}

/* Cards / painéis / containers grandes → lg */
.card, .stat-card, .launch-card, .copy-card, .cerebro-card, .skill-card, .ref-card,
.section-card, .modal-content, .kanban-col, .msg-card, .config-panel, .config-callout,
.cockpit-card, .copy-roteiro {
  border-radius: var(--radius-lg);
}

/* Médios / inputs / botões / tabs → md */
.btn, select, .form-control, .form-select, .md-content pre, .nav-tabs .nav-link,
.list-group, .alert, .dropdown-menu, .roteiro-cta, .launch-quick-link,
.t-titulo, .cell-select, .resp-select, .t-prazo {
  border-radius: var(--radius-md);
}
.tab-content, .list-group-item, .accordion-item, .accordion-button {
  border-radius: var(--radius-md) !important;
}

/* Pequenos → sm */
.md-content code, .disparo-semaforo, .dropdown-item, .form-check-input {
  border-radius: var(--radius-sm);
}

/* Pills / badges / chips / barras de progresso → full */
.badge, .copy-id, .launch-phase-badge, .launch-cart-open, .kanban-status, .status-chip,
.msg-voz-pill, .msg-status-badge, .tpainel-op-tag, .ev-badge, .progress, .progress-bar,
.launch-progress, .ds-bar-track, .cockpit-bar, .cockpit-bar-fill, .voz-dot, .nota-circle,
.topbar-search, .topbar-search input, .btn-group-sm > .btn {
  border-radius: var(--radius-full);
}
.form-switch .form-check-input { border-radius: var(--radius-full); }
.topbar-toggle, .topbar-quicklink { border-radius: 10px; }

/* Profundidade sutil + hover lift nos cards clicáveis (a "cara de produto") */
.card, .stat-card, .section-card, .kanban-col, .cockpit-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.launch-card, .copy-card, .cerebro-card, .skill-card, .ref-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.launch-card:hover, .copy-card:hover, .cerebro-card:hover, .skill-card:hover, .ref-card:hover {
  transform: translateY(-2px);
  border-color: var(--lime-25);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

/* ── Rail flutuante (sidebar como painel arredondado com respiro) ──
   Desktop: solta o rail das bordas, arredonda e eleva; o conteúdo abre
   espaço equivalente. Mobile (<992px): volta a flush full-height pro
   off-canvas deslizar limpo. */
.sidebar {
  top: 14px;
  left: 14px;
  height: calc(100vh - 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.40);
}
.app-main { margin-left: calc(var(--sidebar-w) + 28px); }
/* topbar deixa de colar na sidebar — vira header do conteúdo, sem borda cheia */
.topbar { background: transparent; border-bottom: 1px solid var(--border-subtle); }

@media (max-width: 991.98px) {
  .sidebar {
    top: 0; left: 0;
    height: 100vh;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }
  .app-main { margin-left: 0; }
}

/* ── Caça-Receita · dashboard de dinheiro (reusa a linguagem .ck2) ──
   Cor semântica: LIME = oportunidade parada na mesa · VERDE = dinheiro
   que voltou (recuperado/revendido) · AZUL = recompra. Nada de arco-íris. */
.ck2-tile--good {
  background: radial-gradient(120% 140% at 100% 0%, rgba(34, 197, 94, .10), transparent 55%), var(--surface-panel);
  border-color: rgba(34, 197, 94, .28);
}
.ck2-tile--good .ck2-chip { background: rgba(34, 197, 94, .16); color: var(--success); }
.ck2-tile--good .ck2-val  { color: var(--success); }
.ck2-chip--good { background: rgba(34, 197, 94, .14); color: var(--success); }
.ck2-chip--info { background: rgba(0, 153, 255, .14); color: var(--info); }

/* margin nos DOIS lados: a versão só-com-margin-top obrigava cada tela a compensar por
   fora, e o resultado eram 8 usos com 4 espaçamentos diferentes (18px, 20px, 24px e
   ZERO — colada, em /origens). Quem vem depois com margem própria maior continua
   mandando, porque margens de irmãos colapsam. */
.ck2-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: 14px 20px; margin: var(--space-md) 0;
  background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ck2-strip-item { display: flex; align-items: center; gap: 10px; }
.ck2-strip-sep { width: 1px; height: 26px; background: var(--border); }
.ck2-strip-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.ck2-strip-v { font-weight: 700; color: var(--foreground); font-family: var(--font-mono); }

/* Filtro de período do Caça-Receita.
   Regra desta barra: a ALTURA e as LARGURAS não podem depender do estado do filtro.
   Antes, a legenda só existia com filtro ativo e o valor do período ("tudo" × "01/07/2026
   a 05/08/2026") crescia — a cada clique num preset a barra mudava de tamanho e empurrava
   a tela inteira. Por isso: legenda sempre presente com min-height, período e campos com
   largura fixa, e preset ativo marcado (sem isso o clique parece não ter efeito). */
/* Superfície SECUNDÁRIA (--surface-hover + borda sutil + radius-md), não a de painel:
   com a pele de .ck2-panel a barra lia como "o primeiro card da tela" e o olho pousava
   no filtro em vez de em "Dinheiro parado". Ela é controle, não conteúdo.
   Margem nos DOIS lados: sem a de baixo encostava no bloco de KPIs (0px de respiro).
   Padding horizontal 18px = o das .ck2-tile logo abaixo, pros ícones alinharem na
   mesma vertical; 12px verticais mantêm a barra mais densa que um painel. */
.crf { background: var(--surface-hover); border: 1px solid var(--border-subtle);
       border-radius: var(--radius-md); padding: 12px 18px;
       margin: var(--space-md) 0; }
.crf--solto { margin-bottom: var(--space-lg); }   /* ritmo da página de achados (24px) */
.crf-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
/* label e campo formam UM par: a 16px de tudo, "De" flutuava longe do próprio input */
.crf-campo { display: flex; align-items: center; gap: var(--space-sm); }
/* o chip lime é o signifier dos tiles de KPI — num filtro ele grita conteúdo */
.crf .ck2-chip { width: 26px; height: 26px; background: var(--muted);
                 color: var(--muted-foreground); }
/* largura FIXA (não min-width): cabe "01/07/2026 a 05/08/2026" e "tudo" no mesmo espaço,
   senão o bloco cresce ao filtrar e empurra os campos e os presets pro lado */
.crf-per { flex: 0 0 272px; }
.crf-per > div { min-width: 0; }
/* o valor NÃO pode quebrar em 2 linhas: seria a barra mudando de altura outra vez */
.crf-per .ck2-strip-v { font-size: 13px; white-space: nowrap; overflow: hidden;
                        text-overflow: ellipsis; }
/* altura casada com .btn-sm (36px): .form-control-sm é sobrescrito pelo tema, não vale */
.crf-date { width: 148px; flex: 0 0 auto; height: 36px; padding: 8px 10px; font-size: 13px; }
/* max-width: sem ela, num container de 1400px a legenda vira linha de ~180 caracteres */
.crf-legend { margin-top: var(--space-sm); max-width: 78ch; font-size: 12px;
              line-height: 1.45; color: var(--muted-foreground); }
.crf-presets { display: flex; gap: 0; margin-left: auto; }
.crf-preset { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
              height: 36px; display: inline-flex; align-items: center; justify-content: center;
              padding: 0 14px; min-width: 56px; text-decoration: none;
              color: var(--muted-foreground); background: transparent;
              border: 1px solid var(--border); margin-left: -1px;
              transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
/* o resto da barra (botão, inputs) é arredondado pelo tema — sem isto o grupo fica quadrado
   no meio de elementos redondos e parece enxertado na tela */
.crf-preset:first-child { margin-left: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md); }
.crf-preset:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.crf-preset:hover { color: var(--foreground); border-color: var(--lime-25); z-index: 1; }
.crf-preset.is-active { color: var(--primary-foreground); background: var(--lime);
                        border-color: var(--lime); font-weight: 700; z-index: 2; }
/* a linha só cabe inteira acima de ~1150px — abaixo disso os presets iam pra segunda linha
   ainda colados na direita (margin-left:auto), pendurados sozinhos */
@media (max-width: 1200px) {
  .crf-presets { margin-left: 0; width: 100%; }
  .crf-preset { flex: 1; }
}

.cr2-experts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .cr2-experts { grid-template-columns: 1fr; } }
.cr2-expert { background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; transition: border-color .15s ease; }
.cr2-expert--on { border-color: var(--lime-25); box-shadow: inset 3px 0 0 var(--lime); }
.cr2-expert-name { font-weight: 700; font-size: 15px; color: var(--foreground); }
.cr2-expert-sub { font-size: 12px; color: var(--muted-foreground); }
.cr2-metrics { display: flex; gap: 26px; margin: 14px 0 2px; }
.cr2-metric-v { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cr2-metric-k { font-size: 11px; color: var(--muted-foreground); }
.cr2-back { font-size: 12px; color: var(--muted-foreground); margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.cr2-controls { margin-top: 14px; padding: 12px 14px; background: var(--surface-hover); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.cr2-actions { margin-top: 14px; display: flex; gap: 8px; }

/* Tile "chapado" (sem sparkline) — número puro com respiro embaixo */
.ck2-tile--flat { padding-bottom: 18px; }

/* Grafos (Cérebro/Agentes) enquadrados como painel arredondado */
.fluxo-wrap, .grafo-full-wrap { border-radius: var(--radius-lg); overflow: hidden; }

/* Donut grande (hero de painel) */
.ck2-donut--lg { width: 190px; height: 190px; }
.ck2-donut--lg::before { inset: 19px; }
.ck2-donut--lg .ck2-donut-pct { font-size: 38px; }

/* Funil de fluxo de dinheiro (Caça-Receita) */
.ck2-funnel { display: flex; flex-direction: column; gap: 16px; }
.ck2-fstage-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.ck2-fstage-label { display: flex; align-items: center; gap: 7px; color: var(--foreground); font-size: 13px; font-weight: 600; }
.ck2-fstage-label .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ck2-fstage-val { font-family: var(--font-mono); font-size: 13px; color: var(--foreground); white-space: nowrap; }
.ck2-fstage-val small { color: var(--muted-foreground); }
.ck2-ftrack { height: 26px; background: var(--surface-hover); border-radius: var(--radius-md); overflow: hidden; }
.ck2-fbar { height: 100%; border-radius: var(--radius-md); min-width: 3px; transition: width .3s ease; }

/* Grid de 6 KPIs (board de tarefas) + variantes de chip/estado */
.ck2-kpis--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .ck2-kpis--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .ck2-kpis--6 { grid-template-columns: repeat(2, 1fr); } }
.ck2-chip--danger { background: rgba(237, 70, 9, .14); color: var(--destructive); }
.ck2-chip--warn   { background: rgba(245, 158, 11, .14); color: var(--warning); }
.ck2-tile--alert  { border-color: rgba(237, 70, 9, .50); box-shadow: 0 0 0 1px rgba(237, 70, 9, .18); }
.ck2-tile--warn   { border-color: rgba(245, 158, 11, .50); box-shadow: 0 0 0 1px rgba(245, 158, 11, .18); }
/* Metadados do piloto em duas colunas — rótulo e valor param de se atropelar */
.eh-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: var(--text-base, 12px); }
.eh-meta dt { font-family: var(--font-mono); font-size: var(--text-xs, 10px); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-meta); align-self: center; }
.eh-meta dd { margin: 0; color: var(--foreground); overflow-wrap: anywhere; }
@media (max-width: 520px) { .eh-meta { grid-template-columns: 1fr; gap: 2px; } .eh-meta dd { margin-bottom: 6px; } }
/* Prévia do e-mail no hub do Email Hacker — mostra o que sai, não uma aproximação */
.eh-preview { margin-top: 14px; }
.eh-mail { margin-bottom: 16px; }
.eh-mail-linha { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface-overlay); border: 1px solid var(--border); border-bottom: 0; }
.eh-mail-toque { font-family: var(--font-mono); font-size: var(--text-xs, 10px); letter-spacing: .1em; color: var(--fg-meta); }
.eh-mail-assunto { font-weight: var(--fw-bold, 600); color: var(--foreground); }
.eh-mail-pre { color: var(--fg-meta); font-size: var(--text-base, 12px); }
.eh-mail-frame { display: block; width: 100%; height: 460px; border: 1px solid var(--border); background: #fff; }
@media (max-width: 640px) { .eh-mail-frame { height: 380px; } }
/* Tabela compacta do padrão ck2 (ledger de eventos do Email Hacker) */
.ck2-table-wrap { overflow-x: auto; max-height: 420px; border: 1px solid var(--border); }
.ck2-table { width: 100%; font-size: var(--text-base, 12px); border-collapse: collapse; font-family: var(--font-mono); }
.ck2-table thead th { background: var(--surface-overlay); color: var(--fg-meta); font-size: var(--text-xs, 10px); text-transform: uppercase; letter-spacing: .1em; padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; position: sticky; top: 0; }
.ck2-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.ck2-table tr:hover td { background: var(--surface-hover); }
.ck2-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.ck2-kpis--2 { grid-template-columns: repeat(2, 1fr); max-width: 660px; }
@media (max-width: 640px) { .ck2-kpis--3 { grid-template-columns: 1fr; } .ck2-kpis--2 { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────────
   CATÁLOGO DE PRODUTOS (/produtos) — tela de AGIR, não de analytics.
   Por isso NÃO tem fileira de KPI tile: só a faixa fina (.ck2-strip) e a lista
   como herói. Os chips de saúde aparecem SÓ quando há pendência — linha sem
   chip = produto saudável, que é o que faz a varredura visual ser instantânea
   em vez de um mar de ✓ verdes.
   ───────────────────────────────────────────────────────────────────────────── */
.prod-marca { margin-top: var(--space-xl, 28px); }
.prod-marca-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.prod-marca-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.prod-marca-nome { font-weight: var(--fw-bold, 700); font-size: 15px; color: var(--foreground); }
.prod-marca-meta {
  font-family: var(--font-mono); font-size: var(--text-xs, 10px);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground);
}
.prod-marca-num { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-bold, 700); color: var(--foreground); white-space: nowrap; }
.prod-marca-num small { color: var(--muted-foreground); font-weight: var(--fw-regular, 400); }

.prod-nome { font-weight: var(--fw-semibold, 600); color: var(--foreground); font-family: var(--font-sans); }
.prod-variantes { display: block; font-size: var(--text-xs, 10px); color: var(--muted-foreground); white-space: normal; max-width: 30ch; margin-top: 2px; }
.prod-num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-vazio { color: var(--muted-foreground); }
.prod-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.prod-cell-wrap { white-space: normal; }

/* Faixa fina: destaca o valor só quando ele representa uma pendência */
.ck2-strip-v--warn   { color: var(--warning); }
.ck2-strip-v--danger { color: var(--destructive); }

/* Tabela sem scroll interno: aqui cada marca tem poucas linhas e cortar em
   420px esconderia produto sem ganho nenhum. */
.ck2-table-wrap--auto { max-height: none; border-top: 0; }

/* Aviso de topo (produto que vendeu e ninguém cadastrou) */
.prod-aviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-top: var(--space-md);
  background: var(--destructive-bg); border: 1px solid var(--destructive-border);
  border-radius: var(--radius-lg);
}
.prod-aviso i[data-lucide] { width: 18px; height: 18px; color: var(--destructive); flex: none; margin-top: 1px; }
.prod-aviso-t { font-weight: var(--fw-bold, 700); color: var(--foreground); }
.prod-aviso-d { font-size: var(--text-base, 12px); color: var(--muted-foreground); margin-top: 2px; }

.prod-rodape { margin-top: var(--space-xl, 28px); padding-top: 14px; border-top: 1px solid var(--border-subtle); }
/* Cabeçalho numérico alinhado com a coluna (o seletor base da ck2-table força left) */
.ck2-table thead th.prod-num { text-align: right; }
/* Colunas de largura fixa: alinha as tabelas de TODAS as marcas no mesmo eixo */
.prod-tabela { table-layout: fixed; }
.prod-col-n { width: 110px; }
.prod-col-r { width: 170px; }
.prod-col-p { width: 340px; }
@media (max-width: 900px) { .prod-tabela { table-layout: auto; } }

/* Faixa de PAUSA GLOBAL de WhatsApp — aparece em toda tela enquanto a pausa dura.
   Usa o tom destrutivo porque é estado anômalo do sistema, não aviso informativo. */
.wpp-pausa {
  display: flex; align-items: flex-start; gap: 12px;
  margin: var(--space-md) var(--space-lg) 0;
  padding: 12px 16px;
  background: var(--destructive-bg); border: 1px solid var(--destructive-border);
  border-radius: var(--radius-lg); color: var(--foreground);
  font-size: var(--text-base, 12px);
}
.wpp-pausa i[data-lucide] { width: 18px; height: 18px; color: var(--destructive); flex: none; margin-top: 1px; }
.wpp-pausa strong { color: var(--destructive); }
.wpp-pausa-motivo { display: block; color: var(--muted-foreground); margin-top: 2px; }
.wpp-pausa-ok { display: block; color: var(--muted-foreground); margin-top: 2px; }

/* Botão de retomar dentro da faixa de pausa: encostado à direita, sem competir
   visualmente com o aviso (o aviso é o que importa; o botão é a saída). */
.wpp-pausa-acao { margin-left: auto; flex: none; }
.wpp-pausa-acao .btn-ghost i[data-lucide] { margin-top: 0; color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANÁLISE (/analise) — leitura do faturamento no TEMPO.
   Reaproveita as superfícies do cockpit (.ck2-*); aqui só o que é próprio da
   análise: barras mensais empilhadas, faixa de composição, linhas de margem e
   a régua diária. Zero radius, hairline, lime só no realce — DS da casa.
   ═════════════════════════════════════════════════════════════════════════ */

/* Cores de série. Lime NUNCA é uma série: é o realce (mês recorde, maior dia).
   Azul = a série principal, flare = a segunda. Cinza = resíduo/capital.
   --an-h = altura útil do plot; o eixo Y e o gráfico leem a MESMA variável,
   senão os rótulos do eixo saem do lugar em qualquer breakpoint. */
.an {
  --an-serie: var(--info); --an-serie2: var(--flare);
  --an-gutter: 46px;
}

/* ── ritmo vertical ──
   A home dá respiro aos painéis soltos com style inline (só tem um). Aqui a
   tela é uma PILHA de sete painéis: sem regra, cada bloco encosta no seguinte e
   a página inteira lê como um bloco só. */
.an > .ck2-panel, .an > .ck2-panels { margin-top: var(--space-lg); }
.an .ck2-panel { padding: var(--space-lg); }

/* Painéis lado a lado: o grid estica os dois à mesma altura, mas quem mandava na
   altura era a lista mais longa (77 produtos) — o card ao lado virava um vazio
   de 1.500px. Travando a LINHA do grid, as duas listas rolam dentro da mesma
   altura e os cards terminam juntos. */
/* `min-width: 0` porque item de grid tem mínimo automático = min-content: com
   tabela de células `nowrap` dentro, o painel empurrava a coluna e a página
   inteira ganhava rolagem horizontal no mobile. */
.an .ck2-panels > .ck2-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.an-listas { grid-template-rows: 560px; }
.an-listas .ck2-prod--scroll,
.an-listas .an-ranks { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.an-listas .an-ranks { padding-right: 4px; }
.an .ck2-prod--scroll::-webkit-scrollbar, .an .an-ranks::-webkit-scrollbar { width: 6px; }
.an .ck2-prod--scroll::-webkit-scrollbar-track, .an .an-ranks::-webkit-scrollbar-track { background: transparent; }
.an .ck2-prod--scroll::-webkit-scrollbar-thumb, .an .an-ranks::-webkit-scrollbar-thumb { background: var(--border-strong); }

/* O tile do cockpit tem padding-bottom 0 porque lá a sparkline sangra até a
   borda. Aqui não há sparkline: sem o fundo, a linha de apoio encostava no
   corte. `margin-top: auto` ainda alinha essa linha entre tiles desiguais. */
.an-kpis .ck2-tile { padding-bottom: var(--space-md); }
.an-kpis .ck2-sub { margin-top: auto; }

/* DS dentro da análise: marca de dado é retângulo (radius 0) e lime é realce,
   nunca série — as barras do ranking viram azul e só o líder fica lime.
   As SUPERFÍCIES (tile, painel, card de custo) mantêm o radius do cockpit. */
.an .ck2-legend-dot, .an .ck2-bar, .an .ck2-bar-fill { border-radius: 0; }
.an .ck2-bar-fill { background: var(--an-serie); }
.an-ranks > .ck2-rank:first-child .ck2-bar-fill { background: var(--lime); }

/* .ck2-note é flex com gap: cada <b> no meio da frase virava item do flex e
   abria 6px antes da vírgula ("entrada de capital , não venda"). Texto corrido
   é bloco; o ícone volta a ser inline.
   ⚠️ Estava escopado só em `.an` (tela /analise) e o mesmo bug voltou no rodapé do
   faturamento assim que a frase ganhou <b> — a nota virou 4 colunas. `.ck2-note--texto`
   é a versão declarada pra nota de frase inteira, em qualquer tela. */
.an .ck2-note, .ck2-note--texto { display: block; line-height: 1.5; }
.an .ck2-note [data-lucide], .ck2-note--texto [data-lucide] {
  display: inline-block; width: 14px; height: 14px;
  margin-right: 6px; vertical-align: -2px;
}

/* ── barras mensais ──
   gap 0 + padding DENTRO da trilha: as trilhas ficam encostadas, então a linha
   de base é contínua e vira eixo de verdade; o respiro entre barras vem do
   padding interno. O padding-top do container é o espaço que o rótulo ocupa
   quando a barra bate 100%. */
.an-bars {
  display: flex; align-items: stretch; gap: 0;
  height: 300px; padding-top: 22px;
}
.an-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.an-bar-track {
  position: relative; flex: 1; min-height: 0; padding: 0 7px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  border-bottom: 1px solid var(--border-strong);
}
/* O rótulo é ancorado no TOPO DA BARRA (`bottom` = altura da barra, vem inline
   do template), não no topo do gráfico: fixo lá em cima, um mês pequeno virava
   número boiando a 150px da própria barra. */
.an-bar-val {
  position: absolute; left: 0; right: 0; margin-bottom: 6px;
  font: 600 11px/1.2 var(--font-mono); letter-spacing: .02em;
  color: var(--foreground); text-align: center; white-space: nowrap;
}
/* Teto de largura: num recorte de 3-4 meses a coluna fica com 300px e a barra
   vira um painel de cor. Com teto ela continua lendo como barra em qualquer
   quantidade de meses. */
.an-bar-fill { background: var(--an-serie); min-height: 3px; width: 100%; max-width: 104px; }
.an-bar-fill.is-top { background: var(--lime); }
/* Cotas entram POR CIMA do operacional (primeiro filho da coluna flex-end):
   embaixo elas formavam uma faixa cinza contínua que o olho lia como eixo. */
.an-bar-fill--cotas { background: var(--muted-foreground); opacity: .5; }
.an-bar-x {
  font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground); text-align: center; padding-top: 10px;
}
.an-bar-x2 { font: 500 10px/1.2 var(--font-mono); color: var(--muted-foreground); text-align: center; opacity: .7; }

/* ── tabelas ── */
.an-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.an-tbl th, .an-tbl td {
  text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle);
  font: 400 13px/1.4 var(--font-mono); white-space: nowrap;
}
.an-tbl th:first-child, .an-tbl td:first-child { text-align: left; font-family: inherit; }
.an-tbl thead th {
  font: 600 10px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-foreground); border-bottom: 1px solid var(--border-strong);
}
.an-tbl tbody tr:hover td { background: var(--surface-hover, rgba(255,255,255,.03)); }
.an-tbl tfoot td { color: var(--lime); border-top: 1px solid var(--border-strong); border-bottom: none; }
.an-tbl-wrap { overflow-x: auto; }
/* 9 colunas numéricas não cabem em painel estreito: em vez de espremer o texto
   até quebrar, a tabela rola dentro do painel. */
.an-tbl--full { min-width: 760px; }
.an-up { color: var(--lime); }
.an-down { color: var(--flare, #ED4609); }
.an-mut { color: var(--muted-foreground); }
.an-note-row {
  text-align: left !important; font: 400 11px/1.4 var(--font-sans) !important;
  color: var(--muted-foreground); border-bottom: none !important; padding-top: 0 !important;
}

/* ── composição ── */
.an-comp { display: flex; flex-direction: column; gap: 10px; }
.an-comp-row { display: flex; align-items: center; gap: var(--space-sm); }
.an-comp-lbl {
  flex: none; width: 54px; font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground);
}
.an-comp-track { flex: 1; display: flex; height: 16px; min-width: 0; background: var(--muted); }
.an-seg { display: block; height: 100%; }
.an-seg--loja { background: var(--an-serie); }
.an-seg--exp  { background: var(--an-serie2); }
.an-seg--cot  { background: var(--muted-foreground); opacity: .55; }
.an-comp-pct {
  flex: none; width: 42px; text-align: right;
  font: 600 11px/1 var(--font-mono); color: var(--foreground);
}
.ck2-legend-dot.an-dot--loja { background: var(--an-serie); }
.ck2-legend-dot.an-dot--exp  { background: var(--an-serie2); }
.ck2-legend-dot.an-dot--cot  { background: var(--muted-foreground); }
/* .ck2-legend é COLUNA (serve o donut da home) e joga o valor pro canto com
   margin-left:auto. Aqui a legenda é uma linha sob o gráfico — sem resetar a
   direção, "49,3% → 35,4%" ia parar na outra ponta do painel. */
.an-legend {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-lg); margin-top: var(--space-md); width: 100%;
}
.an-legend .ck2-legend-row b { margin-left: 6px; }

/* ── plot com eixo Y ──
   O gutter fixo à esquerda é o que permite ler o valor de um ponto: o SVG usa
   preserveAspectRatio="none" (estica na largura), então rótulo dentro dele
   sairia distorcido. Eixo e gráfico compartilham --an-h pra ficarem alinhados. */
.an-plot { display: flex; gap: var(--space-sm); --an-h: 220px; }
.an-plot--dias { --an-h: 200px; --an-gutter: 68px; }
.an-plot-area { position: relative; flex: 1; min-width: 0; }
.an-yaxis { position: relative; flex: none; width: var(--an-gutter); height: var(--an-h); }
.an-yaxis span {
  position: absolute; right: 0; transform: translateY(-50%);
  font: 500 10px/1 var(--font-mono); color: var(--muted-foreground); white-space: nowrap;
}

/* ── linhas de margem ── */
.an-chart { height: var(--an-h); width: 100%; display: block; }
.an-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-line--margem { stroke: var(--an-serie); }
.an-line--repasse { stroke: var(--an-serie2); }
/* Marcadores em HTML, não <circle>: o SVG é esticado 1,7x na horizontal, então
   círculo virava elipse. Em overlay eles ficam quadrados de verdade e ainda
   carregam o title com o valor do ponto. */
.an-pts { position: absolute; inset: 0 0 auto 0; height: var(--an-h); }
.an-pt {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border: 2px solid var(--surface-panel); display: block;
}
.an-pt--margem { background: var(--an-serie); }
.an-pt--repasse { background: var(--an-serie2); }
.an-chart-x { display: flex; justify-content: space-between; }
.an-chart-x span { flex: 1; text-align: center; }

/* ── régua diária ── */
.an-dias {
  display: flex; align-items: flex-end; gap: 1px; height: var(--an-h);
  border-bottom: 1px solid var(--border-strong);
}
.an-dia { flex: 1 1 0; min-width: 1px; background: var(--an-serie); display: block; }
.an-dia.is-top { background: var(--lime); }
/* São 5 cards, não 4: no grid do cockpit o quinto caía sozinho numa linha
   inteira, com metade do painel vazia ao lado. Quando não cabem 5, o último
   ocupa a sobra da linha em vez de virar órfão. */
.an-ritmo {
  grid-template-columns: repeat(5, 1fr);
  margin: var(--space-md) 0 var(--space-lg);
}
.an-ritmo .ck2-cost { padding: var(--space-md); }
@media (max-width: 1199px) {
  .an-ritmo { grid-template-columns: repeat(3, 1fr); }
  .an-ritmo > :last-child { grid-column: span 2; }
}
@media (max-width: 991px) {
  /* painéis empilhados: sem irmão pra acompanhar, cada lista tem teto próprio */
  .an-listas { grid-template-rows: none; }
  .an-listas .ck2-prod--scroll, .an-listas .an-ranks { max-height: 420px; }
}
@media (max-width: 719px) {
  .an-ritmo { grid-template-columns: repeat(2, 1fr); }
  .an .ck2-panel { padding: var(--space-md); }
  .an > .ck2-panel, .an > .ck2-panels { margin-top: var(--space-md); }
  .an-bars { height: 220px; }
  .an-bar-track { padding: 0 3px; }
  .an-bar-val { font-size: 9px; }
  .an-comp-lbl { width: 44px; }
  .an-plot { --an-h: 150px; --an-gutter: 34px; }
  .an-plot--dias { --an-h: 140px; --an-gutter: 52px; }
}
@media (max-width: 1279px) and (min-width: 720px) {
  .an-bar-val { font-size: 10px; }
}

/* Linha de MoM sem número (base ínfima): recua pro segundo plano — é contexto,
   não resultado. Sem isso o leitor procura o percentual que a gente escondeu. */
.an-row-ruido td { color: var(--muted-foreground); font-style: italic; }
.an-row-ruido td:first-child { font-style: normal; }

/* ── resumo: UM número grande + barra de pipeline ──
   Substitui 11 tiles de peso igual, 7 deles zerados, que comiam 130px da faixa
   mais nobre da tela pra não informar nada. */

/* ── barra de comando, sticky ── */

/* ── lista densa ── */

/* Quem largou no meio: faixa na borda em vez de pintar a linha inteira. O fundo
   âmbar em toda a linha fazia um incompleto de score 0 gritar mais alto que um
   qualificado — e com 20% de abandono a tela virava zebra. */

.c-med    { width: 62px; }
.c-dec    { width: 52px; }
.c-nome   { width: auto; min-width: 170px; }
.c-seg    { width: 94px; text-align: right; }
.c-eng    { width: 84px; }
.c-nicho  { width: 150px; }
/* 3 glifos de 19px + margem + padding da célula. Em 82px o terceiro era cortado
   em reticências pelo text-overflow herdado da linha. */
.c-sinais { width: 96px; text-overflow: clip; }
.c-status { width: 118px; }
.c-data   { width: 62px; text-align: right; }

/* Nota MEDIDA — o número verificado. Ganha o peso visual porque é o que decide. */

/* Score DECLARADO — deliberadamente discreto. É autodeclaração, não medição:
   a auditoria de 04/08 achou ρ=0,24 de correlação com a realidade medida. */

/* Abaixo do corte de 10 mil combinado com o João: precisa ser visto na linha,
   não deduzido depois de abrir o candidato. */

/* Sinais: comprime 4 linhas empilhadas de "perfil de gravação" (68px de altura)
   em 82px de largura. Três quadrados lime = pronto pra gravar, legível de
   relance sem ler uma palavra. */

/* ── painel de detalhe ── */

/* Ação que encerra a tarefa: é o único lime cheio do painel, de propósito. */

/* Histórico com carimbo: o campo antigo era sobrescrito a cada edição e o
   registro da conversa anterior se perdia. */

/* A ação destrutiva sai da linha (onde era o único botão) e vem pro fim do
   painel, discreta. */

/* Abaixo de 1180px o painel vira gaveta sobreposta: encolher a lista junto
   destruiria a densidade, que é o ponto da tela. */
@media (max-width: 1180px) {
  .rc-app { grid-template-columns: 1fr; }
  .rc-painel { position: fixed; right: 0; top: 0; width: min(400px, 92vw);
    z-index: 40; border-left: 1px solid var(--border-strong); }
  .rc-cfg-form { grid-template-columns: 1fr; }
}

/* ============================================================
   Análise dos perfis — captação de criadores
   Visual antes de tabela: a decisão aqui é "com quem eu falo primeiro",
   e isso se lê num pódio e numa barra, não numa planilha.
   ============================================================ */
.an2 { max-width: 1180px; }
.an2 h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.an2 h2 small { display: block; font-size: 13px; font-weight: 400; color: var(--muted-foreground);
  letter-spacing: 0; margin-top: 6px; }

/* A leitura vem antes dos números: número sem interpretação vira planilha. */
.an2-tese { border: 1px solid var(--lime-25); background: var(--lime-5);
  padding: 28px 32px; margin: 28px 0; }
.an2-tese h2 { color: var(--lime); }
.an2-tese p { color: var(--fg-muted); font-size: 16px; line-height: 1.6; margin-top: 14px; max-width: 900px; }
.an2-tese strong { color: var(--foreground); }

.an2-podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.an2-card { position: relative; background: var(--card); border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong); padding: 24px; }
.an2-card.is-forte   { border-top-color: var(--lime); }
.an2-card.is-bom     { border-top-color: var(--info); }
.an2-card.is-atencao { border-top-color: var(--warning); }
.an2-card.is-alerta  { border-top-color: var(--destructive); }
.an2-pos { position: absolute; top: 18px; right: 22px; font-size: 28px; font-weight: 800;
  color: var(--border-strong); }
.an2-card h3 { font-size: 19px; font-weight: 700; }
.an2-at { display: inline-block; color: var(--lime); text-decoration: none; font-size: 13px; margin-top: 4px; }
.an2-nicho { font-size: 13px; color: var(--muted-foreground); margin-top: 6px; }
.an2-nota { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 14px; }
.an2-nota span { font-size: 40px; font-weight: 800; line-height: 1; }
.an2-nota small { font-size: 12px; color: var(--muted-foreground); }
.an2-mini { list-style: none; border-top: 1px solid var(--border); padding-top: 12px; }
.an2-mini li { font-size: 13px; color: var(--muted-foreground); padding: 3px 0; }
.an2-mini b { color: var(--foreground); }
.an2-leitura { font-size: 13px; line-height: 1.5; color: var(--fg-muted); margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border); }

.an2-bloco { margin-bottom: 44px; }
.an2-linha { display: grid; grid-template-columns: 190px 1fr 68px; align-items: center;
  gap: 14px; padding: 7px 0; }
.an2-nome { font-size: 14px; }
.an2-nome span { display: block; font-size: 11px; color: var(--muted-foreground); }
.an2-trilho { height: 22px; background: var(--surface-panel); border: 1px solid var(--border); }
.an2-barra { height: 100%; background: var(--border-strong); transition: width .3s; }
.an2-barra.is-forte   { background: var(--lime); }
.an2-barra.is-bom     { background: var(--info); }
.an2-barra.is-atencao { background: var(--warning); }
.an2-barra.is-alerta  { background: var(--destructive); }
.an2-valor { font-size: 14px; font-weight: 700; text-align: right; }
.an2-nota-rodape { font-size: 13px; color: var(--muted-foreground); margin-top: 16px;
  max-width: 820px; line-height: 1.55; }

.an2-rank { display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border-strong); font-weight: 800; font-size: 15px; }
.an2-rank.is-forte   { border-color: var(--lime); color: var(--lime); background: var(--lime-8); }
.an2-rank.is-bom     { border-color: var(--info); color: var(--info); }
.an2-rank.is-atencao { border-color: var(--warning); color: var(--warning); }
.an2-rank.is-alerta  { border-color: var(--destructive); color: var(--destructive); }
.an2-eng.is-forte   { color: var(--lime); }
.an2-eng.is-bom     { color: var(--info); }
.an2-eng.is-atencao { color: var(--warning); }
.an2-eng.is-alerta  { color: var(--destructive); }
.an2-tabela { min-width: 1050px; }

.an2-acoes { border: 1px solid var(--border); background: var(--card); padding: 28px 32px; }
.an2-acoes ol { margin: 18px 0 0 20px; }
.an2-acoes li { font-size: 15px; line-height: 1.6; color: var(--fg-muted); padding: 9px 0; }
.an2-acoes strong { color: var(--foreground); }

@media (max-width: 900px) {
  .an2-podio { grid-template-columns: 1fr; }
  .an2-linha { grid-template-columns: 130px 1fr 60px; }
}

/* ── Email Hacker · conteúdo por marca ─────────────────────────────────────────
   A tela mostrava só canal (remetente, teto, reply-to). Este bloco põe o CONTEÚDO
   como herói: marca → evento → os toques com assunto e contagem. Sem tile, sem
   donut — a régua da casa reserva dashboard pras telas de analytics.
   ⚠️ A 1ª versão usava --ck2-linha/--ck2-superficie, que NÃO EXISTEM no DS: caíam
   no fallback rgba chumbado. E usava radius 0, que o Soft Theme aposentou em 15/07.
   Corrigido pra tokens reais (--border, --card, --radius-*). */
.eh-marcas { display: flex; flex-direction: column; gap: 18px; }
.eh-marca { border: 1px solid var(--border); border-radius: var(--radius-lg);
            background: var(--card); overflow: hidden; }
.eh-marca-head { display: flex; align-items: flex-start; justify-content: space-between;
                 gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.eh-marca-nome { font-size: 1.05rem; font-weight: var(--fw-bold, 600); letter-spacing: .01em;
                 color: var(--foreground); }
.eh-marca-sub { font-size: var(--text-base, 12px); color: var(--fg-meta); margin-top: 3px;
                display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eh-marca-sub i { width: 13px; height: 13px; }
.eh-marca-tot { text-align: right; white-space: nowrap; }
.eh-marca-tot strong { display: block; font-size: 1.3rem; line-height: 1;
                       color: var(--foreground); }
.eh-marca-tot span { font-size: var(--text-xs, 10px); color: var(--fg-meta); }

.eh-evento { padding: 12px 16px 14px; border-bottom: 1px solid var(--border-subtle); }
.eh-evento:last-child { border-bottom: 0; }
/* Evento desligado fica DISCRETO, não apagado: continua legível porque "está
   desligado" é justamente uma das respostas que a tela precisa dar. */
.eh-evento--off { background: var(--surface-alt); }
.eh-evento-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
                  flex-wrap: wrap; }
.eh-evento-nome { font-weight: var(--fw-bold, 600); font-size: .92rem; color: var(--foreground); }
.eh-evento-tot { font-size: var(--text-base, 12px); color: var(--fg-meta); margin-left: auto; }

.eh-pecas { width: 100%; border-collapse: collapse; font-size: var(--text-base, 12px); }
.eh-pecas th { text-align: left; font-weight: 500; font-size: var(--text-xs, 10px);
               text-transform: uppercase; letter-spacing: .06em;
               color: var(--fg-meta); padding: 4px 8px 6px 0; }
.eh-pecas td { padding: 6px 8px 6px 0; vertical-align: middle;
               border-top: 1px solid var(--border-subtle); color: var(--foreground); }
.eh-pecas .eh-num { text-align: right; width: 74px; font-variant-numeric: tabular-nums; }

/* ⚠️ Toque SEM COPY é um BURACO — é a pergunta "onde falta?" que o Nathan precisa
   responder. A 1ª versão punha opacity:.5 nele: estilizava o alerta pra sumir,
   exatamente ao contrário do que ele serve. Agora destaca. */
.eh-sem-copy td { background: var(--warning-bg); }
.eh-sem-copy em { font-style: normal; color: var(--warning); font-weight: 500; }

.eh-prods { margin-top: 8px; font-size: var(--text-base, 12px); color: var(--fg-meta);
            display: flex; gap: 12px; flex-wrap: wrap; }
.eh-prods span { white-space: nowrap; }

/* Tabela larga rola dentro do próprio bloco — a página nunca rola na horizontal. */
@media (max-width: 720px) {
  .eh-evento { overflow-x: auto; }
  .eh-marca-head { flex-direction: column; }
  .eh-marca-tot { text-align: left; }
}

/* ── Email Hacker · a LISTA do hub (uma linha por marca) ───────────────────────
   Substitui os cards empilhados: card obriga a varrer a página inteira pra comparar
   duas marcas, linha deixa alinhado o que importa (eventos, hoje, estado). */
.eh-lista { border: 1px solid var(--border); border-radius: var(--radius-lg);
            background: var(--card); overflow: hidden; }
.eh-lista-head, .eh-linha {
  /* 7 colunas desde 27/08 (entrega e clique por marca entraram na tabela). Eram 5, e
     acrescentar coluna no HTML sem mexer aqui fazia o cabeçalho quebrar em duas linhas
     e o chip de estado cair pra baixo do nome da marca. */
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(170px, 1.4fr) 92px 72px 62px 106px 24px;
  gap: 12px; align-items: center; padding: 12px 16px;
}
/* A linha da tabela deixou de ser <a> (o caret precisa de alvo próprio), então o
   hover tem que vir da própria linha. */
.eh-linha--exp:hover { background: var(--surface-hover); }
.eh-linha-marca a { color: inherit; text-decoration: none; }
.eh-linha-marca a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
  /* Abaixo disso as 7 colunas espremem o nome da marca. Some o que é comparação
     (entrega/clique por marca) e fica o que é operação — a saúde agregada continua
     no painel acima. */
  .eh-lista-head > :nth-child(4), .eh-lista-head > :nth-child(5),
  .eh-linha > :nth-child(4), .eh-linha > :nth-child(5) { display: none; }
  .eh-lista-head, .eh-linha {
    grid-template-columns: minmax(180px, 2fr) minmax(150px, 1.3fr) 92px 106px 24px;
  }
}
.eh-lista-head { background: var(--surface-alt); border-bottom: 1px solid var(--border);
                 font-family: var(--font-mono); font-size: var(--text-xs, 10px);
                 text-transform: uppercase; letter-spacing: .08em; color: var(--fg-meta); }
.eh-linha { border-bottom: 1px solid var(--border-subtle); text-decoration: none;
            color: inherit; transition: background .12s ease; }
.eh-linha:last-child { border-bottom: 0; }
a.eh-linha:hover { background: var(--surface-hover); text-decoration: none; color: inherit; }
/* Escrito mas fora do canal: presente na lista, sem sugerir que é clicável. */
.eh-linha--espera { background: var(--surface-alt); cursor: default; }

.eh-linha-marca { font-weight: var(--fw-bold, 600); color: var(--foreground); }
.eh-linha-sub { font-size: var(--text-base, 12px); color: var(--fg-meta); margin-top: 2px; }
/* O buraco ("toque sem copy") sobe pro nível da marca: é a pergunta "onde falta?"
   respondida sem precisar abrir nada. Por isso NÃO é discreto. */
.eh-linha-alerta { display: flex; align-items: center; gap: 5px; margin-top: 4px;
                   font-size: var(--text-base, 12px); color: var(--warning);
                   font-weight: var(--fw-bold, 600); }
.eh-linha-fora { display: flex; align-items: center; gap: 5px; margin-top: 3px;
                 font-size: var(--text-base, 12px); color: var(--fg-meta); }
.eh-linha-alerta i, .eh-linha-fora i, .eh-linha-sub i { width: 13px; height: 13px; }

.eh-linha-eventos { display: flex; flex-wrap: wrap; gap: 6px; }
.eh-ev { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
         border: 1px solid var(--border); border-radius: var(--radius-full);
         font-size: var(--text-xs, 10px); letter-spacing: .04em; color: var(--foreground);
         white-space: nowrap; }
.eh-ev i { width: 12px; height: 12px; }
/* Evento desligado continua LEGÍVEL — "está desligado" é uma das respostas da tela,
   não ruído a esconder. Muda a cor, não a opacidade. */
.eh-ev--off { color: var(--fg-meta); background: var(--surface-alt); }

.eh-linha-hoje { font-variant-numeric: tabular-nums; color: var(--foreground);
                 font-size: var(--text-base, 12px); }
.eh-linha-ir { color: var(--fg-meta); display: flex; justify-content: flex-end; }
.eh-linha-ir i { width: 16px; height: 16px; }

/* Rodapé de saúde e blocos "ler" (prévia sob demanda). */
.eh-saude { display: flex; align-items: center; justify-content: space-between; gap: 16px;
            flex-wrap: wrap; margin-top: 18px; padding: 12px 16px;
            border: 1px solid var(--border); border-radius: var(--radius-lg);
            background: var(--surface-alt); font-size: var(--text-base, 12px);
            color: var(--foreground); }
.eh-ler { margin-top: 10px; }
.eh-ler > summary { cursor: pointer; display: flex; align-items: center; gap: 6px;
                    font-size: var(--text-base, 12px); color: var(--fg-meta);
                    padding: 6px 0; }
.eh-ler > summary i { width: 14px; height: 14px; }
.eh-ler[open] > summary { color: var(--foreground); }

@media (max-width: 860px) {
  .eh-lista-head { display: none; }
  .eh-linha { grid-template-columns: 1fr auto; row-gap: 8px; }
  .eh-linha-eventos { grid-column: 1 / -1; }
  .eh-linha-ir { display: none; }
}

/* ============================================================
   ÁRVORE DO CÉREBRO (/cerebro/arvore)
   Dendrograma radial em SVG — anel por profundidade, rótulo de
   departamento em caixa alta espaçada, expansão por clique.
   ============================================================ */
.arv-page { margin: calc(var(--space-md) * -1); }

.arv-stage {
  position: relative;
  height: calc(100vh - 128px);
  min-height: 560px;
  background:
    radial-gradient(circle at 50% 48%, var(--lime-2), transparent 58%),
    var(--background);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  user-select: none;
}
.arv-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.arv-svg.is-drag { cursor: grabbing; }

/* arestas */
.arv-l { fill: none; stroke: var(--fg-meta); stroke-width: .9; }

/* nós */
.arv-n { cursor: pointer; }
.arv-dotn { fill: var(--fg-meta); opacity: .55; transition: opacity .18s, fill .18s; }
.arv-n:hover .arv-dotn { opacity: 1; fill: var(--lime); }
.arv-n.is-branch:not(.is-open) .arv-dotn {
  fill: none; stroke: var(--fg-meta); stroke-width: 1.4; opacity: .75;
}
.arv-n.is-branch.is-open .arv-dotn { fill: var(--lime); opacity: .9; }

.arv-t, .arv-s {
  fill: var(--fg-meta);
  dominant-baseline: middle;
  font-family: Geist, system-ui, sans-serif;
  transition: fill .18s;
}
.arv-n:hover .arv-t { fill: var(--foreground); }

.arv-n--d0 .arv-t { font-size: 15px; letter-spacing: .42em; fill: var(--foreground); }
.arv-n--d0 .arv-s { font-size: 8px;  letter-spacing: .2em; opacity: .55; }
.arv-n--d1 .arv-t { font-size: 12.5px; letter-spacing: .34em; }
.arv-n--d1 .arv-s { font-size: 7.5px; letter-spacing: .16em; opacity: .5; }
.arv-n--d2 .arv-t { font-size: 9px;  letter-spacing: .2em; }
.arv-n--d2 .arv-s { font-size: 6.5px; letter-spacing: .1em; opacity: .45; }
.arv-n--d3 .arv-t { font-size: 8px;  letter-spacing: .01em; }

/* longe: some o texto miúdo pra teia não virar sopa */
.arv-svg.is-far .arv-n--d3 .arv-t,
.arv-svg.is-far .arv-n--d2 .arv-s { opacity: 0; }

/* cabeçalho sobreposto */
.arv-head {
  position: absolute; top: var(--space-lg); left: var(--space-lg);
  max-width: 30ch; pointer-events: none; z-index: 2;
}
.arv-kicker {
  display: block; font-size: .625rem; letter-spacing: .28em;
  color: var(--muted-foreground); margin-bottom: var(--space-sm);
}
.arv-title {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.08;
  color: var(--foreground); margin: 0 0 var(--space-sm);
}
.arv-lead { font-size: .8125rem; color: var(--muted-foreground); margin: 0; }

/* controles flutuantes */
.arv-modes {
  position: absolute; right: var(--space-lg); bottom: var(--space-lg);
  display: flex; gap: 1px; background: var(--border-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; z-index: 3;
}
.arv-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 0; background: var(--surface-panel);
  color: var(--muted-foreground); font-size: .625rem; letter-spacing: .18em;
  cursor: pointer; transition: color .15s, background .15s;
}
.arv-mode i { width: 13px; height: 13px; }
.arv-mode:hover { color: var(--foreground); background: var(--surface-hover); }
.arv-mode.is-on { background: var(--lime-10); color: var(--lime); }

.arv-zoom {
  position: absolute; right: var(--space-lg); bottom: calc(var(--space-lg) + 46px);
  display: flex; flex-direction: column; gap: 1px; background: var(--border-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; z-index: 3;
}
.arv-zoom button {
  width: 32px; height: 30px; border: 0; background: var(--surface-panel);
  color: var(--muted-foreground); cursor: pointer; display: grid; place-items: center;
}
.arv-zoom button:hover { color: var(--lime); background: var(--surface-hover); }
.arv-zoom i { width: 13px; height: 13px; }

/* diretório lateral */
.arv-dir {
  position: absolute; top: var(--space-lg); right: 0;
  display: flex; align-items: flex-start;
  transform: translateX(calc(100% - 132px)); transition: transform .3s ease;
  z-index: 3;
}
.arv-dir.is-open { transform: translateX(0); }
.arv-dir-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 9px 13px; border: 1px solid var(--border); border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--surface-panel); color: var(--muted-foreground);
  font-size: .625rem; letter-spacing: .18em; cursor: pointer;
}
.arv-dir-tab:hover { color: var(--lime); }
.arv-dir-tab i { width: 13px; height: 13px; }
.arv-dir-body {
  width: 266px; max-height: 66vh; overflow-y: auto;
  background: var(--surface-panel); border: 1px solid var(--border);
  border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: var(--space-sm);
}
.arv-busca {
  display: flex; align-items: center; gap: 7px; margin-bottom: var(--space-sm);
  padding: 7px 9px; background: var(--surface-hover);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.arv-busca i { width: 13px; height: 13px; color: var(--muted-foreground); flex: 0 0 13px; }
.arv-busca input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--foreground); font-size: .75rem; outline: none;
}
.arv-dir-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border: 0; background: transparent; text-align: left;
  color: var(--foreground); border-radius: var(--radius-sm); cursor: pointer;
}
.arv-dir-item:hover { background: var(--surface-hover); }
.arv-dir-item strong {
  display: block; font-size: .6875rem; font-weight: 500; letter-spacing: .12em;
}
.arv-dir-item small {
  display: block; font-size: .625rem; color: var(--muted-foreground);
  letter-spacing: .02em;
}
.arv-dir-vazio {
  font-size: .6875rem; color: var(--muted-foreground);
  padding: var(--space-sm); margin: 0;
}
.arv-dot {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 999px;
  background: var(--dot, var(--muted-foreground));
}

.arv-foot {
  position: absolute; left: var(--space-lg); bottom: var(--space-lg);
  display: flex; gap: var(--space-md); align-items: center;
  font-size: .625rem; letter-spacing: .08em; color: var(--muted-foreground);
  pointer-events: none; z-index: 2;
}
.arv-foot i { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
#arvHint { color: var(--fg-muted); }

@media (max-width: 991px) {
  .arv-stage { height: calc(100vh - 168px); }
  .arv-head { max-width: 20ch; }
  .arv-title { font-size: 1.3rem; }
  .arv-dir { transform: translateX(calc(100% - 118px)); }
}

/* No radial o rótulo de raiz/departamento é CENTRADO no nó — então o ponto
   cairia dentro da palavra. Desce ele pra baixo do subtítulo, virando o
   indicador de aberto/fechado do ramo. No modo linha o rótulo sai pro lado,
   e o ponto volta pro lugar natural. */
.arv-stage:not(.modo-linha) .arv-n--d0 .arv-dotn { transform: translateY(32px); }
.arv-stage:not(.modo-linha) .arv-n--d1 .arv-dotn { transform: translateY(27px); }

/* ── Mapa da Operação (/agentes/operacao) ─────────────────────────────── */
.arv-legenda {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md); font-size: .625rem; letter-spacing: .08em;
  color: var(--muted-foreground);
}
.arv-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.arv-dir-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm);
  padding: var(--space-sm) 0 var(--space-md);
  border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-sm);
}
.arv-dir-stats strong { display: block; font-size: 1.25rem; color: var(--foreground); line-height: 1.1; }
.arv-dir-stats small { font-size: .5625rem; letter-spacing: .14em; color: var(--muted-foreground); }

.arv-painel {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-md);
  margin: var(--space-md) 0 0;
}
@media (max-width: 991px) { .arv-painel { grid-template-columns: 1fr; } }

.arv-card {
  background: var(--surface-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-md);
}
.arv-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); margin-bottom: var(--space-md);
}
.arv-card-head h2 {
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--foreground); margin: 0; display: flex; align-items: center; gap: 7px;
}
.arv-card-head i { width: 14px; height: 14px; }
.arv-card-nota { font-size: .625rem; color: var(--muted-foreground); letter-spacing: .04em; }

.arv-fila { list-style: none; margin: 0; padding: 0; counter-reset: fila; }
.arv-fila li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
}
.arv-fila li:last-child { border-bottom: 0; }
.arv-fila-marca {
  width: 6px; height: 6px; margin-top: 6px; flex: 0 0 6px; border-radius: 999px;
  background: var(--muted-foreground);
}
.arv-fila-marca.is-trava { background: var(--destructive); }
.arv-fila strong { display: block; font-size: .75rem; font-weight: 450; color: var(--foreground); }
.arv-fila small { font-size: .625rem; color: var(--muted-foreground); }

.arv-aviso {
  display: flex; gap: 8px; align-items: flex-start; margin: var(--space-md) 0 0;
  padding: var(--space-sm); background: var(--surface-hover);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground);
}
.arv-aviso i { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; color: var(--warning); }
.arv-aviso code { font-size: .625rem; color: var(--foreground); }

.arv-buracos { list-style: none; margin: 0; padding: 0; }
.arv-buracos li {
  padding: 9px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: .75rem; color: var(--foreground);
}
.arv-buracos li:last-child { border-bottom: 0; }
.arv-buracos strong { color: var(--warning); font-size: .875rem; }
.arv-buracos small {
  display: block; margin-top: 3px; font-size: .625rem;
  color: var(--muted-foreground); line-height: 1.45; word-break: break-word;
}

/* no mapa da operação o palco não é a tela toda — divide com os cards */
.arv-page:has(.arv-painel) .arv-stage { height: calc(100vh - 268px); min-height: 540px; }

/* Visão geral: job é PONTO, não texto. 189 rótulos simultâneos viram novelo —
   o nome aparece no hover e quando se aproxima o zoom. (É o que o SkillTree faz:
   na visão geral só o departamento tem nome.) */
.arv-stage[data-folha-muda="1"] .arv-n--d2 .arv-lab { opacity: 0; transition: opacity .15s; }
.arv-stage[data-folha-muda="1"] .arv-n--d2:hover .arv-lab,
.arv-stage[data-folha-muda="1"] .arv-svg.is-near .arv-n--d2 .arv-lab { opacity: 1; }
.arv-stage[data-folha-muda="1"] .arv-n--d2:hover .arv-dotn { r: 3.4; }

/* ── Tela do grupo (/agentes/operacao/<i>) — árvore de tronco ─────────── */
.grp-stage { height: calc(100vh - 128px); min-height: 560px; }

/* nome do grupo gigante e fantasma no fundo */
.grp-fantasma {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(3rem, 9vw, 8rem); font-weight: 300; letter-spacing: .12em;
  color: var(--foreground); opacity: .035; white-space: nowrap;
  pointer-events: none; z-index: 0; text-transform: uppercase;
}

.grp-volta { position: absolute; top: var(--space-lg); left: var(--space-lg); z-index: 3; }
.grp-volta a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: .625rem; letter-spacing: .18em; color: var(--muted-foreground);
}
.grp-volta a:hover { color: var(--lime); }
.grp-volta i { width: 13px; height: 13px; }

.grp-stats {
  position: absolute; top: var(--space-lg); right: var(--space-lg); z-index: 3;
  display: flex; gap: var(--space-md); font-size: .625rem;
  letter-spacing: .1em; color: var(--muted-foreground);
}
.grp-stats strong { color: var(--foreground); font-size: .8125rem; }

/* vizinhos girados 90° nas bordas — carrossel entre grupos */
.grp-viz {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; align-items: center; gap: var(--space-sm);
  text-decoration: none; color: var(--muted-foreground); opacity: .55;
  transition: opacity .18s, color .18s;
}
.grp-viz:hover { opacity: 1; color: var(--lime); }
.grp-viz span {
  writing-mode: vertical-rl; font-size: .625rem; letter-spacing: .28em;
  text-transform: uppercase;
}
.grp-viz i { width: 15px; height: 15px; }
.grp-viz--esq { left: var(--space-md); }
.grp-viz--dir { right: var(--space-md); flex-direction: row-reverse; }
.grp-viz--dir span { transform: rotate(180deg); }

/* chip: círculo com ícone dentro */
.arv-chip { stroke-width: 1.2; }
.arv-n:hover .arv-chip { stroke-width: 2; }
.arv-ic { fill: none; stroke: var(--fg-muted); stroke-width: 2;
          stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.arv-n:hover .arv-ic { stroke: var(--foreground); }
.arv-comece {
  fill: var(--destructive); font-size: 7px; letter-spacing: .2em;
  font-family: Geist, system-ui, sans-serif;
}
.grp-stage .arv-n--d2 .arv-t { font-size: 7.5px; letter-spacing: .02em; }
.grp-stage .arv-n--d1 .arv-t { font-size: 8.5px; letter-spacing: .2em; }

/* painel lateral do job */
.grp-painel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(370px, 88%);
  background: var(--surface-panel); border-left: 1px solid var(--border);
  padding: var(--space-lg); overflow-y: auto; z-index: 5;
  transform: translateX(100%); transition: transform .28s ease;
}
.grp-painel.is-open { transform: translateX(0); }
.grp-painel-x {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted-foreground); border-radius: var(--radius-sm); cursor: pointer;
}
.grp-painel-x i { width: 13px; height: 13px; }
.grp-painel-grau {
  display: inline-block; font-size: .5625rem; letter-spacing: .2em;
  color: var(--muted-foreground); margin-bottom: var(--space-sm);
}
.grp-painel-grau.grau--auto { color: var(--lime); }
.grp-painel-grau.grau--manual { color: var(--warning); }
.grp-painel-grau.grau--externo { color: var(--info); }
.grp-painel h2 {
  font-size: 1.0625rem; line-height: 1.3; color: var(--foreground);
  margin: 0 0 var(--space-sm); padding-right: 28px;
}
.grp-painel-caminho {
  font-size: .6875rem; color: var(--muted-foreground);
  margin: 0 0 var(--space-lg); letter-spacing: .04em;
}
.grp-bloco { margin-bottom: var(--space-lg); font-size: .8125rem; color: var(--foreground); }
.grp-bloco:empty { display: none; }
.grp-bloco > span {
  display: block; font-size: .5625rem; letter-spacing: .2em;
  color: var(--muted-foreground); margin-bottom: 7px;
}
.grp-bloco em { color: var(--muted-foreground); font-size: .75rem; }
.grp-bloco code {
  display: inline-block; font-size: .6875rem; padding: 3px 7px; margin: 0 4px 4px 0;
  background: var(--surface-hover); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); color: var(--foreground);
}
.grp-bloco a { color: var(--lime); text-decoration: none; }
.grp-bloco small { color: var(--muted-foreground); font-size: .625rem; word-break: break-word; }

/* No modo chip o círculo é aro vazado com ícone dentro — as regras de ponto
   cheio/vazado do modo radial não podem repintar o preenchimento. */
.grp-stage .arv-n.is-branch:not(.is-open) .arv-dotn,
.grp-stage .arv-n.is-branch.is-open .arv-dotn { fill: var(--surface-panel); opacity: 1; }
.grp-stage .arv-n:hover .arv-dotn { fill: var(--surface-hover); }
.grp-stage .arv-n--d2 .arv-t { font-size: 7px; }

/* Núcleo do mapa da operação: os agentes que executam, adensados no centro.
   Entidade real (um arquivo em .claude/agents/ por ponto), não enfeite. */
.arv-nuc { fill: var(--lime); opacity: .5; cursor: pointer; transition: opacity .15s, r .15s; }
.arv-nuc:hover { opacity: 1; }
.arv-nuc.is-orfao { fill: var(--destructive); opacity: .65; }

/* Alvo de clique invisível: o nó desenhado tem ~2px de raio no zoom padrão,
   então o clique precisa de um alvo próprio. fill transparente RECEBE evento
   (ao contrário de fill:none, que não recebe). */
.arv-hit { fill: rgba(0,0,0,0); }
.arv-stage:fullscreen { border-radius: 0; height: 100vh; }
.arv-stage:-webkit-full-screen { border-radius: 0; height: 100vh; }

/* O aside do DIRETÓRIO tem 380px de caixa mas fica recolhido por translateX,
   mostrando só a aba. A caixa inteira continuava capturando clique e passava
   POR CIMA do zoom e do tela-cheia (mesmo z-index, e ele vem depois no DOM):
   o botão aparecia na tela e o clique morria no painel invisível.
   Container não recebe evento; só a aba e o corpo, que são o que se vê. */
.arv-dir { pointer-events: none; }
.arv-dir-tab, .arv-dir-body { pointer-events: auto; }

/* E os controles ficam acima de qualquer painel, por garantia. */
.arv-zoom, .arv-modes { z-index: 6; }

/* Origem da ligação job→executor. Evidência (citado / via skill) e julgamento
   (regra de domínio) NÃO podem parecer a mesma coisa na tela. */
.grp-bloco code small {
  display: block; font-size: .5rem; letter-spacing: .1em; margin-top: 2px;
  color: var(--muted-foreground); text-transform: uppercase;
}
.grp-bloco code.ex-citado { border-color: var(--lime); }
.grp-bloco code.ex-citado small { color: var(--lime); }
.grp-bloco code.ex-via-skill { border-color: var(--info); }
.grp-bloco code.ex-via-skill small { color: var(--info); }
.grp-bloco code.ex-dominio { border-style: dashed; }

/* Faturamento — separador das frentes de negócio no ranking por marca.
   ⚠️ Este arquivo NÃO tem tokens `--space-N`/`--text` (a escala é --space-xs..xl e as
   regras vizinhas usam px direto). Escrevi com eles na primeira versão, o CSS inteiro
   caiu e o cabeçalho colou na primeira linha do ranking. Seguindo o idioma do vizinho. */
.ck2-frente {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 22px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ck2-frente:first-child { margin-top: 0; }
.ck2-frente-nome {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.ck2-frente-val {
  font-family: var(--font-mono); font-size: 12px; color: var(--foreground);
  white-space: nowrap;
}

/* Texto só para leitor de tela. Usado em <caption> de tabela: numa tabela de 9 colunas,
   quem navega por áudio precisa saber o que a tabela É antes de ouvir 63 células. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Os quatro .ck2-val de uma fileira de KPI não alinhavam dígito a dígito: o
   --font-display não tem algarismo tabular por padrão. Sem isto, "R$ 1.111,11" e
   "R$ 900.000,00" desencontram a vírgula e a fileira parece torta sem motivo aparente. */
.ck2-val { font-variant-numeric: tabular-nums; }

/* Container que rola precisa ser focável (WCAG 2.1.1): quem navega por teclado não
   alcançava as colunas da direita das tabelas largas. O outline só aparece no
   :focus-visible, então não polui o uso com mouse. */
.an-tbl-wrap[tabindex="0"]:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ── Email Hacker · métricas (27/08/2026) ──────────────────────────────────────
   Spec de UX de 27/08. O que motivou: a tela respondia "está saindo HOJE?" e mais
   nada — sem 7d/30d não dá pra separar dia fraco de canal parado, e a saúde por
   marca já era calculada e descartada. Tudo aqui é token, radius 0, sem gradiente. */

/* A COTA — o único elemento com peso visual alto da tela. Uma célula = um e-mail do
   dia. Vale a ênfase porque o limite do plano é literalmente contável, e o modo pool
   é disputa por essas células: "está saindo?" vira uma olhada. */
.eh-cota { display: flex; flex-wrap: wrap; gap: 2px; margin: 10px 0 6px; }
.eh-cota-c { width: 9px; height: 14px; border: 1px solid var(--border); }
.eh-cota-c--on { background: var(--lime); border-color: var(--lime); }
.eh-cota-leg { display: flex; flex-wrap: wrap; gap: 12px;
               font-family: var(--font-mono); font-size: var(--text-xs, 10px);
               color: var(--fg-meta); letter-spacing: .04em; }

/* Medidor com ALVO. A barra sozinha não diz se 2,7% é bom — o alvo ao lado diz.
   Fill troca de cor quando o limiar estoura; nunca escondemos o número. */
.eh-med { display: grid; grid-template-columns: 96px 1fr 96px; gap: 10px;
          align-items: center; margin-bottom: 8px; }
.eh-med-k { font-family: var(--font-mono); font-size: var(--text-xs, 10px);
            text-transform: uppercase; letter-spacing: .1em; color: var(--fg-meta); }
.eh-med-bar { height: 6px; background: var(--surface-alt); border: 1px solid var(--border-subtle); }
.eh-med-fill { height: 100%; background: var(--lime); }
.eh-med-fill--warn { background: var(--warning); }
.eh-med-fill--bad { background: var(--destructive); }
.eh-med-v { font-family: var(--font-mono); font-size: var(--text-base, 12px);
            color: var(--foreground); font-variant-numeric: tabular-nums; text-align: right; }
.eh-med-alvo { color: var(--fg-subtle); }

/* Sparkline: 30 dias, sem eixo e sem tooltip. Serve pra ver FORMA (subiu, parou,
   caiu), não pra ler valor — o valor está no número ao lado. */
.eh-spark { display: inline-block; vertical-align: middle; }

/* A cadeia saiu → entregue → clicou → vendeu. Existe porque `R$ 0` sozinho, no
   ponto de maior atenção, treina o operador a ignorar a tela. Na cadeia o zero é
   explicado pelo elo anterior, que é onde a ação está. */
.eh-cadeia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eh-cadeia-no { border: 1px solid var(--border); padding: 8px 12px; min-width: 96px; }
.eh-cadeia-n { font-family: var(--font-mono); font-size: 1.15rem; color: var(--foreground);
               font-variant-numeric: tabular-nums; }
.eh-cadeia-k { font-family: var(--font-mono); font-size: var(--text-xs, 10px);
               text-transform: uppercase; letter-spacing: .1em; color: var(--fg-meta); }
.eh-cadeia-seta { color: var(--fg-subtle); }

/* Expansão da marca: eventos × toques × produto, sem sair do hub. É o que responde
   "quantos disparos, de qual toque, de qual produto" — a pergunta que obrigava a
   abrir marca por marca. */
.eh-exp { border-top: 1px solid var(--border-subtle); background: var(--surface-alt);
          padding: 12px 16px 14px; }
.eh-exp-linha { display: grid; grid-template-columns: 150px 1fr; gap: 12px;
                align-items: baseline; padding: 5px 0; }
.eh-exp-k { font-family: var(--font-mono); font-size: var(--text-xs, 10px);
            text-transform: uppercase; letter-spacing: .08em; color: var(--fg-meta); }
.eh-exp-v { font-size: var(--text-base, 12px); color: var(--foreground); }
.eh-exp-tq { display: inline-block; margin-right: 14px; font-variant-numeric: tabular-nums; }
.eh-exp-tq b { font-family: var(--font-mono); }

/* Alerta que BLOQUEIA vs alerta de atenção. A distinção é o que evita a lista virar
   paisagem: bloqueio = nada sai daquele toque; atenção = sai, mas pior. */
.eh-alerta { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px;
             font-size: var(--text-base, 12px); }
.eh-alerta--bloqueia { color: var(--destructive); font-weight: var(--fw-bold, 600); }
.eh-alerta--atencao { color: var(--warning); }
.eh-alerta i { width: 13px; height: 13px; flex: none; margin-top: 2px; }

/* Feed de eventos: `EV.ultimos()` era buscado na rota e nunca renderizado. */
.eh-feed { display: flex; flex-direction: column; gap: 0; }
.eh-feed-l { display: grid; grid-template-columns: 58px 92px 1fr auto; gap: 10px;
             padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
             font-size: var(--text-base, 12px); align-items: baseline; }
.eh-feed-l:last-child { border-bottom: 0; }
.eh-feed-h { font-family: var(--font-mono); color: var(--fg-meta);
             font-size: var(--text-xs, 10px); }
.eh-feed-e { font-family: var(--font-mono); font-size: var(--text-xs, 10px); }
.eh-feed-em { color: var(--fg-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-feed-s { color: var(--fg-subtle); font-size: var(--text-xs, 10px); }

/* Barra simples de ranking (produto). Sem eixo: a comparação é entre as linhas. */
.eh-rank { display: grid; grid-template-columns: 1fr 52px 90px; gap: 10px;
           align-items: center; padding: 5px 0; font-size: var(--text-base, 12px); }
.eh-rank-n { font-family: var(--font-mono); text-align: right;
             font-variant-numeric: tabular-nums; color: var(--foreground); }
.eh-rank-b { height: 6px; background: var(--lime); }

@media (max-width: 760px) {
  .eh-med { grid-template-columns: 78px 1fr 76px; }
  .eh-cadeia-no { min-width: 78px; }
  .eh-feed-l { grid-template-columns: 50px 78px 1fr; }
  .eh-feed-s { display: none; }
}

/* Intervalo entre toques na tabela de peças. Deliberadamente discreto: é contexto
   pra leitura do número ao lado, não um número por si. */
.eh-gap { font-family: var(--font-mono); font-size: var(--text-xs, 10px);
          color: var(--fg-subtle); margin-left: 6px; }

/* ── Email Hacker · DASHBOARD (27/08/2026, tarde) ─────────────────────────────
   A versão da manhã resolveu o problema de DADO e deixou o de LEITURA intacto:
   virou uma tabela mais densa. O Nathan: "o trabalho do dashboard é simplificar,
   bater o olho e entender, não um monte de letra". Daqui pra baixo tudo existe
   pra reduzir tempo de leitura — KPI grande, gráfico, e detalhe a um clique. */

/* Delta do KPI: é ele que transforma "555" em informação. Verde/vermelho aqui é
   semântico (subiu/caiu), não decorativo. */
.eh-delta { display: inline-flex; align-items: center; gap: 4px;
            font-family: var(--font-mono); font-size: var(--text-xs, 10px); }
.eh-delta i { width: 12px; height: 12px; }
.eh-delta--up   { color: var(--success, var(--lime)); }
.eh-delta--down { color: var(--destructive); }
/* Sem base anterior NÃO é 0%: 0 diria "não mudou", e a verdade é "não dá pra
   comparar". Cinza, sem seta, sem número. */
.eh-delta--nulo { color: var(--fg-subtle); }

.eh-dash { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-md); }
@media (max-width: 900px) { .eh-dash { grid-template-columns: 1fr; } }
/* Altura FIXA: gráfico responsivo do Chart.js sem altura definida cresce até
   estourar a página no primeiro resize. */
.eh-chart { position: relative; height: 240px; }
.eh-chart--donut { height: 210px; }

/* Marca como CARD, não como linha de tabela: 3 métricas por marca é o que cabe
   numa olhada. O resto (toque, produto, intervalo) vive na página da marca —
   empilhar tudo aqui foi exatamente o erro da versão da manhã. */
.eh-cards { display: flex; flex-direction: column; }
.eh-card {
  display: grid; grid-template-columns: minmax(160px, 1.6fr) minmax(200px, 1.4fr) auto;
  gap: 16px; align-items: center; padding: 12px 4px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none; color: inherit; transition: background .12s ease;
}
.eh-card:last-child { border-bottom: 0; }
a.eh-card:hover { background: var(--surface-hover); text-decoration: none; color: inherit; }
.eh-card--espera { background: var(--surface-alt); cursor: default; }
.eh-card-marca { font-weight: var(--fw-bold, 600); color: var(--foreground); }
.eh-card-sub { font-size: var(--text-base, 12px); color: var(--fg-meta); margin-top: 2px; }
.eh-card-mets { display: flex; gap: 22px; }
.eh-card-mets > div { display: flex; flex-direction: column; gap: 2px; }
.eh-card-k { font-family: var(--font-mono); font-size: var(--text-xs, 10px);
             text-transform: uppercase; letter-spacing: .08em; color: var(--fg-meta); }
.eh-card-v { font-family: var(--font-mono); font-size: var(--text-lg, 15px);
             color: var(--foreground); font-variant-numeric: tabular-nums; }
.eh-card-fim { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.eh-card-fim i { width: 16px; height: 16px; color: var(--fg-meta); }
@media (max-width: 760px) {
  .eh-card { grid-template-columns: 1fr auto; }
  .eh-card-mets { grid-column: 1 / -1; gap: 16px; }
}

/* Chips de PERÍODO. Estava tudo fixo em 30 dias, e "o canal caiu" × "a janela é
   curta" só se distingue trocando a janela. Server-side: sobrevive a recarregar
   e a compartilhar o link. */
.eh-periodo { display: inline-flex; border: 1px solid var(--border); overflow: hidden; }
.eh-periodo-b { padding: 4px 10px; font-family: var(--font-mono);
                font-size: var(--text-xs, 10px); color: var(--fg-meta);
                text-decoration: none; border-right: 1px solid var(--border); }
.eh-periodo-b:last-child { border-right: 0; }
.eh-periodo-b:hover { background: var(--surface-hover); text-decoration: none; color: var(--foreground); }
.eh-periodo-b--on { background: var(--lime); color: var(--surface-deep); font-weight: 600; }

/* Cabeçalho ORDENÁVEL. A seta marca a coluna ativa e o sentido; clicar de novo
   inverte. Sem JS de propósito — ordenação que some ao recarregar é pior que
   ordenação nenhuma, porque quebra a memória de quem estava comparando. */
.eh-card--head { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.eh-th { font-family: var(--font-mono); font-size: var(--text-xs, 10px);
         text-transform: uppercase; letter-spacing: .08em; color: var(--fg-meta);
         text-decoration: none; white-space: nowrap; }
.eh-th:hover { color: var(--foreground); text-decoration: none; }
.eh-th--on { color: var(--lime); }
.eh-th-s { font-size: 11px; }
/* Terceira linha do card de métrica ("hoje N"): contexto, não número principal. */
.eh-card-min { font-family: var(--font-mono); font-size: var(--text-xs, 10px);
               color: var(--fg-subtle); }
/* Bounce acima do alvo pinta — é a métrica que fecha conta na Resend. */
.eh-card-v--ruim { color: var(--warning); }