{"id":11,"date":"2026-04-23T16:14:24","date_gmt":"2026-04-23T19:14:24","guid":{"rendered":"https:\/\/dash.descontoslimitados.com.br\/?page_id=11"},"modified":"2026-04-23T16:49:19","modified_gmt":"2026-04-23T19:49:19","slug":"dash","status":"publish","type":"page","link":"https:\/\/dash.descontoslimitados.com.br\/index.php\/dash\/","title":{"rendered":"dash"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b84fce e-flex e-con-boxed e-con e-parent\" data-id=\"1b84fce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-742ebed elementor-widget elementor-widget-html\" data-id=\"742ebed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>SEO Dashboard<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.js\"><\/script>\r\n<style>\r\n  :root {\r\n    --bg: #0d0f12;\r\n    --bg2: #13161b;\r\n    --bg3: #1a1e26;\r\n    --border: rgba(255,255,255,0.07);\r\n    --border2: rgba(255,255,255,0.12);\r\n    --text: #f0f2f5;\r\n    --text2: #8b93a0;\r\n    --text3: #555e6b;\r\n    --accent: #3b82f6;\r\n    --accent2: #10b981;\r\n    --accent3: #f59e0b;\r\n    --accent4: #ec4899;\r\n    --red: #ef4444;\r\n    --font: 'DM Sans', sans-serif;\r\n    --mono: 'DM Mono', monospace;\r\n    --radius: 10px;\r\n    --radius-lg: 14px;\r\n  }\r\n\r\n  * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n  body {\r\n    background: var(--bg);\r\n    color: var(--text);\r\n    font-family: var(--font);\r\n    font-size: 14px;\r\n    min-height: 100vh;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  \/* \u2500\u2500 SIDEBAR \u2500\u2500 *\/\r\n  .sidebar {\r\n    position: fixed; left: 0; top: 0; bottom: 0;\r\n    width: 220px;\r\n    background: var(--bg2);\r\n    border-right: 1px solid var(--border);\r\n    display: flex; flex-direction: column;\r\n    z-index: 100;\r\n    transition: transform 0.3s;\r\n  }\r\n\r\n  .sidebar-logo {\r\n    padding: 24px 20px 16px;\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n  .logo-mark {\r\n    display: flex; align-items: center; gap: 10px;\r\n  }\r\n  .logo-icon {\r\n    width: 32px; height: 32px; border-radius: 8px;\r\n    background: linear-gradient(135deg, var(--accent), var(--accent2));\r\n    display: flex; align-items: center; justify-content: center;\r\n  }\r\n  .logo-icon svg { width: 16px; height: 16px; }\r\n  .logo-text { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }\r\n  .logo-sub { font-size: 10px; color: var(--text3); margin-top: 1px; letter-spacing: 0.06em; text-transform: uppercase; }\r\n\r\n  .sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }\r\n  .nav-section { font-size: 10px; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 10px 4px; margin-top: 8px; }\r\n  .nav-item {\r\n    display: flex; align-items: center; gap: 10px;\r\n    padding: 8px 10px; border-radius: 8px; cursor: pointer;\r\n    color: var(--text2); font-size: 13px; font-weight: 400;\r\n    transition: all 0.15s; margin-bottom: 2px;\r\n    border: 1px solid transparent;\r\n  }\r\n  .nav-item:hover { background: var(--bg3); color: var(--text); }\r\n  .nav-item.active { background: rgba(59,130,246,0.12); color: var(--accent); border-color: rgba(59,130,246,0.2); }\r\n  .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }\r\n\r\n  .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); }\r\n  .conn-status {\r\n    display: flex; align-items: center; gap: 8px;\r\n    padding: 10px 12px; border-radius: var(--radius);\r\n    background: var(--bg3); font-size: 12px;\r\n  }\r\n  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }\r\n  .dot.green { background: var(--accent2); box-shadow: 0 0 6px rgba(16,185,129,0.5); }\r\n  .dot.amber { background: var(--accent3); box-shadow: 0 0 6px rgba(245,158,11,0.5); }\r\n\r\n  \/* \u2500\u2500 MAIN \u2500\u2500 *\/\r\n  .main {\r\n    margin-left: 220px;\r\n    min-height: 100vh;\r\n    display: flex; flex-direction: column;\r\n  }\r\n\r\n  .topbar {\r\n    position: sticky; top: 0; z-index: 50;\r\n    background: rgba(13,15,18,0.85);\r\n    backdrop-filter: blur(12px);\r\n    border-bottom: 1px solid var(--border);\r\n    padding: 0 28px;\r\n    height: 60px;\r\n    display: flex; align-items: center; justify-content: space-between; gap: 16px;\r\n  }\r\n\r\n  .topbar-left { display: flex; align-items: center; gap: 12px; }\r\n  .page-title { font-size: 15px; font-weight: 500; }\r\n  .page-sub { font-size: 12px; color: var(--text3); }\r\n\r\n  .topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }\r\n\r\n  .period-btn {\r\n    display: flex; border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden;\r\n  }\r\n  .pbtn {\r\n    padding: 6px 12px; font-size: 12px; font-family: var(--font); cursor: pointer;\r\n    background: transparent; border: none; color: var(--text2); transition: all 0.15s;\r\n  }\r\n  .pbtn:hover { color: var(--text); background: var(--bg3); }\r\n  .pbtn.active { background: var(--accent); color: #fff; font-weight: 500; }\r\n\r\n  .date-pill {\r\n    display: flex; align-items: center; gap: 6px;\r\n    padding: 6px 12px; border-radius: var(--radius);\r\n    border: 1px solid var(--border2); font-size: 12px; color: var(--text2);\r\n    cursor: pointer; background: transparent; transition: all 0.15s; font-family: var(--font);\r\n  }\r\n  .date-pill:hover { border-color: var(--accent); color: var(--text); }\r\n\r\n  \/* \u2500\u2500 AUTH SCREEN \u2500\u2500 *\/\r\n  .auth-wrap {\r\n    flex: 1; display: flex; align-items: center; justify-content: center;\r\n    padding: 40px;\r\n  }\r\n  .auth-card {\r\n    background: var(--bg2); border: 1px solid var(--border);\r\n    border-radius: var(--radius-lg); padding: 40px;\r\n    max-width: 460px; width: 100%; text-align: center;\r\n  }\r\n  .auth-graphic {\r\n    width: 72px; height: 72px; border-radius: 18px;\r\n    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(16,185,129,0.15));\r\n    border: 1px solid rgba(59,130,246,0.2);\r\n    display: flex; align-items: center; justify-content: center;\r\n    margin: 0 auto 24px; font-size: 28px;\r\n  }\r\n  .auth-title { font-size: 20px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.03em; }\r\n  .auth-desc { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 28px; }\r\n  .auth-scopes {\r\n    display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; text-align: left;\r\n  }\r\n  .scope-item {\r\n    display: flex; align-items: center; gap: 10px;\r\n    padding: 10px 14px; background: var(--bg3);\r\n    border-radius: var(--radius); font-size: 12px; color: var(--text2);\r\n    border: 1px solid var(--border);\r\n  }\r\n  .scope-icon { font-size: 16px; flex-shrink: 0; }\r\n  .btn-google {\r\n    display: flex; align-items: center; justify-content: center; gap: 10px;\r\n    width: 100%; padding: 12px; border-radius: var(--radius);\r\n    background: #fff; color: #1a1a1a; border: none;\r\n    font-size: 14px; font-weight: 500; font-family: var(--font);\r\n    cursor: pointer; transition: all 0.2s;\r\n  }\r\n  .btn-google:hover { background: #f0f0f0; transform: translateY(-1px); }\r\n  .btn-google svg { width: 18px; height: 18px; }\r\n  .auth-note { margin-top: 16px; font-size: 11px; color: var(--text3); }\r\n\r\n  \/* \u2500\u2500 CONFIG SECTION \u2500\u2500 *\/\r\n  .config-bar {\r\n    padding: 14px 28px;\r\n    background: rgba(245,158,11,0.06);\r\n    border-bottom: 1px solid rgba(245,158,11,0.15);\r\n    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;\r\n  }\r\n  .config-label { font-size: 12px; color: var(--accent3); font-weight: 500; }\r\n  .config-input {\r\n    flex: 1; min-width: 200px; max-width: 280px;\r\n    background: var(--bg3); border: 1px solid var(--border2);\r\n    border-radius: 8px; padding: 7px 12px;\r\n    font-size: 12px; color: var(--text); font-family: var(--font);\r\n    outline: none; transition: border-color 0.15s;\r\n  }\r\n  .config-input:focus { border-color: var(--accent); }\r\n  .config-input::placeholder { color: var(--text3); }\r\n  .btn-load {\r\n    padding: 8px 18px; background: var(--accent); color: #fff;\r\n    border: none; border-radius: 8px; font-size: 12px;\r\n    font-weight: 500; font-family: var(--font); cursor: pointer;\r\n    transition: all 0.15s;\r\n  }\r\n  .btn-load:hover { background: #2563eb; }\r\n  .btn-load:disabled { opacity: 0.5; cursor: not-allowed; }\r\n  .error-banner {\r\n    width: 100%; padding: 8px 12px;\r\n    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);\r\n    border-radius: 8px; font-size: 12px; color: #f87171;\r\n    display: none;\r\n  }\r\n\r\n  \/* \u2500\u2500 CONTENT \u2500\u2500 *\/\r\n  .content { padding: 24px 28px; flex: 1; }\r\n\r\n  .kpi-row {\r\n    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n    gap: 12px; margin-bottom: 20px;\r\n    animation: fadeUp 0.4s ease both;\r\n  }\r\n  @keyframes fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }\r\n\r\n  .kpi-card {\r\n    background: var(--bg2); border: 1px solid var(--border);\r\n    border-radius: var(--radius-lg); padding: 16px 18px;\r\n    position: relative; overflow: hidden;\r\n    transition: border-color 0.2s;\r\n  }\r\n  .kpi-card:hover { border-color: var(--border2); }\r\n  .kpi-card::before {\r\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\r\n  }\r\n  .kpi-card.blue::before { background: linear-gradient(90deg, var(--accent), transparent); }\r\n  .kpi-card.green::before { background: linear-gradient(90deg, var(--accent2), transparent); }\r\n  .kpi-card.amber::before { background: linear-gradient(90deg, var(--accent3), transparent); }\r\n  .kpi-card.pink::before { background: linear-gradient(90deg, var(--accent4), transparent); }\r\n  .kpi-card.teal::before { background: linear-gradient(90deg, #06b6d4, transparent); }\r\n  .kpi-card.violet::before { background: linear-gradient(90deg, #8b5cf6, transparent); }\r\n\r\n  .kpi-label { font-size: 11px; color: var(--text3); margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }\r\n  .kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); margin-bottom: 5px; }\r\n  .kpi-meta { font-size: 11px; display: flex; align-items: center; gap: 4px; }\r\n  .up { color: var(--accent2); } .down { color: var(--red); } .neutral { color: var(--text3); }\r\n  .kpi-skeleton { width: 80px; height: 24px; background: var(--bg3); border-radius: 4px; animation: shimmer 1.5s infinite; }\r\n  @keyframes shimmer { 0%,100%{opacity:0.5} 50%{opacity:1} }\r\n\r\n  .charts-grid {\r\n    display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 20px;\r\n    animation: fadeUp 0.4s ease 0.1s both;\r\n  }\r\n  @media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }\r\n\r\n  .charts-row {\r\n    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px;\r\n    animation: fadeUp 0.4s ease 0.2s both;\r\n  }\r\n  @media (max-width: 800px) { .charts-row { grid-template-columns: 1fr; } }\r\n\r\n  .card {\r\n    background: var(--bg2); border: 1px solid var(--border);\r\n    border-radius: var(--radius-lg); overflow: hidden;\r\n  }\r\n  .card-header {\r\n    padding: 16px 18px 12px;\r\n    display: flex; align-items: center; justify-content: space-between;\r\n    border-bottom: 1px solid var(--border);\r\n  }\r\n  .card-title { font-size: 13px; font-weight: 500; }\r\n  .card-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }\r\n  .card-body { padding: 16px 18px; }\r\n\r\n  .legend-row { display: flex; gap: 14px; flex-wrap: wrap; }\r\n  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }\r\n  .legend-swatch { width: 8px; height: 8px; border-radius: 2px; }\r\n\r\n  .chart-wrap { position: relative; width: 100%; }\r\n\r\n  \/* \u2500\u2500 TABLE \u2500\u2500 *\/\r\n  .tabs-row {\r\n    display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 18px;\r\n  }\r\n  .tab {\r\n    padding: 12px 14px; font-size: 12px; font-family: var(--font);\r\n    cursor: pointer; border: none; background: transparent;\r\n    color: var(--text3); border-bottom: 2px solid transparent;\r\n    margin-bottom: -1px; transition: all 0.15s; font-weight: 400;\r\n  }\r\n  .tab:hover { color: var(--text2); }\r\n  .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }\r\n\r\n  .data-table { width: 100%; border-collapse: collapse; font-size: 12px; }\r\n  .data-table th {\r\n    text-align: left; padding: 10px 12px;\r\n    font-size: 10px; color: var(--text3); font-weight: 500;\r\n    text-transform: uppercase; letter-spacing: 0.07em;\r\n    background: var(--bg3); border-bottom: 1px solid var(--border);\r\n  }\r\n  .data-table th:first-child { padding-left: 18px; }\r\n  .data-table th:last-child { text-align: right; padding-right: 18px; }\r\n  .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: middle; }\r\n  .data-table td:first-child { padding-left: 18px; color: var(--text); }\r\n  .data-table td:last-child { text-align: right; padding-right: 18px; }\r\n  .data-table tr:last-child td { border-bottom: none; }\r\n  .data-table tr:hover td { background: rgba(255,255,255,0.02); }\r\n\r\n  .page-path { font-family: var(--mono); font-size: 11px; color: var(--text); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }\r\n  .query-chip { display: inline-block; background: var(--bg3); border: 1px solid var(--border2); border-radius: 5px; padding: 2px 7px; font-family: var(--mono); font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n\r\n  .bar-mini { display: flex; align-items: center; gap: 7px; }\r\n  .bar-track { flex: 1; height: 3px; background: var(--bg3); border-radius: 2px; min-width: 50px; }\r\n  .bar-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.6s ease; }\r\n\r\n  .pos-badge {\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    width: 28px; height: 20px; border-radius: 4px; font-size: 10px; font-weight: 600;\r\n  }\r\n  .pos-top { background: rgba(16,185,129,0.15); color: var(--accent2); }\r\n  .pos-mid { background: rgba(245,158,11,0.12); color: var(--accent3); }\r\n  .pos-low { background: rgba(139,147,160,0.1); color: var(--text3); }\r\n\r\n  .ctr-bar { display: flex; align-items: center; gap: 6px; }\r\n  .ctr-track { width: 50px; height: 3px; background: var(--bg3); border-radius: 2px; }\r\n  .ctr-fill { height: 100%; border-radius: 2px; background: var(--accent2); }\r\n\r\n  .empty-row td { text-align: center; padding: 32px !important; color: var(--text3); font-size: 12px; }\r\n\r\n  .loading-row td { padding: 32px 0 !important; text-align: center; }\r\n  .spinner { width: 20px; height: 20px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }\r\n  @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n  \/* \u2500\u2500 BADGE \u2500\u2500 *\/\r\n  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 500; }\r\n  .badge-blue { background: rgba(59,130,246,0.12); color: #93c5fd; border: 1px solid rgba(59,130,246,0.2); }\r\n  .badge-green { background: rgba(16,185,129,0.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.2); }\r\n\r\n  \/* \u2500\u2500 SETUP GUIDE \u2500\u2500 *\/\r\n  .setup-card {\r\n    background: var(--bg2); border: 1px solid rgba(245,158,11,0.2);\r\n    border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 20px;\r\n    animation: fadeUp 0.4s ease both;\r\n  }\r\n  .setup-title { font-size: 13px; font-weight: 500; color: var(--accent3); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }\r\n  .setup-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 10px; }\r\n  .setup-step { background: var(--bg3); border-radius: var(--radius); padding: 12px 14px; border: 1px solid var(--border); }\r\n  .step-num { font-size: 10px; color: var(--accent3); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 4px; }\r\n  .step-text { font-size: 12px; color: var(--text2); line-height: 1.5; }\r\n  .step-link { color: var(--accent); text-decoration: none; }\r\n  .step-link:hover { text-decoration: underline; }\r\n\r\n  \/* responsive *\/\r\n  @media (max-width: 680px) {\r\n    .sidebar { transform: translateX(-100%); }\r\n    .main { margin-left: 0; }\r\n    .content { padding: 16px; }\r\n    .topbar { padding: 0 16px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- SIDEBAR -->\r\n<nav class=\"sidebar\">\r\n  <div class=\"sidebar-logo\">\r\n    <div class=\"logo-mark\">\r\n      <div class=\"logo-icon\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"none\">\r\n          <path d=\"M2 12l4-4 3 3 5-6\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <div>\r\n        <div class=\"logo-text\">SEO Insights<\/div>\r\n        <div class=\"logo-sub\">Analytics<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sidebar-nav\">\r\n    <div class=\"nav-section\">Principal<\/div>\r\n    <div class=\"nav-item active\" onclick=\"showSection('overview')\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M1 1h6v6H1zm8 0h6v6H9zM1 9h6v6H1zm8 0h6v6H9z\"\/><\/svg>\r\n      Vis\u00e3o geral\r\n    <\/div>\r\n    <div class=\"nav-item\" onclick=\"showSection('traffic')\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M8 1l7 14H1L8 1z\"\/><\/svg>\r\n      Tr\u00e1fego\r\n    <\/div>\r\n    <div class=\"nav-item\" onclick=\"showSection('search')\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><circle cx=\"7\" cy=\"7\" r=\"5\"\/><path d=\"M11 11l3 3\"\/><\/svg>\r\n      Busca org\u00e2nica\r\n    <\/div>\r\n\r\n    <div class=\"nav-section\">Relat\u00f3rios<\/div>\r\n    <div class=\"nav-item\" onclick=\"showSection('pages')\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M3 1h7l4 4v10H3V1zm7 0v4h4\"\/><\/svg>\r\n      P\u00e1ginas\r\n    <\/div>\r\n    <div class=\"nav-item\" onclick=\"showSection('queries')\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M1 3h14v2H1zm0 4h10v2H1zm0 4h7v2H1z\"\/><\/svg>\r\n      Queries\r\n    <\/div>\r\n    <div class=\"nav-item\" onclick=\"showSection('geo')\">\r\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M2 8h12M8 2c-2 2-3 4-3 6s1 4 3 6M8 2c2 2 3 4 3 6s-1 4-3 6\"\/><\/svg>\r\n      Geogr\u00e1fico\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sidebar-footer\">\r\n    <div class=\"conn-status\" id=\"connStatus\">\r\n      <div class=\"dot\" id=\"connDot\"><\/div>\r\n      <div style=\"flex:1;\">\r\n        <div style=\"font-size:11px; font-weight:500;\" id=\"connLabel\">Desconectado<\/div>\r\n        <div style=\"font-size:10px; color:var(--text3); margin-top:1px;\" id=\"connSub\">Fa\u00e7a login para continuar<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/nav>\r\n\r\n<!-- MAIN -->\r\n<div class=\"main\">\r\n\r\n  <!-- TOPBAR -->\r\n  <div class=\"topbar\">\r\n    <div class=\"topbar-left\">\r\n      <div>\r\n        <div class=\"page-title\" id=\"pageTitle\">Vis\u00e3o geral<\/div>\r\n        <div class=\"page-sub\" id=\"pageSubtitle\">Resumo de desempenho SEO<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"topbar-right\">\r\n      <div class=\"period-btn\">\r\n        <button class=\"pbtn active\" onclick=\"setPeriod(7,this)\">7d<\/button>\r\n        <button class=\"pbtn\" onclick=\"setPeriod(28,this)\">28d<\/button>\r\n        <button class=\"pbtn\" onclick=\"setPeriod(90,this)\">90d<\/button>\r\n      <\/div>\r\n      <button class=\"date-pill\" id=\"dateRangeBtn\">\r\n        <svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" fill=\"currentColor\" style=\"opacity:0.5\">\r\n          <path d=\"M4 1v2H2.5A1.5 1.5 0 001 4.5v9A1.5 1.5 0 002.5 15h11A1.5 1.5 0 0015 13.5v-9A1.5 1.5 0 0013.5 3H12V1h-1v2H5V1H4zm0 4h8v1H4V5z\"\/>\r\n        <\/svg>\r\n        <span id=\"dateLabel\">\u2014<\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- AUTH -->\r\n  <div class=\"auth-wrap\" id=\"authSection\">\r\n    <div class=\"auth-card\">\r\n      <div class=\"auth-graphic\">\ud83d\udcca<\/div>\r\n      <div class=\"auth-title\">Conectar conta Google<\/div>\r\n      <div class=\"auth-desc\">\r\n        Autorize o acesso ao Google Analytics 4 e Search Console para visualizar m\u00e9tricas reais do seu site em tempo real.\r\n      <\/div>\r\n      <div class=\"auth-scopes\">\r\n        <div class=\"scope-item\">\r\n          <span class=\"scope-icon\">\ud83d\udcc8<\/span>\r\n          <div>\r\n            <div style=\"font-weight:500; color:var(--text); font-size:12px;\">Google Analytics 4<\/div>\r\n            <div style=\"font-size:11px; margin-top:1px;\">Sess\u00f5es, usu\u00e1rios, p\u00e1ginas, convers\u00f5es<\/div>\r\n          <\/div>\r\n          <span class=\"badge badge-blue\" style=\"margin-left:auto;\">Somente leitura<\/span>\r\n        <\/div>\r\n        <div class=\"scope-item\">\r\n          <span class=\"scope-icon\">\ud83d\udd0d<\/span>\r\n          <div>\r\n            <div style=\"font-weight:500; color:var(--text); font-size:12px;\">Google Search Console<\/div>\r\n            <div style=\"font-size:11px; margin-top:1px;\">Impress\u00f5es, cliques, CTR, posi\u00e7\u00e3o<\/div>\r\n          <\/div>\r\n          <span class=\"badge badge-blue\" style=\"margin-left:auto;\">Somente leitura<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <button class=\"btn-google\" onclick=\"startOAuth()\">\r\n        <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n          <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\/>\r\n          <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\/>\r\n          <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z\"\/>\r\n          <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\/>\r\n        <\/svg>\r\n        Entrar com Google\r\n      <\/button>\r\n      <div class=\"auth-note\">\r\n        \u26a0\ufe0f Para usar OAuth, configure um Client ID no Google Cloud Console.<br>\r\n        <a href=\"https:\/\/console.cloud.google.com\" target=\"_blank\" style=\"color:var(--accent)\">Acessar Google Cloud Console \u2192<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- CONFIG BAR -->\r\n  <div class=\"config-bar\" id=\"configBar\" style=\"display:none;\">\r\n    <span class=\"config-label\">\u2699 Configurar<\/span>\r\n    <input class=\"config-input\" id=\"ga4Id\" placeholder=\"GA4 Property ID (ex: 123456789)\" \/>\r\n    <input class=\"config-input\" id=\"gscUrl\" placeholder=\"Search Console (ex: https:\/\/seusite.com)\" \/>\r\n    <button class=\"btn-load\" id=\"loadBtn\" onclick=\"loadAllData()\">Carregar dados<\/button>\r\n    <button onclick=\"relogin()\" style=\"padding:8px 14px; background:transparent; color:var(--text2); border:1px solid var(--border2); border-radius:8px; font-size:12px; font-family:var(--font); cursor:pointer;\" title=\"Refazer login Google\">\ud83d\udd04 Reconectar<\/button>\r\n    <div class=\"error-banner\" id=\"errorBanner\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- CONTENT -->\r\n  <div class=\"content\" id=\"dashContent\" style=\"display:none;\">\r\n\r\n    <!-- Setup guide -->\r\n    <div class=\"setup-card\" id=\"setupGuide\" style=\"display:none;\">\r\n      <div class=\"setup-title\">\r\n        \ud83d\udccb Como configurar\r\n      <\/div>\r\n      <div class=\"setup-steps\">\r\n        <div class=\"setup-step\">\r\n          <div class=\"step-num\">PASSO 1<\/div>\r\n          <div class=\"step-text\">Acesse o <a href=\"https:\/\/console.cloud.google.com\" target=\"_blank\" class=\"step-link\">Google Cloud Console<\/a>, crie um projeto e ative as APIs: <strong>Analytics Data API<\/strong> e <strong>Search Console API<\/strong><\/div>\r\n        <\/div>\r\n        <div class=\"setup-step\">\r\n          <div class=\"step-num\">PASSO 2<\/div>\r\n          <div class=\"step-text\">Em \"Credenciais\", crie um <strong>OAuth 2.0 Client ID<\/strong> do tipo \"Aplicativo da Web\". Adicione o dom\u00ednio deste dashboard como URI de redirecionamento autorizado.<\/div>\r\n        <\/div>\r\n        <div class=\"setup-step\">\r\n          <div class=\"step-num\">PASSO 3<\/div>\r\n          <div class=\"step-text\">Substitua <code style=\"background:var(--bg3);padding:1px 4px;border-radius:3px;\">SEU_CLIENT_ID_AQUI<\/code> no JavaScript desta p\u00e1gina pelo seu Client ID gerado.<\/div>\r\n        <\/div>\r\n        <div class=\"setup-step\">\r\n          <div class=\"step-num\">PASSO 4<\/div>\r\n          <div class=\"step-text\">Informe o <strong>GA4 Property ID<\/strong> (encontrado em Admin \u2192 Detalhes da Propriedade) e a <strong>URL do Search Console<\/strong>.<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- KPIs -->\r\n    <div class=\"kpi-row\" id=\"kpiRow\">\r\n      <div class=\"kpi-card blue\">\r\n        <div class=\"kpi-label\">Sess\u00f5es<\/div>\r\n        <div class=\"kpi-value\" id=\"kSessions\"><div class=\"kpi-skeleton\"><\/div><\/div>\r\n        <div class=\"kpi-meta neutral\" id=\"kSessionsDelta\">aguardando dados<\/div>\r\n      <\/div>\r\n      <div class=\"kpi-card green\">\r\n        <div class=\"kpi-label\">Usu\u00e1rios ativos<\/div>\r\n        <div class=\"kpi-value\" id=\"kUsers\"><div class=\"kpi-skeleton\"><\/div><\/div>\r\n        <div class=\"kpi-meta neutral\" id=\"kUsersDelta\">aguardando dados<\/div>\r\n      <\/div>\r\n      <div class=\"kpi-card amber\">\r\n        <div class=\"kpi-label\">Impress\u00f5es<\/div>\r\n        <div class=\"kpi-value\" id=\"kImpr\"><div class=\"kpi-skeleton\"><\/div><\/div>\r\n        <div class=\"kpi-meta neutral\" id=\"kImprDelta\">aguardando dados<\/div>\r\n      <\/div>\r\n      <div class=\"kpi-card pink\">\r\n        <div class=\"kpi-label\">Cliques org\u00e2nicos<\/div>\r\n        <div class=\"kpi-value\" id=\"kClicks\"><div class=\"kpi-skeleton\"><\/div><\/div>\r\n        <div class=\"kpi-meta neutral\" id=\"kClicksDelta\">aguardando dados<\/div>\r\n      <\/div>\r\n      <div class=\"kpi-card teal\">\r\n        <div class=\"kpi-label\">CTR m\u00e9dio<\/div>\r\n        <div class=\"kpi-value\" id=\"kCtr\"><div class=\"kpi-skeleton\"><\/div><\/div>\r\n        <div class=\"kpi-meta neutral\" id=\"kCtrDelta\">aguardando dados<\/div>\r\n      <\/div>\r\n      <div class=\"kpi-card violet\">\r\n        <div class=\"kpi-label\">Posi\u00e7\u00e3o m\u00e9dia<\/div>\r\n        <div class=\"kpi-value\" id=\"kPos\"><div class=\"kpi-skeleton\"><\/div><\/div>\r\n        <div class=\"kpi-meta neutral\" id=\"kPosDelta\">aguardando dados<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Traffic chart + donut -->\r\n    <div class=\"charts-grid\">\r\n      <div class=\"card\">\r\n        <div class=\"card-header\">\r\n          <div>\r\n            <div class=\"card-title\">Tr\u00e1fego ao longo do tempo<\/div>\r\n            <div class=\"card-sub\">Sess\u00f5es vs Cliques org\u00e2nicos<\/div>\r\n          <\/div>\r\n          <div class=\"legend-row\">\r\n            <div class=\"legend-item\"><div class=\"legend-swatch\" style=\"background:#3b82f6;\"><\/div>Sess\u00f5es<\/div>\r\n            <div class=\"legend-item\"><div class=\"legend-swatch\" style=\"background:#10b981; border-style:dashed;\"><\/div>Cliques<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <div class=\"chart-wrap\" style=\"height:220px;\">\r\n            <canvas id=\"trafficChart\" role=\"img\" aria-label=\"Gr\u00e1fico de tr\u00e1fego ao longo do tempo\"><\/canvas>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card\">\r\n        <div class=\"card-header\">\r\n          <div>\r\n            <div class=\"card-title\">Canais<\/div>\r\n            <div class=\"card-sub\">Origem do tr\u00e1fego<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <div class=\"chart-wrap\" style=\"height:220px;\">\r\n            <canvas id=\"channelsChart\" role=\"img\" aria-label=\"Canais de aquisi\u00e7\u00e3o\"><\/canvas>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Devices + CTR trend -->\r\n    <div class=\"charts-row\">\r\n      <div class=\"card\">\r\n        <div class=\"card-header\">\r\n          <div>\r\n            <div class=\"card-title\">Dispositivos<\/div>\r\n            <div class=\"card-sub\">% sess\u00f5es por tipo<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <div class=\"chart-wrap\" style=\"height:190px;\">\r\n            <canvas id=\"devicesChart\" role=\"img\" aria-label=\"Distribui\u00e7\u00e3o por dispositivo\"><\/canvas>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card\">\r\n        <div class=\"card-header\">\r\n          <div>\r\n            <div class=\"card-title\">CTR por posi\u00e7\u00e3o<\/div>\r\n            <div class=\"card-sub\">Taxa de clique estimada<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"card-body\">\r\n          <div class=\"chart-wrap\" style=\"height:190px;\">\r\n            <canvas id=\"ctrChart\" role=\"img\" aria-label=\"CTR por posi\u00e7\u00e3o no Google\"><\/canvas>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Data tables -->\r\n    <div class=\"card\" id=\"tableCard\">\r\n      <div class=\"tabs-row\">\r\n        <button class=\"tab active\" onclick=\"switchTab('pages',this)\">Top p\u00e1ginas<\/button>\r\n        <button class=\"tab\" onclick=\"switchTab('queries',this)\">Queries<\/button>\r\n        <button class=\"tab\" onclick=\"switchTab('countries',this)\">Pa\u00edses<\/button>\r\n      <\/div>\r\n\r\n      <div id=\"tabPages\">\r\n        <table class=\"data-table\">\r\n          <thead><tr>\r\n            <th style=\"width:35%\">P\u00e1gina<\/th>\r\n            <th>Sess\u00f5es<\/th>\r\n            <th>Cliques<\/th>\r\n            <th>Impress\u00f5es<\/th>\r\n            <th>CTR<\/th>\r\n            <th>Posi\u00e7\u00e3o<\/th>\r\n          <\/tr><\/thead>\r\n          <tbody id=\"pagesTbody\">\r\n            <tr class=\"loading-row\"><td colspan=\"6\"><div class=\"spinner\"><\/div><\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n      <\/div>\r\n\r\n      <div id=\"tabQueries\" style=\"display:none;\">\r\n        <table class=\"data-table\">\r\n          <thead><tr>\r\n            <th style=\"width:40%\">Query<\/th>\r\n            <th>Cliques<\/th>\r\n            <th>Impress\u00f5es<\/th>\r\n            <th>CTR<\/th>\r\n            <th>Posi\u00e7\u00e3o<\/th>\r\n          <\/tr><\/thead>\r\n          <tbody id=\"queriesTbody\">\r\n            <tr class=\"loading-row\"><td colspan=\"5\"><div class=\"spinner\"><\/div><\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n      <\/div>\r\n\r\n      <div id=\"tabCountries\" style=\"display:none;\">\r\n        <table class=\"data-table\">\r\n          <thead><tr>\r\n            <th>Pa\u00eds<\/th>\r\n            <th>Cliques<\/th>\r\n            <th>Impress\u00f5es<\/th>\r\n            <th>CTR<\/th>\r\n            <th>% do total<\/th>\r\n          <\/tr><\/thead>\r\n          <tbody id=\"countriesTbody\">\r\n            <tr class=\"loading-row\"><td colspan=\"5\"><div class=\"spinner\"><\/div><\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/content -->\r\n<\/div><!-- \/main -->\r\n\r\n<script>\r\n\/* =========================================================\r\n   CONFIGURA\u00c7\u00c3O \u2014 substitua os valores abaixo\r\n   ========================================================= *\/\r\nconst CONFIG = {\r\n  \/\/ \u270f\ufe0f Cole aqui o seu Client ID do Google Cloud Console\r\n  \/\/ Exemplo: '123456789-abcdefg.apps.googleusercontent.com'\r\n  OAUTH_CLIENT_ID: '355863167274-2hm6mkrvll1f3e7321uvpbm4frdrjc95.apps.googleusercontent.com',\r\n\r\n  \/\/ \u270f\ufe0f URL exata onde este arquivo est\u00e1 hospedado (sem # ou ?)\r\n  \/\/ Deve ser ID\u00caNTICA ao que est\u00e1 cadastrado no Google Cloud Console\r\n  REDIRECT_URI: 'https:\/\/dash.descontoslimitados.com.br\/index.php\/dash\/',\r\n\r\n  \/\/ Mude para false ap\u00f3s inserir o Client ID real acima\r\n  DEMO_MODE: false\r\n};\r\n\r\n\/* =========================================================\r\n   STATE\r\n   ========================================================= *\/\r\nlet state = {\r\n  token: null,\r\n  ga4Id: '',\r\n  gscUrl: '',\r\n  period: 7,\r\n  charts: {}\r\n};\r\n\r\n\/* =========================================================\r\n   INIT\r\n   ========================================================= *\/\r\n\/\/ Captura o token ANTES do DOMContentLoaded, logo que o script roda\r\n\/\/ O WordPress pode redirecionar a p\u00e1gina antes do evento disparar\r\n(function captureTokenEarly() {\r\n  try {\r\n    \/\/ Tenta pegar token do hash (#access_token=...)\r\n    if (window.location.hash && window.location.hash.includes('access_token')) {\r\n      const p = new URLSearchParams(window.location.hash.replace(\/^#\/, ''));\r\n      const t = p.get('access_token');\r\n      if (t) {\r\n        sessionStorage.setItem('seo_dash_token', t);\r\n        sessionStorage.setItem('seo_dash_ga4', sessionStorage.getItem('seo_dash_ga4_pending') || '');\r\n        sessionStorage.setItem('seo_dash_gsc', sessionStorage.getItem('seo_dash_gsc_pending') || '');\r\n        \/\/ Limpa o hash sem recarregar\r\n        history.replaceState(null, '', window.location.pathname + window.location.search);\r\n      }\r\n    }\r\n    \/\/ Tenta pegar token da query string (?access_token=...) \u2014 alguns servidores convertem # em ?\r\n    if (window.location.search && window.location.search.includes('access_token')) {\r\n      const p = new URLSearchParams(window.location.search);\r\n      const t = p.get('access_token');\r\n      if (t) {\r\n        sessionStorage.setItem('seo_dash_token', t);\r\n        history.replaceState(null, '', window.location.pathname);\r\n      }\r\n    }\r\n  } catch(e) {}\r\n})();\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  updateDateLabel();\r\n\r\n  \/\/ Recupera token salvo no sessionStorage\r\n  const savedToken = sessionStorage.getItem('seo_dash_token');\r\n  if (savedToken) {\r\n    state.token = savedToken;\r\n    \/\/ Restaura IDs que estavam preenchidos antes do login\r\n    const savedGa4 = sessionStorage.getItem('seo_dash_ga4');\r\n    const savedGsc = sessionStorage.getItem('seo_dash_gsc');\r\n    if (savedGa4) document.getElementById('ga4Id').value = savedGa4;\r\n    if (savedGsc) document.getElementById('gscUrl').value = savedGsc;\r\n    updateConnStatus(true, 'Conectado', 'Google OAuth ativo');\r\n    showDashboard(true);\r\n    \/\/ Carrega automaticamente se tiver IDs salvos\r\n    if (savedGa4 || savedGsc) setTimeout(loadAllData, 300);\r\n    return;\r\n  }\r\n\r\n  showDashboard(false);\r\n});\r\n\r\nfunction startOAuth() {\r\n  if (CONFIG.DEMO_MODE || CONFIG.OAUTH_CLIENT_ID === 'SEU_CLIENT_ID_AQUI') {\r\n    document.getElementById('authSection').style.display = 'none';\r\n    document.getElementById('configBar').style.display = 'flex';\r\n    document.getElementById('dashContent').style.display = 'block';\r\n    document.getElementById('setupGuide').style.display = 'block';\r\n    updateConnStatus(false, 'Modo demo', 'Configure o Client ID para dados reais');\r\n    renderDemoCharts(); renderDemoTables(); renderDemoKPIs();\r\n    return;\r\n  }\r\n  \/\/ Salva IDs preenchidos para restaurar ap\u00f3s o redirect\r\n  const ga4Val = document.getElementById('ga4Id').value.trim();\r\n  const gscVal = document.getElementById('gscUrl').value.trim();\r\n  if (ga4Val) sessionStorage.setItem('seo_dash_ga4_pending', ga4Val);\r\n  if (gscVal) sessionStorage.setItem('seo_dash_gsc_pending', gscVal);\r\n\r\n  const scope = [\r\n    'https:\/\/www.googleapis.com\/auth\/analytics.readonly',\r\n    'https:\/\/www.googleapis.com\/auth\/webmasters.readonly'\r\n  ].join(' ');\r\n  const params = new URLSearchParams({\r\n    client_id: CONFIG.OAUTH_CLIENT_ID,\r\n    redirect_uri: CONFIG.REDIRECT_URI,\r\n    response_type: 'token',\r\n    scope,\r\n    include_granted_scopes: 'true',\r\n    prompt: 'select_account'\r\n  });\r\n  window.location.href = 'https:\/\/accounts.google.com\/o\/oauth2\/v2\/auth?' + params;\r\n}\r\n\r\nfunction relogin() {\r\n  \/\/ Salva IDs antes de redirecionar\r\n  const ga4Val = document.getElementById('ga4Id').value.trim();\r\n  const gscVal = document.getElementById('gscUrl').value.trim();\r\n  if (ga4Val) sessionStorage.setItem('seo_dash_ga4_pending', ga4Val);\r\n  if (gscVal) sessionStorage.setItem('seo_dash_gsc_pending', gscVal);\r\n  \/\/ Limpa token antigo\r\n  sessionStorage.removeItem('seo_dash_token');\r\n  state.token = null;\r\n  startOAuth();\r\n}\r\n\r\nfunction showDashboard(authenticated) {\r\n  document.getElementById('authSection').style.display = 'none';\r\n  document.getElementById('configBar').style.display = 'flex';\r\n  document.getElementById('dashContent').style.display = 'block';\r\n  if (!authenticated) {\r\n    document.getElementById('setupGuide').style.display = 'block';\r\n    updateConnStatus(false, 'Modo demo', 'Clique em \"Carregar dados\" para conectar');\r\n  }\r\n  renderDemoCharts(); renderDemoTables(); renderDemoKPIs();\r\n}\r\n\r\nfunction updateConnStatus(connected, label, sub) {\r\n  document.getElementById('connDot').className = 'dot ' + (connected ? 'green' : 'amber');\r\n  document.getElementById('connLabel').textContent = label;\r\n  document.getElementById('connSub').textContent = sub;\r\n}\r\n\r\n\/* =========================================================\r\n   PERIOD \/ DATE\r\n   ========================================================= *\/\r\nfunction setPeriod(days, btn) {\r\n  state.period = days;\r\n  document.querySelectorAll('.pbtn').forEach(b => b.classList.remove('active'));\r\n  btn.classList.add('active');\r\n  updateDateLabel();\r\n  if (state.token && (state.ga4Id || state.gscUrl)) loadAllData();\r\n  else if (CONFIG.DEMO_MODE) { renderDemoCharts(); renderDemoKPIs(); }\r\n}\r\n\r\nfunction updateDateLabel() {\r\n  const end = new Date();\r\n  const start = new Date(); start.setDate(end.getDate() - state.period);\r\n  const f = d => d.toLocaleDateString('pt-BR', {day:'2-digit',month:'short'});\r\n  document.getElementById('dateLabel').textContent = f(start) + ' \u2013 ' + f(end);\r\n}\r\n\r\nfunction dateRange() {\r\n  const end = new Date();\r\n  const start = new Date(); start.setDate(end.getDate() - state.period);\r\n  const fmt = d => d.toISOString().split('T')[0];\r\n  return { start: fmt(start), end: fmt(end) };\r\n}\r\n\r\nfunction shiftDate(d, n) {\r\n  const dt = new Date(d); dt.setDate(dt.getDate() + n);\r\n  return dt.toISOString().split('T')[0];\r\n}\r\n\r\n\/* =========================================================\r\n   LOAD DATA\r\n   ========================================================= *\/\r\nasync function loadAllData() {\r\n  const ga4 = document.getElementById('ga4Id').value.trim();\r\n  const gsc = document.getElementById('gscUrl').value.trim();\r\n  const err = document.getElementById('errorBanner');\r\n\r\n  if (!ga4 && !gsc) {\r\n    err.textContent = 'Informe pelo menos o GA4 Property ID ou a URL do Search Console.';\r\n    err.style.display = 'block'; return;\r\n  }\r\n\r\n  \/\/ Diagn\u00f3stico: mostra se tem token\r\n  if (!state.token) {\r\n    err.innerHTML = '\u26a0\ufe0f Sem token de autentica\u00e7\u00e3o. <strong>Fa\u00e7a login novamente<\/strong> clicando em \"Entrar com Google\" ou recarregue a p\u00e1gina.';\r\n    err.style.display = 'block'; return;\r\n  }\r\n\r\n  err.style.display = 'none';\r\n  document.getElementById('loadBtn').disabled = true;\r\n  document.getElementById('loadBtn').textContent = 'Carregando\u2026';\r\n\r\n  state.ga4Id = ga4; state.gscUrl = gsc;\r\n  document.getElementById('dashContent').style.display = 'block';\r\n  document.getElementById('setupGuide').style.display = 'none';\r\n  updateConnStatus(true, 'Carregando\u2026', gsc || ('GA4 ' + ga4));\r\n\r\n  try {\r\n    if (ga4) await fetchGA4(ga4);\r\n    if (gsc) {\r\n      await fetchGSC(gsc);\r\n      await fetchGSCPages(gsc);\r\n      await fetchGSCQueries(gsc);\r\n      await fetchGSCCountries(gsc);\r\n    }\r\n    updateConnStatus(true, 'Atualizado', new Date().toLocaleTimeString('pt-BR'));\r\n  } catch(e) {\r\n    err.textContent = 'Erro: ' + e.message + ' \u2014 Verifique permiss\u00f5es e IDs.';\r\n    err.style.display = 'block';\r\n    updateConnStatus(false, 'Erro na conex\u00e3o', e.message.slice(0,30));\r\n  }\r\n\r\n  document.getElementById('loadBtn').disabled = false;\r\n  document.getElementById('loadBtn').textContent = 'Carregar dados';\r\n}\r\n\r\nfunction authHeaders() {\r\n  return state.token\r\n    ? { 'Authorization': 'Bearer ' + state.token, 'Content-Type': 'application\/json' }\r\n    : { 'Content-Type': 'application\/json' };\r\n}\r\n\r\n\/* =========================================================\r\n   GA4\r\n   ========================================================= *\/\r\nasync function fetchGA4(propertyId) {\r\n  const { start, end } = dateRange();\r\n  const body = {\r\n    dateRanges: [\r\n      { startDate: start, endDate: end },\r\n      { startDate: shiftDate(start, -state.period), endDate: shiftDate(end, -state.period) }\r\n    ],\r\n    metrics: [{ name: 'sessions' }, { name: 'activeUsers' }, { name: 'screenPageViews' }],\r\n    dimensions: [{ name: 'date' }]\r\n  };\r\n  const r = await fetch(\r\n    `https:\/\/analyticsdata.googleapis.com\/v1beta\/properties\/${propertyId}:runReport`,\r\n    { method: 'POST', headers: authHeaders(), body: JSON.stringify(body) }\r\n  );\r\n  if (!r.ok) throw new Error('GA4 ' + r.status + ' \u2014 verifique o Property ID e permiss\u00f5es');\r\n  const data = await r.json();\r\n  processGA4(data);\r\n\r\n  \/\/ Channels\r\n  const bodyC = {\r\n    dateRanges: [{ startDate: start, endDate: end }],\r\n    metrics: [{ name: 'sessions' }],\r\n    dimensions: [{ name: 'sessionDefaultChannelGroup' }]\r\n  };\r\n  const rc = await fetch(\r\n    `https:\/\/analyticsdata.googleapis.com\/v1beta\/properties\/${propertyId}:runReport`,\r\n    { method: 'POST', headers: authHeaders(), body: JSON.stringify(bodyC) }\r\n  );\r\n  if (rc.ok) { const dc = await rc.json(); processChannels(dc); }\r\n\r\n  \/\/ Devices\r\n  const bodyD = {\r\n    dateRanges: [{ startDate: start, endDate: end }],\r\n    metrics: [{ name: 'sessions' }],\r\n    dimensions: [{ name: 'deviceCategory' }]\r\n  };\r\n  const rd = await fetch(\r\n    `https:\/\/analyticsdata.googleapis.com\/v1beta\/properties\/${propertyId}:runReport`,\r\n    { method: 'POST', headers: authHeaders(), body: JSON.stringify(bodyD) }\r\n  );\r\n  if (rd.ok) { const dd = await rd.json(); processDevices(dd); }\r\n}\r\n\r\nfunction processGA4(data) {\r\n  const rows = (data.rows || []);\r\n  let s1=0,s2=0,u1=0,u2=0;\r\n  const labels=[],s=[];\r\n  rows.forEach(r => {\r\n    const dr = r.dimensionValues[0].value;\r\n    const sv = parseInt(r.metricValues[0].value)||0;\r\n    const uv = parseInt(r.metricValues[1].value)||0;\r\n    if (dr !== 'date_range_1') { \/\/ current\r\n      const d = r.dimensionValues[0].value;\r\n      labels.push(d.slice(4,6)+'\/'+d.slice(6,8));\r\n      s.push(sv); s1+=sv; u1+=uv;\r\n    } else { s2+=sv; u2+=uv; }\r\n  });\r\n\r\n  document.getElementById('kSessions').textContent = s1.toLocaleString('pt-BR');\r\n  document.getElementById('kUsers').textContent = u1.toLocaleString('pt-BR');\r\n  setDelta('kSessionsDelta', s1, s2);\r\n  setDelta('kUsersDelta', u1, u2);\r\n\r\n  updateTrafficSessions(labels, s);\r\n}\r\n\r\nfunction processChannels(data) {\r\n  const rows = data.rows || [];\r\n  const labels = rows.map(r => r.dimensionValues[0].value);\r\n  const values = rows.map(r => parseInt(r.metricValues[0].value)||0);\r\n  renderChannelsChart(labels, values);\r\n}\r\n\r\nfunction processDevices(data) {\r\n  const rows = data.rows || [];\r\n  const total = rows.reduce((s,r)=>s+parseInt(r.metricValues[0].value),0)||1;\r\n  const labels = rows.map(r => capitalize(r.dimensionValues[0].value));\r\n  const values = rows.map(r => Math.round(parseInt(r.metricValues[0].value)\/total*100));\r\n  renderDevicesChart(labels, values);\r\n}\r\n\r\n\/* =========================================================\r\n   GSC\r\n   ========================================================= *\/\r\nasync function gscPost(siteUrl, body) {\r\n  const r = await fetch(\r\n    `https:\/\/searchconsole.googleapis.com\/webmasters\/v3\/sites\/${encodeURIComponent(siteUrl)}\/searchAnalytics\/query`,\r\n    { method: 'POST', headers: authHeaders(), body: JSON.stringify(body) }\r\n  );\r\n  if (!r.ok) throw new Error('Search Console ' + r.status);\r\n  return r.json();\r\n}\r\n\r\nasync function fetchGSC(siteUrl) {\r\n  const { start, end } = dateRange();\r\n  const [curr, prev] = await Promise.all([\r\n    gscPost(siteUrl, { startDate: start, endDate: end, dimensions: ['date'], rowLimit: 500 }),\r\n    gscPost(siteUrl, { startDate: shiftDate(start,-state.period), endDate: shiftDate(end,-state.period), dimensions: ['date'], rowLimit: 500 })\r\n  ]);\r\n  processGSC(curr, prev);\r\n}\r\n\r\nfunction processGSC(curr, prev) {\r\n  const rows = curr.rows || [];\r\n  let cl=0,im=0,ct=0,po=0;\r\n  const labels=[], clicks=[];\r\n  rows.forEach(r => {\r\n    cl+=r.clicks; im+=r.impressions; ct+=r.ctr; po+=r.position;\r\n    const d=r.keys[0]; labels.push(d.slice(5,7)+'\/'+d.slice(8,10));\r\n    clicks.push(r.clicks);\r\n  });\r\n  const n=rows.length||1;\r\n\r\n  const prevRows = prev.rows || [];\r\n  let cl2=0,im2=0;\r\n  prevRows.forEach(r=>{ cl2+=r.clicks; im2+=r.impressions; });\r\n\r\n  document.getElementById('kClicks').textContent = cl.toLocaleString('pt-BR');\r\n  document.getElementById('kImpr').textContent = im.toLocaleString('pt-BR');\r\n  document.getElementById('kCtr').textContent = (ct\/n*100).toFixed(1)+'%';\r\n  document.getElementById('kPos').textContent = (po\/n).toFixed(1);\r\n  setDelta('kClicksDelta', cl, cl2);\r\n  setDelta('kImprDelta', im, im2);\r\n\r\n  const avgCtr = ct\/n*100;\r\n  const avgPos = po\/n;\r\n  const ctrDir = avgCtr >= 3 ? 'up' : 'neutral';\r\n  document.getElementById('kCtrDelta').innerHTML = `<span class=\"${ctrDir}\">${avgCtr>=3?'\u2191 Bom CTR':'\u2193 Melhorar CTR'}<\/span>`;\r\n  const posDir = avgPos <= 10 ? 'up' : avgPos <= 20 ? 'neutral' : 'down';\r\n  document.getElementById('kPosDelta').innerHTML = `<span class=\"${posDir}\">${avgPos<=10?'\u2191 Top 10':avgPos<=20?'Top 20':'Melhorar'}<\/span>`;\r\n\r\n  updateTrafficClicks(labels, clicks);\r\n}\r\n\r\nasync function fetchGSCPages(siteUrl) {\r\n  const { start, end } = dateRange();\r\n  const data = await gscPost(siteUrl, { startDate: start, endDate: end, dimensions: ['page'], rowLimit: 15 });\r\n  renderPagesTable(data.rows || []);\r\n}\r\n\r\nasync function fetchGSCQueries(siteUrl) {\r\n  const { start, end } = dateRange();\r\n  const data = await gscPost(siteUrl, { startDate: start, endDate: end, dimensions: ['query'], rowLimit: 15 });\r\n  renderQueriesTable(data.rows || []);\r\n}\r\n\r\nasync function fetchGSCCountries(siteUrl) {\r\n  const { start, end } = dateRange();\r\n  const data = await gscPost(siteUrl, { startDate: start, endDate: end, dimensions: ['country'], rowLimit: 15 });\r\n  renderCountriesTable(data.rows || []);\r\n}\r\n\r\n\/* =========================================================\r\n   HELPERS\r\n   ========================================================= *\/\r\nfunction setDelta(id, curr, prev) {\r\n  const el = document.getElementById(id);\r\n  if (!prev || prev === 0) { el.innerHTML = '<span class=\"neutral\">\u2014 sem comparativo<\/span>'; return; }\r\n  const pct = ((curr - prev) \/ prev * 100).toFixed(1);\r\n  const up = curr >= prev;\r\n  el.innerHTML = `<span class=\"${up?'up':'down'}\">${up?'\u2191':'\u2193'} ${Math.abs(pct)}%<\/span> vs per\u00edodo ant.`;\r\n}\r\n\r\nfunction posBadge(pos) {\r\n  const cls = pos <= 3 ? 'pos-top' : pos <= 10 ? 'pos-mid' : 'pos-low';\r\n  return `<span class=\"pos-badge ${cls}\">${pos.toFixed(1)}<\/span>`;\r\n}\r\n\r\nfunction ctrCell(ctr) {\r\n  const pct = (ctr * 100).toFixed(1);\r\n  const w = Math.min(Math.round(ctr * 1000), 100);\r\n  return `<div class=\"ctr-bar\"><span style=\"min-width:36px;font-size:11px;\">${pct}%<\/span><div class=\"ctr-track\"><div class=\"ctr-fill\" style=\"width:${w}%\"><\/div><\/div><\/div>`;\r\n}\r\n\r\nfunction capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase(); }\r\n\r\nfunction fmt(n) { return Number(n).toLocaleString('pt-BR'); }\r\n\r\n\/* =========================================================\r\n   TABLES\r\n   ========================================================= *\/\r\nfunction renderPagesTable(rows) {\r\n  const tbody = document.getElementById('pagesTbody');\r\n  if (!rows.length) { tbody.innerHTML = '<tr><td colspan=\"6\" class=\"empty-row\" style=\"padding:32px;text-align:center;color:var(--text3);\">Nenhuma p\u00e1gina encontrada<\/td><\/tr>'; return; }\r\n  const maxC = Math.max(...rows.map(r=>r.clicks));\r\n  tbody.innerHTML = rows.map(r => {\r\n    const path = r.keys[0].replace(\/^https?:\\\/\\\/[^\/]+\/,'') || '\/';\r\n    const pct = maxC > 0 ? Math.round(r.clicks\/maxC*100) : 0;\r\n    return `<tr>\r\n      <td><span class=\"page-path\" title=\"${r.keys[0]}\">${path}<\/span><\/td>\r\n      <td>\u2014<\/td>\r\n      <td><div class=\"bar-mini\"><span style=\"min-width:38px;font-size:11px;\">${fmt(r.clicks)}<\/span><div class=\"bar-track\"><div class=\"bar-fill\" style=\"width:${pct}%\"><\/div><\/div><\/div><\/td>\r\n      <td>${fmt(r.impressions)}<\/td>\r\n      <td>${ctrCell(r.ctr)}<\/td>\r\n      <td>${posBadge(r.position)}<\/td>\r\n    <\/tr>`;\r\n  }).join('');\r\n}\r\n\r\nfunction renderQueriesTable(rows) {\r\n  const tbody = document.getElementById('queriesTbody');\r\n  if (!rows.length) { tbody.innerHTML = '<tr><td colspan=\"5\" style=\"padding:32px;text-align:center;color:var(--text3);\">Nenhuma query encontrada<\/td><\/tr>'; return; }\r\n  tbody.innerHTML = rows.map(r => `<tr>\r\n    <td><span class=\"query-chip\" title=\"${r.keys[0]}\">${r.keys[0]}<\/span><\/td>\r\n    <td>${fmt(r.clicks)}<\/td>\r\n    <td>${fmt(r.impressions)}<\/td>\r\n    <td>${ctrCell(r.ctr)}<\/td>\r\n    <td>${posBadge(r.position)}<\/td>\r\n  <\/tr>`).join('');\r\n}\r\n\r\nfunction renderCountriesTable(rows) {\r\n  const tbody = document.getElementById('countriesTbody');\r\n  if (!rows.length) { tbody.innerHTML = '<tr><td colspan=\"5\" style=\"padding:32px;text-align:center;color:var(--text3);\">Nenhum dado dispon\u00edvel<\/td><\/tr>'; return; }\r\n  const total = rows.reduce((s,r)=>s+r.clicks,0)||1;\r\n  tbody.innerHTML = rows.map(r => `<tr>\r\n    <td>${r.keys[0]}<\/td>\r\n    <td>${fmt(r.clicks)}<\/td>\r\n    <td>${fmt(r.impressions)}<\/td>\r\n    <td>${ctrCell(r.ctr)}<\/td>\r\n    <td>${(r.clicks\/total*100).toFixed(1)}%<\/td>\r\n  <\/tr>`).join('');\r\n}\r\n\r\n\/* =========================================================\r\n   CHARTS\r\n   ========================================================= *\/\r\nlet trafficSessions = [], trafficClicks = [], trafficLabels = [];\r\n\r\nfunction updateTrafficSessions(labels, sessions) {\r\n  trafficLabels = labels; trafficSessions = sessions;\r\n  buildTrafficChart();\r\n}\r\n\r\nfunction updateTrafficClicks(labels, clicks) {\r\n  if (!trafficLabels.length) trafficLabels = labels;\r\n  trafficClicks = clicks;\r\n  buildTrafficChart();\r\n}\r\n\r\nfunction buildTrafficChart() {\r\n  const el = document.getElementById('trafficChart');\r\n  if (state.charts.traffic) state.charts.traffic.destroy();\r\n  const datasets = [];\r\n  if (trafficSessions.length) datasets.push({\r\n    label:'Sess\u00f5es', data:trafficSessions,\r\n    borderColor:'#3b82f6', backgroundColor:'rgba(59,130,246,0.07)',\r\n    tension:0.35, fill:true, pointRadius:2, pointHoverRadius:4, borderWidth:2\r\n  });\r\n  if (trafficClicks.length) datasets.push({\r\n    label:'Cliques org.', data:trafficClicks,\r\n    borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.07)',\r\n    tension:0.35, fill:true, pointRadius:2, pointHoverRadius:4,\r\n    borderWidth:2, borderDash:[5,4]\r\n  });\r\n  if (!datasets.length) return;\r\n  state.charts.traffic = new Chart(el, {\r\n    type:'line', data:{ labels: trafficLabels, datasets },\r\n    options:{\r\n      responsive:true, maintainAspectRatio:false,\r\n      plugins:{ legend:{display:false}, tooltip:{ mode:'index', intersect:false, backgroundColor:'rgba(19,22,27,0.95)', borderColor:'rgba(255,255,255,0.1)', borderWidth:1, titleColor:'#f0f2f5', bodyColor:'#8b93a0', padding:10 }},\r\n      scales:{\r\n        x:{ ticks:{ font:{size:10,family:\"'DM Sans'\"}, color:'#555e6b', autoSkip:true, maxTicksLimit:14 }, grid:{color:'rgba(255,255,255,0.04)'}, border:{color:'transparent'} },\r\n        y:{ ticks:{ font:{size:10,family:\"'DM Sans'\"}, color:'#555e6b' }, grid:{color:'rgba(255,255,255,0.04)'}, border:{color:'transparent'} }\r\n      }\r\n    }\r\n  });\r\n}\r\n\r\nfunction renderChannelsChart(labels, values) {\r\n  const el = document.getElementById('channelsChart');\r\n  if (state.charts.channels) state.charts.channels.destroy();\r\n  const colors = ['#3b82f6','#10b981','#f59e0b','#ec4899','#8b5cf6','#06b6d4','#f97316'];\r\n  state.charts.channels = new Chart(el, {\r\n    type:'doughnut',\r\n    data:{ labels, datasets:[{ data:values, backgroundColor: colors.slice(0,labels.length), borderWidth:0, hoverOffset:4 }]},\r\n    options:{\r\n      responsive:true, maintainAspectRatio:false, cutout:'68%',\r\n      plugins:{ legend:{ position:'right', labels:{ font:{size:10,family:\"'DM Sans'\"}, color:'#8b93a0', boxWidth:8, padding:10, usePointStyle:true }} , tooltip:{ backgroundColor:'rgba(19,22,27,0.95)', borderColor:'rgba(255,255,255,0.1)', borderWidth:1, titleColor:'#f0f2f5', bodyColor:'#8b93a0', padding:10 }}\r\n    }\r\n  });\r\n}\r\n\r\nfunction renderDevicesChart(labels, values) {\r\n  const el = document.getElementById('devicesChart');\r\n  if (state.charts.devices) state.charts.devices.destroy();\r\n  state.charts.devices = new Chart(el, {\r\n    type:'bar',\r\n    data:{ labels, datasets:[{ data:values, backgroundColor:['#3b82f6','#10b981','#f59e0b'], borderRadius:6, borderWidth:0 }]},\r\n    options:{\r\n      responsive:true, maintainAspectRatio:false, indexAxis:'y',\r\n      plugins:{ legend:{display:false}, tooltip:{ callbacks:{ label: ctx => ctx.parsed.x + '%' }, backgroundColor:'rgba(19,22,27,0.95)', borderColor:'rgba(255,255,255,0.1)', borderWidth:1, titleColor:'#f0f2f5', bodyColor:'#8b93a0', padding:10 }},\r\n      scales:{\r\n        x:{ ticks:{ font:{size:10,family:\"'DM Sans'\"}, color:'#555e6b', callback: v => v+'%' }, grid:{color:'rgba(255,255,255,0.04)'}, border:{color:'transparent'}, max:100 },\r\n        y:{ ticks:{ font:{size:11,family:\"'DM Sans'\"}, color:'#8b93a0' }, grid:{display:false}, border:{color:'transparent'} }\r\n      }\r\n    }\r\n  });\r\n}\r\n\r\nfunction renderCTRChart() {\r\n  const el = document.getElementById('ctrChart');\r\n  if (state.charts.ctr) state.charts.ctr.destroy();\r\n  const labels = ['Pos 1','Pos 2','Pos 3','Pos 4','Pos 5','Pos 6','Pos 7','Pos 8','Pos 9','Pos 10'];\r\n  const values = [28.5, 15.7, 11.0, 8.0, 6.3, 4.8, 3.6, 2.9, 2.1, 1.9];\r\n  state.charts.ctr = new Chart(el, {\r\n    type:'bar',\r\n    data:{ labels, datasets:[{ data:values, backgroundColor: values.map((_,i) => i<3?'#10b981':i<6?'#3b82f6':'rgba(59,130,246,0.35)'), borderRadius:5, borderWidth:0 }]},\r\n    options:{\r\n      responsive:true, maintainAspectRatio:false,\r\n      plugins:{ legend:{display:false}, tooltip:{ callbacks:{ label: ctx => ctx.parsed.y.toFixed(1)+'% CTR m\u00e9dio' }, backgroundColor:'rgba(19,22,27,0.95)', borderColor:'rgba(255,255,255,0.1)', borderWidth:1, titleColor:'#f0f2f5', bodyColor:'#8b93a0', padding:10 }},\r\n      scales:{\r\n        x:{ ticks:{ font:{size:10,family:\"'DM Sans'\"}, color:'#555e6b' }, grid:{display:false}, border:{color:'transparent'} },\r\n        y:{ ticks:{ font:{size:10,family:\"'DM Sans'\"}, color:'#555e6b', callback: v => v+'%' }, grid:{color:'rgba(255,255,255,0.04)'}, border:{color:'transparent'} }\r\n      }\r\n    }\r\n  });\r\n}\r\n\r\n\/* =========================================================\r\n   DEMO DATA\r\n   ========================================================= *\/\r\nfunction renderDemoKPIs() {\r\n  const multiplier = state.period === 7 ? 1 : state.period === 28 ? 4.2 : 13;\r\n  const base = { s:4823, u:3211, im:142000, cl:6800, ctr:4.8, pos:8.3 };\r\n  document.getElementById('kSessions').textContent = Math.round(base.s*multiplier).toLocaleString('pt-BR');\r\n  document.getElementById('kUsers').textContent = Math.round(base.u*multiplier).toLocaleString('pt-BR');\r\n  document.getElementById('kImpr').textContent = Math.round(base.im*multiplier).toLocaleString('pt-BR');\r\n  document.getElementById('kClicks').textContent = Math.round(base.cl*multiplier).toLocaleString('pt-BR');\r\n  document.getElementById('kCtr').textContent = base.ctr.toFixed(1)+'%';\r\n  document.getElementById('kPos').textContent = base.pos.toFixed(1);\r\n  document.getElementById('kSessionsDelta').innerHTML = '<span class=\"up\">\u2191 12.4%<\/span> vs per\u00edodo ant.';\r\n  document.getElementById('kUsersDelta').innerHTML = '<span class=\"up\">\u2191 8.7%<\/span> vs per\u00edodo ant.';\r\n  document.getElementById('kImprDelta').innerHTML = '<span class=\"up\">\u2191 22.1%<\/span> vs per\u00edodo ant.';\r\n  document.getElementById('kClicksDelta').innerHTML = '<span class=\"up\">\u2191 18.3%<\/span> vs per\u00edodo ant.';\r\n  document.getElementById('kCtrDelta').innerHTML = '<span class=\"up\">\u2191 Bom CTR<\/span>';\r\n  document.getElementById('kPosDelta').innerHTML = '<span class=\"up\">\u2191 Top 10<\/span>';\r\n}\r\n\r\nfunction renderDemoCharts() {\r\n  const days = state.period;\r\n  const labels = [], sessions = [], clicks = [];\r\n  for (let i = days - 1; i >= 0; i--) {\r\n    const d = new Date(); d.setDate(d.getDate() - i);\r\n    labels.push(d.toLocaleDateString('pt-BR',{day:'2-digit',month:'2-digit'}));\r\n    sessions.push(Math.round(300 + Math.random()*400 + Math.sin(i*0.5)*100));\r\n    clicks.push(Math.round(200 + Math.random()*300 + Math.cos(i*0.4)*80));\r\n  }\r\n  trafficLabels = labels; trafficSessions = sessions; trafficClicks = clicks;\r\n  buildTrafficChart();\r\n\r\n  renderChannelsChart(['Org\u00e2nico','Direto','Social','Refer\u00eancia','E-mail'], [45,25,15,10,5]);\r\n  renderDevicesChart(['Desktop','Mobile','Tablet'], [52,42,6]);\r\n  renderCTRChart();\r\n}\r\n\r\nfunction renderDemoTables() {\r\n  renderPagesTable([\r\n    { keys:['\/'], clicks:1840, impressions:24000, ctr:0.077, position:5.2 },\r\n    { keys:['\/blog\/seo-guia'], clicks:980, impressions:15000, ctr:0.065, position:3.1 },\r\n    { keys:['\/servicos'], clicks:760, impressions:9800, ctr:0.078, position:6.8 },\r\n    { keys:['\/contato'], clicks:440, impressions:5200, ctr:0.085, position:4.3 },\r\n    { keys:['\/blog\/google-analytics'], clicks:380, impressions:7100, ctr:0.054, position:9.7 },\r\n    { keys:['\/sobre'], clicks:290, impressions:3400, ctr:0.085, position:7.1 },\r\n    { keys:['\/blog\/search-console'], clicks:210, impressions:4800, ctr:0.044, position:12.4 },\r\n  ]);\r\n  renderQueriesTable([\r\n    { keys:['seo para pequenas empresas'], clicks:420, impressions:8200, ctr:0.051, position:4.2 },\r\n    { keys:['como melhorar seo'], clicks:380, impressions:7400, ctr:0.051, position:5.8 },\r\n    { keys:['google analytics 4'], clicks:310, impressions:6100, ctr:0.051, position:3.3 },\r\n    { keys:['search console tutorial'], clicks:280, impressions:5500, ctr:0.051, position:6.1 },\r\n    { keys:['agencia seo'], clicks:240, impressions:9800, ctr:0.024, position:18.4 },\r\n    { keys:['ferramenta seo gratis'], clicks:190, impressions:4200, ctr:0.045, position:7.9 },\r\n    { keys:['posicionamento google'], clicks:170, impressions:3900, ctr:0.044, position:8.7 },\r\n  ]);\r\n  renderCountriesTable([\r\n    { keys:['bra'], clicks:5200, impressions:68000, ctr:0.076, position:7.1 },\r\n    { keys:['prt'], clicks:820, impressions:11000, ctr:0.075, position:9.3 },\r\n    { keys:['usa'], clicks:340, impressions:8200, ctr:0.041, position:14.2 },\r\n    { keys:['ago'], clicks:180, impressions:2800, ctr:0.064, position:11.8 },\r\n    { keys:['moz'], clicks:120, impressions:1900, ctr:0.063, position:12.4 },\r\n  ]);\r\n}\r\n\r\n\/* =========================================================\r\n   UI\r\n   ========================================================= *\/\r\nfunction switchTab(tab, btn) {\r\n  document.querySelectorAll('.tab').forEach(b => b.classList.remove('active'));\r\n  btn.classList.add('active');\r\n  ['tabPages','tabQueries','tabCountries'].forEach(id => document.getElementById(id).style.display='none');\r\n  document.getElementById('tab' + tab.charAt(0).toUpperCase() + tab.slice(1)).style.display='';\r\n}\r\n\r\nfunction showSection(section) {\r\n  document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));\r\n  event.currentTarget.classList.add('active');\r\n  const titles = { overview:'Vis\u00e3o geral', traffic:'Tr\u00e1fego', search:'Busca org\u00e2nica', pages:'Top p\u00e1ginas', queries:'Queries', geo:'Geogr\u00e1fico' };\r\n  document.getElementById('pageTitle').textContent = titles[section] || section;\r\n\r\n  if (section === 'pages') switchTab('pages', document.querySelectorAll('.tab')[0]);\r\n  if (section === 'queries') switchTab('queries', document.querySelectorAll('.tab')[1]);\r\n  if (section === 'geo') switchTab('countries', document.querySelectorAll('.tab')[2]);\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SEO Dashboard SEO Insights Analytics Principal Vis\u00e3o geral Tr\u00e1fego Busca org\u00e2nica Relat\u00f3rios P\u00e1ginas Queries Geogr\u00e1fico Desconectado Fa\u00e7a login para continuar Vis\u00e3o geral Resumo de desempenho SEO 7d 28d 90d \u2014 \ud83d\udcca Conectar conta Google Autorize o acesso ao Google Analytics 4 e Search Console para visualizar m\u00e9tricas reais do seu site em tempo real. \ud83d\udcc8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":10,"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/dash.descontoslimitados.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}