/* ============================================================
   AW7 Dashboard — Design System compartilhado
   Painéis, KPI cards, empty state, tabs, tabelas, segmented.
   Paleta: azul (#1d4ed8) + destaque âmbar (#f59e0b).
   Usado pelas páginas de análise para visual consistente.
   ============================================================ */
:root {
    --c-primary: #1d4ed8; --c-primary-d: #0d47a1; --c-primary-l: #e8f1fe;
    --c-accent: #f59e0b; --c-ink: #0f172a; --c-muted: #64748b;
    --c-line: #e6ebf2; --c-bg-soft: #f8fafc; --c-purple: #7b1fa2; --c-green: #16a34a;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow: 0 4px 16px rgba(15,23,42,.08);
    --shadow-lg: 0 10px 30px rgba(13,71,161,.12);
}

/* Painel base */
.panel { background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.panel-pad { padding:18px 20px; }
.panel + .panel { margin-top:18px; }
.panel-title { display:flex; align-items:center; gap:8px; font-size:0.82em; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--c-muted); margin:0 0 14px; }
.panel-title svg { width:16px; height:16px; color:var(--c-primary); }

/* Campos / seletores */
.field label { display:block; font-size:0.74em; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--c-muted); margin-bottom:7px; }
.select-modern, .search-input {
    width:100%; padding:12px 14px; border:1.5px solid var(--c-line); border-radius:10px;
    font-size:0.95em; font-family:inherit; color:var(--c-ink); background:#fff; outline:none;
    transition:border-color .2s, box-shadow .2s; box-sizing:border-box;
}
.select-modern:focus, .search-input:focus { border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(29,78,216,.12); }

/* Segmented control */
.seg { display:inline-flex; background:var(--c-bg-soft); border:1.5px solid var(--c-line); border-radius:12px; padding:4px; gap:4px; flex-wrap:wrap; }
.seg button { border:none; background:transparent; color:var(--c-muted); font-weight:600; font-size:0.86em; padding:8px 18px; border-radius:9px; cursor:pointer; font-family:inherit; transition:all .18s; display:flex; align-items:center; gap:6px; }
.seg button svg { width:15px; height:15px; }
.seg button.active { background:var(--c-primary); color:#fff; box-shadow:var(--shadow-sm); }

/* KPI cards com ícone e cor */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.kpi { position:relative; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; overflow:hidden; }
.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c-primary); }
.kpi.k-accent::before { background:var(--c-accent); }
.kpi.k-purple::before { background:var(--c-purple); }
.kpi.k-green::before { background:var(--c-green); }
.kpi.k-red::before { background:#dc2626; }
.kpi-ico { width:34px; height:34px; border-radius:9px; background:var(--c-primary-l); color:var(--c-primary-d); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.kpi.k-accent .kpi-ico { background:#fef3c7; color:#b45309; }
.kpi.k-purple .kpi-ico { background:#f3e5f5; color:var(--c-purple); }
.kpi.k-green .kpi-ico { background:#dcfce7; color:#15803d; }
.kpi.k-red .kpi-ico { background:#fee2e2; color:#b91c1c; }
.kpi-ico svg { width:18px; height:18px; }
.kpi-val { font-size:1.55em; font-weight:800; color:var(--c-ink); line-height:1.05; letter-spacing:-.5px; }
.kpi-val.txt { font-size:1.05em; line-height:1.2; }
.kpi-lbl { font-size:0.72em; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--c-muted); margin-top:4px; }

/* Tabs */
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn2 {
    padding:9px 18px; border:1.5px solid var(--c-line); border-radius:10px;
    background:#fff; color:var(--c-muted); font-weight:600; font-size:0.86em;
    cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:6px;
}
.tab-btn2 svg { width:15px; height:15px; }
.tab-btn2.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); box-shadow:var(--shadow-sm); }
.tab-btn2:hover:not(.active) { background:var(--c-primary-l); color:var(--c-primary-d); border-color:var(--c-primary-l); }

/* Tabelas */
.dtable { width:100%; border-collapse:collapse; font-size:0.88em; }
.dtable th { background:var(--c-bg-soft); color:var(--c-muted); font-size:0.72em; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:10px 14px; text-align:left; border-bottom:1px solid var(--c-line); white-space:nowrap; }
.dtable td { padding:10px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; color:var(--c-ink); }
.dtable tr:last-child td { border-bottom:none; }
.dtable tr:hover td { background:var(--c-primary-l); }
.dtable .num { text-align:right; font-variant-numeric:tabular-nums; }
.rank-badge { color:#94a3b8; font-weight:800; font-size:0.85em; font-variant-numeric:tabular-nums; }
.rank-badge.top1 { color:#f59e0b; } .rank-badge.top2 { color:#94a3b8; } .rank-badge.top3 { color:#b45309; }
.dbar-bg { background:#eaf1fb; border-radius:5px; height:8px; overflow:hidden; width:110px; }
.dbar-fill { background:linear-gradient(90deg,#3b82f6,#1d4ed8); height:8px; border-radius:5px; }
.chip { display:inline-block; font-size:0.72em; font-weight:700; padding:2px 9px; border-radius:11px; }
.chip-green { background:#dcfce7; color:#15803d; }
.chip-blue { background:var(--c-primary-l); color:var(--c-primary-d); }
.chip-amber { background:#fef3c7; color:#b45309; }
.chip-gray { background:#eef2f7; color:#64748b; }

/* Empty state */
.empty-state { text-align:center; padding:54px 24px; color:var(--c-muted); }
.empty-ico { width:72px; height:72px; margin:0 auto 16px; border-radius:20px; background:linear-gradient(135deg,#e8f1fe,#dbeafe); display:flex; align-items:center; justify-content:center; }
.empty-ico svg { width:34px; height:34px; color:var(--c-primary); }
.empty-state h3 { color:var(--c-ink); font-size:1.15em; margin:0 0 6px; }
.empty-state p { margin:0 auto; font-size:0.92em; max-width:400px; line-height:1.5; }

/* Resumo executivo (faixa gradiente) */
.resumo-box { background:linear-gradient(135deg,#0d47a1,#1565c0); color:#fff; border-radius:var(--radius); padding:16px 20px; margin-bottom:18px; }
.resumo-box h3 { margin:0 0 12px; font-size:1em; display:flex; align-items:center; gap:8px; }
.resumo-box h3 svg { width:18px; height:18px; }
.resumo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.resumo-item { background:rgba(255,255,255,.12); border-radius:9px; padding:10px 14px; }
.resumo-item .ri-lbl { font-size:0.7em; text-transform:uppercase; letter-spacing:.5px; opacity:.85; }
.resumo-item .ri-val { font-size:1.05em; font-weight:700; margin-top:2px; }
.resumo-item .ri-sub { font-size:0.76em; opacity:.85; margin-top:1px; }

/* Botões utilitários */
.btn-soft { background:var(--c-ink); color:#fff; border:none; padding:9px 16px; border-radius:10px; cursor:pointer; font-size:0.84em; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:opacity .15s; font-family:inherit; }
.btn-soft svg { width:15px; height:15px; } .btn-soft:hover { opacity:.88; }
.btn-pdf { background:#b71c1c; }
.btn-csv { background:#1b5e20; }
.hint { font-size:0.78em; color:var(--c-muted); display:flex; align-items:center; gap:6px; }
.hint svg { width:14px; height:14px; }

/* Insight box */
.insight { background:var(--c-primary-l); border-left:4px solid var(--c-primary); border-radius:8px; padding:11px 15px; margin-top:12px; font-size:0.9em; color:var(--c-primary-d); line-height:1.5; }

@media (prefers-reduced-motion: reduce) { .kpi, .tab-btn2, .seg button { transition:none !important; } .kpi:hover { transform:none; } }