/* ========================================
   Complementos — Dashboard Karol Santos
   (estende style.css do molde ORD)
======================================== */

.panel-intro {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  color: #FFFFFF;
  white-space: nowrap;
}

.pill-google { background: linear-gradient(90deg, #1A73E8, #4285F4); }
.pill-meta   { background: linear-gradient(90deg, #0F3D24, #22C55E); }
.pill-brand  { background: linear-gradient(90deg, #7C3AED, #C026D3); }

.panel-intro-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Insights ---------- */
.insights {
  padding: var(--space-2) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.insight {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--card-hover);
  border-left: 3px solid var(--border);
}

.insight-good  { border-left-color: var(--raiz-green-500); }
.insight-warn  { border-left-color: var(--amber); }
.insight-bad   { border-left-color: var(--red); }
.insight-info  { border-left-color: var(--text-light); }

.insight-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--text-light);
}
.insight-good .insight-dot { background: var(--raiz-green-500); }
.insight-warn .insight-dot { background: var(--amber); }
.insight-bad  .insight-dot { background: var(--red); }

.insight-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.insight-text strong {
  color: var(--text-strong);
  font-weight: 600;
  font-family: var(--font-mono);
}

.insights-empty {
  font-size: 12px;
  color: var(--text-light);
  padding: var(--space-4) 0;
  text-align: center;
}

/* ---------- RSA (criativo Google) ---------- */
.rsa {
  padding: var(--space-2) var(--space-5) var(--space-5);
}

.rsa-empty {
  font-size: 12px;
  color: var(--text-light);
  padding: var(--space-6) 0;
  text-align: center;
}

.rsa-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.rsa-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.rsa-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--raiz-green-100);
  color: var(--raiz-green-700);
}

.rsa-group {
  margin-bottom: var(--space-5);
}

.rsa-group-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.rsa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rsa-chip {
  font-size: 12px;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  background: var(--card-hover);
  border: 1px solid var(--border-soft);
  color: var(--text);
  line-height: 1.4;
}

.rsa-chip-desc {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* ---------- Cards pendentes ---------- */
.card-pending {
  border-style: dashed;
}

.pending-body {
  padding: var(--space-3) var(--space-5) var(--space-5);
}

.pending-title {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.pending-list {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.8;
  background: var(--card-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  word-break: break-word;
}

/* ---------- Ajustes de grid ---------- */
.kpi-grid-primary { grid-template-columns: repeat(5, 1fr); }
.kpi-grid-secondary { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) {
  .kpi-grid-primary, .kpi-grid-secondary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .kpi-grid-primary, .kpi-grid-secondary { grid-template-columns: repeat(2, 1fr); }
  .charts-row { grid-template-columns: 1fr; }
}

.kpi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}
.kpi-delta-up   { color: var(--raiz-green-500); }
.kpi-delta-down { color: var(--red); }
.kpi-delta-flat { color: var(--text-light); }

.td-num { font-family: var(--font-mono); text-align: right; }

.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--raiz-green-500); }
.sort-arrow { opacity: 0.5; font-size: 9px; margin-left: 3px; }

.table-empty {
  padding: var(--space-8);
  text-align: center;
  font-size: 12px;
  color: var(--text-light);
}

/* ---------- Intenção de busca ---------- */
.intent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .intent-grid { grid-template-columns: 1fr; } }

.intent-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.intent-card-gratuito  { border-left-color: var(--red); }
.intent-card-comercial { border-left-color: var(--raiz-green-500); }
.intent-card-marca     { border-left-color: var(--amber); }

.intent-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.intent-card-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.intent-card-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.intent {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.intent-gratuito  { background: #FEE2E2; color: #991B1B; }
.intent-comercial { background: var(--raiz-green-100); color: var(--raiz-green-700); }
.intent-marca     { background: #FEF3C7; color: #92400E; }

[data-theme="dark"] .intent-gratuito  { background: #4C1D1D; color: #FCA5A5; }
[data-theme="dark"] .intent-comercial { background: #14532D; color: #86EFAC; }
[data-theme="dark"] .intent-marca     { background: #4A3210; color: #FCD34D; }

.table-note {
  padding: var(--space-3) var(--space-5) var(--space-5);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border-soft);
}
.table-note strong { color: var(--text-strong); font-family: var(--font-mono); }

.intent-note {
  margin-top: var(--space-4);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.intent-note strong { color: var(--text-strong); font-family: var(--font-mono); }

/* Tabela dentro de coluna 2/3 do section-row: impede o grid de estourar */
.section-row { align-items: start; }
.section-row > .card { min-width: 0; }
.section-row .table-wrap { max-width: 100%; }
.section-row .data-table { font-size: 12px; }
.section-row .data-table thead th,
.section-row .data-table tbody td,
.section-row .data-table tfoot td { padding-left: 8px; padding-right: 8px; white-space: nowrap; }