/* ─────────────────────────────────────────────────────────────────
   como-funciona/assets/sc-grafico.css — gráfico diário do Search Console
   e cartão de números (13/09/2026). Carregado por sc_assets() em
   admin/includes/search_console.php, em qualquer página que use o
   gráfico (como-funciona, afiliados, meunegocio, admin).
   Temas por variáveis: .grafico--escuro (padrão) e .grafico--claro.
   Mobile first: o SVG é redesenhado na largura do contêiner.
   ───────────────────────────────────────────────────────────────── */

/* ── gráfico ─────────────────────────────────────────────────── */
.grafico{
  --scw-c:#FFD700;--scw-i:#7CC4FF;--scw-bg:#11203A;--scw-borda:rgba(255,255,255,.09);--scw-borda-forte:rgba(255,255,255,.17);
  --scw-texto:#F3F6FB;--scw-mute:#C6CFDC;--scw-quieto:#96A2B5;--scw-grade:rgba(255,255,255,.07);--scw-guia:rgba(255,255,255,.35);
  --scw-tip-bg:rgba(8,17,31,.96);--scw-tip-texto:#F3F6FB;--scw-ponto-borda:#0a1526;
  box-sizing:border-box;margin-top:clamp(2rem,4vw,2.8rem);border:1px solid var(--scw-borda);border-radius:20px;background:var(--scw-bg);
  padding:1.1rem .9rem 1rem;text-align:left;color:var(--scw-texto);line-height:1.5}
.grafico *,.grafico *::before,.grafico *::after{box-sizing:border-box}
.grafico--claro{
  --scw-c:#B8860B;--scw-i:#2563EB;--scw-bg:#fff;--scw-borda:#e2e8f0;--scw-borda-forte:#cbd5e1;
  --scw-texto:#0f172a;--scw-mute:#475569;--scw-quieto:#64748b;--scw-grade:#eef2f7;--scw-guia:rgba(15,23,42,.35);
  --scw-tip-bg:#0f172a;--scw-tip-texto:#f8fafc;--scw-ponto-borda:#fff}
@media(min-width:760px){.grafico{padding:1.5rem 1.6rem 1.3rem}}
.grafico-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.9rem}
.grafico-tit{display:flex;align-items:center;gap:.5rem;margin:0;font-weight:700;font-size:1rem;line-height:1.3;color:var(--scw-texto)}
.grafico-tit i{color:var(--scw-c)}
.grafico-legenda{display:flex;gap:.5rem}
.g-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px;border:1px solid var(--scw-borda-forte);background:transparent;
  color:var(--scw-texto);font:inherit;font-size:.8rem;line-height:1.2;cursor:pointer;transition:opacity .2s,border-color .2s}
.g-chip:hover{border-color:var(--scw-c)}
.g-chip span{width:.75rem;height:.75rem;border-radius:3px}
.g-cliques span{background:var(--scw-c)}
.g-impr span{background:var(--scw-i)}
.g-chip[aria-pressed="false"]{opacity:.5}
.g-chip[aria-pressed="false"] span{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.grafico-area{position:relative;width:100%;outline:none;touch-action:pan-y;cursor:crosshair}
.grafico-area:focus-visible{outline:2px solid var(--scw-c);outline-offset:4px;border-radius:8px}
.grafico-area svg{display:block;width:100%;height:auto;overflow:visible}
.g-grid{stroke:var(--scw-grade);stroke-width:1}
.g-eixo{fill:var(--scw-quieto);font-size:11px;font-family:inherit}
.g-eixoC{fill:var(--scw-c);opacity:.85}
.g-eixoI{fill:var(--scw-i);opacity:.85}
.g-linha{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1)}
.g-linhaC{stroke:var(--scw-c)}
.g-linhaI{stroke:var(--scw-i);opacity:.9}
.g-areaC{opacity:0;transition:opacity 1.2s ease .7s}
.grafico.visto .g-areaC{opacity:1}
.g-guia{stroke:var(--scw-guia);stroke-width:1;stroke-dasharray:3 3}
.g-dotC{fill:var(--scw-c);stroke:var(--scw-ponto-borda);stroke-width:2}
.g-dotI{fill:var(--scw-i);stroke:var(--scw-ponto-borda);stroke-width:2}
.grafico-tip{position:absolute;top:.2rem;transform:translateX(-50%);display:flex;flex-direction:column;gap:.1rem;padding:.5rem .7rem;border-radius:10px;
  background:var(--scw-tip-bg);border:1px solid rgba(255,255,255,.17);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);font-size:.78rem;line-height:1.45;
  color:var(--scw-tip-texto);white-space:nowrap;pointer-events:none;z-index:2}
.grafico-tip[hidden]{display:none}
.grafico-tip .tc{color:#FFD700}
.grafico-tip .ti{color:#7CC4FF}
.grafico-insights{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:.9rem 0 0;padding:0;font-size:.86rem;line-height:1.5;color:var(--scw-mute)}
@media(min-width:760px){.grafico-insights{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.8rem}}
.grafico-insights b{color:var(--scw-texto)}
.grafico-insights li::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--scw-c);margin-right:.5rem;vertical-align:middle}
.grafico-nota{margin:.6rem 0 0;font-size:.76rem;line-height:1.5;color:var(--scw-quieto)}
.cf-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
@media(prefers-reduced-motion:reduce){.g-linha,.g-areaC{transition:none}}

/* compacto (painéis laterais, cabeçalhos) */
.grafico--compacto{margin-top:.8rem;padding:.8rem .7rem .7rem;border-radius:14px}
.grafico--compacto .grafico-topo{margin-bottom:.4rem;gap:.5rem}
.grafico--compacto .grafico-tit{font-size:.82rem}
.grafico--compacto .g-chip{padding:.28rem .6rem;font-size:.7rem}
.grafico--compacto .grafico-insights{margin-top:.6rem;font-size:.76rem;gap:.25rem .9rem}
.grafico--compacto .grafico-nota{font-size:.68rem}

/* ── cartão de números (sc_widget) ───────────────────────────── */
.scw{box-sizing:border-box;text-align:left;margin-top:1.2rem;font-size:14px;line-height:1.5}
.scw-rot{display:flex;align-items:center;gap:.45rem;margin:0 0 .7rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.scw-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
@media(min-width:640px){.scw:not(.scw--compacto) .scw-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scw--compacto .scw-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.scw-stat{border-radius:12px;padding:.6rem .7rem;min-width:0}
.scw-stat b{display:block;font-size:1.2rem;font-weight:800;line-height:1.1;white-space:nowrap}
.scw-stat span{display:block;margin-top:.25rem;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}
.scw .grafico{margin-top:.8rem}
.scw-fonte{margin:.6rem 0 0;font-size:.68rem;line-height:1.5}
.scw--escuro .scw-rot{color:rgba(255,255,255,.72)}
.scw--escuro .scw-rot i{color:#FFD700}
.scw--escuro .scw-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.scw--escuro .scw-stat b{color:#fff}
.scw--escuro .scw-stat span{color:rgba(255,255,255,.62)}
.scw--escuro .scw-fonte{color:rgba(255,255,255,.5)}
.scw--escuro .grafico{--scw-bg:rgba(255,255,255,.05);--scw-borda:rgba(255,255,255,.12)}
.scw--claro .scw-rot{color:#475569}
.scw--claro .scw-rot i{color:#B8860B}
.scw--claro .scw-stat{background:#f8fafc;border:1px solid #e2e8f0}
.scw--claro .scw-stat b{color:#0f172a}
.scw--claro .scw-stat span{color:#64748b}
.scw--claro .scw-fonte{color:#64748b}