/* AN ROMA — tudo escopado, nada de seletor global */

.an-roma-wrap { margin: 1.6em 0; font-size: 15px; }
.an-roma-wrap .an-roma-stage { position: relative; border: 1px solid #d8dde5; border-radius: 8px; overflow: hidden; background: #eef1f5; }
.an-roma-wrap .an-roma-map { width: 100%; min-height: 320px; }
.an-roma-wrap .an-roma-map img { max-width: none; }

.an-roma-wrap .an-roma-plan { position: absolute; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.an-roma-wrap .an-roma-plan img { display: block; max-width: none; image-rendering: auto; }

/* Controles da planta (1.7.0): acima do mapa, grandes e com os valores à vista. */
.an-roma-wrap .an-roma-bar {
	display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap;
	padding: 12px 14px; background: #fff; border-bottom: 1px solid #e3e7ee;
	font-size: 14px; color: #1b2230;
}
.an-roma-wrap .an-roma-chk { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 700; }
.an-roma-wrap .an-roma-chk input { width: 18px; height: 18px; accent-color: #e63946; }
.an-roma-wrap .an-roma-opbox { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; flex: 1 1 420px; }
.an-roma-wrap .an-roma-opbox.is-desligado { opacity: .45; }
.an-roma-wrap .an-roma-oplabel { font-weight: 700; color: #1b2230; }
.an-roma-wrap .an-roma-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.an-roma-wrap .an-roma-presets button {
	cursor: pointer; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	padding: 8px 12px; border-radius: 999px; background: #f1f3f7; color: #1b2230; border: 1px solid #d5dae2;
	transition: all .15s;
}
.an-roma-wrap .an-roma-presets button:hover { border-color: #e63946; color: #b3202c; }
.an-roma-wrap .an-roma-presets button.is-ativo { background: #e63946; border-color: #e63946; color: #fff; }
.an-roma-wrap .an-roma-slider { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 180px; }
.an-roma-wrap .an-roma-opval {
	min-width: 3.2em; text-align: right; font: 800 16px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #e63946;
}
/* Barra grossa e alça grande: a de antes era um fio de 180 px quase invisível. */
.an-roma-wrap .an-roma-op {
	-webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; height: 10px; margin: 0;
	border-radius: 999px; cursor: pointer; outline: none;
	background: linear-gradient(to right, #e63946 0%, #e63946 var(--an-roma-pct, 50%), #dfe3ea var(--an-roma-pct, 50%), #dfe3ea 100%);
}
.an-roma-wrap .an-roma-op::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 3px solid #e63946; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.an-roma-wrap .an-roma-op::-moz-range-thumb {
	width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #e63946; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.an-roma-wrap .an-roma-op:focus-visible { box-shadow: 0 0 0 4px rgba(230,57,70,.25); }

.an-roma-wrap .an-roma-mapbox { position: relative; }
.an-roma-wrap .an-roma-dica {
	position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 900;
	width: max-content; max-width: calc(100% - 40px);
	background: rgba(27,34,48,.94); color: #fff; border-radius: 10px; padding: 11px 38px 11px 15px;
	font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.an-roma-wrap .an-roma-dica[hidden] { display: none; }
.an-roma-wrap .an-roma-dica__x {
	position: absolute; top: 6px; right: 8px; background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
@media (max-width: 600px) {
	.an-roma-wrap .an-roma-bar { padding: 10px; }
	.an-roma-wrap .an-roma-presets button { padding: 8px 10px; font-size: 12.5px; }
	.an-roma-wrap .an-roma-dica { bottom: 26px; font-size: 13px; }
}

.an-roma-wrap .an-roma-nota {
	margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: #5a6475;
	border-left: 3px solid #e63946; padding: 2px 0 2px 11px;
}

/* modo de calibragem */
.an-roma-wrap .an-roma-calib {
	position: absolute; top: 10px; left: 10px; z-index: 1000; width: 340px; max-width: calc(100% - 20px);
	max-height: calc(100% - 20px); overflow-y: auto;
	background: #171d26; color: #e8edf5; border: 1px solid #2a3342; border-radius: 8px; padding: 12px;
	font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.an-roma-wrap .an-roma-calib h3 { margin: 0 0 8px; font-size: 14px; color: #fff; }
.an-roma-wrap .an-roma-calib h3 span { color: #9aa7b8; font-weight: 400; font-size: 11.5px; }
.an-roma-wrap .an-roma-cv { width: 100%; display: block; background: #0b0e13; border: 1px solid #2a3342; border-radius: 6px; cursor: crosshair; touch-action: none; }
.an-roma-wrap .an-roma-hint { font-size: 11.5px; color: #9aa7b8; margin: 6px 0 0; }
.an-roma-wrap .an-roma-st { margin: 8px 0; padding: 7px 9px; border-radius: 6px; background: #0f1723; border: 1px solid #2a3342; font-size: 12.5px; }
.an-roma-wrap .an-roma-st.wait { border-color: #2d7dd2; color: #cfe4ff; }
.an-roma-wrap .an-roma-st.ok { border-color: #3fb950; }
.an-roma-wrap .an-roma-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.an-roma-wrap .an-roma-actions button,
.an-roma-wrap .an-roma-actions select {
	background: #222c3a; color: #e8edf5; border: 1px solid #2a3342; border-radius: 6px;
	padding: 6px 9px; font-size: 12px; cursor: pointer;
}
.an-roma-wrap .an-roma-actions button:hover { background: #2b3748; }
.an-roma-wrap .an-roma-tb { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.an-roma-wrap .an-roma-tb td { padding: 3px 2px; border-bottom: 1px solid #1e2531; font-variant-numeric: tabular-nums; }
.an-roma-wrap .an-roma-tb button { background: none; border: 0; color: #9aa7b8; cursor: pointer; font-size: 12px; }
.an-roma-wrap .an-roma-rms { font-size: 11.5px; color: #9aa7b8; margin: 8px 0; }
.an-roma-wrap .an-roma-out { width: 100%; background: #0b0e13; color: #9fb4cd; border: 1px solid #2a3342; border-radius: 6px; font: 10.5px/1.35 ui-monospace, Menlo, Consolas, monospace; padding: 7px; }
.an-roma-cp {
	background: #e63946; color: #fff; border: 2px solid #fff; border-radius: 50%;
	width: 22px; height: 22px; font: bold 11px/18px system-ui, sans-serif; text-align: center;
	box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

@media (max-width: 782px) {
	.an-roma-wrap .an-roma-calib { position: static; width: auto; max-width: none; max-height: none; border-radius: 0; }
	.an-roma-wrap .an-roma-op { width: 130px; }
}

.an-roma-wrap .an-roma-leg {
	display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 12px;
	background: #fafbfc; border: 1px solid #e3e7ee; border-top: 0;
	font-size: 12px; color: #55607200; color: #556072;
}
.an-roma-wrap .an-roma-leg span { display: flex; align-items: center; gap: 7px; }
.an-roma-wrap .an-roma-sw { width: 15px; height: 11px; border-radius: 2px; display: inline-block; }
.an-roma-wrap .an-roma-sw.ofc { background: rgba(59,130,246,.35); border: 1px solid #1d4ed8; }
.an-roma-wrap .an-roma-sw.pl { background: rgba(200,160,60,.45); border: 1px solid #a07d23; }

/* ---------- busca de ruas (1.6.0) ----------
   Fica acima do mapa, e não dentro dele: é a primeira coisa que o leitor
   que chegou perguntando "e a minha rua?" precisa ver. */
.an-roma-wrap .an-roma-busca { position: relative; margin: 0 0 10px; }
.an-roma-wrap .an-roma-busca__rot { display: block; font-weight: 700; font-size: 14.5px; margin: 0 0 6px; color: #1b2230; }
.an-roma-wrap .an-roma-busca__linha {
	display: flex; gap: 8px; align-items: center;
	background: #fff; border: 2px solid #1b2230; border-radius: 8px; padding: 4px 6px 4px 12px;
	transition: border-color .15s, box-shadow .15s;
}
.an-roma-wrap .an-roma-busca__linha:focus-within { border-color: #e63946; box-shadow: 0 0 0 4px rgba(230,57,70,.14); }
.an-roma-wrap .an-roma-q {
	flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
	font: 600 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* 16px evita o zoom automático do iOS */
	color: #1b2230; padding: 9px 0; box-shadow: none; margin: 0;
}
.an-roma-wrap .an-roma-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.an-roma-wrap .an-roma-limpar {
	flex-shrink: 0; cursor: pointer; background: #f1f3f7; color: #445066;
	border: 1px solid #dfe3ea; border-radius: 6px; padding: 7px 12px; font-size: 13px;
}
.an-roma-wrap .an-roma-sug {
	position: absolute; left: 0; right: 0; z-index: 1100; list-style: none; margin: 4px 0 0; padding: 4px 0;
	background: #fff; border: 1px solid #d8dde5; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14);
	max-height: 290px; overflow-y: auto;
}
.an-roma-wrap .an-roma-sug li { padding: 9px 14px; font-size: 15px; cursor: pointer; color: #1b2230; margin: 0; }
.an-roma-wrap .an-roma-sug li:hover,
.an-roma-wrap .an-roma-sug li.is-ativo { background: #fdecee; }
.an-roma-wrap .an-roma-sug .an-roma-sug__vazio { color: #6b7688; cursor: default; }
.an-roma-wrap .an-roma-sug .an-roma-sug__vazio:hover { background: none; }

.an-roma-wrap .an-roma-res {
	margin: 10px 0 0; padding: 12px 14px; border-radius: 8px;
	background: #f7f9fc; border: 1px solid #dfe3ea; border-left: 4px solid #6b7688;
	font-size: 14.5px; line-height: 1.55; color: #1b2230;
}
.an-roma-wrap .an-roma-res p { margin: 0 0 8px; }
.an-roma-wrap .an-roma-res p:last-child { margin: 0; }
/* 1.8.0: a cor do card segue a medição contra o perímetro oficial, que é
   conta. A lista da matéria ganha destaque próprio, na linha dela. */
.an-roma-wrap .an-roma-res__tit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.an-roma-wrap .an-roma-faixa {
	display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
	padding: 3px 9px; border-radius: 999px; background: #e3e7ee; color: #445066;
}
.an-roma-wrap .an-roma-faixa.is-dentro { background: #e63946; color: #fff; }
.an-roma-wrap .an-roma-faixa.is-borda { background: #f59e0b; color: #1b2230; }
.an-roma-wrap .an-roma-faixa.is-proxima { background: #fde68a; color: #1b2230; }
.an-roma-wrap .an-roma-faixa.is-fora { background: #e3e7ee; color: #445066; }
.an-roma-wrap .an-roma-res.faixa-dentro { border-left-color: #e63946; background: #fff6f7; }
.an-roma-wrap .an-roma-res.faixa-borda { border-left-color: #f59e0b; background: #fffaf0; }
.an-roma-wrap .an-roma-res.faixa-proxima { border-left-color: #eab308; }
.an-roma-wrap .an-roma-res__itens { margin: 0 0 8px; padding-left: 18px; }
.an-roma-wrap .an-roma-res__itens li { margin: 0 0 5px; }
.an-roma-wrap .an-roma-res__itens li.is-na-lista { color: #9b1c27; }
.an-roma-wrap .an-roma-res__aviso { font-size: 13px; color: #4a5568; }
.an-roma-wrap .an-roma-res__acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.an-roma-wrap .an-roma-res__link {
	font-weight: 700; color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px;
}
.an-roma-wrap .an-roma-res__copiar {
	cursor: pointer; background: #fff; color: #1b2230; border: 1px solid #cfd5df;
	border-radius: 999px; padding: 6px 13px; font-size: 13px;
}
.an-roma-wrap .an-roma-res__copiar:hover { border-color: #1b2230; }

@media (max-width: 600px) {
	.an-roma-wrap .an-roma-busca__rot { font-size: 14px; }
	.an-roma-wrap .an-roma-sug { max-height: 240px; }
}

/* 1.9.0: resultado direto, uma frase só */
.an-roma-wrap .an-roma-res__frase { font-size: 15.5px; font-weight: 600; color: #1b2230; }
.an-roma-wrap .an-roma-res__nota { background: #fff; border: 1px solid #e3e7ee; border-radius: 6px; padding: 8px 10px; font-size: 14px; }