/* 80-temporal.css — painéis temporais e histórico
   Extraído de index.html por split_css.py.
   O NÚMERO no nome é a posição na cascata: os arquivos são
   carregados em ordem alfabética de nome, e é essa ordem que
   decide quem ganha o desempate entre regras de mesma
   especificidade. Não renumere sem conferir o que passa a
   sobrescrever o quê. */
    /* ════════════════════════════════════════════
       TEMPORAL — Painel lateral (modo mapa)
       Espelha o padrão do #explorar-panel. Permite
       escolher indicador (ITBI/IPTU/Atividades) e
       reproduzir a evolução temporal sobre o mapa.
    ════════════════════════════════════════════ */
    #temporal-panel {
      width: 0;
      flex-shrink: 0;
      background:
        radial-gradient(420px 220px at 50% -10%, rgba(38,198,218,0.08), transparent 70%),
        #0a1722;
      overflow: hidden;
      transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
      border-right: 1px solid rgba(38,198,218,0.14);
      z-index: 18;
      display: flex;
      flex-direction: column;
    }
    #temporal-panel.open { width: 320px; }

    .tmpp-header {
      padding: 12px 14px 10px;
      border-bottom: 1px solid rgba(38,198,218,0.16);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
      background: rgba(38,198,218,0.04);
    }
    .tmpp-title {
      font-family: var(--display);
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.16em; color: #4dd0e1;
      display: flex; align-items: center; gap: 6px;
    }
    .tmpp-title svg { stroke: #4dd0e1; opacity: 0.9; }
    .tmpp-actions { display: flex; align-items: center; gap: 6px; }
    .tmpp-mini-btn {
      background: none; border: 1px solid rgba(38,198,218,0.25);
      color: #80deea; font-size: 9px; cursor: pointer;
      padding: 3px 8px; border-radius: 5px;
      font-family: var(--display);
      letter-spacing: 0.06em;
      transition: all 0.14s;
    }
    .tmpp-mini-btn:hover {
      background: rgba(38,198,218,0.12);
      border-color: rgba(38,198,218,0.55); color: #fff;
    }
    .tmpp-close {
      background: none; border: none; color: var(--muted);
      font-size: 16px; cursor: pointer; padding: 2px 4px;
      border-radius: 4px; line-height: 1;
    }
    .tmpp-close:hover { color: var(--text); }

    .tmpp-body {
      flex: 1; overflow-y: auto;
      padding: 12px 14px 16px;
      display: flex; flex-direction: column; gap: 14px;
    }

    .tmpp-section-label {
      font-family: var(--display);
      font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 6px;
    }

    /* Botões grandes de indicador (ITBI / IPTU / Atividades) */
    .tmpp-indicators {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
    }
    .tmpp-ind-btn {
      padding: 10px 6px;
      border-radius: 10px; cursor: pointer;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(225,230,238,0.78);
      font-family: var(--display);
      font-size: 10px; letter-spacing: 0.06em;
      text-align: center;
      transition: all 0.16s;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .tmpp-ind-btn .tmpp-ind-ico {
      width: 28px; height: 28px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      background: rgba(255,255,255,0.05);
      transition: all 0.16s;
    }
    .tmpp-ind-btn:hover { border-color: rgba(38,198,218,0.4); color: var(--text); }
    .tmpp-ind-btn.active {
      background: linear-gradient(135deg, rgba(38,198,218,0.18), rgba(56,189,248,0.08));
      border-color: rgba(38,198,218,0.5);
      color: #fff;
      box-shadow: 0 0 14px rgba(38,198,218,0.25);
    }
    .tmpp-ind-btn.active .tmpp-ind-ico { background: rgba(38,198,218,0.25); color: #80deea; }

    /* Cores específicas por indicador quando ativo */
    .tmpp-ind-btn.active[data-ind="itbi"] {
      background: linear-gradient(135deg, rgba(102,187,106,0.18), rgba(56,142,60,0.08));
      border-color: rgba(102,187,106,0.5);
      box-shadow: 0 0 14px rgba(102,187,106,0.25);
    }
    .tmpp-ind-btn.active[data-ind="itbi"] .tmpp-ind-ico { background: rgba(102,187,106,0.22); color: #a5d6a7; }
    .tmpp-ind-btn.active[data-ind="iptu"] {
      background: linear-gradient(135deg, rgba(255,167,38,0.18), rgba(230,81,0,0.08));
      border-color: rgba(255,167,38,0.5);
      box-shadow: 0 0 14px rgba(255,167,38,0.25);
    }
    .tmpp-ind-btn.active[data-ind="iptu"] .tmpp-ind-ico { background: rgba(255,167,38,0.22); color: #ffcc80; }
    .tmpp-ind-btn.active[data-ind="ativ"] {
      background: linear-gradient(135deg, rgba(255,183,77,0.18), rgba(245,124,0,0.08));
      border-color: rgba(255,183,77,0.5);
      box-shadow: 0 0 14px rgba(255,183,77,0.25);
    }
    .tmpp-ind-btn.active[data-ind="ativ"] .tmpp-ind-ico { background: rgba(255,183,77,0.22); color: #ffe082; }

    /* Sub-indicadores (chips) */
    .tmpp-sub {
      display: flex; flex-wrap: wrap; gap: 5px;
    }
    .tmpp-sub-chip {
      padding: 4px 9px; border-radius: 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(180,190,204,0.8);
      font-family: var(--body); font-size: 10px;
      cursor: pointer; transition: all 0.14s;
      white-space: nowrap;
    }
    .tmpp-sub-chip:hover {
      border-color: rgba(38,198,218,0.4);
      color: var(--text);
      background: rgba(38,198,218,0.06);
    }
    .tmpp-sub-chip.active {
      background: rgba(38,198,218,0.18);
      border-color: rgba(38,198,218,0.55);
      color: #80deea; font-weight: 600;
    }

    /* Região (DI / 4D) */
    .tmpp-region {
      display: flex; gap: 4px;
      padding: 3px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 9px;
    }
    .tmpp-region-btn {
      flex: 1;
      padding: 5px 8px; border-radius: 6px;
      background: transparent; border: none;
      color: var(--muted);
      font-family: var(--display); font-size: 9.5px;
      letter-spacing: 0.06em;
      cursor: pointer; transition: all 0.14s;
    }
    .tmpp-region-btn:hover { color: var(--text); }
    .tmpp-region-btn.active {
      background: rgba(38,198,218,0.16); color: #80deea;
      box-shadow: inset 0 0 0 1px rgba(38,198,218,0.4);
    }

    /* KPI atual + delta YoY */
    .tmpp-kpi {
      padding: 4px 14px 18px;
      background:
        linear-gradient(135deg, rgba(38,198,218,0.06), rgba(56,189,248,0.025));
      border: 1px solid rgba(38,198,218,0.22);
      border-radius: 11px;
      position: relative; overflow: hidden;
    }
    .tmpp-kpi::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(38,198,218,0.55), transparent);
    }
    .tmpp-kpi-head {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
    }
    .tmpp-kpi-lbl {
      flex: 0 1 auto; min-width: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--display);
      font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase;
      color: var(--muted);
      line-height: 1.2;
      text-align: center;
      white-space: normal; word-break: break-word;
    }
    .tmpp-kpi-yr {
      flex-shrink: 0;
      display: inline-flex; align-items: center;
      font-family: var(--display);
      font-size: 10px; font-weight: 700;
      color: #80deea; letter-spacing: 0.04em;
      padding: 2px 7px; border-radius: 5px;
      background: rgba(38,198,218,0.12);
      border: 1px solid rgba(38,198,218,0.28);
      line-height: 1;
    }
    .tmpp-kpi-val {
      font-family: var(--display);
      font-size: 22px; font-weight: 700;
      color: #fff; letter-spacing: 0.02em; line-height: 1.15;
      text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tmpp-kpi-meta {
      display: flex; align-items: center; justify-content: center;
      margin-top: 7px; gap: 6px;
      font-family: var(--display); font-size: 9px;
      color: var(--muted);
      flex-wrap: wrap;
    }
    .tmpp-kpi-meta > span:first-child {
      flex: 0 1 auto; min-width: 0;
      text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tmpp-kpi-delta {
      flex-shrink: 0;
      padding: 2px 7px; border-radius: 5px;
      font-weight: 600;
    }
    .tmpp-kpi-delta.up   { background: rgba(129,199,132,0.14); color: #81c784; }
    .tmpp-kpi-delta.down { background: rgba(239,154,154,0.14); color: #ef9a9a; }
    .tmpp-kpi-delta.neutral { background: rgba(180,190,204,0.1); color: var(--muted); }

    /* Sparkline / mini chart de série */
    .tmpp-spark {
      display: flex; align-items: flex-end; gap: 2px;
      height: 70px;
      padding: 4px 2px 0;
    }
    .tmpp-spark-col {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 3px; justify-content: flex-end;
      cursor: pointer; min-width: 0; position: relative;
    }
    .tmpp-spark-bar {
      width: 100%; max-width: 10px;
      border-radius: 2px 2px 0 0;
      transition: height 0.4s cubic-bezier(0.4,0,0.2,1), filter 0.18s;
      min-height: 2px;
      opacity: 0.7;
    }
    .tmpp-spark-col:hover .tmpp-spark-bar { filter: brightness(1.3); opacity: 1; }
    .tmpp-spark-col.active .tmpp-spark-bar {
      opacity: 1; filter: brightness(1.3);
      box-shadow: 0 0 10px currentColor;
    }
    .tmpp-spark-yr {
      font-family: var(--display); font-size: 8px;
      color: var(--muted); letter-spacing: 0;
      opacity: 0.75;
      min-height: 10px; line-height: 1;
      white-space: nowrap;
    }
    .tmpp-spark-col.active .tmpp-spark-yr {
      color: #80deea; opacity: 1; font-weight: 700;
    }
    /* Ano ativo precisa de "balão" para não colidir com vizinhos */
    .tmpp-spark-col.active .tmpp-spark-yr {
      position: relative; z-index: 2;
      padding: 1px 3px; border-radius: 3px;
      background: rgba(38,198,218,0.18);
      box-shadow: 0 0 0 1px rgba(38,198,218,0.35);
    }

    .tmpp-spark-bar.itbi   { background: linear-gradient(180deg, #66bb6a, #2e7d32); color: #66bb6a; }
    .tmpp-spark-bar.iptu   { background: linear-gradient(180deg, #ffa726, #ef6c00); color: #ffa726; }
    .tmpp-spark-bar.ativ   { background: linear-gradient(180deg, #ffb74d, #f57c00); color: #ffb74d; }
    .tmpp-spark-bar.valor  { background: linear-gradient(180deg, #80deea, #00838f); color: #80deea; }

    /* Controles de playback */
    .tmpp-pb {
      display: flex; align-items: center; gap: 6px;
    }
    .tmpp-pb-btn {
      width: 32px; height: 32px; border-radius: 8px;
      background: rgba(38,198,218,0.1);
      border: 1px solid rgba(38,198,218,0.32);
      color: #80deea; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; transition: all 0.15s;
    }
    .tmpp-pb-btn:hover { background: rgba(38,198,218,0.2); color: #fff; }
    .tmpp-pb-btn.play.on {
      background: linear-gradient(135deg, #26c6da, #29b6f6);
      color: #fff; box-shadow: 0 0 14px rgba(38,198,218,0.45);
    }
    .tmpp-pb-year {
      flex: 1;
      font-family: var(--display);
      font-size: 16px; font-weight: 700; color: #80deea;
      text-align: center; letter-spacing: 0.04em;
      padding: 6px 8px; border-radius: 8px;
      background: rgba(38,198,218,0.06);
      border: 1px solid rgba(38,198,218,0.22);
    }

    /* Velocidade */
    .tmpp-speed-row {
      display: flex; align-items: center; gap: 5px;
      margin-top: 6px;
    }
    .tmpp-speed-lbl {
      font-family: var(--display); font-size: 8.5px;
      color: var(--muted); letter-spacing: 0.08em; flex-shrink: 0;
    }
    .tmpp-speed-grp {
      display: flex; gap: 3px; flex: 1;
    }
    .tmpp-speed-chip {
      flex: 1;
      padding: 3px 6px; border-radius: 5px;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-family: var(--display); font-size: 8.5px;
      cursor: pointer; transition: all 0.14s;
      letter-spacing: 0.04em;
      text-align: center;
    }
    .tmpp-speed-chip:hover { color: var(--text); border-color: rgba(38,198,218,0.3); }
    .tmpp-speed-chip.active {
      background: rgba(38,198,218,0.14);
      border-color: rgba(38,198,218,0.45);
      color: #80deea;
    }

    /* Faixa de anos (linha do tempo clicável) */
    .tmpp-years {
      display: flex; flex-wrap: wrap; gap: 2px;
      padding: 6px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
    }
    .tmpp-year-cell {
      flex: 1 0 auto; min-width: 32px;
      padding: 3px 4px;
      border-radius: 5px;
      font-family: var(--display); font-size: 9px;
      color: var(--muted);
      text-align: center;
      cursor: pointer; transition: all 0.14s;
      background: rgba(255,255,255,0.03);
    }
    .tmpp-year-cell:hover { color: var(--text); background: rgba(38,198,218,0.1); }
    .tmpp-year-cell.active {
      background: rgba(38,198,218,0.22);
      color: #fff; font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(38,198,218,0.55), 0 0 10px rgba(38,198,218,0.25);
    }

    /* Botão CTA "Análise Histórica Completa" */
    .tmpp-cta {
      width: 100%;
      padding: 10px 12px; border-radius: 10px;
      background: linear-gradient(135deg, rgba(38,198,218,0.16), rgba(167,139,250,0.08));
      border: 1px solid rgba(38,198,218,0.42);
      color: #80deea;
      font-family: var(--display);
      font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      cursor: pointer; transition: all 0.16s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .tmpp-cta:hover {
      background: linear-gradient(135deg, rgba(38,198,218,0.28), rgba(167,139,250,0.16));
      color: #fff;
      border-color: #4dd0e1;
      box-shadow: 0 0 16px rgba(38,198,218,0.35);
    }
    .tmpp-cta svg { stroke: currentColor; }

    /* Legenda de cores do mapa */
    .tmpp-legend {
      padding: 10px 12px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 9px;
    }
    .tmpp-legend-title {
      font-family: var(--display);
      font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 6px;
    }
    .tmpp-legend-bar {
      display: flex; height: 8px; border-radius: 4px; overflow: hidden;
      margin-bottom: 4px;
    }
    .tmpp-legend-bar > div { flex: 1; }
    .tmpp-legend-scale {
      display: flex; justify-content: space-between;
      font-family: var(--display); font-size: 8px;
      color: var(--muted); letter-spacing: 0.04em;
    }

    /* ════════════════════════════════════════════
       TEMPORAL — Inteligência Temporal & Histórica
       (camada analítica avançada do +4D)
    ════════════════════════════════════════════ */
    #temporal-overlay {
      display: none;
      position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 10000;
      background:
        radial-gradient(1200px 600px at 15% 0%, rgba(38,198,218,0.08), transparent 60%),
        radial-gradient(900px 500px at 90% 100%, rgba(167,139,250,0.05), transparent 65%),
        rgba(8,12,20,0.94);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      overflow-y: auto; padding: 0 40px 32px;
    }
    #temporal-overlay.open { display: block; }
    .tmp-inner { max-width: 1500px; margin: 0 auto; }

    /* Header */
    .tmp-header {
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 4;
      background: rgba(8,12,20,0.96); backdrop-filter: blur(16px);
      padding: 20px 0 14px; margin-bottom: 16px;
      border-bottom: 1px solid rgba(38,198,218,0.18);
    }
    .tmp-header::after {
      content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(38,198,218,0.45), transparent);
    }
    .tmp-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .tmp-eyebrow {
      font-family: var(--display);
      font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(38,198,218,0.85);
    }
    .tmp-title {
      font-family: var(--body);
      font-size: 22px; font-weight: 700; color: var(--text);
      letter-spacing: 0; display: flex; align-items: center; gap: 10px;
    }
    .tmp-title-sub {
      font-family: var(--display);
      font-size: 11px; color: var(--muted); margin-left: 4px;
      letter-spacing: 0.08em;
    }
    .tmp-header-actions { display: flex; align-items: center; gap: 10px; }

    .tmp-region-tabs {
      display: flex; gap: 4px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px; padding: 3px;
    }
    .tmp-region-tab {
      padding: 5px 14px; border-radius: 7px; border: none; background: transparent;
      color: var(--muted); font-family: var(--display); font-size: 11px;
      letter-spacing: 0.08em; cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .tmp-region-tab:hover { color: var(--text); background: rgba(255,255,255,0.06); }
    .tmp-region-tab.active {
      background: rgba(38,198,218,0.16); color: #4dd0e1;
      border: 1px solid rgba(38,198,218,0.4);
    }

    .tmp-close {
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; color: var(--muted); font-size: 18px; width: 36px; height: 36px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
    }
    .tmp-close:hover { background: rgba(255,255,255,0.14); color: var(--text); }

    /* Tabs analíticas */
    .tmp-tabs {
      display: flex; gap: 4px; flex-wrap: wrap;
      margin-bottom: 16px;
      padding: 6px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px;
    }
    .tmp-tab {
      padding: 7px 14px; border-radius: 8px; background: transparent; border: none;
      color: rgba(180,190,204,0.7);
      font-family: var(--display); font-size: 10.5px; letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer; transition: all 0.16s;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .tmp-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
    .tmp-tab.active {
      background: linear-gradient(135deg, rgba(38,198,218,0.18), rgba(56,189,248,0.1));
      color: #80deea;
      box-shadow: inset 0 0 0 1px rgba(38,198,218,0.45);
    }
    .tmp-tab .tmp-tab-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: currentColor; opacity: 0.6;
    }
    .tmp-tab.active .tmp-tab-dot { opacity: 1; box-shadow: 0 0 8px currentColor; }

    /* Painel de Playback / Timeline Master */
    .tmp-playback {
      background:
        linear-gradient(135deg, rgba(38,198,218,0.06), rgba(56,189,248,0.04));
      border: 1px solid rgba(38,198,218,0.2);
      border-radius: 14px;
      padding: 14px 18px;
      margin-bottom: 16px;
      display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
    }
    .tmp-pb-controls {
      display: flex; align-items: center; gap: 8px;
    }
    .tmp-pb-btn {
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(38,198,218,0.14);
      border: 1px solid rgba(38,198,218,0.4);
      color: #80deea; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; transition: all 0.15s;
    }
    .tmp-pb-btn:hover { background: rgba(38,198,218,0.24); border-color: #4dd0e1; color: #fff; }
    .tmp-pb-btn.play {
      background: linear-gradient(135deg, rgba(38,198,218,0.25), rgba(56,189,248,0.18));
      box-shadow: 0 0 14px rgba(38,198,218,0.3);
    }
    .tmp-pb-btn.play.on {
      background: linear-gradient(135deg, #26c6da, #29b6f6);
      color: #fff; box-shadow: 0 0 18px rgba(38,198,218,0.55);
    }
    .tmp-pb-speed {
      font-family: var(--display); font-size: 10px;
      color: var(--muted); letter-spacing: 0.08em;
      padding: 4px 8px; border-radius: 6px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer; transition: all 0.15s;
    }
    .tmp-pb-speed:hover { color: var(--text); border-color: rgba(38,198,218,0.4); }
    .tmp-pb-speed.active { color: #80deea; border-color: rgba(38,198,218,0.5); background: rgba(38,198,218,0.08); }

    .tmp-pb-timeline {
      position: relative; height: 56px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .tmp-pb-track {
      position: relative; height: 30px;
      display: flex; align-items: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      padding: 0 6px;
      overflow: hidden;
    }
    .tmp-pb-track::before {
      content: ''; position: absolute; left: 0; right: 0; top: 50%;
      height: 1px; background: linear-gradient(90deg, transparent, rgba(38,198,218,0.3), transparent);
    }
    .tmp-pb-year {
      flex: 1;
      font-family: var(--display); font-size: 9.5px;
      color: rgba(255,255,255,.68);
      text-align: center; padding: 4px 0;
      cursor: pointer; border-radius: 6px;
      transition: all 0.14s;
      position: relative; z-index: 1;
    }
    .tmp-pb-year:hover { color: var(--text); background: rgba(38,198,218,0.07); }
    .tmp-pb-year.active {
      color: #fff; font-weight: 700;
      background: rgba(38,198,218,0.22);
      box-shadow: inset 0 0 0 1px rgba(38,198,218,0.55), 0 0 12px rgba(38,198,218,0.35);
    }
    .tmp-pb-year.in-range {
      color: #80deea;
    }
    .tmp-pb-range-info {
      display: flex; align-items: center; justify-content: space-between;
      font-family: var(--display); font-size: 9.5px;
      color: var(--muted); letter-spacing: 0.06em;
      padding: 0 4px;
    }
    .tmp-pb-range-info b { color: #80deea; font-weight: 700; }

    .tmp-pb-overview {
      display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
      min-width: 130px;
    }
    .tmp-pb-overview-num {
      font-family: var(--display); font-size: 22px; font-weight: 700;
      color: #80deea; letter-spacing: 0.04em; line-height: 1;
    }
    .tmp-pb-overview-lbl {
      font-family: var(--display); font-size: 8.5px;
      color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase;
    }

    /* KPIs temporais */
    .tmp-kpis {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px; margin-bottom: 16px;
    }
    .tmp-kpi {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px; padding: 13px 15px;
      position: relative; overflow: hidden;
      transition: all 0.18s;
    }
    .tmp-kpi:hover {
      border-color: rgba(38,198,218,0.32);
      transform: translateY(-1px);
    }
    .tmp-kpi::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(38,198,218,0.55), transparent);
    }
    .tmp-kpi-label {
      font-family: var(--display);
      font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 6px;
      display: flex; align-items: center; gap: 5px;
    }
    .tmp-kpi-label .tmp-kpi-ico {
      font-size: 10px; opacity: 0.8;
    }
    .tmp-kpi-val {
      font-family: var(--display);
      font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1;
      letter-spacing: 0.02em;
    }
    .tmp-kpi-unit { font-size: 11px; color: var(--muted); margin-top: 3px; }
    .tmp-kpi-delta {
      display: inline-flex; align-items: center; gap: 4px;
      font-family: var(--display); font-size: 10px; font-weight: 600;
      padding: 2px 7px; border-radius: 5px;
      margin-top: 7px;
    }
    .tmp-kpi-delta.up   { background: rgba(129,199,132,0.14); color: #81c784; }
    .tmp-kpi-delta.down { background: rgba(239,154,154,0.14); color: #ef9a9a; }
    .tmp-kpi-delta.neutral { background: rgba(180,190,204,0.1); color: var(--muted); }

    /* Cards de gráfico */
    .tmp-row {
      display: grid; gap: 12px; margin-bottom: 12px;
    }
    .tmp-row.cols-2 { grid-template-columns: 1fr 1fr; }
    .tmp-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .tmp-row.cols-6-4 { grid-template-columns: 1.55fr 1fr; }
    @media (max-width: 1100px) {
      .tmp-row.cols-2, .tmp-row.cols-3, .tmp-row.cols-6-4 { grid-template-columns: 1fr; }
    }

    .tmp-card {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 16px 18px;
      position: relative;
    }
    .tmp-card.accent {
      background:
        linear-gradient(135deg, rgba(38,198,218,0.05), rgba(56,189,248,0.025)),
        rgba(255,255,255,0.025);
      border-color: rgba(38,198,218,0.22);
    }
    .tmp-card-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px; gap: 10px;
    }
    .tmp-card-title {
      font-family: var(--display);
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      color: #80deea;
      display: flex; align-items: center; gap: 8px;
    }
    .tmp-card-title .tmp-card-sub {
      font-size: 9px; color: var(--muted);
      letter-spacing: 0.08em; font-weight: 400;
      text-transform: none;
    }
    .tmp-card-meta {
      font-family: var(--display);
      font-size: 9px; color: var(--muted); letter-spacing: 0.08em;
    }

    /* Gráfico de série histórica (barras verticais) */
    .tmp-series {
      display: flex; align-items: flex-end; gap: 4px;
      height: 150px;
      padding: 0 4px;
    }
    .tmp-series-col {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 5px; justify-content: flex-end; min-width: 0;
      position: relative; cursor: default;
    }
    .tmp-series-bar {
      width: 100%; max-width: 32px;
      border-radius: 4px 4px 0 0;
      transition: height 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.18s;
      min-height: 2px;
      position: relative;
    }
    .tmp-series-col:hover .tmp-series-bar { filter: brightness(1.25); }
    .tmp-series-col.active .tmp-series-bar {
      box-shadow: 0 0 14px rgba(38,198,218,0.5);
      filter: brightness(1.3);
    }
    .tmp-series-yr {
      font-family: var(--display); font-size: 9px;
      color: var(--muted); letter-spacing: 0.04em;
    }
    .tmp-series-col.active .tmp-series-yr { color: #80deea; font-weight: 700; }
    .tmp-series-val {
      position: absolute; bottom: 100%;
      font-family: var(--display); font-size: 8.5px;
      color: rgba(225,230,238,0.65);
      transform: translateY(-2px);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0; transition: opacity 0.15s;
    }
    .tmp-series-col:hover .tmp-series-val { opacity: 1; color: #fff; }
    .tmp-series-col.active .tmp-series-val { opacity: 1; color: #80deea; font-weight: 700; }

    .tmp-series-bar.itbi   { background: linear-gradient(180deg, #66bb6a, #2e7d32); }
    .tmp-series-bar.iptu   { background: linear-gradient(180deg, #ffa726, #ef6c00); }
    .tmp-series-bar.proj   { background: linear-gradient(180deg, #38bdf8, #0277bd); }
    .tmp-series-bar.ativ   { background: linear-gradient(180deg, #ffb74d, #f57c00); }
    .tmp-series-bar.valor  { background: linear-gradient(180deg, #80deea, #00838f); }
    .tmp-series-bar.cres   { background: linear-gradient(180deg, #ce93d8, #6a1b9a); }

    /* Heatmap temporal (anos × categorias) */
    .tmp-heatmap {
      display: grid; gap: 3px;
      width: 100%;
    }
    .tmp-heatmap-row {
      display: grid; gap: 3px;
      grid-template-columns: 140px repeat(var(--cols, 6), 1fr);
      align-items: center;
    }
    .tmp-heatmap-rowlbl {
      font-family: var(--body); font-size: 10.5px;
      color: var(--text); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      padding-right: 4px;
    }
    .tmp-heatmap-cell {
      height: 26px; border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--display); font-size: 9px; font-weight: 600;
      color: rgba(255,255,255,0.92);
      transition: transform 0.14s, box-shadow 0.14s;
      cursor: default;
    }
    .tmp-heatmap-cell:hover {
      transform: scale(1.08);
      box-shadow: 0 0 14px rgba(38,198,218,0.4);
      z-index: 2;
    }
    .tmp-heatmap-headers {
      display: grid; gap: 3px;
      grid-template-columns: 140px repeat(var(--cols, 6), 1fr);
      margin-bottom: 4px;
    }
    .tmp-heatmap-hdr {
      font-family: var(--display); font-size: 9px;
      color: var(--muted); letter-spacing: 0.08em;
      text-align: center; padding: 2px 0;
    }

    /* Comparação ano-a-ano */
    .tmp-yoy {
      display: grid; gap: 6px;
    }
    .tmp-yoy-row {
      display: grid; grid-template-columns: 60px 1fr 1fr 80px;
      align-items: center; gap: 10px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .tmp-yoy-row:last-child { border-bottom: none; }
    .tmp-yoy-yr {
      font-family: var(--display); font-size: 11px; font-weight: 700;
      color: #80deea; letter-spacing: 0.06em;
    }
    .tmp-yoy-bar-wrap {
      display: flex; align-items: center; gap: 8px;
    }
    .tmp-yoy-bar-track {
      flex: 1; height: 8px; background: rgba(255,255,255,0.04);
      border-radius: 4px; overflow: hidden;
    }
    .tmp-yoy-bar-fill {
      height: 100%; border-radius: 4px;
      transition: width 0.5s ease;
      background: linear-gradient(90deg, #26c6da, #38bdf8);
    }
    .tmp-yoy-bar-fill.prev { background: linear-gradient(90deg, rgba(125,133,144,0.55), rgba(125,133,144,0.35)); }
    .tmp-yoy-val {
      font-family: var(--display); font-size: 11px; color: var(--text);
      min-width: 70px;
    }
    .tmp-yoy-delta {
      font-family: var(--display); font-size: 10px; font-weight: 600;
      padding: 3px 7px; border-radius: 5px; text-align: center;
    }
    .tmp-yoy-delta.up   { background: rgba(129,199,132,0.14); color: #81c784; }
    .tmp-yoy-delta.down { background: rgba(239,154,154,0.14); color: #ef9a9a; }
    .tmp-yoy-delta.neutral { background: rgba(180,190,204,0.1); color: var(--muted); }

    /* Insights automáticos */
    .tmp-insights {
      display: flex; flex-direction: column; gap: 9px;
    }
    .tmp-insight {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(38,198,218,0.06), rgba(56,189,248,0.03));
      border: 1px solid rgba(38,198,218,0.2);
      border-radius: 11px;
      font-family: var(--body); font-size: 12px;
      color: rgba(225,230,238,0.92); line-height: 1.5;
    }
    .tmp-insight.warn {
      background: linear-gradient(135deg, rgba(255,167,38,0.07), rgba(239,154,154,0.04));
      border-color: rgba(255,167,38,0.25);
    }
    .tmp-insight.good {
      background: linear-gradient(135deg, rgba(129,199,132,0.07), rgba(38,198,218,0.04));
      border-color: rgba(129,199,132,0.25);
    }
    .tmp-insight-ico {
      width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
      background: rgba(38,198,218,0.18); color: #80deea;
      font-size: 14px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--display);
    }
    .tmp-insight.warn .tmp-insight-ico { background: rgba(255,167,38,0.18); color: #ffb74d; }
    .tmp-insight.good .tmp-insight-ico { background: rgba(129,199,132,0.18); color: #81c784; }
    .tmp-insight strong { color: #fff; font-weight: 700; }
    .tmp-insight em { color: #80deea; font-style: normal; font-weight: 600; }

    /* Estado vazio */
    .tmp-empty {
      padding: 60px 24px; text-align: center;
      color: var(--muted);
      font-family: var(--display); font-size: 11px;
      letter-spacing: 0.08em; line-height: 1.8;
    }
    .tmp-empty-icon {
      font-size: 40px; opacity: 0.35;
      margin-bottom: 14px; display: block; color: #80deea;
    }

    /* Mini-cards de "tendência territorial" (categorias) */
    .tmp-trend-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }
    .tmp-trend {
      padding: 12px 14px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 11px;
    }
    .tmp-trend-lbl {
      font-family: var(--display); font-size: 9.5px;
      color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 6px;
    }
    .tmp-trend-val {
      font-family: var(--display); font-size: 17px; font-weight: 700;
      color: var(--text);
    }
    .tmp-trend-spark {
      display: flex; align-items: flex-end; gap: 2px;
      height: 26px; margin-top: 8px;
    }
    .tmp-trend-spark-bar {
      flex: 1; min-height: 1px;
      background: linear-gradient(180deg, #80deea, #00838f);
      border-radius: 2px 2px 0 0;
      opacity: 0.85;
    }

    /* Layer toggle (camadas dinâmicas no mapa) */
    .tmp-layers {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding-top: 4px;
    }
    .tmp-layer-chip {
      padding: 4px 12px; border-radius: 16px;
      background: rgba(38,198,218,0.07);
      border: 1px solid rgba(38,198,218,0.25);
      color: #80deea;
      font-family: var(--body); font-size: 10.5px;
      cursor: pointer; transition: all 0.14s;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .tmp-layer-chip:hover {
      background: rgba(38,198,218,0.16);
      border-color: rgba(38,198,218,0.5);
    }
    .tmp-layer-chip.active {
      background: rgba(38,198,218,0.28);
      border-color: #4dd0e1; color: #fff;
      box-shadow: 0 0 12px rgba(38,198,218,0.35);
    }
    .tmp-layer-chip .tmp-layer-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: currentColor; opacity: 0.7;
    }

    /* Footer com fontes/legenda */
    .tmp-footer {
      margin-top: 22px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.02);
      border: 1px dashed rgba(255,255,255,0.08);
      border-radius: 10px;
      font-family: var(--display); font-size: 9.5px;
      color: var(--muted); letter-spacing: 0.04em;
      line-height: 1.7;
    }
    .tmp-footer b { color: #80deea; }

    /* Year overlay no mapa (durante playback fora do Explorar) */
    #tmp-map-year {
      position: fixed; top: 88px; right: 32px;
      pointer-events: none; z-index: 200; user-select: none;
      display: none;
      text-align: right;
    }
    #tmp-map-year.visible { display: block; }
    #tmp-map-year .tmp-map-year-num {
      font-family: var(--display);
      font-size: 84px; font-weight: 700;
      color: rgba(38,198,218,0.5);
      letter-spacing: 0.06em; line-height: 1;
      text-shadow: 0 0 40px rgba(38,198,218,0.35);
    }
    #tmp-map-year .tmp-map-year-lbl {
      font-family: var(--display);
      font-size: 11px; color: rgba(38,198,218,0.85);
      letter-spacing: 0.18em; text-transform: uppercase;
      margin-top: 4px;
    }

    @media (max-width: 900px) {
      .tmp-playback { grid-template-columns: 1fr; gap: 12px; }
      .tmp-pb-overview { align-items: flex-start; }
    }