/* Rio Verde em Dados — "sala de operações à noite": mapa escuro em tela cheia,
   painéis de vidro fosco, uma cor própria por área da cidade. */
:root {
  --noite: #05080d;
  --noite-2: #0a0f17;
  --vidro: rgba(10, 15, 23, 0.74);
  --vidro-forte: rgba(8, 12, 19, 0.9);
  --fio: rgba(232, 213, 163, 0.10);
  --fio-forte: rgba(232, 213, 163, 0.22);
  --texto: #eef0f3;
  --mudo: #8b93a3;
  --apagado: #576071;
  --areia: #e8d5a3;          /* contorno da cidade, marca */
  --saude: #3ee6c5;
  --transito: #ffb547;
  --farol: #fff1d6;
  --lanterna: #ff3b3b;
  --fogo: #ff6a2b;
  --brasa: #ffc24a;
  --seg: #a594ff;
  --pref: #e8d5a3;
  --clima: #6fb8ff;
  --ok: #3ee6c5;
  --atencao: #ffd24a;
  --alerta: #ff8a3d;
  --critico: #ff3b5c;
  --acento: var(--areia);

  --f-titulo: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-texto: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --f-dado: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --raio: 14px;
  --painel-w: 420px;
  --nav-w: 76px;
  --dur: 600ms;
  --suave: cubic-bezier(.2, .7, .1, 1);
}
/* tema claro: papel quente, tintas mais fortes para manter contraste */
body[data-tema="claro"] {
  --noite: #eceae4;
  --noite-2: #f4f2ed;
  --vidro: rgba(250, 249, 246, 0.84);
  --vidro-forte: rgba(255, 255, 255, 0.92);
  --fio: rgba(28, 34, 46, 0.10);
  --fio-forte: rgba(28, 34, 46, 0.20);
  --texto: #141922;
  --mudo: #545c6b;
  --apagado: #858c99;
  --areia: #8a6a1f;
  --saude: #0b927a;
  --transito: #c26f00;
  --farol: #c26f00;
  --lanterna: #c8202d;
  --fogo: #d9480f;
  --brasa: #e08a00;
  --seg: #5b46d6;
  --pref: #8a6a1f;
  --clima: #1f6fc4;
  --ok: #0b927a;
  --atencao: #a87a00;
  --alerta: #d35d14;
  --critico: #cf1d44;
  color-scheme: light;
}
body { --urgencia: #ff5d73; --basica: #7cc4ff; --acento: var(--areia); }
body[data-tema="claro"] { --urgencia: #d62850; --basica: #286ec8; }
body[data-tema="claro"] .vinheta {
  background:
    radial-gradient(120% 90% at 45% 50%, transparent 60%, rgba(236, 234, 228, .7) 100%),
    linear-gradient(180deg, rgba(236, 234, 228, .75) 0, transparent 14%, transparent 84%, rgba(236, 234, 228, .6) 100%);
}
body[data-tema="claro"][data-modo="queimadas"] .vinheta {
  background: radial-gradient(120% 90% at 45% 50%, transparent 55%, rgba(240, 222, 205, .75) 100%);
}
body[data-satelite="1"] .vinheta {
  background:
    radial-gradient(120% 90% at 45% 50%, transparent 55%, rgba(3, 5, 9, .55) 100%),
    linear-gradient(180deg, rgba(3, 5, 9, .55) 0, transparent 14%, transparent 84%, rgba(3, 5, 9, .5) 100%);
}
body[data-tema="claro"] #abertura { background: radial-gradient(80% 60% at 50% 45%, #f7f5f0 0, var(--noite) 70%); }
body[data-tema="claro"] .painel { box-shadow: 0 24px 60px rgba(40, 36, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .6); }
body[data-tema="claro"] .maplibregl-ctrl-attrib { background: rgba(255, 255, 255, .7) !important; }
body[data-tema="claro"] .maplibregl-ctrl-attrib-button { filter: opacity(.5); }
body[data-tema="claro"] .selo { background: rgba(255, 255, 255, .6); }
body[data-tema="claro"] .lista button:hover, body[data-tema="claro"] .nav button:hover { background: rgba(20, 25, 34, .05); }
body[data-tema="claro"] .nav button.ativo { background: rgba(20, 25, 34, .07); }
body[data-tema="claro"] .lista .barra { background: rgba(20, 25, 34, .07); }

/* controles do mapa (mapa/satélite e tema) */
.controles { display: flex; gap: 8px; pointer-events: auto; }
.seg { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--fio); border-radius: 99px; background: var(--vidro); backdrop-filter: blur(10px); }
.seg button { border: 0; background: transparent; color: var(--mudo); border-radius: 99px; padding: 5px 11px; font-family: var(--f-dado); font-size: 11px; letter-spacing: .04em; cursor: pointer; display: grid; place-items: center; min-height: 26px; }
.seg button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.seg button[aria-pressed="true"] { background: var(--texto); color: var(--noite); }
.seg button[aria-pressed="true"] svg { stroke: var(--noite); }
.seg button:focus-visible { outline: 1.5px solid var(--acento); outline-offset: 1px; }

body[data-modo="saude"] { --acento: var(--saude); }
body[data-modo="clima"] { --acento: var(--clima); }
body[data-modo="transito"] { --acento: var(--transito); }
body[data-modo="queimadas"] { --acento: var(--fogo); }
body[data-modo="seguranca"] { --acento: var(--seg); }
body[data-modo="prefeitura"] { --acento: var(--pref); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--noite); color: var(--texto);
  font-family: var(--f-texto); font-size: 14px; line-height: 1.45;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#mapa, #fx { position: fixed; inset: 0; }
#fx { pointer-events: none; z-index: 2; }
.vinheta {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background:
    radial-gradient(120% 90% at 45% 50%, transparent 55%, rgba(3, 5, 9, .75) 100%),
    linear-gradient(180deg, rgba(3, 5, 9, .7) 0, transparent 14%, transparent 82%, rgba(3, 5, 9, .7) 100%);
}
body[data-modo="queimadas"] .vinheta {
  background:
    radial-gradient(120% 90% at 45% 50%, transparent 50%, rgba(18, 4, 0, .8) 100%),
    linear-gradient(180deg, rgba(10, 3, 0, .75) 0, transparent 16%, transparent 80%, rgba(14, 4, 0, .8) 100%);
}
.maplibregl-ctrl-attrib { background: rgba(5, 8, 13, .6) !important; font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--apagado) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1) opacity(.4); }

/* ---------- abertura ---------- */
#abertura {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: radial-gradient(80% 60% at 50% 45%, #0d1420 0, var(--noite) 70%);
  transition: opacity 900ms var(--suave), visibility 900ms;
}
#abertura.saindo { opacity: 0; visibility: hidden; }
.ab-centro { width: min(520px, calc(100% - 48px)); }
.ab-olho { font-family: var(--f-dado); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mudo); }
.ab-titulo { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(48px, 9vw, 88px); line-height: .95; margin: 14px 0 28px; letter-spacing: -.01em; }
.ab-titulo em, .marca-nome em { color: var(--areia); }
.ab-fontes { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 7px; font-family: var(--f-dado); font-size: 12px; color: var(--apagado); }
.ab-fontes li { display: flex; align-items: center; gap: 10px; transition: color 300ms; }
.ab-fontes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.ab-fontes li.ok { color: var(--texto); }
.ab-fontes li.ok::before { background: var(--saude); border-color: var(--saude); box-shadow: 0 0 10px var(--saude); }
.ab-fontes li.falhou { color: var(--critico); }
.ab-barra { height: 2px; background: var(--fio); border-radius: 2px; overflow: hidden; }
.ab-barra span { display: block; height: 100%; width: 0; background: var(--areia); box-shadow: 0 0 12px var(--areia); transition: width 400ms var(--suave); }

/* ---------- topo ---------- */
.topo {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  pointer-events: none;
}
.marca-olho { font-family: var(--f-dado); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mudo); }
.marca-nome { font-family: var(--f-titulo); font-size: 34px; line-height: 1; margin-top: 4px; letter-spacing: -.01em; }
.topo-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-right: calc(var(--painel-w) + 12px); }
.relogio { font-family: var(--f-dado); font-size: 12px; color: var(--mudo); display: flex; gap: 10px; }
.relogio #relogio-hora { color: var(--texto); font-size: 18px; letter-spacing: .04em; }
.selo { display: flex; align-items: center; gap: 8px; font-family: var(--f-dado); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mudo); padding: 5px 10px; border: 1px solid var(--fio); border-radius: 99px; background: rgba(5, 8, 13, .5); backdrop-filter: blur(8px); }
.selo i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: piscar 2.4s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .35; } }

/* ---------- navegação ---------- */
.nav {
  position: fixed; z-index: 10; left: max(16px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  background: var(--vidro); border: 1px solid var(--fio); border-radius: 20px; backdrop-filter: blur(14px) saturate(1.2);
}
.nav button {
  width: 60px; padding: 10px 4px 8px; border: 0; border-radius: 13px; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--mudo);
  font-size: 10px; line-height: 1.15; text-align: center; transition: background 200ms, color 200ms;
}
.nav button:hover { color: var(--texto); background: rgba(255, 255, 255, .04); }
.nav button.ativo { color: var(--texto); background: rgba(255, 255, 255, .06); }
.nav button:focus-visible { outline: 1.5px solid var(--acento); outline-offset: 1px; }
.ic { width: 22px; height: 22px; display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.nav button.ativo .ic { background: var(--c, var(--areia)); filter: drop-shadow(0 0 6px var(--c, var(--areia))); }
.nav [data-ir="geral"] { --c: var(--areia); }
.nav [data-ir="saude"] { --c: var(--saude); }
.nav [data-ir="transito"] { --c: var(--transito); }
.nav [data-ir="queimadas"] { --c: var(--fogo); }
.nav [data-ir="seguranca"] { --c: var(--seg); }
.nav [data-ir="clima"] { --c: var(--clima); }
.nav [data-ir="prefeitura"] { --c: var(--pref); }
.ic-geral { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 7l5-2 6 2 5-2v12l-5 2-6-2-5 2z'/%3E%3Cpath d='M9 5v12M15 7v12'/%3E%3C/svg%3E"); }
.ic-saude { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6'/%3E%3C/svg%3E"); }
.ic-transito { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V11l2-5h10l2 5v5z'/%3E%3Cpath d='M5 11h14'/%3E%3Ccircle cx='8' cy='14' r='.8' fill='black'/%3E%3Ccircle cx='16' cy='14' r='.8' fill='black'/%3E%3Cpath d='M6 16v2M18 16v2'/%3E%3C/svg%3E"); }
.ic-fogo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 4 6 6 6 11a6 6 0 0 1-12 0c0-3 2-4 2-7 2 1 3 3 3 5 1-2 1-6 1-9z'/%3E%3C/svg%3E"); }
.ic-seg { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-pref { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20V10M19 20V10M9 20v-6h6v6M3 10l9-6 9 6z'/%3E%3C/svg%3E"); }

/* ---------- painel ---------- */
.painel {
  position: fixed; z-index: 10; top: max(16px, env(safe-area-inset-top)); bottom: 16px; right: max(16px, env(safe-area-inset-right));
  width: var(--painel-w); overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 26px 30px;
  background: var(--vidro); border: 1px solid var(--fio); border-radius: 22px;
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  scrollbar-width: thin; scrollbar-color: var(--fio-forte) transparent;
}
.painel::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent); opacity: .7;
}
.p-entra > * { animation: entra 700ms var(--suave) both; }
.p-entra > *:nth-child(2) { animation-delay: 60ms; } .p-entra > *:nth-child(3) { animation-delay: 120ms; }
.p-entra > *:nth-child(4) { animation-delay: 180ms; } .p-entra > *:nth-child(5) { animation-delay: 240ms; }
.p-entra > *:nth-child(n+6) { animation-delay: 300ms; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

.p-olho { font-family: var(--f-dado); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); display: flex; align-items: center; gap: 8px; }
.p-olho::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.p-titulo { font-family: var(--f-titulo); font-weight: 400; font-size: 34px; line-height: 1.04; margin: 12px 0 10px; letter-spacing: -.005em; text-wrap: balance; }
.p-titulo em { color: var(--acento); }
.p-lead { color: var(--mudo); margin: 0 0 22px; text-wrap: pretty; }
.p-lead b { color: var(--texto); font-weight: 500; }
.p-sec { margin-top: 26px; }
.p-sec h3 { font-family: var(--f-dado); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); margin: 0 0 12px; display: flex; justify-content: space-between; gap: 8px; }
.p-sec h3 span { color: var(--apagado); letter-spacing: .06em; }
.p-nota { font-size: 12px; color: var(--apagado); margin: 10px 0 0; }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--fio); border: 1px solid var(--fio); border-radius: var(--raio); overflow: hidden; }
.kpi { background: var(--vidro-forte); padding: 14px 14px 13px; min-width: 0; }
.kpi .r { font-size: 11.5px; color: var(--mudo); line-height: 1.3; }
.kpi .v { font-family: var(--f-titulo); font-size: 38px; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .v small { font-family: var(--f-dado); font-size: 12px; color: var(--mudo); margin-left: 4px; letter-spacing: 0; }
.kpi .s { font-family: var(--f-dado); font-size: 11px; color: var(--apagado); margin-top: 6px; }
.kpi .s .sobe { color: var(--critico); } .kpi .s .desce { color: var(--ok); }
.kpi.largo { grid-column: 1 / -1; }

.chip-nivel { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 99px; font-family: var(--f-dado); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; }
.chip-nivel i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: piscar 1.6s ease-in-out infinite; }
.n1 { color: var(--ok); } .n2 { color: var(--atencao); } .n3 { color: var(--alerta); } .n4 { color: var(--critico); }

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico text { font-family: var(--f-dado); font-size: 10px; fill: var(--apagado); }

.lista { display: grid; gap: 2px; }
.lista button, .lista .item { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: default; }
.lista button { cursor: pointer; }
.lista button:hover, .lista button:focus-visible { background: rgba(255, 255, 255, .045); }
.lista .t { font-size: 13px; min-width: 0; }
.lista .t small { display: block; color: var(--apagado); font-size: 11.5px; margin-top: 1px; }
.lista .n { font-family: var(--f-dado); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.lista .n.vermelho { color: var(--critico); }
.lista .barra { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.lista .barra i { display: block; height: 100%; background: var(--acento); border-radius: 3px; box-shadow: 0 0 8px var(--acento); }

.cartoes { display: grid; gap: 10px; }
.cartao {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: end;
  padding: 16px 16px 14px; border-radius: var(--raio); background: var(--vidro-forte); border: 1px solid var(--fio);
  position: relative; overflow: hidden; transition: border-color 250ms, transform 250ms var(--suave);
}
.cartao::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--c); opacity: .8; box-shadow: 0 0 14px var(--c); }
.cartao:hover, .cartao:focus-visible { border-color: color-mix(in srgb, var(--c) 45%, transparent); transform: translateY(-1px); }
.cartao .co { grid-column: 1 / -1; font-family: var(--f-dado); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.cartao .cv { font-family: var(--f-titulo); font-size: 40px; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.cartao .ct { color: var(--mudo); font-size: 12.5px; grid-column: 1 / 2; }
.cartao svg { grid-row: 2 / 4; grid-column: 2; width: 110px; height: 40px; overflow: visible; }

.abas { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 4px; }
.abas button { border: 1px solid var(--fio); background: transparent; color: var(--mudo); border-radius: 99px; padding: 5px 12px; font-family: var(--f-dado); font-size: 11.5px; cursor: pointer; }
.abas button[aria-pressed="true"] { color: var(--noite); background: var(--acento); border-color: var(--acento); }

.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela td { padding: 7px 0; border-bottom: 1px solid var(--fio); vertical-align: middle; }
.tabela td.n { text-align: right; font-family: var(--f-dado); font-variant-numeric: tabular-nums; padding-left: 10px; }
.tabela td.sp { width: 74px; padding-left: 10px; }
.tabela svg { display: block; width: 74px; height: 18px; }

.trava { border: 1px dashed color-mix(in srgb, var(--seg) 45%, transparent); background: color-mix(in srgb, var(--seg) 7%, transparent); border-radius: var(--raio); padding: 16px; }
.trava b { color: var(--seg); font-weight: 500; }
.trava p { margin: 6px 0 0; color: var(--mudo); }

.integra { display: grid; gap: 10px; }
.integra .it { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; padding: 14px; border-radius: var(--raio); background: var(--vidro-forte); border: 1px solid var(--fio); }
.integra .it > :not(.ic) { grid-column: 2; min-width: 0; }
.integra .it .ic { grid-row: 1 / 4; grid-column: 1; width: 26px; height: 26px; background: var(--c); filter: drop-shadow(0 0 8px var(--c)); margin-top: 2px; }
.integra .it b { font-weight: 500; }
.integra .it p { margin: 0; color: var(--mudo); font-size: 12.5px; }
.integra .it .tag { font-family: var(--f-dado); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.fontes-rodape { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--fio); font-family: var(--f-dado); font-size: 10.5px; color: var(--apagado); line-height: 1.7; }

/* ---------- linha do tempo ---------- */
.tempo {
  position: fixed; z-index: 10; bottom: max(18px, env(safe-area-inset-bottom));
  left: calc(var(--nav-w) + 40px); right: calc(var(--painel-w) + 40px);
  display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px;
  background: var(--vidro); border: 1px solid var(--fio); border-radius: 18px; backdrop-filter: blur(14px);
}
.tempo-play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); cursor: pointer; display: grid; place-items: center; }
.tempo-play svg { width: 18px; height: 18px; fill: var(--acento); }
.tempo-play:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tempo-corpo { flex: 1; min-width: 0; }
.tempo-rotulo { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-dado); font-size: 11px; color: var(--mudo); letter-spacing: .06em; }
.tempo-rotulo b { color: var(--texto); font-weight: 500; }
.tempo-trilho { position: relative; height: 34px; margin-top: 6px; cursor: pointer; touch-action: none; }
.tempo-marcas { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1px; }
.tempo-marcas i { flex: 1; min-width: 0; background: var(--acento); opacity: .28; border-radius: 1px 1px 0 0; transition: opacity 200ms; }
.tempo-marcas i.passado { opacity: .55; }
.tempo-marcas i.atual { opacity: 1; box-shadow: 0 0 10px var(--acento); }
.tempo-cursor { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--texto); box-shadow: 0 0 8px var(--texto); pointer-events: none; }
.tempo-escala { position: relative; height: 14px; margin-top: 4px; font-family: var(--f-dado); font-size: 10px; color: var(--apagado); }
.tempo-escala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tempo-escala span:first-child { transform: none; }

/* ---------- bloqueio ---------- */
.bloqueio {
  position: fixed; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -27px) scale(.96);
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
  font-family: var(--f-dado); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--seg);
  opacity: 0; transition: opacity var(--dur), transform var(--dur) var(--suave);
}
.bloqueio svg { width: 54px; height: 54px; fill: none; stroke: var(--seg); stroke-width: 1.6; filter: drop-shadow(0 0 14px var(--seg)); }
body[data-modo="seguranca"] .bloqueio { opacity: 1; transform: translate(-50%, -27px) scale(1); }

/* ---------- dica ---------- */
.dica {
  position: fixed; z-index: 20; pointer-events: none; max-width: 280px;
  background: var(--vidro-forte); border: 1px solid var(--fio-forte); border-radius: 12px; padding: 10px 12px;
  font-size: 12.5px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
}
.dica .d1 { font-family: var(--f-dado); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.dica .d2 { font-weight: 500; margin-top: 4px; }
.dica .d3 { color: var(--mudo); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  :root { --painel-w: 380px; }
  .p-titulo { font-size: 30px; }
}
@media (max-width: 860px) {
  :root { --painel-w: 100%; }
  body { overflow: auto; }
  .topo { padding-top: max(14px, env(safe-area-inset-top)); }
  .marca-olho, .selo { display: none; }
  .controles { gap: 6px; }
  .seg button { padding: 4px 8px; font-size: 10px; min-height: 24px; }
  .topo-dir { flex-direction: row; align-items: center; gap: 8px; }
  .relogio { display: none; }
  .marca-nome { font-size: 24px; margin-top: 0; }
  .topo-dir { margin-right: 0; }
  .relogio span:last-child { display: none; }
  .relogio #relogio-hora { font-size: 15px; }
  .tempo-titulo, #tempo-titulo { display: none; }
  .tempo-rotulo { justify-content: flex-start; }
  .nav { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; transform: none; flex-direction: row; justify-content: space-between; border-radius: 18px; padding: 6px; z-index: 12; }
  .nav button { flex: 1; width: auto; font-size: 9.5px; padding: 8px 2px 6px; }
  .painel { top: auto; left: 12px; right: 12px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); max-height: 52vh; padding: 20px 18px 22px; border-radius: 20px; }
  .p-titulo { font-size: 27px; }
  .tempo { left: 12px; right: 12px; top: calc(58px + env(safe-area-inset-top)); bottom: auto; padding: 8px 12px 8px 8px; }
  .tempo-play { width: 36px; height: 36px; }
  .tempo-trilho { height: 24px; }
}

/* atalhos de rua (Street View / Google Earth) */
.pop-rua .maplibregl-popup-content { background: var(--vidro-forte); color: var(--texto); border: 1px solid var(--fio-forte); border-radius: 12px; padding: 12px 30px 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.4); backdrop-filter: blur(10px); display: grid; gap: 6px; font-size: 13px; }
.pop-rua .maplibregl-popup-tip { display: none; }
.pop-rua .maplibregl-popup-close-button { color: var(--mudo); font-size: 18px; right: 6px; top: 4px; }
.pop-rua .d1 { font-family: var(--f-dado); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.pop-rua button { all: unset; cursor: pointer; color: var(--texto); border-bottom: 1px solid var(--fio-forte); padding-bottom: 2px; width: fit-content; font-weight: 500; }
.pop-rua button:hover { color: var(--acento); border-color: var(--acento); }
.pop-rua a { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--fio-forte); padding-bottom: 2px; width: fit-content; }
.pop-rua a:hover { color: var(--acento); border-color: var(--acento); }

/* janela do Street View */
.rua { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(3, 5, 9, .62); backdrop-filter: blur(4px); animation: entra 400ms var(--suave) both; }
.rua-caixa { width: min(1180px, 100%); height: min(760px, 100%); display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 16px; border-radius: 22px; background: var(--vidro-forte); border: 1px solid var(--fio-forte); box-shadow: 0 40px 100px rgba(0, 0, 0, .55); }
.rua-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 4px; }
.rua-olho { font-family: var(--f-dado); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }
.rua-local { font-family: var(--f-dado); font-size: 12px; color: var(--mudo); margin-top: 2px; }
.rua-acoes { display: flex; align-items: center; gap: 12px; }
.rua-acoes a { color: var(--mudo); font-size: 12.5px; text-decoration: none; }
.rua-acoes a:hover { color: var(--texto); }
#rua-fechar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fio-forte); background: transparent; color: var(--texto); cursor: pointer; font-size: 14px; }
#rua-fechar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
#rua-quadro { width: 100%; height: 100%; border: 0; border-radius: 14px; background: var(--noite-2); }
.rua-nota { margin: 0; font-size: 12px; color: var(--apagado); padding: 0 4px; }

/* botão "Ver a rua" */
[data-rua-btn] { display: flex !important; gap: 6px; align-items: center; }
[data-rua-btn] svg { width: 14px; height: 14px; }
body[data-rua="1"] .selo span { visibility: hidden; }
body[data-rua="1"] .selo::after { content: "Clique numa rua para andar por ela"; position: absolute; font-family: var(--f-dado); color: var(--acento); }
body[data-rua="1"] .selo { position: relative; border-color: var(--acento); }

/* clima */
.ic-clima { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16a4 4 0 0 1-.5-8A5.5 5.5 0 0 1 17 8.5a3.8 3.8 0 0 1 .5 7.5z'/%3E%3Cpath d='M9 19l-1 2M13 19l-1 2M17 19l-1 2'/%3E%3C/svg%3E"); }
.tempo-agora { color: var(--mudo); margin-right: 6px; }
.tempo-agora b { color: var(--texto); font-weight: 500; }

/* área reservada: botão com cadeado */
.nav .cadeado { width: 10px; height: 10px; margin-top: -2px; background: currentColor; opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1v12H5V10zm2 0h8V8a4 4 0 1 0-8 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1v12H5V10zm2 0h8V8a4 4 0 1 0-8 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav [data-ir="inteligente"] { --c: var(--areia); }
.senha { display: grid; gap: 10px; margin-top: 8px; }
.senha label { font-family: var(--f-dado); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); }
.senha input { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--fio-forte); background: var(--vidro-forte); color: var(--texto); }
.senha input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.senha button, .sair-area { font: inherit; font-weight: 500; padding: 12px 16px; border-radius: 12px; border: 0; background: var(--areia); color: var(--noite); cursor: pointer; }
.senha button:disabled { opacity: .6; }
.senha-erro { margin: 0; min-height: 1.4em; color: var(--critico); font-size: 13px; }
.sair-area { margin-top: 28px; width: 100%; background: transparent; color: var(--mudo); border: 1px solid var(--fio-forte); }

/* cérebro */
.cerebro { position: fixed; z-index: 5; left: calc(var(--nav-w) + 40px); right: calc(var(--painel-w) + 40px); top: 120px; bottom: 40px; padding: 20px 24px 36px; display: none; place-items: center; pointer-events: none; }
body[data-modo="inteligente"] .cerebro:not(:empty) { display: grid; }
.cerebro { background: radial-gradient(70% 70% at 50% 50%, color-mix(in srgb, var(--noite) 86%, transparent) 0, color-mix(in srgb, var(--noite) 70%, transparent) 100%); border-radius: 28px; }
.cg-palco { position: relative; width: min(100%, 1040px, calc((100vh - 200px) * 1.5625)); }
.cerebro svg { display: block; width: 100%; height: auto; overflow: visible; }
.cerebro text { font-family: var(--f-texto); font-size: 15px; fill: var(--texto); paint-order: stroke; stroke: var(--noite); stroke-width: 4px; stroke-linejoin: round; }
.cerebro .cg-legenda { font-family: var(--f-dado); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; fill: var(--areia); }
.cerebro .cg-legenda-fon { fill: var(--saude); }
.cerebro .cg-nome { font-family: var(--f-titulo); font-size: 27px; fill: var(--texto); }
.cerebro .cg-sub { font-family: var(--f-dado); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: var(--mudo); }
.cerebro .cg-obj text { font-size: 13px; font-family: var(--f-texto); fill: var(--texto); }
.cerebro .cg-nucleo { fill: color-mix(in srgb, var(--noite) 70%, transparent); stroke: var(--areia); stroke-width: 1.2; stroke-dasharray: 3 5; transition: stroke-dasharray 900ms; }
.cerebro .cg-aura { opacity: .25; transition: opacity 1.2s; }
.cerebro .cg-fio { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 7; opacity: .14; transition: opacity 900ms calc(var(--i) * 70ms); }
.cerebro .cg-fio-sis { stroke: var(--areia); } .cerebro .cg-fio-fon { stroke: var(--saude); }
.cerebro .cg-sis circle { fill: var(--noite); stroke: var(--apagado); stroke-width: 1.5; transition: fill 600ms calc(var(--i) * 70ms), stroke 600ms calc(var(--i) * 70ms); }
.cerebro .cg-fon circle { fill: var(--saude); opacity: .8; }
.cerebro .cg-sis text { fill: var(--mudo); transition: fill 600ms calc(var(--i) * 70ms); }
.cerebro.ligado .cg-fio { opacity: .85; animation: fluxo 1.6s linear infinite; }
.cerebro.ligado .cg-sis circle { fill: var(--areia); stroke: var(--areia); }
.cerebro.ligado .cg-sis text { fill: var(--texto); }
.cerebro.ligado .cg-nucleo { stroke-dasharray: 0 0; stroke-width: 1.6; }
.cerebro.ligado .cg-aura { opacity: 1; }
@keyframes fluxo { to { stroke-dashoffset: -20; } }
.cg-botao { pointer-events: auto; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font: inherit; font-weight: 500; padding: 10px 18px; border-radius: 99px; border: 1px solid var(--areia); background: color-mix(in srgb, var(--areia) 16%, var(--vidro-forte)); color: var(--texto); cursor: pointer; }
.cg-botao:focus-visible { outline: 2px solid var(--areia); outline-offset: 2px; }
body[data-modo="inteligente"] .vinheta { background: radial-gradient(90% 80% at 40% 50%, rgba(3,5,9,.55) 0, rgba(3,5,9,.85) 100%); }
body[data-tema="claro"][data-modo="inteligente"] .vinheta { background: radial-gradient(90% 80% at 40% 50%, rgba(236,234,228,.6) 0, rgba(236,234,228,.9) 100%); }

/* hoje × com acesso */
.modulos-vis { display: grid; gap: 6px; }
.mv { border: 1px solid var(--fio); border-radius: 12px; background: var(--vidro-forte); }
.mv summary { cursor: pointer; padding: 12px 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; list-style: none; }
.mv summary::-webkit-details-marker { display: none; }
.mv summary i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.mv summary::after { content: "+"; margin-left: auto; color: var(--mudo); }
.mv[open] summary::after { content: "–"; }
.mv-linha { padding: 0 14px 12px; }
.mv-linha span { font-family: var(--f-dado); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.mv-linha p { margin: 3px 0 0; font-size: 13.5px; color: var(--texto); }
.mv-linha:first-of-type span { color: var(--mudo); }

/* ilustrações */
.ilu { position: relative; border: 1px dashed var(--fio-forte); border-radius: 14px; padding: 14px; margin-top: 10px; background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--areia) 4%, transparent) 14px 15px); }
.ilu-tarja { font-family: var(--f-dado); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--alerta); margin-bottom: 8px; }
.ilu h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.ilu-barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.ilu-leg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--mudo); }
.ilu-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.ilu-trilha { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 13px; }
.ilu-trilha .ok { color: var(--ok); } .ilu-trilha .talvez { color: var(--atencao); }

/* modo apresentação */
.roteiro { position: fixed; z-index: 30; left: calc(var(--nav-w) + 40px); bottom: max(24px, env(safe-area-inset-bottom)); width: min(620px, calc(100% - var(--painel-w) - var(--nav-w) - 90px)); padding: 22px 24px 18px; border-radius: 20px; background: var(--vidro-forte); border: 1px solid var(--fio-forte); box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(16px); }
.roteiro.troca { animation: entra 700ms var(--suave) both; }
.roteiro-topo { display: flex; justify-content: space-between; font-family: var(--f-dado); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.roteiro-marca { color: var(--mudo); }
.roteiro-titulo { font-family: var(--f-titulo); font-size: clamp(28px, 3vw, 40px); line-height: 1.05; margin: 10px 0 8px; text-wrap: balance; }
.roteiro-texto { margin: 0; color: var(--mudo); font-size: 16px; text-wrap: pretty; }
.roteiro-pe { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.roteiro-trilho { flex: 1; height: 3px; border-radius: 3px; background: var(--fio); overflow: hidden; }
.roteiro-trilho i { display: block; height: 100%; width: 0; background: var(--acento); }
.roteiro-botoes { display: flex; gap: 6px; }
.roteiro-botoes button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fio-forte); background: transparent; color: var(--texto); cursor: pointer; font-size: 15px; }
.roteiro-botoes button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
body.apresentando #tempo { display: none !important; }
[data-apresentar] { white-space: nowrap; }
@media (max-width: 860px) {
  .cerebro { left: 8px; right: 8px; top: 70px; bottom: 52vh; }
  .roteiro { left: 12px; right: 12px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); padding: 16px; }
  .roteiro-titulo { font-size: 24px; }
  body.apresentando .painel { display: none; }
}
body.apresentando .cerebro { bottom: 230px; }