@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Cinzel:wght@500;600;700&display=swap');

@layer base {
  :root {
    --color-primary: #2C3E50;
    --color-secondary: #cfe7ff;
    --color-accent: #3498DB;
    --color-info: #51B5E5;
    --color-warn: #FFB333;
    --color-error: #FF4757;
    --color-background: #F7F7F7;
  }

  /* Cores para o tema escuro */
  :root[class="dark"] {
    --color-primary: #1C2D3F;
    --color-secondary: #5D7D7A;
    --color-accent: #2980B9;
    --color-info: #3498DB;
    --color-warn: #FFCC00;
    --color-error: #E74C3C;
    --color-background: #2C3E50;
  }

  body {
    @apply font-sans antialiased text-ink bg-app;
  }
}

/* ============================================================
   Design system · padrões que não cabem bem em utility puro
   ============================================================ */
@layer components {
  /* Header band escuro da tela de Leads (gradiente steel + radial teal) */
  .leads-header-band {
    background:
      radial-gradient(700px 300px at 85% -40%, rgba(36, 219, 198, .18), transparent 60%),
      linear-gradient(180deg, theme('colors.steel.900'), theme('colors.steel.800'));
  }

  /* Rail lateral: gradiente steel vertical (mesma família do band). Sem glow
     atrás do emblema (o dono preferiu o logo cyan "limpo"). */
  .app-rail {
    background: linear-gradient(180deg, theme('colors.steel.900'), theme('colors.steel.950'));
  }

  /* KPI translúcido sobre o band escuro */
  .kpi-glass {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
  }

  /* Abas do show de lead (underline) — alternadas via Stimulus tabs_controller */
  .lead-tab {
    @apply -mb-px inline-flex cursor-pointer items-center gap-1.5 whitespace-nowrap border-b-2 border-transparent px-2.5 py-3.5 text-[12px] font-semibold text-ink-muted transition-colors;
  }
  .lead-tab:hover { @apply text-ink; }
  .lead-tab.is-active { @apply border-primary text-primary; }
  .lead-tab svg { @apply h-[14px] w-[14px] opacity-80; }
  .lead-tab.is-active svg { @apply text-primary opacity-100; }
  .lead-tab .tab-count { @apply rounded-full bg-surface-3 px-1.5 py-px text-[10.5px] font-semibold text-ink-muted; }
  .lead-tab.is-active .tab-count { @apply bg-primary-soft text-primary-softtx; }

  /* Toggle de série (por disparos | por leads) — pill pequeno, ativo via tabs */
  .seg-toggle { @apply inline-flex items-center overflow-hidden rounded-full border border-line-strong bg-white text-[10.5px] font-semibold text-ink-subtle; }
  .seg-toggle button { @apply px-3 py-[3px] transition-colors; }
  .seg-toggle button:hover { @apply text-ink; }
  .seg-toggle button.is-active { @apply bg-surface-3 text-ink; }

  /* Linha de conversa da inbox (lista) — realce da ativa alternado via Stimulus */
  .inbox-row { @apply relative flex cursor-pointer gap-3 border-b border-line-soft px-4 py-3 transition-colors; }
  .inbox-row:hover { @apply bg-surface-2; }
  .inbox-row.is-active { @apply bg-white; box-shadow: inset 3px 0 0 theme('colors.primary.DEFAULT'); }

  /* Scrollbar fina (cosmética) p/ áreas roláveis densas */
  .thin-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .thin-scroll::-webkit-scrollbar-thumb {
    background: theme('colors.iron.300'); border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box;
  }
  .thin-scroll::-webkit-scrollbar-thumb:hover { background: theme('colors.iron.400'); background-clip: content-box; }
  .thin-scroll::-webkit-scrollbar-track { background: transparent; }

  /* Faixa de abas: permite rolagem horizontal quando não cabem, mas sem
     mostrar a barra (senão fica um scroll feio colado embaixo dos tabs) */
  .tab-scroll { scrollbar-width: none; }
  .tab-scroll::-webkit-scrollbar { height: 0; width: 0; }
}

/* Loading sutil durante navegações/atualizações Turbo */
.turbo-progress-bar {
  height: 2px;
  background-color: theme('colors.primary.DEFAULT');
}

turbo-frame[busy] {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

/* ============================================================
   Anexos de Anotações · dropzone, chips e accordion
   ============================================================ */
@layer components {
  .ds-dropzone {
    @apply flex cursor-pointer items-center justify-center gap-2 rounded-md border-[1.5px] border-dashed border-line-strong bg-surface px-3 py-3 text-[12.5px] font-medium text-ink-subtle transition-colors;
  }
  .ds-dropzone:hover { @apply border-primary bg-primary-soft text-primary; }
  .ds-dropzone.is-dragover { @apply border-solid border-primary bg-primary-soft text-primary-softtx; }
  .ds-dropzone svg { @apply h-[17px] w-[17px] shrink-0; }

  /* Chip de documento — compartilhado pelo compositor (JS) e pela nota salva (DocChip) */
  .ds-doc-chip { @apply flex items-center gap-2.5 rounded-md border border-line bg-surface px-2 py-[7px] shadow-ds-sm; }
  .ds-doc-chip__name { @apply truncate font-mono text-[12px] font-medium text-ink; }
  .ds-doc-chip__size { @apply text-[10.5px] text-ink-faint; }
  .ds-doc-spinner { @apply h-[15px] w-[15px] shrink-0 animate-spin rounded-full border-2 border-line-strong border-t-primary; }

  /* Accordion de anexos (≥4) — chevron gira ao abrir */
  .ds-acc > summary { @apply list-none; }
  .ds-acc > summary::-webkit-details-marker { display: none; }
  .ds-acc__chev { @apply transition-transform; }
  .ds-acc[open] > summary .ds-acc__chev { @apply rotate-90; }
}

/* ============================================================
   Inteligência (dashboard Meridian) — estilos ESCOPADOS em `.intel`.
   Portados do mock design_system/mocks/Inteligência — Visão Global. Os valores
   são exatamente os tokens Meridian (steel/cyan/primary/status/Geist); ficam como
   CSS plano (fora de @layer, sem purge) por ser um dashboard bespoke — mesmo espírito
   de .lead-tab/.inbox-row. Todos os seletores descendem de `.intel` (sem colisão).
   ============================================================ */
.intel{
  --steel-700:#304c69;--steel-800:#203246;--steel-900:#101923;--steel-950:#0b1218;
  --cyan-300:#7beadd;--cyan-400:#50e2d1;--cyan-500:#24dbc6;--cyan-600:#1daf9e;--cyan-700:#158477;
  --primary:#117c70;--primary-hover:#0e584f;--primary-soft:#e3f7f4;--primary-soft-tx:#0e584f;
  --surface:#fff;--surface-2:#f5f8fa;--surface-3:#eef2f6;
  --text:#16222e;--text-muted:#57656e;--text-subtle:#8593a0;--text-faint:#a8b4bd;
  --border:#dde4ea;--border-soft:#e7ecf0;--border-strong:#c6d0d8;
  --st-green-bg:#e2f6ec;--st-green-tx:#10704a;--st-green-dot:#1f9d63;
  --st-blue-bg:#e3eefb;--st-blue-tx:#1f5b9e;--st-blue-dot:#3a82d6;
  --st-amber-bg:#fbf0db;--st-amber-tx:#8a5a09;--st-amber-dot:#d98f1e;
  --st-violet-bg:#ece9fb;--st-violet-tx:#5942b3;--st-violet-dot:#7a63d6;
  --st-teal-bg:#def6f2;--st-teal-tx:#0e6b60;--st-teal-dot:#19a08f;
  --st-red-bg:#fce6e6;--st-red-tx:#a52c2c;--st-red-dot:#d64545;
  --st-slate-bg:#e7ecf0;--st-slate-tx:#4a5862;--st-slate-dot:#7d8d97;
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --r-sm:6px;--r-md:8px;--r-lg:10px;--r-full:999px;
  --sh-sm:0 1px 2px rgba(16,25,35,.06),0 1px 3px rgba(16,25,35,.05);
  --sh-md:0 4px 12px rgba(16,25,35,.08);
  --sh-lg:0 12px 34px rgba(16,25,35,.16);
  color:var(--text);
}
.intel .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.intel .band{background:radial-gradient(700px 320px at 88% -40%,rgba(36,219,198,.18),transparent 60%),linear-gradient(180deg,var(--steel-900),var(--steel-800));color:#fff}
.intel .wrap{max-width:2250px;margin:0 auto;width:100%;padding:0 28px}
.intel .band .wrap{padding-top:16px;padding-bottom:24px}
.intel .crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.5);margin-bottom:12px}
.intel .crumb svg{width:13px;height:13px}
.intel .crumb a{color:rgba(255,255,255,.6);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.intel .crumb .sep{color:rgba(255,255,255,.3)}
.intel .titlerow{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.intel .titlerow .eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-400);margin-bottom:6px}
.intel .titlerow h1{font-size:25px;font-weight:600;letter-spacing:-.01em}
.intel .titlerow .sub{margin-top:6px;font-size:13px;color:rgba(255,255,255,.6);max-width:640px}
.intel .titlerow .actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.intel .btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-lg);font-size:14px;font-weight:600;padding:9px 15px;cursor:pointer;border:1px solid transparent;transition:.15s;font-family:inherit;text-decoration:none}
.intel .btn svg{width:16px;height:16px}
.intel .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--sh-sm)}
.intel .btn-primary:hover{background:var(--primary-hover)}
.intel .btn-glass{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.15);color:#fff}
.intel .btn-glass:hover{background:rgba(255,255,255,.17)}
.intel .btn-sm{font-size:12.5px;padding:7px 12px}
.intel .seg{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:2px;gap:2px}
.intel .seg button,.intel .seg a{border:0;background:transparent;font-family:inherit;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6);padding:5px 11px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none}
.intel .seg button.on,.intel .seg a.on{background:rgba(255,255,255,.16);color:#fff}
.intel .alertbtn{position:relative}
.intel .alertbtn .badge-n{position:absolute;top:-5px;right:-5px;background:var(--st-red-dot);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:var(--r-full);display:grid;place-items:center;padding:0 4px;font-family:var(--font-mono)}
.intel .cmdbar{margin-top:16px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:11px 14px;cursor:text}
.intel .cmdbar .spark{width:20px;height:20px;color:var(--cyan-400);flex:none}
.intel .cmdbar input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:inherit;font-size:14px}
.intel .cmdbar input::placeholder{color:rgba(255,255,255,.45)}
.intel .cmdbar .kbd{font-size:11px;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:2px 7px;font-family:var(--font-mono)}

.intel .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-top:16px}
.intel .kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);padding:14px 15px}
.intel .kpi.feature{border-color:rgba(80,226,209,.30);background:linear-gradient(180deg,rgba(80,226,209,.15),rgba(80,226,209,.04))}
.intel .kpi.warn{border-color:rgba(217,143,30,.35);background:linear-gradient(180deg,rgba(217,143,30,.14),rgba(217,143,30,.03))}
.intel .kpi .top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.intel .kpi .ic{width:27px;height:27px;border-radius:var(--r-md);background:rgba(80,226,209,.15);color:var(--cyan-300);display:grid;place-items:center;flex:none}
.intel .kpi.warn .ic{background:rgba(217,143,30,.18);color:#f0c373}
.intel .kpi .ic svg{width:15px;height:15px}
.intel .kpi .lab{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.25}
.intel .kpi .val{font-family:var(--font-mono);font-size:22px;font-weight:600;letter-spacing:-.01em}
.intel .kpi .d{margin-top:6px;font-size:11px;color:rgba(255,255,255,.5)}
.intel .kpi .d b{color:var(--cyan-300);font-weight:600}
.intel .kpi .d b.up{color:#7fe0a8}.intel .kpi .d b.down{color:#ef9b9b}

.intel .tabrail{position:sticky;top:0;z-index:30;background:var(--surface-2);padding:16px 0 4px}
.intel .tabrail .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.intel .tabs{display:inline-flex;gap:3px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:4px;box-shadow:var(--sh-sm);flex-wrap:wrap}
.intel .tab{border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-subtle);padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-md)}
.intel .tab svg{width:15px;height:15px}
.intel .tab:hover{color:var(--text);background:var(--surface-2)}
.intel .tab.on{color:#fff;background:var(--primary);box-shadow:var(--sh-sm)}
.intel .tab .ai{font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--st-violet-tx);background:var(--st-violet-bg);padding:2px 5px;border-radius:var(--r-full)}
.intel .tab.on .ai{background:rgba(255,255,255,.22);color:#fff}
.intel .tabrail .ctx{margin-left:auto;font-size:12px;color:var(--text-subtle);display:flex;align-items:center;gap:10px}
.intel .tabrail .iseg2{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:2px;gap:2px}
.intel .tabrail .iseg2 button,.intel .tabrail .iseg2 a{border:0;background:transparent;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text-subtle);padding:5px 10px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none}
.intel .tabrail .iseg2 button.on,.intel .tabrail .iseg2 a.on{background:var(--primary-soft);color:var(--primary-soft-tx)}

.intel .content{flex:1}
.intel .content .wrap{padding-bottom:40px}
.intel .panel{display:none}
.intel .panel.on{display:block;animation:intel-fade .25s ease}
@keyframes intel-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.intel .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.intel .card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border-soft)}
.intel .card-h h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.intel .card-h h3 svg{width:17px;height:17px;color:var(--text-subtle)}
.intel .card-h .meta{margin-left:auto;font-size:12px;color:var(--text-subtle)}
.intel .card-h .link{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--primary);cursor:pointer;text-decoration:none}
.intel .iseg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-md);padding:2px;gap:2px}
.intel .iseg button,.intel .iseg a{border:0;background:transparent;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text-subtle);padding:5px 10px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none}
.intel .iseg button.on,.intel .iseg a.on{background:#fff;color:var(--text);box-shadow:var(--sh-sm)}

.intel .grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:stretch;margin-bottom:18px}
.intel .grid2b{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;margin-bottom:18px}
.intel .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}

.intel .briefing{padding:16px 18px 18px}
.intel .ai-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.intel .ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--st-violet-tx);background:var(--st-violet-bg);padding:4px 9px;border-radius:var(--r-full)}
.intel .ai-badge svg{width:12px;height:12px}
.intel .briefing p{font-size:13.5px;line-height:1.65;color:var(--text-muted)}
.intel .briefing p b{color:var(--text);font-weight:600}
.intel .hl{background:var(--primary-soft);color:var(--primary-soft-tx);padding:0 4px;border-radius:4px;font-weight:600}
.intel .hl.r{background:var(--st-red-bg);color:var(--st-red-tx)}
.intel .hl.a{background:var(--st-amber-bg);color:var(--st-amber-tx)}
.intel .signals{display:flex;flex-direction:column;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
.intel .sig{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--text-muted)}
.intel .sig .si{width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;margin-top:1px}
.intel .sig .si svg{width:13px;height:13px}
.intel .sig b{color:var(--text);font-weight:600}
.intel .si.up{background:var(--st-green-bg);color:var(--st-green-tx)}
.intel .si.down{background:var(--st-red-bg);color:var(--st-red-tx)}
.intel .si.flat{background:var(--st-amber-bg);color:var(--st-amber-tx)}
.intel .refresh{margin-left:auto;font-size:11.5px;color:var(--text-subtle);display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none}
.intel .refresh svg{width:13px;height:13px}

.intel .alerts{padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px}
.intel .alert{display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:var(--r-md);border:1px solid var(--border-soft);background:var(--surface-2)}
.intel .alert .ai{width:30px;height:30px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.intel .alert .ai svg{width:16px;height:16px}
.intel .alert.red .ai{background:var(--st-red-bg);color:var(--st-red-tx)}
.intel .alert.amber .ai{background:var(--st-amber-bg);color:var(--st-amber-tx)}
.intel .alert.blue .ai{background:var(--st-blue-bg);color:var(--st-blue-tx)}
.intel .alert .body{flex:1;min-width:0}
.intel .alert .t{font-size:13px;font-weight:600;color:var(--text)}
.intel .alert .s{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.45}
.intel .alert .act{margin-top:8px;display:flex;gap:7px}
.intel .chip-act{font-size:11.5px;font-weight:600;color:var(--primary);background:var(--primary-soft);border:0;padding:5px 11px;border-radius:var(--r-full);cursor:pointer;font-family:inherit;text-decoration:none}
.intel .chip-act.ghost{color:var(--text-muted);background:var(--surface-3)}

.intel .funnel{padding:16px 18px 18px;display:flex;flex-direction:column;gap:11px}
.intel .fitem .fmeta{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.intel .fitem .fname{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.intel .fitem .fname .dot{width:8px;height:8px;border-radius:var(--r-full);flex:none}
.intel .fitem .fcount{font-family:var(--font-mono);font-size:13px;font-weight:600;margin-left:auto}
.intel .fitem .fpct{font-family:var(--font-mono);font-size:11.5px;color:var(--text-subtle);min-width:46px;text-align:right}
.intel .fitem .fdrop{font-family:var(--font-mono);font-size:10.5px;color:var(--st-red-tx)}
.intel .fbar{height:15px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.intel .ffill{height:100%;border-radius:var(--r-full)}
.intel .fdiv{height:1px;background:var(--border-soft);margin:5px 0 3px}
.intel .fbranch{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint)}

.intel .chartwrap{padding:14px 16px 8px;height:262px;position:relative}
.intel .chartwrap.tall{height:320px}
.intel .legend{display:flex;gap:14px;padding:0 18px 14px;flex-wrap:wrap}
.intel .legend .li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-muted)}
.intel .legend .sw{width:11px;height:3px;border-radius:2px}
.intel .legend .sw.b{width:11px;height:11px;border-radius:3px}
.intel .legend .sw.dash{background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px);height:3px;width:14px}

.intel .sech{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:6px 2px 12px}
.intel .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}
.intel .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:15px 16px}
.intel .tile .l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-subtle)}
.intel .tile .v{font-family:var(--font-mono);font-size:24px;font-weight:600;margin-top:8px}
.intel .tile .x{font-size:11.5px;color:var(--text-muted);margin-top:5px}
.intel .tile .x b{font-weight:600}
.intel .tile.alarm{border-color:var(--st-red-dot)} .intel .tile.alarm .v{color:var(--st-red-tx)}
.intel .tile.good{border-color:var(--st-green-dot)} .intel .tile.good .v{color:var(--st-green-tx)}

.intel .dtable{width:100%;border-collapse:collapse}
.intel .dtable thead th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-subtle);padding:11px 16px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.intel .dtable thead th.r,.intel .dtable td.r{text-align:right}
.intel .dtable td{padding:12px 16px;border-bottom:1px solid var(--border-soft);font-size:13px;vertical-align:middle}
.intel .dtable tbody tr:hover{background:var(--surface-2)}
.intel .dtable .cname{font-weight:600;color:var(--text)}
.intel .dtable .cname .sub{display:block;font-size:11px;font-weight:500;color:var(--text-subtle);margin-top:2px}
.intel .dtable .num{font-family:var(--font-mono);font-weight:600}
.intel .av-sm{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:600;margin-right:9px;vertical-align:middle}
.intel .btn-mini{font-size:11.5px;font-weight:600;color:#fff;background:var(--primary);border:0;padding:6px 11px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;text-decoration:none}
.intel .btn-mini.ghost{color:var(--text-muted);background:var(--surface-3)}

.intel .minibar{display:inline-flex;align-items:center;gap:8px}
.intel .minibar .t{width:62px;height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.intel .minibar .f{height:100%;border-radius:var(--r-full)}

.intel .badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:var(--r-full);white-space:nowrap}
.intel .badge .dot{width:6px;height:6px;border-radius:50%;flex:none}
.intel .b-green{background:var(--st-green-bg);color:var(--st-green-tx)} .intel .b-green .dot{background:var(--st-green-dot)}
.intel .b-blue{background:var(--st-blue-bg);color:var(--st-blue-tx)} .intel .b-blue .dot{background:var(--st-blue-dot)}
.intel .b-amber{background:var(--st-amber-bg);color:var(--st-amber-tx)} .intel .b-amber .dot{background:var(--st-amber-dot)}
.intel .b-red{background:var(--st-red-bg);color:var(--st-red-tx)} .intel .b-red .dot{background:var(--st-red-dot)}
.intel .b-slate{background:var(--st-slate-bg);color:var(--st-slate-tx)} .intel .b-slate .dot{background:var(--st-slate-dot)}
.intel .b-teal{background:var(--st-teal-bg);color:var(--st-teal-tx)} .intel .b-teal .dot{background:var(--st-teal-dot)}

.intel .hbars{padding:16px 18px;display:flex;flex-direction:column;gap:13px}
.intel .hbar .hb-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;font-size:12.5px}
.intel .hbar .hb-name{font-weight:600}
.intel .hbar .hb-n{margin-left:auto;font-family:var(--font-mono);font-weight:600}
.intel .hbar .hb-track{height:11px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.intel .hbar .hb-fill{height:100%;border-radius:var(--r-full)}
.intel .hbar .hb-sub{font-size:10.5px;color:var(--text-subtle);font-family:var(--font-mono)}

.intel .cohort{padding:6px 0 8px}
.intel .cohort table{width:100%;border-collapse:collapse}
.intel .cohort th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-subtle);padding:10px 14px;text-align:center;border-bottom:1px solid var(--border)}
.intel .cohort th.l,.intel .cohort td.l{text-align:left}
.intel .cohort td{padding:9px 14px;border-bottom:1px solid var(--border-soft);font-size:12.5px}
.intel .cohort .cc{font-family:var(--font-mono);font-weight:600;border-radius:6px;padding:6px 0;display:block;text-align:center}
.intel .cohort .coh-name{font-weight:600}
.intel .cohort .coh-sub{font-size:10.5px;color:var(--text-subtle)}

.intel .ai-banner{display:flex;align-items:flex-start;gap:13px;padding:14px 16px;border-radius:var(--r-lg);background:linear-gradient(180deg,#f4f1fc,#fbfaff);border:1px solid #e4ddf6;margin-bottom:18px}
.intel .ai-banner .bi{width:38px;height:38px;border-radius:var(--r-md);background:#fff;border:1px solid #e4ddf6;display:grid;place-items:center;flex:none;color:var(--st-violet-tx)}
.intel .ai-banner .bi svg{width:20px;height:20px}
.intel .ai-banner .t{font-size:13.5px;font-weight:600;color:var(--text)}
.intel .ai-banner .s{font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.5;max-width:980px}
.intel .insight-strip{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:var(--r-md);background:#f4f1fc;border:1px solid #e4ddf6;margin:0 18px 16px;font-size:12.5px;color:var(--text-muted);line-height:1.55}
.intel .insight-strip svg{width:18px;height:18px;color:var(--st-violet-tx);flex:none;margin-top:1px}
.intel .insight-strip b{color:var(--text)}
.intel .note-card{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:var(--r-md);background:var(--surface-2);border:1px dashed var(--border-strong);font-size:12.5px;color:var(--text-muted);line-height:1.5}
.intel .note-card svg{width:18px;height:18px;color:var(--text-subtle);flex:none}
.intel .note-card b{color:var(--text)}

.intel .md{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.intel .md-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;position:sticky;top:74px}
.intel .md-list-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-subtle);padding:14px 16px 10px}
.intel .lb{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;font-family:inherit;padding:12px 16px;cursor:pointer;border-top:1px solid var(--border-soft);border-left:3px solid transparent}
.intel .lb:hover{background:var(--surface-2)}
.intel .lb.on{background:var(--primary-soft);border-left-color:var(--primary)}
.intel .lb .lb-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:600;flex:none}
.intel .lb .lb-main{flex:1;min-width:0}
.intel .lb .lb-name{font-size:13.5px;font-weight:600;color:var(--text)}
.intel .lb .lb-role{font-size:11px;color:var(--text-subtle)}
.intel .lb .lb-bar{height:4px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;margin-top:6px}
.intel .lb .lb-bar i{display:block;height:100%;border-radius:var(--r-full)}
.intel .lb .lb-idx{text-align:right;flex:none}
.intel .lb .lb-idx .n{font-family:var(--font-mono);font-size:19px;font-weight:600;line-height:1}
.intel .lb .lb-idx .t{font-size:10px;font-weight:600;margin-top:2px}
.intel .md-legend{font-size:10.5px;color:var(--text-faint);padding:12px 16px;border-top:1px solid var(--border-soft);line-height:1.45}
.intel .det{display:none}
.intel .det.on{display:block;animation:intel-fade .2s ease}
.intel .det-h{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.intel .det-h .da{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:600;flex:none}
.intel .det-h .dn{font-size:18px;font-weight:600}
.intel .det-h .dr{font-size:12.5px;color:var(--text-subtle);margin-top:1px}
.intel .det-h .didx{margin-left:auto;text-align:right}
.intel .det-h .didx .n{font-family:var(--font-mono);font-size:30px;font-weight:600;line-height:1}
.intel .det-h .didx .t{font-size:11px;color:var(--text-subtle);margin-top:3px}
.intel .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.intel .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 13px}
.intel .stat .sl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-subtle)}
.intel .stat .sv{font-family:var(--font-mono);font-size:18px;font-weight:600;margin-top:5px}
.intel .stat .sx{font-size:10.5px;margin-top:3px}
.intel .stat .sx.g{color:var(--st-green-tx)} .intel .stat .sx.r{color:var(--st-red-tx)} .intel .stat .sx.m{color:var(--text-subtle)}
.intel .subh{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);margin:16px 2px 10px;display:flex;align-items:center;gap:8px}
@media(max-width:1300px){.intel .md{grid-template-columns:1fr}.intel .md-list{position:static}.intel .statgrid{grid-template-columns:repeat(2,1fr)}}

.intel .tip{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px}
.intel .tip-i{width:14px;height:14px;border-radius:50%;border:1px solid var(--text-faint);color:var(--text-subtle);font-size:9px;font-weight:700;display:grid;place-items:center;cursor:help;font-style:normal;text-transform:none;line-height:1}
.intel .tip:hover .tip-i{border-color:var(--primary);color:var(--primary)}
.intel .tip-box{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:236px;background:#0d2230;color:#eaf1f4;border-radius:8px;padding:10px 12px;font-size:11.5px;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;box-shadow:0 12px 34px rgba(16,25,35,.30);opacity:0;visibility:hidden;transition:.14s;z-index:60;text-align:left;white-space:normal}
.intel .tip:hover .tip-box{opacity:1;visibility:visible}
.intel .tip-box::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#0d2230}
.intel .tip.tr .tip-box{left:auto;right:-2px;transform:none}
.intel .tip.tr .tip-box::after{left:auto;right:6px;transform:none}
.intel .spk{width:100%;height:22px;display:block;margin-top:7px}
.intel .spk polyline,.intel .spk2 polyline{vector-effect:non-scaling-stroke}
.intel .evogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 18px}
.intel .evotile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 13px}
.intel .et-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-subtle);display:flex;align-items:center}
.intel .et-row{display:flex;align-items:baseline;gap:8px;margin:6px 0 8px}
.intel .et-v{font-family:var(--font-mono);font-size:18px;font-weight:600}
.intel .et-d{font-family:var(--font-mono);font-size:11px;font-weight:600}
.intel .et-d.g{color:var(--st-green-tx)} .intel .et-d.r{color:var(--st-red-tx)} .intel .et-d.m{color:var(--text-subtle)}
.intel .spk2{width:100%;height:30px;display:block}
@media(max-width:1300px){.intel .evogrid{grid-template-columns:repeat(2,1fr)}}
.intel .foot-note{margin-top:6px;font-size:11.5px;color:var(--text-faint);text-align:center;padding-bottom:20px}

@media(max-width:1500px){.intel .kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1300px){.intel .grid2,.intel .grid2b,.intel .grid3{grid-template-columns:1fr}.intel .tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.intel .kpis{grid-template-columns:repeat(2,1fr)}}
/* Linha SELECIONADA da tabela de campanhas (painel por seleção): tint primary +
   régua ciano à esquerda (classe alternada pelo Stimulus campaign-selection). */
.row-selected { background: linear-gradient(90deg, rgba(17, 124, 112, 0.07), rgba(17, 124, 112, 0.03)); box-shadow: inset 3px 0 0 theme('colors.cyan.600'); }
.row-selected:hover { background: linear-gradient(90deg, rgba(17, 124, 112, 0.10), rgba(17, 124, 112, 0.05)); }