*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f121e;
  --surface: #111827;
  --surface2: #1a2235;
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.12);
  --text: #f0f0ee;
  --muted: #8890b0;
  --muted2: #5a6080;
  --accent: #c8d94a;
  --accent-dim: rgba(200,217,74,0.1);
  --erro: #e8637a;
  --bio: #ffaa00;
  --dado: #6b8cff;
  --ux: #c084fc;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  padding: 32px;
}

h1 { font-size: 18px; font-weight: 700; }

/* FILTROS */
.filters {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}

.filter-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.period-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.period-btn.active {
  background: rgba(200,217,74,0.15);
  border-color: transparent;
  color: var(--accent);
}

/* TABELA */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

thead th {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface2); }

td {
  padding: 11px 16px;
  font-size: 12px;
  vertical-align: middle;
}

/* BADGES */
.mono {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--muted);
}

.badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
}

.badge-erro  { background: rgba(255,77,77,0.08);   color: var(--erro); }
.badge-bio   { background: rgba(255,170,0,0.08);   color: var(--bio);  }
.badge-dado  { background: rgba(107,140,255,0.08); color: var(--dado); }
.badge-ux    { background: rgba(192,132,252,0.08); color: var(--ux);   }

/* GRID DE MÉTRICAS */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}


/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.kpi-tooltip {
  position: absolute;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--text);
  white-space: pre;
  z-index: 1000;
  pointer-events: none;
  line-height: 1.6;
  max-width: 320px;
}

@media (max-width: 768px) {
  #sidebar-filtros {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 998;
    width: 280px !important;
    min-width: 280px !important;
    border-radius: 0 16px 16px 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.4);
  }
}

.apexcharts-toolbar {
  opacity: 0 !important;
  transition: opacity 0.2s;
  pointer-events: none;
}

.apexcharts-canvas:hover .apexcharts-toolbar {
  opacity: 1 !important;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .apexcharts-toolbar {
    opacity: 1 !important;
    pointer-events: auto;
  }
}

.matriz-wrap { overflow-x: auto; }
.matriz-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.matriz-table th { font-size: 9px; color: var(--muted); font-weight: 400; padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--border); }
.matriz-table th.col-label { text-align: left; padding-left: 12px; font-size: 10px; }
.matriz-table .section-row td { font-size: 9px; font-weight: 700; color: var(--accent); padding: 10px 0 4px 12px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--accent-dim); }
.matriz-table .kpi-label { font-size: 11px; color: var(--text); padding: 5px 0; white-space: nowrap; }
.matriz-table .kpi-sub { font-size: 9px; color: var(--muted); display: block; margin-top: 1px; }
.matriz-table .cell { text-align: center; padding: 2px; }
.matriz-pill { font-size: 9px; padding: 4px 2px; border-radius: 4px; display: block; text-align: center; font-weight: 500; }
.matriz-pill.verde { background: rgba(100,200,100,0.12); color: #7ec87e; }
.matriz-pill.laranja { background: rgba(212,144,10,0.12); color: #d4900a; }
.matriz-pill.vermelho { background: rgba(232,99,122,0.12); color: #e8637a; }
.matriz-pill.neutro { background: var(--surface2); color: var(--muted2); }