/* ========================================
   Complementos — Dashboard TechLoc
   (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; }

/* ---------- Alternador discreto no rodapé ---------- */
.ord-toggle {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.ord-toggle:hover,
.ord-toggle:focus,
.ord-toggle:focus-visible,
.ord-toggle:active { color: inherit; outline: none; text-decoration: none; }

/* ========================================
   Flip 3D dos cards de KPI
   Duplo-clique vira o card e mostra anterior → atual (±%)
======================================== */
.kpi-flip { cursor: pointer; perspective: 1100px; user-select: none; }
.kpi-flip .kpi-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.45, .05, .25, 1);
}
.kpi-flip.flipped .kpi-flip-inner { transform: rotateY(180deg); }
.kpi-flip .kpi-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.kpi-flip .kpi-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center;
}
.kpi-flip:focus-visible {
  outline: 2px solid var(--raiz-green-500);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.kpi-compare {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 16px;
}
.kpi-compare .cmp-prev { color: var(--text-muted); font-weight: 500; }
.kpi-compare .cmp-arrow { color: var(--raiz-green-500); font-size: 14px; }
.kpi-compare .cmp-cur { color: var(--text-strong); font-weight: 600; }
.kpi-compare-none {
  font-size: 13px; color: var(--text-light); font-family: var(--font-sans);
}

/* ========================================
   Funil em SVG — trapézios com giro por etapa
======================================== */
.funnel { padding: 0; }
.funnel-svg-wrap { padding: 4px 20px 20px; }
.funnel-svg { width: 100%; height: auto; display: block; max-height: 360px; }
.funnel-svg .f-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; fill: rgba(255,255,255,.78);
}
.funnel-svg .f-value { font-family: var(--font-mono); font-size: 24px; font-weight: 600; fill: #fff; }
.funnel-svg .f-value-sm { font-size: 19px; }
.funnel-svg .f-value-cmp { font-size: 16px; }
.funnel-svg .f-rate {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  fill: rgba(255,255,255,.72);
}
.funnel-svg .f-rate.f-up { fill: #86EFAC; }
.funnel-svg .f-rate.f-down { fill: #FCA5A5; }
.funnel-svg .f-stage {
  cursor: pointer; transform-box: fill-box; transform-origin: center;
  transition: filter .25s ease, transform .25s ease, opacity .25s ease;
}
.funnel-svg .f-stage:hover {
  filter: brightness(1.18) drop-shadow(0 0 10px rgba(34,197,94,.45));
  transform: scale(1.02);
}
.funnel-svg:hover .f-stage:not(:hover) { opacity: .82; }
.funnel-svg .f-stage:focus-visible { outline: none; filter: brightness(1.12); }
@keyframes fspin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.funnel-svg .f-stage.f-spin { animation: fspin .6s cubic-bezier(.45, .05, .25, 1); }

/* ========================================
   Filtro de campanha no cabeçalho do card
======================================== */
.card-head-left {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; min-width: 0;
}
.card-filter {
  font-family: var(--font-sans); font-size: 12px;
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-hover); color: var(--text);
  max-width: 320px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  text-overflow: ellipsis;
}
.card-filter:hover { border-color: var(--raiz-green-500); }
.card-filter:focus-visible { outline: 2px solid var(--raiz-green-500); outline-offset: 1px; }

/* Miniatura de criativo.
   Dois bugs cobertos aqui: (1) .thumb é um <img>, então precisa de object-fit e
   não background-size, senão a imagem distorce no quadrado de 44px;
   (2) as URLs do CDN do Meta são assinadas e expiram em poucos dias — quando a
   imagem falha o <img> é removido e sobra o wrapper com a sigla do criativo. */
.thumb-wrap {
  position: relative; display: block;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: linear-gradient(135deg, var(--raiz-green-800), var(--raiz-green-700));
  overflow: hidden;
}
.thumb-wrap::before {
  content: attr(data-ini);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: rgba(255, 255, 255, .85); letter-spacing: .02em;
}
img.thumb {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border: 0; border-radius: 0;
}

/* ---------- TechLoc: 4 intenções de busca ---------- */
.intent-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .intent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .intent-grid { grid-template-columns: 1fr; } }
.intent-card-fora        { border-left-color: var(--red); }
.intent-card-locacao     { border-left-color: var(--raiz-green-500); }
.intent-card-concorrente { border-left-color: #6366F1; }
.intent-fora        { background: #FEE2E2; color: #991B1B; }
.intent-locacao     { background: var(--raiz-green-100); color: var(--raiz-green-700); }
.intent-concorrente { background: #E0E7FF; color: #3730A3; }
[data-theme="dark"] .intent-fora        { background: #4C1D1D; color: #FCA5A5; }
[data-theme="dark"] .intent-locacao     { background: #14532D; color: #86EFAC; }
[data-theme="dark"] .intent-concorrente { background: #26285A; color: #A5B4FC; }
.brand-client-logo { background: #fff; padding: 2px; }
.rsa-ad + .rsa-ad { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-soft); }

/* Meta: duas linhas de 4 cards */
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.kpi-grid-stack { margin-top: var(--space-4); }
@media (max-width: 900px) { .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kpi-grid-4 { grid-template-columns: 1fr; } }

/* ---------- Google: carrossel de anúncios ---------- */
.ads-nav { display: flex; align-items: center; gap: var(--space-2); }
.ads-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text-strong); font-size: 15px; display: grid; place-items: center; transition: border-color .15s, background .15s; }
.ads-btn:hover:not(:disabled) { border-color: var(--raiz-green-500); background: var(--card-hover); }
.ads-btn:disabled { opacity: .35; cursor: default; }
.ads-btn:focus-visible { outline: 2px solid var(--raiz-green-500); outline-offset: 2px; }
.ads-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); min-width: 44px; text-align: center; }
.ads-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0 var(--space-5) var(--space-3); font-size: 11px; color: var(--text-muted); }
.ads-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-camp { background: #2563EB; } .lg-group { background: #7C3AED; } .lg-head { background: var(--raiz-green-500); } .lg-desc { background: var(--text-light); } .lg-star { background: #F59E0B; }
.ads-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 100%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: var(--space-4); padding: 0 var(--space-5) var(--space-2); scrollbar-width: none; }
.ads-track::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .ads-track { grid-auto-columns: calc(50% - var(--space-2)); } }
@media (prefers-reduced-motion: reduce) { .ads-track { scroll-behavior: auto; } }
.ad-card { scroll-snap-align: start; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; position: relative; }
.ad-card.ad-hl { border: 2px solid #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.ad-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-badge { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; }
.ad-path { display: flex; flex-direction: column; gap: 6px; }
.ad-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ad-tag { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; color: #fff; }
.ad-tag-camp { background: #2563EB; } .ad-tag-group { background: #7C3AED; }
.ad-row-val { font-size: 13px; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.ad-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-pill { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.ad-pill-ok { border-color: transparent; background: var(--raiz-green-100); color: var(--raiz-green-700); }
.st-EXCELLENT { background: #DCFCE7; color: #166534; border-color: transparent; }
.st-GOOD { background: #E0F2FE; color: #075985; border-color: transparent; }
.st-AVERAGE { background: #FEF3C7; color: #92400E; border-color: transparent; }
.st-POOR { background: #FEE2E2; color: #991B1B; border-color: transparent; }
[data-theme="dark"] .st-EXCELLENT { background: #14532D; color: #86EFAC; }
[data-theme="dark"] .st-GOOD { background: #0C3A55; color: #7DD3FC; }
[data-theme="dark"] .st-AVERAGE { background: #4A3210; color: #FCD34D; }
[data-theme="dark"] .st-POOR { background: #4C1D1D; color: #FCA5A5; }
[data-theme="dark"] .ad-badge { background: #4A3210; color: #FCD34D; }
[data-theme="dark"] .ad-pill-ok { background: #14532D; color: #86EFAC; }
.ad-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.ad-metric { background: var(--card-hover); padding: 8px 10px; min-width: 0; }
.ad-metric b { display: block; font-family: var(--font-mono); font-size: 14px; color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.ad-metric span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ad-metric.m-hl { background: #FEF3C7; } .ad-metric.m-hl b { color: #92400E; }
[data-theme="dark"] .ad-metric.m-hl { background: #4A3210; } [data-theme="dark"] .ad-metric.m-hl b { color: #FCD34D; }
@media (max-width: 600px) { .ad-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ad-sec-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-chip { font-size: 12px; padding: 4px 9px; border-radius: 6px; border-left: 3px solid var(--raiz-green-500); background: var(--card-hover); color: var(--text-strong); }
.ad-chip-desc { border-left-color: var(--text-light); color: var(--text); width: 100%; }
.ad-url { font-family: var(--font-mono); font-size: 11.5px; color: var(--raiz-green-700); overflow-wrap: anywhere; }
[data-theme="dark"] .ad-url { color: var(--raiz-green-500); }
.ad-url:hover { text-decoration: underline; }
.ads-dots { display: flex; justify-content: center; gap: 6px; padding: var(--space-3) 0 var(--space-5); }
.ads-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); padding: 0; }
.ads-dot.on { background: var(--raiz-green-500); width: 20px; border-radius: 4px; }
.ads-dot.hl { box-shadow: 0 0 0 2px #F59E0B; }

/* ---------- Google: palavras-chave com filtros e rolagem ---------- */
.card-head-wrap { flex-wrap: wrap; gap: var(--space-3); }
.kw-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kw-filter { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.kw-filter .card-filter { max-width: 280px; text-transform: none; letter-spacing: 0; }
.kw-scroll { max-height: 520px; overflow: auto; }
.kw-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--card); box-shadow: inset 0 -1px 0 var(--border); }
.kw-scroll tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--card); box-shadow: inset 0 1px 0 var(--border); }

.ad-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.ad-kw-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--raiz-green-500); color: var(--raiz-green-700); background: transparent; }
[data-theme="dark"] .ad-kw-btn { color: var(--raiz-green-500); }
.ad-kw-btn:hover { background: var(--raiz-green-100); }
.ad-kw-btn:focus-visible { outline: 2px solid var(--raiz-green-500); outline-offset: 2px; }
.kw-group { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: #EDE9FE; color: #5B21B6; white-space: nowrap; }
[data-theme="dark"] .kw-group { background: #2E1F5E; color: #C4B5FD; }
@keyframes spin { to { transform: rotate(360deg); } }
#refreshBtn:disabled { opacity: .6; cursor: progress; }