/* ============================================================
   Eventos Pacto — Design System (Power Blue Pacto)
   #116cf8 · superfícies claras · sombras suaves
   ============================================================ */
:root {
  --brand:   #116cf8;
  --deep:    #052698;
  --ink:     #171c1f;
  --muted:   #64748b;
  --line:    #e4e9ed;
  --bg:      #f6fafe;
  --card:    #fff;
  --ok:      #10b981;
  --warn:    #f59e0b;
  --danger:  #ef4444;
  --r:       14px;
  --r-sm:    10px;
  --shadow:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-hover: 0 12px 24px -10px rgba(17,108,248,.20);
  --font: 'Mona Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased }
a { color: var(--brand) }
button, input, select, textarea { font-family: inherit }

/* ── Topbar ─────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 20px; color: #fff; padding: 0 24px; height: 60px;
  background: linear-gradient(120deg, var(--deep), var(--brand)); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 50 }
.topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 700; flex-shrink: 0 }
.topbar__brand span { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 600; white-space: nowrap }
.topbar__nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap }
.topbar__nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; transition: .15s }
.topbar__nav a:hover { color: #fff; background: rgba(255,255,255,.14) }
.topbar__nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.22) }
.topbar__user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.85); flex-shrink: 0 }
.logout { color: #fff; text-decoration: none; background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600 }
.logout:hover { background: rgba(255,255,255,.28) }

/* ── Layout / Tipografia ────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 28px 24px 72px }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 22px; color: var(--deep) }
h2 { font-size: 18px; font-weight: 700; margin: 30px 0 14px; color: var(--deep) }
h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--deep) }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap }
.page-header h1 { margin: 0 }
.muted { color: var(--muted) }
.text-sm { font-size: 13px }

/* ── Flash ──────────────────────────────── */
.flash { padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 18px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow) }
.flash--ok  { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0 }
.flash--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca }
.flash--warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a }

/* ── KPI Cards com tooltip ──────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 26px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); position: relative }
.card__num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--deep) }
.card__num.card__num--ok   { color: var(--ok) }
.card__num.card__num--warn { color: var(--warn) }
.card__num.card__num--danger { color: var(--danger) }
.card__label { color: var(--muted); font-size: 13px; margin-top: 6px; font-weight: 600 }
.card__hint  { color: var(--brand); font-size: 12px; font-weight: 700; margin-top: 10px }
a.card { text-decoration: none; color: inherit; display: block; transition: transform .18s, box-shadow .18s, border-color .18s }
a.card:hover { border-color: var(--brand); box-shadow: var(--shadow-hover); transform: translateY(-3px) }

/* Tooltip no card */
.card__tip { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--line); color: var(--muted); font-size: 11px; font-weight: 700; cursor: help;
  display: flex; align-items: center; justify-content: center; line-height: 1 }
.card__tip:hover .tip-bubble { opacity: 1; visibility: visible; transform: translateY(0) }
.tip-bubble { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; max-width: 280px;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.5;
  padding: 10px 13px; border-radius: 10px; z-index: 99;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .18s; pointer-events: none; text-align: left; white-space: normal }
.tip-bubble::before { content: ''; position: absolute; bottom: 100%; right: 5px; border: 5px solid transparent; border-bottom-color: var(--ink) }

/* ── Tabelas ────────────────────────────── */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px }
.table { width: 100%; border-collapse: separate; border-spacing: 0 }
.table th, .table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle }
.table thead th { background: #f4f7fb; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700 }
.table tbody tr { transition: background .12s }
.table tbody tr:hover { background: #f6fafe }
.table tbody tr:last-child td { border-bottom: 0 }

/* ── Badges / chips ─────────────────────── */
.badge { display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap }
.badge--ok     { background: rgba(16,185,129,.12); color: #047857 }
.badge--blue   { background: rgba(17,108,248,.10); color: #0055ca }
.badge--warn   { background: rgba(245,158,11,.15); color: #9a6700 }
.badge--danger { background: rgba(239,68,68,.12);  color: #b91c1c }
.badge--muted  { background: #eef2f7; color: #475569 }
.badge--purple { background: rgba(139,92,246,.12); color: #5b21b6 }

/* ── Botões ─────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff;
  border-radius: var(--r-sm); padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; color: var(--ink); transition: .15s; white-space: nowrap }
.btn:hover { border-color: var(--brand); color: var(--brand) }
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand) }
.btn--primary:hover { background: #0b57d0; color: #fff; border-color: #0b57d0 }
.btn--sm  { padding: 6px 11px; font-size: 13px }
.btn--danger { color: var(--danger); border-color: #fecaca }
.btn--danger:hover { background: var(--danger); color: #fff; border-color: var(--danger) }
.btn--ghost { border-color: transparent; background: transparent }
.btn--ghost:hover { background: var(--bg) }

/* ── Filtros / toolbar ──────────────────── */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow) }
.filters select, .filters input[type=text], .filters input[type=date] {
  border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 14px; background: #fff; color: var(--ink) }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(17,108,248,.12) }

/* ── Panel ──────────────────────────────── */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow) }
.panel + .panel { margin-top: 18px }
.panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.panel__head h2 { margin: 0 }

/* ── Formulários ────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr }
.form-grid.cols-1 { grid-template-columns: 1fr }
.form-group { display: flex; flex-direction: column; gap: 6px }
.form-group label { font-size: 13px; font-weight: 600; color: var(--muted) }
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; font-size: 14px; color: var(--ink);
  background: #fff; transition: border-color .15s, box-shadow .15s }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(17,108,248,.12) }
.form-group textarea { resize: vertical; min-height: 90px }
.form-group .hint { font-size: 12px; color: var(--muted) }
.form-section { margin-bottom: 28px }
.form-section h2 { font-size: 16px; font-weight: 700; color: var(--deep); border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 18px }
.form-actions { display: flex; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line) }
.col-span-2 { grid-column: span 2 }
.col-span-3 { grid-column: span 3 }

/* ── Checklist ──────────────────────────── */
.checklist-phase { margin-bottom: 28px }
.checklist-phase h2 { display: flex; align-items: center; gap: 10px; font-size: 16px }
.phase-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); display: inline-block }
.phase-dot.done { background: var(--ok) }
.checklist-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  margin-bottom: 8px; transition: border-color .15s, background .15s }
.checklist-item.is-done { background: #f0fdf4; border-color: #a7f3d0 }
.checklist-item.is-done .ci-title { text-decoration: line-through; color: var(--muted) }
.checklist-item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ok); flex-shrink: 0; margin-top: 2px; cursor: pointer }
.ci-body { flex: 1 }
.ci-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px }
.ci-meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap }
.ci-actions { display: flex; gap: 6px; flex-shrink: 0 }

/* ── Progress bar ───────────────────────── */
.progress-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden }
.progress-bar__fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s }
.progress-bar__fill.full { background: var(--ok) }

/* ── Grid 2 colunas ─────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px }

/* ── Ações de linha ─────────────────────── */
.row-actions { display: flex; gap: 6px }

/* ── Login ──────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px }
.login-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 40px 36px; width: 100%; max-width: 420px; box-shadow: var(--shadow-hover) }
.login-logo { display: flex; justify-content: center; margin-bottom: 24px }
.login-title { font-size: 22px; font-weight: 800; color: var(--deep); text-align: center; margin: 0 0 24px }
.login-subtitle { font-size: 14px; color: var(--muted); text-align: center; margin: -16px 0 24px }

/* ── Detalhes do evento ─────────────────── */
.kv-grid { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; align-items: start }
.kv-label { font-size: 13px; font-weight: 600; color: var(--muted) }
.kv-value { font-size: 14px; color: var(--ink) }
.section-sep { border: none; border-top: 1px solid var(--line); margin: 24px 0 }

/* ── Tabs ───────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 22px }
.tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .15s }
.tab:hover { color: var(--brand) }
.tab.active { color: var(--brand); border-bottom-color: var(--brand) }

/* ── Participantes ──────────────────────── */
.participant-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px }
.participant-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand);
  color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.participant-avatar.director { background: var(--deep) }
.participant-name { font-size: 14px; font-weight: 600 }
.participant-role { font-size: 12px; color: var(--muted) }

/* ── OKRs ───────────────────────────────── */
.okr-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 12px }
.okr-dept { font-size: 13px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px }
.okr-krs { font-size: 14px; margin-bottom: 8px }
.okr-initiatives { font-size: 13px; color: var(--muted) }
.okr-responsible { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 8px }

/* ── Resultados comerciais ──────────────── */
.results-day { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 12px }
.results-day__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px }
.results-day__title { font-size: 15px; font-weight: 700 }
.results-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.results-stat { text-align: center }
.results-stat__num { font-size: 24px; font-weight: 800; color: var(--deep) }
.results-stat__label { font-size: 12px; color: var(--muted); font-weight: 600 }

/* ── Empty state ────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--muted) }
.empty-state__icon { font-size: 40px; margin-bottom: 12px }
.empty-state__title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px }
.empty-state p { font-size: 14px; margin: 0 0 16px }

/* ── Custo sem preenchimento ────────────── */
.cost-missing { color: var(--warn); font-size: 12px; font-weight: 600 }

/* ── Breadcrumb ─────────────────────────── */
.breadcrumb { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 18px }
.breadcrumb a { color: var(--muted); text-decoration: none }
.breadcrumb a:hover { color: var(--brand) }
.breadcrumb span { color: var(--muted) }
.breadcrumb strong { color: var(--ink) }

/* ── ROI badge ──────────────────────────── */
.roi-positive { color: var(--ok); font-weight: 700 }
.roi-negative { color: var(--danger); font-weight: 700 }

/* ── Responsive ─────────────────────────── */
@media (max-width: 768px) {
  .wrap { padding: 18px 16px 56px }
  .cards { grid-template-columns: 1fr 1fr }
  .form-grid { grid-template-columns: 1fr }
  .col-span-2, .col-span-3 { grid-column: span 1 }
  .grid-2, .grid-3 { grid-template-columns: 1fr }
  .kv-grid { grid-template-columns: 1fr }
  .kv-label { color: var(--brand); font-size: 11px; text-transform: uppercase }
  .topbar__brand span { display: none }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr }
  .topbar__nav { display: none }
  h1 { font-size: 20px }
}