/* Identidade visual Emcomjunto (design system EMCJ) aplicada ao painel.
   Carregado por último: sobrescreve as cores e fontes de gallery.css e dashboard.css.
   Fundo claro nas áreas de dados (decisão do usuário); cabeçalho em petróleo.
   Paleta: petróleo #083251, profundo #031526, azul ação #1F88D6,
   institucional #206DA7, céu claro #9BD4F4; terracota #B55D49 só como acento.
   Escalas de qualidade/status mantêm verde/amarelo/vermelho (leitura imediata). */

:root {
  --petroleo: #083251;
  --profundo: #031526;
  --azul-acao: #1F88D6;
  --institucional: #206DA7;
  --ceu: #9BD4F4;
  --terracota: #B55D49;

  --bg: #F3F6F9;
  --surface: #FFFFFF;
  --text: #031526;
  --muted: #5A6B7D;
  --border: #DCE4EC;
  --accent: #1F88D6;
  --good: #15803D;
  --bad: #B91C1C;
  --radius: 16px;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

body { background: var(--bg); color: var(--text); font-weight: 400; }
h1, h2, h3, strong, .value { font-weight: 500; }

/* ---- cabeçalho da marca ---- */
.topbar {
  background: linear-gradient(120deg, var(--petroleo) 0%, var(--profundo) 100%);
  border-bottom: none;
  color: #fff;
  padding: 14px 24px;
}
.topbar h1 { margin: 0 auto 0 0; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 400; letter-spacing: .04em; color: rgba(255,255,255,.75); }
.topbar h1 img { height: 34px; width: auto; display: block; }
.topbar h1 .divider { width: 1px; height: 24px; background: rgba(255,255,255,.25); }
.tabs-main { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11); border-radius: 12px; }
.tabs-main button { color: rgba(255,255,255,.7); font-weight: 500; }
.tabs-main button.active { background: #fff; color: var(--petroleo); box-shadow: none; }
.filters label { color: rgba(255,255,255,.7); }
.filters select, .filters input {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
}
.filters select option { color: var(--text); }
.filters input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.quick button { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.quick button:hover { border-color: var(--ceu); }

/* ---- navegação de seções e títulos ---- */
.sections a { color: var(--institucional); }
.sections a:hover { color: var(--azul-acao); }
.block h2 { color: var(--petroleo); }
.panel h3, .subhead, .kpi-card .label, .campaigns-panel summary { color: var(--muted); }

/* ---- cards e painéis ---- */
.panel, .kpi-card, .card, .alert-col, .alert-item { border-radius: var(--radius); border-color: var(--border); }
.kpi-card .value { color: var(--petroleo); }
.kpi-card.highlight { border-color: var(--azul-acao); box-shadow: inset 0 0 0 1px var(--azul-acao); }
.chip, .segment-filter button.active, .tabs button.active { background: var(--azul-acao); border-color: var(--azul-acao); }
.more { color: var(--azul-acao); }
table.data tbody tr.selected { background: rgba(31, 136, 214, .12); }

/* ---- objetivos (paleta da marca) ---- */
.objective.leads, .pill.leads { background: var(--petroleo); }
.objective.traffic, .pill.traffic { background: var(--azul-acao); }
.objective.engagement, .pill.engagement { background: var(--institucional); }
.objective.video, .pill.video { background: var(--terracota); }
.objective.reach, .pill.reach { background: var(--ceu); color: var(--profundo); }
.objective.other, .pill.other { background: #8A99A8; }

/* ---- anúncios de pesquisa ---- */
.text-ad-title, .serp-title { color: #1a0dab; }

/* ---- origem mídia paga × SEO ---- */
.origin-tile.paid { background: var(--azul-acao); }
.origin-tile.seo { background: var(--petroleo); }

/* ---- ajustes de layout ---- */
.topbar h1 img { height: 42px; }
/* 7 indicadores numa linha em telas largas; quebra de forma equilibrada nas menores */
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.kpi-card .value { font-size: 22px; }

/* ---- ritmo do mês (metas) ---- */
.pacing { margin-bottom: 14px; border-left: 4px solid var(--azul-acao); }
.sheet-link { font-size: 13px; color: var(--azul-acao); text-decoration: none; }
.sheet-link:hover { text-decoration: underline; }
.pace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pace-card { background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.pace-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pace-value { font-size: 20px; font-weight: 500; color: var(--petroleo); margin: 4px 0 8px; }
.bar { position: relative; height: 8px; background: var(--border); border-radius: 99px; margin: 6px 0 8px; min-width: 120px; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--azul-acao); }
.bar.good .fill { background: #15803D; }
.bar.watch .fill { background: #CA8A04; }
.bar.risk .fill { background: #B91C1C; }
.bar .marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--petroleo); }
.pill.pace-good { background: #15803D; }
.pill.pace-watch { background: #CA8A04; }
.pill.pace-risk { background: #B91C1C; }
.pill.pace-early { background: #8A99A8; }