/* Dashboard AGM — derivado do mockup v3 do brainstorm 2026-06-07 */
.hidden { display: none !important; }
.loading-shimmer {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  color: transparent;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dyn-empty { color: #9ca3af; font-style: italic; }

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:#f3f4f6;color:#111827;padding:24px;min-height:100vh}
.canvas{max-width:1280px;margin:0 auto}
.label-mock{font-size:11px;letter-spacing:1.5px;color:#9ca3af;text-transform:uppercase;margin-bottom:12px;text-align:center}
.dash{background:#ffffff;border-radius:16px;box-shadow:0 12px 40px rgba(27,58,75,.12);overflow:hidden}

.hdr{background:linear-gradient(135deg,#1B3A4B 0%,#2C5F7A 100%);color:white;padding:24px 32px;position:relative}
.hdr::after{content:'';position:absolute;bottom:0;left:0;height:4px;width:35%;background:linear-gradient(90deg,#E91E63 0%,#D4A437 100%)}
.hdr-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.hdr-brand{display:flex;align-items:center;gap:14px}
.logo-mock{width:48px;height:48px;border-radius:10px;background:white;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;font-style:italic}
.logo-mock span:first-child{color:#E91E63}
.logo-mock span:last-child{color:#D4A437}
.hdr-name{font-size:11px;letter-spacing:2.5px;color:#D4A437;font-weight:600;margin-bottom:4px}
.hdr-title{font-size:22px;font-weight:800;letter-spacing:.5px}
.hdr-meta{text-align:right;font-size:12px;color:rgba(255,255,255,.85);line-height:1.6}
.hdr-meta strong{color:white;font-weight:700}
.hdr-segment{display:inline-block;padding:3px 10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:20px;font-size:10px;letter-spacing:1.5px;margin-top:8px}

.section-title{font-size:11px;letter-spacing:2px;color:#374151;text-transform:uppercase;font-weight:800;padding:18px 32px 8px;background:#fafafa;border-top:1px solid #e5e7eb;display:flex;align-items:center;gap:8px}
.section-title::before{content:'';width:14px;height:2px;background:#D4A437}

.heros{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:#e5e7eb}
.hero{background:white;padding:22px 28px}
.hero-label{font-size:11px;letter-spacing:1.5px;color:#6b7280;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.hero-value{font-size:46px;font-weight:800;line-height:1;color:#1B3A4B;letter-spacing:-1px}
.hero-unit{font-size:14px;color:#6b7280;font-weight:600;margin-left:6px}
.hero-compare{margin-top:10px;font-size:12px;color:#6b7280;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hero-compare .delta{font-weight:700;padding:2px 8px;border-radius:10px;font-size:11px}
.hero-compare .delta.up{background:#dcfce7;color:#166534}
.hero-compare .delta.down{background:#fee2e2;color:#991b1b}
.hero-compare .delta.neutral{background:#f3f4f6;color:#374151}
.hero-rede{margin-top:6px;font-size:11px;color:#9ca3af;font-style:italic}
.hero.acc-low .hero-value{color:#C0392B}

.therm{padding:18px 32px;background:#fafafa;border-top:1px solid #e5e7eb}
.therm-title{font-size:12px;letter-spacing:1.2px;color:#374151;text-transform:uppercase;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between}
.therm-title .progress{font-size:12px;font-weight:600;color:#6b7280;text-transform:none}
.therm-bar{position:relative;height:22px;background:#e5e7eb;border-radius:14px;overflow:hidden}
.therm-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#E91E63 0%,#D4A437 100%);border-radius:14px}
.therm-marks{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:#6b7280;font-weight:600}
.therm-mark strong{display:block;color:#1B3A4B;font-size:13px;font-weight:800}

.pipe{padding:18px 32px;background:white;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pipe-step{position:relative;background:#fafafa;border-radius:10px;padding:14px;border-left:3px solid #1B3A4B}
.pipe-step.warn{border-left-color:#D4A437;background:#fffbeb}
.pipe-step.bad{border-left-color:#C0392B;background:#fef2f2}
.pipe-step.good{border-left-color:#2D7D46;background:#f0fdf4}
.pipe-num{font-size:28px;font-weight:800;color:#1B3A4B;line-height:1}
.pipe-step.bad .pipe-num{color:#C0392B}
.pipe-step.good .pipe-num{color:#2D7D46}
.pipe-label{font-size:11px;color:#6b7280;margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.pipe-pct{font-size:11px;color:#9ca3af;margin-top:2px;font-variant-numeric:tabular-nums}

.grid3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;background:#e5e7eb}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e5e7eb}
.panel{background:white;padding:20px 24px}
.panel-title{font-size:12px;letter-spacing:1.5px;color:#374151;text-transform:uppercase;font-weight:700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.panel-title .pin{display:inline-block;width:8px;height:8px;background:#D4A437;border-radius:50%;margin-right:8px;vertical-align:middle}
.panel-soon{font-size:9px;background:#f3f4f6;color:#9ca3af;padding:2px 8px;border-radius:10px;letter-spacing:1px;font-weight:700}

.vt{width:100%;border-collapse:collapse;font-size:13px}
.vt th{text-align:left;font-weight:600;color:#6b7280;font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:8px 4px;border-bottom:1px solid #e5e7eb}
.vt th.num,.vt td.num{text-align:right}
.vt td{padding:11px 4px;border-bottom:1px solid #f3f4f6;font-variant-numeric:tabular-nums}
.vt tr:last-child td{border-bottom:none}
.vt td.name{font-weight:700;color:#1B3A4B}
.conv-pill{display:inline-block;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.conv-pill.bad{background:#fee2e2;color:#991b1b}
.conv-pill.warn{background:#fef3c7;color:#854d0e}
.conv-pill.ok{background:#fef9c3;color:#713f12}
.conv-pill.good{background:#dcfce7;color:#166534}

.donut-wrap{display:flex;align-items:center;gap:18px}
.donut{width:120px;height:120px;flex-shrink:0;position:relative}
.donut-center-abs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center-abs strong{font-size:22px;font-weight:800;color:#1B3A4B;line-height:1}
.donut-center-abs span{font-size:9px;color:#6b7280;text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.legend{flex:1;display:flex;flex-direction:column;gap:6px}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-row strong{color:#1B3A4B;min-width:24px;text-align:right;font-variant-numeric:tabular-nums}
.legend-pct{margin-left:auto;color:#6b7280;font-size:11px;font-variant-numeric:tabular-nums}

.hbars{display:flex;flex-direction:column;gap:8px}
.hbar{display:flex;align-items:center;gap:10px;font-size:12px}
.hbar-label{flex:0 0 100px;color:#374151;font-weight:600}
.hbar-track{flex:1;height:18px;background:#f3f4f6;border-radius:6px;overflow:hidden;position:relative}
.hbar-fill{height:100%;background:linear-gradient(90deg,#2C5F7A 0%,#1B3A4B 100%);border-radius:6px}
.hbar-fill.gold{background:linear-gradient(90deg,#E8A838 0%,#D4A437 100%)}
.hbar-fill.pink{background:linear-gradient(90deg,#FF1F7A 0%,#E91E63 100%)}
.hbar-val{font-weight:700;color:#1B3A4B;font-variant-numeric:tabular-nums;min-width:24px;text-align:right}

/* ==== BARRAS PAREADAS (CURVA SEMANAL) ==== */
.curve-panel{padding:22px 28px;background:white;border-top:1px solid #e5e7eb}
.barpair{display:grid;grid-template-columns:repeat(8,1fr);gap:16px;align-items:end;height:220px;padding:24px 8px 0;border-top:1px solid #f3f4f6;margin-top:8px}
.bp-col{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.bp-bars{display:flex;gap:6px;align-items:flex-end;flex:1;width:100%;justify-content:center;position:relative}
.bp-bar{width:22px;border-radius:4px 4px 0 0;position:relative}
.bp-bar.meta{background:#fef3c7;border:1px dashed #D4A437}
.bp-bar.real{background:linear-gradient(180deg,#2C5F7A 0%,#1B3A4B 100%)}
.bp-bar.real.current{background:linear-gradient(180deg,#FF1F7A 0%,#E91E63 100%)}
.bp-bar.real.good{background:linear-gradient(180deg,#34A853 0%,#2D7D46 100%)}
.bp-bar.real.future{background:#e5e7eb}
.bp-num{position:absolute;top:-22px;font-size:11px;font-weight:800;left:50%;transform:translateX(-50%);font-variant-numeric:tabular-nums;line-height:1}
.bp-num.meta-num{color:#854d0e}
.bp-num.real-num{color:#1B3A4B}
.bp-num.real-num.current{color:#E91E63}
.bp-num.real-num.good{color:#166534}
.bp-num.muted{color:#9ca3af}
.bp-label{font-size:10px;color:#6b7280;font-weight:600;margin-top:8px;text-align:center;text-transform:uppercase;letter-spacing:.3px}
.bp-label.current{color:#E91E63;font-weight:800}
.bp-pct{font-size:11px;color:#374151;font-variant-numeric:tabular-nums;font-weight:700;background:#f3f4f6;border-radius:8px;padding:2px 8px;margin-top:2px}
.bp-pct.good{background:#dcfce7;color:#166534}
.bp-pct.bad{background:#fee2e2;color:#991b1b}
.bp-pct.muted{background:#f3f4f6;color:#9ca3af}
.bp-pct.current{background:#fce7f3;color:#9d174d}
.bp-legend{display:flex;gap:18px;font-size:11px;color:#6b7280;margin-top:14px;justify-content:flex-end;align-items:center}
.bp-legend-item{display:flex;align-items:center;gap:6px}
.bp-legend-swatch{width:14px;height:10px;border-radius:2px}
.bp-legend-swatch.meta{background:#fef3c7;border:1px dashed #D4A437}
.bp-legend-swatch.real{background:linear-gradient(180deg,#2C5F7A 0%,#1B3A4B 100%)}
.bp-note{margin-top:16px;padding:10px 14px;background:#f8fafc;border-left:3px solid #94a3b8;font-size:11px;color:#64748b;line-height:1.5;border-radius:0 6px 6px 0}
.bp-note strong{color:#374151}

.quality{padding:22px 32px;background:linear-gradient(135deg,#fef2f2 0%,#fffbeb 100%);border-top:1px solid #e5e7eb}
.quality-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.quality-title{font-size:14px;font-weight:800;color:#7c2d12;text-transform:uppercase;letter-spacing:1.5px}
.quality-subtitle{font-size:12px;color:#92400e;margin-top:4px;font-style:italic}
.quality-score{font-size:32px;font-weight:800;color:#C0392B;line-height:1;font-variant-numeric:tabular-nums}
.quality-score-label{font-size:10px;color:#7c2d12;text-transform:uppercase;letter-spacing:1px;font-weight:700;text-align:right}
.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qcell{background:white;border-radius:8px;padding:12px;position:relative;overflow:hidden}
.qcell-label{font-size:10px;color:#6b7280;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
.qcell-pct{font-size:22px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.qcell.bad .qcell-pct{color:#C0392B}
.qcell.warn .qcell-pct{color:#854d0e}
.qcell.ok .qcell-pct{color:#166534}
.qcell-bar{position:absolute;bottom:0;left:0;height:3px}
.qcell.bad .qcell-bar{background:#C0392B}
.qcell.warn .qcell-bar{background:#D4A437}
.qcell.ok .qcell-bar{background:#2D7D46}

.foot{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:1px;background:#e5e7eb}
.mini{background:white;padding:18px 24px}
.mini-label{font-size:10px;letter-spacing:1.5px;color:#6b7280;text-transform:uppercase;font-weight:700}
.mini-value{font-size:26px;font-weight:800;color:#1B3A4B;margin-top:6px;letter-spacing:-.5px}
.mini-value .small{font-size:13px;color:#6b7280;font-weight:600;margin-left:4px}
.mini-rede{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);position:relative}
.mini-rede .mini-label{color:#64748b}
.mini-rede .panel-soon{position:absolute;top:14px;right:18px}

.alert{background:linear-gradient(135deg,#fef3c7 0%,#fee9c4 100%);padding:18px 32px;border-top:4px solid #D4A437;display:flex;gap:18px;align-items:center}
.alert-icon{flex-shrink:0;width:48px;height:48px;background:#D4A437;border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;font-weight:800}
.alert-body{flex:1}
.alert-tag{display:inline-block;background:#92400e;color:white;padding:2px 8px;border-radius:4px;font-size:9px;font-weight:800;letter-spacing:1.5px;margin-bottom:6px}
.alert-title{font-size:14px;font-weight:800;color:#92400e;margin-bottom:4px}
.alert-text{font-size:12px;color:#78350f;line-height:1.5}
.alert-text strong{color:#92400e}

/* Logos reais */
.logo-real { height: 56px; width: auto; border-radius: 10px; background: white; padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.logo-ci-mini { height: 32px; width: auto; float: right; margin-left: 12px; margin-bottom: 8px; background: white; padding: 4px 8px; border-radius: 6px; }

/* Basic responsive — phone */
@media (max-width: 768px) {
  body { padding: 12px !important; }
  .heros, .grid3, .grid2 { grid-template-columns: 1fr !important; }
  .pipe, .quality-grid { grid-template-columns: 1fr 1fr !important; }
  /* Grids de 4 colunas inline (Projeção de base, Atrasos por vendedora, Mensal) */
  .grid-4-resp { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .hdr-row { flex-direction: column !important; align-items: flex-start !important; }
  .hdr-meta { text-align: left !important; margin-top: 12px; }
  .logo-ci-mini { float: none; display: inline-block; }
  .barpair { grid-template-columns: repeat(4,1fr) !important; gap: 8px !important; padding: 16px 4px 0 !important; }
  .bp-bar { width: 14px !important; }
  .bp-label { font-size: 9px !important; }
  .section-title { padding-left: 16px !important; padding-right: 16px !important; }
  .hdr { padding: 18px 18px !important; }
}
@media (max-width: 480px) {
  .grid-4-resp { grid-template-columns: 1fr !important; }
}