/* Simulador de Sombras — mapa + painel + linha do tempo.
   Design alinhado com o tema (branco, azul #008bbd, tinta #0a2d4d).
   Ver inc/simulador-sombras.php. Motor: prototipo-simulador-sombras/.
   Ids/classes com prefixo ss- para não colidir com o resto do tema. */

#ss-wrap {
	--ss-blue: #008bbd;
	--ss-blue-700: #007caf;
	--ss-blue-soft: #e6f4fa;
	--ss-ink: #0a2d4d;
	--ss-body: #536373;
	--ss-muted: #6b7785;
	--ss-line: #e5e7eb;
	--ss-border: rgba(10, 45, 77, 0.12);

	position: relative;
	/* Contexto de empilhamento próprio, sempre abaixo do header (z-index 60) e
	   do mega menu (z-index 55) — o painel e a linha do tempo (z-index 1000
	   internos) deixam de tapar o dropdown "Ferramentas". Mesmo padrão do
	   `.leaflet-container` em site-header.css. */
	z-index: 0;
	width: 100%;
	height: min(80vh, 820px);
	border-radius: 12.6px;
	overflow: hidden;
	border: 1px solid rgba(10, 45, 77, 0.09);
	box-shadow: 0 7.2px 10.8px rgba(10, 45, 77, 0.07);
	background: #eef2f5;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#ss-mapa { position: absolute; inset: 0 0 82px 0; background: #eef2f5; }
.al-sombra { pointer-events: none; }

/* ---------- painel ---------- */
#ss-wrap #painel {
	position: absolute;
	z-index: 1000;
	top: 14px;
	left: 14px;
	width: 322px;
	max-width: calc(100% - 28px);
	max-height: calc(100% - 116px);
	overflow-y: auto;
	background: #fff;
	color: var(--ss-ink);
	border: 1px solid rgba(10, 45, 77, 0.09);
	border-radius: 12.6px;
	box-shadow: 0 12px 32px rgba(10, 45, 77, 0.16);
	padding: 16px;
	font-size: 13px;
	line-height: 1.5;
}
#ss-wrap #painel h2 {
	font-size: 14.4px; font-weight: 600; color: var(--ss-ink); margin: 0 0 13px;
	letter-spacing: -0.1px;
}
#ss-wrap .ss-campo { margin-bottom: 13px; }
#ss-wrap .ss-campo label {
	display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.6px; color: var(--ss-muted); margin-bottom: 5px;
}
#ss-wrap #painel input[type="search"],
#ss-wrap #painel input[type="date"] {
	width: 100%; background: #fbfdfe; color: var(--ss-ink);
	border: 1px solid var(--ss-border); border-radius: 8px;
	padding: 8px 10px; font: inherit;
}
#ss-wrap #painel input[type="search"]::placeholder { color: #9aa6b2; }
#ss-wrap #painel input:focus-visible { outline: 2px solid var(--ss-blue); outline-offset: 1px; border-color: var(--ss-blue); }

#ss-wrap .ss-linha { display: flex; gap: 8px; align-items: center; }
#ss-wrap #painel input[type="range"] {
	flex: 1; accent-color: var(--ss-blue); height: 4px;
}
#ss-wrap .ss-valor {
	font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
	color: var(--ss-blue-700); min-width: 44px; text-align: right;
}

#ss-wrap #painel button {
	background: var(--ss-blue); color: #fff; border: 0; border-radius: 8px;
	padding: 8px 13px; font: inherit; font-weight: 600; cursor: pointer;
	transition: background 0.15s ease;
}
#ss-wrap #painel button:hover { background: var(--ss-blue-700); }
#ss-wrap #painel button.ss-ghost {
	background: #fff; color: var(--ss-ink); border: 1px solid var(--ss-border);
}
#ss-wrap #painel button.ss-ghost:hover { background: #f4f9fc; border-color: var(--ss-blue); }
#ss-wrap #painel button.ss-mini {
	background: var(--ss-blue-soft); color: var(--ss-blue-700); border: 0;
	padding: 5px 9px; font-size: 11px; font-weight: 600;
}
#ss-wrap #painel button.ss-mini:hover { background: #d5ecf6; }
#ss-wrap .ss-botoes { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
#ss-wrap .ss-presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

#ss-wrap .ss-leitura {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: 12px; color: var(--ss-body); padding: 5px 0;
	border-top: 1px solid var(--ss-line);
}
#ss-wrap .ss-leitura:first-of-type { margin-top: 10px; }
#ss-wrap .ss-leitura b { font-variant-numeric: tabular-nums; color: var(--ss-ink); font-weight: 600; }

#ss-sugestoes { list-style: none; margin: 6px 0 0; padding: 0; max-height: 190px; overflow-y: auto;
	border: 1px solid var(--ss-line); border-radius: 8px; }
#ss-sugestoes:empty { display: none; }
#ss-sugestoes li { padding: 7px 10px; font-size: 12px; color: var(--ss-body); cursor: pointer;
	border-bottom: 1px solid var(--ss-line); }
#ss-sugestoes li:last-child { border-bottom: 0; }
#ss-sugestoes li:hover { background: var(--ss-blue-soft); color: var(--ss-ink); }

#ss-sol-horas {
	margin-top: 13px; padding: 11px 12px; border-radius: 9px; font-size: 12px;
	line-height: 1.55; color: var(--ss-ink);
	background: var(--ss-blue-soft); border: 1px solid rgba(0, 139, 189, 0.22);
}
#ss-sol-horas b { color: var(--ss-blue-700); font-size: 14px; }
#ss-sol-horas.vazio { background: #f6f8fa; border-color: var(--ss-line); color: var(--ss-muted); }

/* ---------- linha do tempo ---------- */
#ss-timeline {
	position: absolute; left: 0; right: 0; bottom: 0; height: 82px; width: 100%;
	display: block; background: #fff; border-top: 1px solid var(--ss-line);
	cursor: pointer;
}

/* ---------- botões flutuantes ---------- */
#ss-modo3d {
	position: absolute; z-index: 1000; right: 14px; bottom: 96px;
	background: #fff; color: var(--ss-ink); border: 1px solid rgba(10, 45, 77, 0.09);
	border-radius: 8px; padding: 8px 13px; font: 600 13px/1 "Inter", -apple-system, sans-serif;
	cursor: pointer; box-shadow: 0 6px 18px rgba(10, 45, 77, 0.14);
	transition: background 0.15s ease;
}
#ss-modo3d:hover { background: var(--ss-blue-soft); }
.ss-credito {
	position: absolute; z-index: 1000; right: 8px; bottom: 88px;
	font-size: 10px; color: var(--ss-muted); background: rgba(255, 255, 255, 0.9);
	padding: 2px 6px; border-radius: 4px;
}

/* alvo (ponto de interesse) */
.ss-alvo span {
	display: block; width: 24px; height: 24px; border-radius: 50%;
	border: 3px solid var(--ss-blue); background: rgba(0, 139, 189, 0.18);
	box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(10, 45, 77, 0.3);
}

/* controlo de zoom do Leaflet a condizer */
#ss-wrap .leaflet-control-zoom { border: 1px solid rgba(10, 45, 77, 0.09); box-shadow: 0 6px 18px rgba(10, 45, 77, 0.14); }
#ss-wrap .leaflet-control-zoom a { color: var(--ss-ink); }
#ss-wrap .leaflet-control-zoom a:hover { background: var(--ss-blue-soft); }

@media (max-width: 600px) {
	#ss-wrap { height: 82vh; }
	#ss-wrap #painel { width: calc(100% - 28px); }
}