/* ===================================================================
 * SHELL / LAYOUT DO INDEX.JSP (header roxo, toolbar clara, rodape)
 * Reescrito do zero (US #3928, Fase 2) depois de multiplas rodadas de
 * remendos incrementais em cima do style.css legado causarem regressoes
 * em cadeia. Este arquivo e' o UNICO ponto de verdade pro esqueleto
 * flexbox do #topo/#conteudo/#rodape e pros componentes de busca
 * reutilizaveis (.geosite-search*). Cores/alturas alinhadas ao mockup de
 * referencia (frontend/src/views/mapa/MapaView.vue).
 *
 * #conteudo (menu de camadas + mapa) fica FORA deste arquivo -- mantem
 * dgLayout/layout="border" como esta, area ja estabilizada em sessao
 * anterior e fora do escopo desta reescrita. So' o necessario pra ele se
 * comportar certo dentro da coluna flex (#app-conteudo abaixo) esta aqui.
 * =================================================================== */

/* ---------- Design tokens (padronizacao) ----------
 * Escala unica de border-radius e cores da marca, consumida por todo o
 * header/toolbar/menu E pelo override do Bootstrap em include/bootstrap/
 * override/bootstrap.css (custom properties resolvem no :root indepen-
 * dente da ordem dos arquivos no bundle). Ajuste aqui = muda em todo lugar. */
:root {
	--geo-radius-xs: 3px;   /* detalhes minimos */
	--geo-radius-sm: 4px;   /* itens de lista, chips */
	--geo-radius-md: 6px;   /* botoes, inputs, pilulas */
	--geo-radius-lg: 8px;   /* paineis, dropdowns, menu */

	--geo-purple: rgb(83, 62, 118);
	--geo-purple-hover: rgb(100, 76, 140);
	--geo-purple-soft: rgba(83, 62, 118, .10);
	--geo-purple-ring: rgba(83, 62, 118, .15);

	/* Amarelo neon do destaque no mapa (cabo que brilha, resultado de
	 * "aplicar no mapa", caixa piscando). O OpenLayers nao le variavel CSS:
	 * o mesmo valor esta' em System.COR_NEON -- mudar os dois juntos. */
	--geo-neon: #ffc400;
	--geo-neon-glow: rgba(255, 196, 0, .95);
}

html, body {
	height: 100%;
	margin: 0;
	/* nenhum scroll no nivel do documento -- evita o bug de scroll-drift
	 * horizontal ao maximizar uma Window (include/digicade/window/window.js) */
	overflow: hidden;
}
body {
	display: flex;
	flex-direction: column;
	font-size: 12px !important;
}

/* ---------- #topo (header roxo + toolbar clara) ---------- */
.app-topo {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	/* 2600 (era 2500): acima da paleta (2580) e do puxador do painel de
	 * camadas (.layerPanel-west, 2560) -- que antes "vazavam" por cima do
	 * menu hamburguer aberto, ja que o menu vive no contexto de empilha-
	 * mento do header. Continua abaixo das Windows (piso 3000+), que devem
	 * cobrir o header quando maximizadas. */
	z-index: 2600 !important;
	overflow: initial;
}

/* Header roxo: logo, abas de janelas abertas, busca global, usuario. */
.app-topo-windows {
	flex: 0 0 auto;
	height: 40px;
	display: flex;
	align-items: center;
	background-color: rgb(83, 62, 118);
	color: #fff;
	/* overflow: visible (NAO auto/hidden) -- qualquer overflow no eixo
	 * horizontal forcava overflow-y a recortar tambem (regra do CSS: se um
	 * eixo e' auto/hidden/scroll, o outro nao pode ser visible), e isso
	 * CORTAVA os dropdowns do header que descem abaixo da linha de 40px
	 * (notificacoes do sino, menu do usuario) -- eles abriam mas ficavam
	 * invisiveis, parecendo "nao abrir". A pressao horizontal em telas
	 * estreitas e' absorvida pelo #app_window_bar (flex:1 1 auto,
	 * min-width:0, overflow:hidden -- tem dgScrollBar propria pras abas),
	 * entao a linha do header nao precisa recortar. */
	overflow: visible;
}
.app-topo-windows > * {
	flex-shrink: 0;
}

/* Cabecalho colapsado (btn-ocultar/btn-exibir, ver toggleTopo em
 * System.js): a linha inteira some do fluxo -- .app-topo-ferramentas
 * ocupa o espaco sozinha. */
.app-topo-reduced .app-topo-windows {
	display: none;
}

.topo-windows-menu-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
/* Trocado o PNG (logo-branca.png, baixa resolucao/serrilhado em telas
 * HiDPI) pelo SVG oficial (mesmo arquivo da tela de login,
 * autenticacao/img/geral/geosite-logo.svg, com o fill trocado pra branco
 * -- login mantem as cores originais, so' o header e' branco sobre o
 * roxo). Mesmo tamanho de antes (149x30) pra nao mexer no layout. */
.topo-windows-menu-logo .logo {
	background-image: url(../images/geosite-logo-branca.svg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 30px;
	width: 149px;
	/* margin-top:5px removido -- o flex align-items:center do container ja
	 * centraliza verticalmente; o offset fixo deixava a logo ~2.5px baixa. */
	margin: 0 0 0 10px;
}
/* Telas estreitas: troca pro "compasso" (so' o miolo do "O" de "Geo", ver
 * resources/images/geosite-logo-compasso-branca.svg).
 *
 * O logo NAO fica na mesma linha da toolbar (Selecionar/Pan, busca de
 * endereco etc) -- fica em .app-topo-windows, ao lado de
 * #app_window_bar (abas das janelas abertas/minimizadas). Esse elemento
 * e' flex:1 com scroll PROPRIO (dgScrollBar) -- nunca "quebra"/empurra o
 * resto do header pra fora, so' vai perdendo espaco visivel pras abas
 * conforme a tela estreita (medido ao vivo: em 800px, logo completo
 * (149px) deixa so' 84px pra abas -- menos de 1 aba inteira visivel
 * antes de precisar rolar; o compasso (19px) deixa 214px, ~2 abas). Como
 * o unico "custo" real de manter o logo completo e' esse espaco de abas
 * minimizadas (nao um overflow/quebra visual), o breakpoint e' uma
 * escolha de UX (abaixo de 800px passa a doer mais que vale a pena
 * manter a palavra por extenso), nao um ponto de colisao rigido. */
@media (max-width: 799px) {
	.topo-windows-menu-logo .logo {
		background-image: url(../images/geosite-logo-compasso-branca.svg);
		/* So' o compasso, sem o resto da palavra ao lado pra "ancorar"
		 * visualmente o tamanho, ficava grande/pesado ocupando quase a
		 * altura toda do header (30px) -- reduzido pra ficar na mesma
		 * escala dos outros icones do header (sino/hamburguer, ~18-20px). */
		width: 19px;
		height: 20px;
	}
}
.topo-windows-menu-logo .app-topo-windows-menu {
	padding: 3px 6px 3px 3px;
}

/* ---------- Menu hamburguer (#button-menu + #menu-principal) ----------
 * Botao: era um .btn.btn-default padrao do Bootstrap (caixa clara com
 * borda, destoando do resto do header translucido). Vira um icone solto
 * com hover translucido, igual ao padrao dos outros botoes do header
 * (mockup de referencia usa exatamente esse tratamento pro botao do
 * menu). A ARVORE de itens dentro de #menu-principal (.item-pai/
 * .item-filho) continua igual -- funcional, so' o CONTAINER (moldura,
 * cantos, sombra) e' modernizado aqui. */
#button-menu {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--geo-radius-md);
}
#button-menu:hover,
#button-menu:focus {
	background: rgba(255, 255, 255, .15) !important;
}
#button-menu img {
	width: 18px;
	height: 18px;
}

#menu-principal {
	width: 260px;
	max-height: 520px;
	font-size: 12px !important;
	border-radius: var(--geo-radius-lg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	border: 1px solid rgba(0, 0, 0, .08);
	padding: 0;
	/* container em coluna: cabecalho de busca fixo + corpo rolavel.
	 * IMPORTANTE: NAO declarar display:flex aqui na base -- isso sobre-
	 * escrevia o display:none padrao do .dropdown-menu e deixava o menu
	 * SEMPRE visivel (abria "sozinho" no load). O flex so' vale quando o
	 * dropdown esta aberto (.open), na regra abaixo. */
	flex-direction: column;
	overflow: hidden;
}
/* Abre como coluna flex apenas quando o dropdown esta aberto. !important
 * porque o script de reposicionamento de dropdowns do app seta
 * display:block INLINE (junto de position:fixed/top/left/z-index) ao abrir
 * -- inline vence stylesheet normal, entao so' !important garante o flex
 * (necessario pro corpo rolavel .menu-scroll preencher a altura). */
#menu.open > #menu-principal {
	display: flex !important;
}

/* ---------- Cabecalho de busca (fixo no topo) ---------- */
.menu-search {
	flex: 0 0 auto;
	position: relative;
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	background: #fff;
	border-radius: var(--geo-radius-lg) var(--geo-radius-lg) 0 0;
}
.menu-search-input {
	width: 100%;
	height: 34px;
	border: 1px solid #dcdcdc;
	border-radius: var(--geo-radius-md);
	padding: 0 10px 0 34px;
	font-size: 13px;
	color: #333;
	background: #fff;
	outline: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.menu-search-input:focus {
	border-color: rgb(83, 62, 118);
	box-shadow: 0 0 0 3px rgba(83, 62, 118, .15);
}
.menu-search-input::-webkit-input-placeholder { color: #9a9a9a; }
.menu-search-input::-moz-placeholder { color: #9a9a9a; }
/* Lupa desenhada em CSS (circulo + cabo) */
.menu-search-icon {
	position: absolute;
	left: 23px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -1px;
	transform: translateY(-50%);
	border: 2px solid #9a9a9a;
	border-radius: 50%;
	pointer-events: none;
}
.menu-search-icon::after {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 2px;
	height: 6px;
	background: #9a9a9a;
	border-radius: 1px;
	transform: rotate(-45deg);
}

/* ---------- Corpo rolavel ---------- */
.menu-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 0;
}

/* Estado de busca: item/categoria sem correspondencia some; categorias
 * ficam forcadamente expandidas (chevron escondido) pra mostrar os hits. */
.menu-hidden { display: none !important; }
#menu-principal.menu-searching .menu-cat-toggle > ul { display: block !important; }
#menu-principal.menu-searching .menu-cat-caret { display: none; }
#menu-principal.menu-searching .menu-cat-header { cursor: default; }

#menu-principal ul {
	padding: 0;
	margin: 0;
}
#menu-principal ul li {
	list-style: none;
	background-color: #fff;
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	border: none;
}

/* Cabecalho de categoria (.item-pai): antes era fundo azul-claro (#e7f4f9)
 * com texto BRANCO herdado (contraste pessimo, quase ilegivel). Vira um
 * rotulo de secao discreto -- fundo cinza clarissimo, texto escuro em
 * maiusculas, peso 600 -- separando visualmente os grupos sem pesar. */
#menu-principal .item-pai {
	display: block;
	padding: 8px 12px 8px 34px;
	background-color: #f4f5f7;
	color: #4a4a4a !important;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .3px;
	text-transform: uppercase;
	cursor: default;
}

/* Item folha (.item-filho): texto escuro legivel (nao mais o azul de link
 * do Bootstrap), linha confortavel. */
#menu-principal .item-filho {
	display: block;
	padding: 8px 12px 8px 34px;
	color: #333;
	font-weight: 400;
}

/* Indentacao por nivel de aninhamento (mantida em relacao ao layout
 * antigo pra nao desalinhar os icones absolutos). */
#menu-principal ul li ul li .item-pai,
#menu-principal ul li ul li .item-filho {
	padding-left: 50px;
}
#menu-principal ul li ul li ul li .item-pai,
#menu-principal ul li ul li ul li .item-filho {
	padding-left: 66px;
}
#menu-principal ul li ul li ul li ul li .item-filho {
	padding-left: 82px;
}

#menu-principal a {
	display: block;
	width: auto;
	text-decoration: none;
	color: inherit;
	border-radius: var(--geo-radius-sm);
	margin: 0 4px;
	transition: background-color .12s ease-in-out;
}
#menu-principal a:hover {
	background-color: rgba(83, 62, 118, .09);
}
#menu-principal a:hover .item-filho {
	color: rgb(83, 62, 118);
}

/* Icone do item: centralizado verticalmente na linha (o -21px puxa pra
 * dentro do padding-left; top:50% + translate centra na altura, em vez de
 * grudar no topo da linha como antes). */
#menu-principal .menu-icon {
	margin-left: -21px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
}

/* ---------- Grupos colapsaveis (categorias de topo) ----------
 * Categorias de topo (.menu-cat-toggle) abrem/fecham ao clicar no
 * cabecalho; o estado persiste em localStorage (ver initializeMenuAplicacao
 * em System.js). Um chevron a direita indica o estado. */
#menu-principal .menu-cat-header {
	position: relative;
	cursor: pointer;
	user-select: none;
	padding-right: 28px;
}
#menu-principal .menu-cat-header:hover {
	background-color: #eceef1;
}
.menu-cat-caret {
	position: absolute;
	right: 13px;
	top: calc(50% - 5px);
	width: 6px;
	height: 6px;
	border-right: 2px solid #9a9a9a;
	border-bottom: 2px solid #9a9a9a;
	transform: rotate(45deg);          /* aberto: aponta pra baixo */
	transition: transform .15s ease-in-out;
}
.menu-cat-toggle.collapsed .menu-cat-caret {
	transform: rotate(-45deg);         /* fechado: aponta pra direita */
}
.menu-cat-toggle.collapsed > ul {
	display: none;
}

/* ---------- Secao "Mais usados" (topo) ---------- */
.menu-mais-usados .menu-secao-fixa {
	color: rgb(83, 62, 118) !important;
	background-color: #f0ecf6;
	cursor: default;
}

/* ---------- Scrollbar custom (design mais limpo) ----------
 * Barra fina e discreta nos paineis proprios (corpo do menu, resultados
 * de busca, notificacoes). O "thumb" tem borda BRANCA (igual ao fundo do
 * painel) em vez de transparente -- a borda transparente antiga deixava
 * o trilho aparecer por baixo com um aspecto sujo/acinzentado. */
.menu-scroll,
#resultadoInputPesquisaGlobal.ui-autocomplete,
#resultadoInputPesquisaGlobal2.ui-autocomplete,
.menu-dowloads {
	scrollbar-width: thin;
	scrollbar-color: #c4c4cc #ffffff;
}
.menu-scroll::-webkit-scrollbar,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar,
.menu-dowloads::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
.menu-scroll::-webkit-scrollbar-track,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar-track,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar-track,
.menu-dowloads::-webkit-scrollbar-track {
	background: #ffffff;
}
.menu-scroll::-webkit-scrollbar-thumb,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar-thumb,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar-thumb,
.menu-dowloads::-webkit-scrollbar-thumb {
	background: #c4c4cc;
	border-radius: 7px;
	border: 3px solid #ffffff;
	background-clip: padding-box;
}
.menu-scroll::-webkit-scrollbar-thumb:hover,
#resultadoInputPesquisaGlobal.ui-autocomplete::-webkit-scrollbar-thumb:hover,
#resultadoInputPesquisaGlobal2.ui-autocomplete::-webkit-scrollbar-thumb:hover,
.menu-dowloads::-webkit-scrollbar-thumb:hover {
	background: #a8a8b2;
	background-clip: padding-box;
}

/* Barra de abas de janelas abertas -- unico item com flex-shrink:1 no
 * header (o ponto normal de espremer; tem sua propria dgScrollBar
 * interna pra rolar as abas quando ha muitas). */
.app-topo-windows-windowbar {
	/* basis 0 (era auto): divide a sobra por igual com
	 * .app-topo-windows-espaco, do outro lado da busca -- e' o que a
	 * deixa centralizada entre a logo e o sino. */
	flex: 1 1 0;
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	/* ALTURA EXPLICITA (bug corrigido): o dgScrollBar posiciona a toolbar
	 * interna como position:absolute (fora do fluxo) e os scrollers com
	 * top:0/bottom:0 -- ou seja, ele depende do CONTAINER ter altura
	 * propria. A regra legada #app_window_bar{height:39px} (removida na
	 * limpeza da busca) era quem dava essa altura; sem ela o bar colapsava
	 * pra ~6px e as abas de janela (30px) ficavam recortadas num fio fino.
	 * position:relative garante que a toolbar absolute ancore aqui. */
	height: 32px;
	position: relative;
	padding: 0;
}
/* Centraliza a toolbar interna do dgScrollBar na altura do bar sem mexer
 * no mecanismo de scroll (mantem o float dos itens). */
.app-topo-windows-windowbar .dgScrollBar-toolbar {
	top: 50%;
	transform: translateY(-50%);
}

/* ---------- Toolbar clara: ferramentas, projeto, busca de endereco ---------- */
.app-topo-ferramentas {
	flex: 0 0 auto;
	/* 40px (era 32): os grupos de ferramentas ganharam um rotulo de 8px
	 * em cima dos botoes (.tb-grupo-rotulo). A paleta e' deslocada pra
	 * baixo na mesma medida (.paleta-container). */
	height: 40px;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 2px 6px;
	/* Antes: border:1px silver nos 4 lados (caixa dura, datada). Agora so'
	 * uma linha inferior discreta separando do mapa -- o topo encosta no
	 * header roxo (contraste ja separa) e as laterais nao precisam moldura. */
	border: none;
	border-bottom: 1px solid #e0e0e0;
	background-color: rgb(247, 247, 247);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.app-topo-ferramentas::-webkit-scrollbar {
	display: none;
	height: 0;
}
.app-topo-ferramentas > * {
	flex-shrink: 0;
}

/* Botoes de ferramenta (selecionar/pan/medir/etc): eram cinza-solido
 * (#f7f7f7, quase a mesma cor do fundo da toolbar, mas com o box-shadow
 * default do Bootstrap por baixo criando uma "caixa" visivel e pesada) --
 * viram "ghost" de verdade (fundo transparente, sem sombra), com hover/
 * active em tom roxo claro (mesma familia de cor do resto da marca) em
 * vez de cinza neutro. Padrao usado no mockup de referencia pros botoes
 * da toolbar. */
.app-topo-ferramentas .btn-ferramenta {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	border-radius: var(--geo-radius-md);
	/* min-width (nao width fixa) -- botoes SO' de icone (<em> 16px) ficam
	 * ~26px; botoes de TEXTO (#btn-converter "Converter", #btn-sair-projeto
	 * "Sair") expandem pra caber o texto em vez de serem cortados dentro de
	 * uma caixa fixa de 26px (bug: "ConverterSair" grudados/clipados). */
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	margin-right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.app-topo-ferramentas .btn-ferramenta:hover,
.app-topo-ferramentas .btn-ferramenta:focus {
	background-color: rgba(83, 62, 118, .1);
	border-color: transparent;
	box-shadow: none;
}
.app-topo-ferramentas .btn-ferramenta:active,
.app-topo-ferramentas .btn-ferramenta.active,
.app-topo-ferramentas .open .dropdown-toggle.btn-ferramenta {
	background-color: rgba(83, 62, 118, .18);
	border-color: transparent;
	box-shadow: none;
}
/* Selecionar/Pan mesclados num so' botao visivel (US #3928, ver
 * index.jsp + System.js#bindEventos/ontogglecontrol): o par comeca com
 * #btn-map-pan oculto (Selecionar e' o modo inicial) e o JS alterna qual
 * dos 2 fica com essa classe conforme o modo ativo. */
.nav-toggle-hidden {
	display: none !important;
}

.app-topo-ferramentas .divider-vertical {
	height: 18px !important;
	border-left: 1px solid #dcdcdc;
	border-color: #dcdcdc;
	margin: 0 6px;
	align-self: center;
}

/* "Redes" (filtro) era um .btn puro do Bootstrap sem variante de cor --
 * ficava so' o texto flutuando, sem parecer um botao clicavel de verdade
 * (inconsistente com "Selecionar projeto" ao lado). Ganha o mesmo
 * tratamento ghost dos botoes de ferramenta, so' com padding horizontal
 * (tem texto, nao so' icone). */
#btn-filtro-redes {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	border-radius: var(--geo-radius-md);
	height: 26px;
	padding: 0 10px;
}
#btn-filtro-redes:hover,
#btn-filtro-redes:focus {
	background-color: rgba(83, 62, 118, .1);
	border-color: transparent;
}

/* Altura consistente com os botoes de ferramenta (26px) -- antes usava
 * so' o padrao do Bootstrap .btn-xs (~22px), ficando um pixel mais baixo
 * e desalinhado verticalmente ao lado dos icones. */
#btn-projeto {
	height: 26px;
}

/* Grupo da direita: busca global "interna" + busca de endereco + divisor +
 * ocultar/exibir cabecalho -- um UNICO item flex com margin-left:auto,
 * robusto a qualquer combinacao do que estiver visivel a esquerda
 * (selecionar projeto/filtro de redes/acoes-projeto aparecem e somem
 * conforme o estado do projeto selecionado). */
.app-toolbar-right {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex-shrink: 0;
	/* quando a barra rola (rolagem escondida), o grupo da direita -- com o
	 * botao que restaura o cabecalho -- continua visivel */
	position: sticky;
	right: 0;
	background: rgb(247, 247, 247);
	z-index: 1;
	padding-left: 4px;
}

/* ---------- Filtro de Redes (#idFiltroRedes / .dropdown-menu-redes) ----------
 * Vinha com o visual padrao do Bootstrap, destoando do resto: checkbox azul
 * do navegador, lupa como caixa cinza (btn-default) e "Aplicar" no azul
 * #337ab7. Aqui so' troca a aparencia -- nenhuma regra de comportamento.
 * Estava num <style> dentro do index.jsp; veio pra ca' junto com os outros
 * componentes ja' redesenhados. */
.dropdown-menu-redes {
	z-index: 1050;
	min-width: 240px;
	padding: 6px;
}
/* Campo de busca da lista de redes. Filtra no cliente: as linhas que nao
 * casam recebem display:none, nunca saem do DOM -- e' isso que mantem o
 * "Aplicar" correto (ver System.js#_filtraListaRedes). */
.rede-filter-busca {
	padding: 2px 6px 6px;
}
#input-busca-rede {
	width: 100%;
	height: 26px;
	padding: 0 8px;
	font-size: 12px;
	color: #333;
	border: 1px solid #ddd;
	border-radius: var(--geo-radius-md);
	background-color: #fff;
	outline: none;
}
#input-busca-rede:focus {
	border-color: rgb(83, 62, 118);
	box-shadow: 0 0 0 3px rgba(83, 62, 118, .15);
}
/* Busca sem resultado: sem aviso, a lista vazia parece quebrada. */
.rede-filter-vazio {
	padding: 10px 12px;
	font-size: 12px;
	color: #888;
	text-align: center;
}

.dropdown-menu-redes li {
	list-style: none;
}
/* Quem rola e' a LISTA, nao o menu inteiro. Antes o <ul> tinha
 * max-height/overflow, entao com muitas redes o "Selecionar Todas" saia de
 * vista ao rolar (o "Aplicar" nao, esse ja' era sticky). Limitando aqui, o
 * cabecalho e o rodape ficam sempre visiveis e so' as redes correm. */
#redes-filter-list {
	display: block;
	max-height: 230px;
	overflow-y: auto;
}
/* Linha da rede: alvo inteiro destacavel, no lugar de texto solto. */
.dropdown-menu-redes #redes-filter-list > li {
	border-radius: var(--geo-radius-sm);
}
.dropdown-menu-redes #redes-filter-list > li:hover {
	background-color: rgba(83, 62, 118, .08);
}
.dropdown-menu-redes .rede-filter-item {
	white-space: nowrap;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}
/* accent-color troca o azul do checkbox nativo pelo roxo da marca sem
 * precisar remontar o controle com pseudo-elementos. */
.dropdown-menu-redes .rede-filter-item input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: rgb(83, 62, 118);
}
.dropdown-menu-redes .rede-filter-item span {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Lupa: botao de icone (como os outros da aplicacao), nao a caixa cinza
 * com borda do btn-default -- eram 28 molduras cinza empilhadas. */
.dropdown-menu-redes .btn-zoom-rede {
	padding: 2px 5px;
	line-height: 1;
	opacity: .55;
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: var(--geo-radius-sm);
}
.dropdown-menu-redes .btn-zoom-rede:hover,
.dropdown-menu-redes .btn-zoom-rede:focus {
	opacity: 1;
	background-color: rgba(83, 62, 118, .12);
	outline: none;
}
.dropdown-menu-redes .btn-zoom-rede .x-icon-viewmap {
	display: inline-block;
}
/* Aplicar: roxo da marca e altura de botao de verdade (era 22px). */
.dropdown-menu-redes #btn-rede-filter-apply {
	height: 28px;
	font-size: 12px;
	border-radius: var(--geo-radius-md);
	background-color: rgb(83, 62, 118);
	border-color: rgb(83, 62, 118);
	color: #fff;
}
.dropdown-menu-redes #btn-rede-filter-apply:hover,
.dropdown-menu-redes #btn-rede-filter-apply:focus {
	background-color: rgb(100, 76, 140);
	border-color: rgb(100, 76, 140);
	color: #fff;
}

/* Filtro de tipo de elemento (fid_tipo_feicao) na Consulta Global. Existe
 * duplicado (header escuro e barra clara -- so' um visivel por vez, ver
 * toggleTopo em System.js), por isso as regras usam classe, nao id. */
.dropdown-menu-tipo-feicao {
	z-index: 1050;
	min-width: 220px;
	padding: 6px;
	/* color explicito: .app-topo-windows (header) define color:#fff no
	 * container pai, e sem isso o texto ficava branco no fundo branco
	 * padrao do .dropdown-menu. */
	color: #333;
}
/* Setinha do filtro agora mora DENTRO do proprio .geosite-search (ver
 * comentario no index.jsp) -- so' o chevron, sem caixa/borda propria,
 * igual ao padrao ja' usado em .geosite-search-type. */
.geosite-search-filtro-toggle {
	flex: 0 0 auto;
	height: 100%;
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
/* Seta preenchida, igual o .caret da busca de endereco (.geosite-search-type)
 * -- mesmo truque de borda do Bootstrap, nao SVG, pra ficar identica. */
.icone-filtro-chevron {
	display: inline-block;
	position: relative;
	width: 11px;
	height: 11px;
	vertical-align: middle;
}
.icone-filtro-chevron::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
.geosite-search--dark .geosite-search-filtro-toggle {
	color: #fff;
}
.geosite-search--dark .geosite-search-filtro-toggle:hover,
.geosite-search--dark .geosite-search-filtro-toggle:focus,
.geosite-search--dark.open .geosite-search-filtro-toggle {
	background: rgba(255, 255, 255, .15);
}
.geosite-search--light .geosite-search-filtro-toggle {
	color: #767676;
}
.geosite-search--light .geosite-search-filtro-toggle:hover,
.geosite-search--light .geosite-search-filtro-toggle:focus,
.geosite-search--light.open .geosite-search-filtro-toggle {
	color: rgb(83, 62, 118);
	background: rgba(83, 62, 118, .08);
}
.dropdown-menu-tipo-feicao li {
	list-style: none;
}
.filtro-tipo-feicao-list {
	display: block;
	max-height: 260px;
	overflow-y: auto;
}
.dropdown-menu-tipo-feicao .tipo-feicao-filter-item {
	white-space: nowrap;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dropdown-menu-tipo-feicao .tipo-feicao-filter-item input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: rgb(83, 62, 118);
}
.dropdown-menu-tipo-feicao .tipo-feicao-filter-item span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Componente de busca reutilizavel (.geosite-search) ----------
 * Markup proprio, sem .input-group/.input-group-btn do Bootstrap (esses
 * sao display:table/table-cell por padrao -- forcar flex neles sem
 * reestruturar o HTML colapsa a caixa do wrapper enquanto o botao real,
 * maior, renderiza fora do lugar). Reaproveitado por 3 buscas:
 *  - #idPesquisaRapida   (endereco,       toolbar clara)
 *  - #consultalGlobaExterna (elementos,   header roxo)
 *  - #consultalGlobalInterna (elementos,  toolbar clara, cabecalho colapsado)
 */
.geosite-search {
	display: flex;
	align-items: center;
	height: 28px;
	border-radius: var(--geo-radius-md);
	overflow: hidden;
	flex-shrink: 0;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}
.geosite-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: none;
	box-shadow: none;
	background: transparent;
	padding: 0 8px;
	font-size: 12px;
}
.geosite-search-input:focus {
	outline: none;
	box-shadow: none;
}
.geosite-search-submit {
	flex: 0 0 auto;
	height: 100%;
	border: none;
	/* Era 0 10px -- pro icone de 16px isso dava 20px de padding (mais
	 * padding que icone), um respiro desproporcional dentro de um campo
	 * que ja' e' pequeno. 8px (igual ao padding do input do lado) mante'm
	 * a lupa clicavel sem sobrar espaco morto. */
	padding: 0 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Lupa dos botoes de busca: troca o sprite antigo (iconeg-buscagoogle) por
 * um icone Lucide (mask + currentColor) -- fica nitido e herda a cor do
 * botao (branco). Vale pra busca de endereco e as duas globais. */
.geosite-search-submit .iconeg-buscagoogle,
#pesquisaLupaGlobal .iconeg-buscagoogle,
#pesquisaLupaGlobal2 .iconeg-buscagoogle {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: none;
	background-color: currentColor;
	-webkit-mask: url(../../include/icones/images/lucide/search.svg?v=1) center / contain no-repeat;
	mask: url(../../include/icones/images/lucide/search.svg?v=1) center / contain no-repeat;
}
/* Com o filtro de tipo de feicao parcial, a lupa das duas buscas globais
 * vira o icone text-search -- mesmo tamanho, so' troca o icone (mask).
 * Classe alternada em _updateTipoFeicaoFilterIndicador (System.js), que
 * tambem poe o texto do tooltip em data-original-title. */
#pesquisaLupaGlobal.filtro-tipo-feicao-ativo .iconeg-buscagoogle,
#pesquisaLupaGlobal2.filtro-tipo-feicao-ativo .iconeg-buscagoogle {
	-webkit-mask-image: url(../../include/icones/images/lucide/text-search.svg?v=1);
	mask-image: url(../../include/icones/images/lucide/text-search.svg?v=1);
}

/* ---------- Estado de carregamento da busca (.geosite-search--carregando)
 * A consulta global leva alguns segundos (medido: 1,2s a 3,7s no ambiente
 * local) e nao dava retorno visual nenhum -- o usuario nao sabia se estava
 * buscando ou se nao achou nada, e era comum apertar Enter de novo,
 * disparando outra requisicao.
 *
 * Barra INDETERMINADA na base da caixa (nao sabemos o progresso real, so'
 * que esta em andamento). Vai no ::after do wrapper, que ja' tem
 * overflow:hidden -- a barra fica recortada no raio da borda sozinha. O
 * position:relative fica escopado neste estado pra nao criar contexto de
 * empilhamento na caixa em repouso.
 *
 * O BOTAO da lupa fica inerte enquanto carrega: e' o re-submit (clicar ou
 * apertar Enter de novo achando que nao pegou) que a operacao relatou. O
 * INPUT continua digitavel de proposito -- a busca dispara a cada tecla a
 * partir de 3 caracteres, e travar o campo faria o usuario perder teclas
 * enquanto refina o termo.
 * A classe e' posta/retirada em System.js (initializeAutocomplete). */
.geosite-search--carregando {
	position: relative;
}
.geosite-search--carregando::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 35%;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	animation: geosite-barra-carregando 1.1s ease-in-out infinite;
}
@keyframes geosite-barra-carregando {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(386%); }
}
.geosite-search--light.geosite-search--carregando::after {
	background-color: rgb(83, 62, 118);
}
.geosite-search--dark.geosite-search--carregando::after {
	background-color: #fff;
}
.geosite-search--carregando .geosite-search-submit {
	pointer-events: none;
	opacity: .5;
}
/* Sem animacao pra quem pede movimento reduzido: a barra fica parada,
 * ocupando a caixa toda, e continua indicando que a busca esta em curso. */
@media (prefers-reduced-motion: reduce) {
	.geosite-search--carregando::after {
		animation: none;
		width: 100%;
		opacity: .5;
	}
}

/* Variante clara (toolbar cinza): fundo branco, borda cinza, texto/icone
 * escuros, botao roxo da marca. Largura fixa e generosa o bastante pro
 * placeholder mais longo ("Pesquisar elementos de rede") nao cortar (era
 * 240px -- a setinha do filtro de tipo de feicao passou a morar dentro do
 * campo e tomou espaco do input, precisou alargar). */
.geosite-search--light {
	width: 250px;
	background-color: #fff;
	border: 1px solid #ddd;
}
.geosite-search--light:focus-within {
	border-color: rgb(83, 62, 118);
	box-shadow: 0 0 0 3px rgba(83, 62, 118, .15);
}
.geosite-search--light .geosite-search-input {
	color: #333;
}
.geosite-search--light .geosite-search-submit {
	background-color: rgb(83, 62, 118);
	color: #fff;
}
.geosite-search--light .geosite-search-submit:hover,
.geosite-search--light .geosite-search-submit:focus {
	background-color: rgb(100, 76, 140);
}

.geosite-search--dark {
	width: 240px;
	background-color: rgba(255, 255, 255, .15);
}
.geosite-search--dark:focus-within {
	background-color: rgba(255, 255, 255, .25);
}
.geosite-search--dark .geosite-search-input {
	color: #fff;
}
.geosite-search--dark .geosite-search-input::-webkit-input-placeholder { color: rgba(255, 255, 255, .6); }
.geosite-search--dark .geosite-search-input::-moz-placeholder { color: rgba(255, 255, 255, .6); }
.geosite-search--dark .geosite-search-input:-ms-input-placeholder { color: rgba(255, 255, 255, .6); }
.geosite-search--dark .geosite-search-submit {
	background: transparent;
	color: #fff;
}
.geosite-search--dark .geosite-search-submit:hover,
.geosite-search--dark .geosite-search-submit:focus {
	background-color: rgba(255, 255, 255, .15);
}
.geosite-search--dark .geosite-search-submit { order: 1; }
.geosite-search--dark .geosite-search-filtro-toggle { order: 2; }
.geosite-search--dark .geosite-search-input {
	order: 3;
	padding-right: 18px;
}
/* Lupa + chevron "parecendo" um icone so', igual o pin+seta da busca de
 * endereco (.geosite-search-type) -- padding do lado que se tocam encolhe.
 * So' nos dois campos de busca global; a busca de endereco nao tem chevron
 * do lado da lupa. */
#consultalGlobaExterna .geosite-search-submit,
#consultalGlobalInterna .geosite-search-submit {
	padding-right: 2px;
}
#consultalGlobaExterna .geosite-search-filtro-toggle,
#consultalGlobalInterna .geosite-search-filtro-toggle {
	padding-left: 2px;
}
/* Hover unificado: passar o mouse em qualquer um dos dois (lupa ou chevron)
 * acende o hover dos dois junto, senao so' metade do "icone unico" acendia. */
#consultalGlobaExterna:has(.geosite-search-submit:hover, .geosite-search-submit:focus,
	.geosite-search-filtro-toggle:hover, .geosite-search-filtro-toggle:focus) .geosite-search-submit,
#consultalGlobaExterna:has(.geosite-search-submit:hover, .geosite-search-submit:focus,
	.geosite-search-filtro-toggle:hover, .geosite-search-filtro-toggle:focus) .geosite-search-filtro-toggle {
	background: rgba(255, 255, 255, .15);
}
#consultalGlobalInterna:has(.geosite-search-submit:hover, .geosite-search-submit:focus,
	.geosite-search-filtro-toggle:hover, .geosite-search-filtro-toggle:focus) .geosite-search-submit {
	background-color: rgb(100, 76, 140);
}
#consultalGlobalInterna:has(.geosite-search-submit:hover, .geosite-search-submit:focus,
	.geosite-search-filtro-toggle:hover, .geosite-search-filtro-toggle:focus) .geosite-search-filtro-toggle {
	color: rgb(83, 62, 118);
	background: rgba(83, 62, 118, .08);
}
/* Com o dropdown aberto (classe .open no proprio elemento pai do toggle --
 * ver comentario no topo do index.jsp), a lupa precisa acender junto com o
 * chevron mesmo sem estar sob o mouse (ex: marcando checkbox no menu). */
#consultalGlobaExterna.open .geosite-search-submit {
	background: rgba(255, 255, 255, .15);
}
#consultalGlobalInterna .geosite-search--light.open .geosite-search-submit {
	background-color: rgb(100, 76, 140);
}

/* #consultalGlobaExterna comeca visivel (display:flex, nao "none") -- o
 * header inicia expandido (sem a classe app-topo-reduced), e' esse o
 * estado que ela representa. toggleTopo (System.js) alterna pra "none"
 * quando o cabecalho e' colapsado (a linha toda some via
 * .app-topo-reduced .app-topo-windows acima de qualquer forma). */
#consultalGlobaExterna {
	display: flex;
	flex-shrink: 0;
}

/* ---------- Cluster do usuario (nome + sino + Minha Conta + chevron) ----------
 * Antes: fileira de botoes .btn-default do Bootstrap = caixas BRANCAS com
 * borda cinza sobre o header roxo (visual datado, "poor bootstrap"), cada
 * um com margin-top:5px/width inline compensando o posicionamento antigo.
 * Vira um cluster "ghost": itens transparentes, texto/icone branco, hover
 * translucido (rgba branco), altura consistente -- igual ao header do
 * mockup de referencia (MapaView.vue: hover:bg-white/15). */
.header-buttons {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	margin-right: 8px;
	height: 40px;
}
.header-buttons .btn-group {
	display: flex;
	align-items: center;
	gap: 2px;
}
/* Nome do usuario: label branco, sem caixa. */
#boxNomeUsuario {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	width: auto !important;
	margin: 0 !important;
	height: 32px;
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	font-weight: 500;
	cursor: default;
}
/* ...exceto quando e' o avatar (dropdown): quadrado, clicavel. */
#boxNomeUsuario.btn-avatar {
	width: 34px !important;
	padding: 0 !important;
	cursor: pointer;
}
/* Botoes de texto/icone do cluster: ghost translucido. */
.header-buttons .btn,
.header-buttons .btn-usuario {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	height: 32px;
	margin: 0 !important;
	border-radius: var(--geo-radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease-in-out;
}
.header-buttons .btn:hover,
.header-buttons .btn:focus,
.header-buttons .btn-usuario:hover,
.header-buttons .btn-usuario:focus,
.header-buttons .open > .btn-usuario {
	background: rgba(255, 255, 255, .15) !important;
	color: #fff !important;
}
/* Botoes SO' de icone (sino, chevron): quadrados. */
.header-buttons .btn-usuario {
	width: 34px;
	padding: 0;
}
/* "Minha Conta" (texto): padding horizontal. */
.header-buttons .id_btn_minha_conta {
	padding: 0 10px;
}
/* Menu de downloads/notificacoes: mantem fundo claro (e' um popover
 * sobre o mapa, nao parte do header roxo) e herda o visual moderno de
 * dropdown-menu do override do Bootstrap. */
#collapseDownload {
	color: #333;
}

/* O popover fica DENTRO de .header-buttons, entao a regra de botao ghost
 * acima o alcanca e pinta qualquer .btn daqui de branco -- no fundo claro
 * o texto some. Precisa de !important para empatar com ela. */
#collapseDownload .btn,
#collapseDownload .btn-link {
	color: var(--geo-purple) !important;
}
#collapseDownload .btn:hover,
#collapseDownload .btn:focus {
	color: var(--geo-purple-hover) !important;
	background: var(--geo-purple-soft) !important;
	text-decoration: none;
}

/* ---------- Resultados da busca global (consulta global) ----------
 * O autocomplete (jQuery UI) da busca "Pesquisar elementos de rede"
 * (#resultadoInputPesquisaGlobal / *2) vinha com o tema PADRAO do jQuery
 * UI (cantos retos, borda dupla, realce cinza-degrade no item em foco) +
 * itens com spans em position:absolute e margens magicas -- visual pobre
 * e fragil. Reescrito (escopo SO' desses dois results): container
 * arredondado com sombra, itens em flex (icone + label), realce roxo da
 * marca. */
#resultadoInputPesquisaGlobal.ui-autocomplete,
#resultadoInputPesquisaGlobal2.ui-autocomplete {
	padding: 4px !important;
	border: 1px solid rgba(0, 0, 0, .12) !important;
	border-radius: var(--geo-radius-lg) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15) !important;
	background: #fff !important;
	max-height: 360px;
	overflow-y: auto;
}
.itemPesquisaGlobal.ui-menu-item {
	display: flex !important;
	align-items: center;
	gap: 8px;
	height: auto !important;
	/* 28px (era 34): a linha e' de 12px de fonte com icone de 18px, entao
	 * 34 sobrava folga. 5+5 de padding + 18 do icone fecham exatamente 28,
	 * e no mesmo max-height de 360px cabem ~12 resultados em vez de 10.
	 * Nao desce mais que isso de proposito -- e' alvo de clique usado o dia
	 * inteiro, e abaixo de ~26px comeca a errar. */
	min-height: 28px;
	margin: 0 !important;
	padding: 5px 10px !important;
	border: none !important;
	border-radius: var(--geo-radius-md);
	cursor: pointer;
	font-size: 12px;
	line-height: 1.3;
}
/* Neutraliza o position:absolute + top/margin magicos dos spans internos
 * (agora sao apenas itens flex normais). */
.itemPesquisaGlobal > div {
	display: inline-flex !important;
	align-items: center;
	flex: 0 0 auto;
}
.itemPesquisaGlobal .spanIconPesquisaGlobal,
.itemPesquisaGlobal .spanItemPesquisaGlobal {
	position: static !important;
	top: auto !important;
	margin: 0 !important;
}
.itemPesquisaGlobal .spanIconPesquisaGlobal {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.itemPesquisaGlobal .spanItemPesquisaGlobal {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333;
}
/* Realce (hover + foco do teclado do jQuery UI) em roxo da marca, sem o
 * degrade/borda cinza do tema padrao. */
.itemPesquisaGlobal.ui-state-focus,
.itemPesquisaGlobal.ui-state-active,
.itemPesquisaGlobal:hover {
	background: rgba(83, 62, 118, .10) !important;
	border: none !important;
	color: #333 !important;
	margin: 0 !important;
}

/* Busca de endereco (toolbar): o seletor de tipo (pin+chevron) fica solto,
 * sem caixa/borda, ao lado da pilula input+botao -- igual ao mockup de
 * referencia. */
/* #pesquisaEnderecoBarra encolhe pro tamanho do conteudo (pin + pilula).
 * Antes ficava com ~362px porque o #results (.pac-container, width:350px)
 * era um filho EM FLUXO e esticava o container mesmo vazio -- criando um
 * vao grande entre a busca e o botao de ocultar cabecalho. Tirando o
 * #results do fluxo (position:absolute, e' um dropdown que aparece por
 * baixo), o container fica do tamanho da pilula. */
#pesquisaEnderecoBarra {
	display: inline-flex;
	align-items: center;
	position: relative;
}

/* ---------- Resultados da busca de endereco (Google Places, #results) ----------
 * #results agora vive no <body> (appendTo + $.position(), ver System.js#
 * initializeConsultaRapida) pra escapar do overflow-y:hidden de
 * .app-topo-ferramentas -- so' a POSICAO e' calculada via JS, o visual
 * continua 100% CSS aqui. Estilo antigo (estiloBuscaGoogle.css) era o
 * padrao generico do exemplo oficial do Google (Roboto, cinza claro,
 * icone via sprite externo do proprio Google) -- substituido pelos
 * tokens do resto do app (--geo-radius-lg, --geo-purple, mesmo padrao
 * de .ctx-menu em context-menu.css) pra parecer parte do produto, nao
 * um widget de terceiro colado por cima. */
.pac-container {
	/* position:absolute desde o inicio. O JS so' aplica isso dentro de
	 * posicionaResults(), que roda quando HA' sugestao -- ate' la' o #results
	 * ficava "static" e, como o <body> e' flex em coluna (US #3928), virava um
	 * item no fim da coluna: uma faixa branca de ~10px (padding + borda) logo
	 * abaixo do #rodape. Medido ao vivo: top 685 num viewport de 694, com o
	 * rodape terminando exatamente em 685. */
	position: absolute;
	font-family: inherit;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--geo-radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	padding: 4px;
	font-size: 13px;
}
/* Dropdown vazio nao se desenha. Sem isto, mesmo fora do fluxo, a caixinha
 * branca arredondada continuava visivel por cima do rodape enquanto nao
 * houvesse nenhuma sugestao. */
#results:empty {
	display: none;
}

/* .pac-item nao pode virar flexbox: highlightMatches() (System.js) so'
 * embrulha em <span class="pac-item-query"> o TRECHO destacado, o resto
 * da descricao entra como texto solto direto dentro do .pac-item -- um
 * layout flex trata esse texto solto como outro item e ele nao encolhe/
 * trunca (BUG REAL achado testando ao vivo: descricao vazava pra fora do
 * dropdown). Mantém o mesmo truque do CSS antigo (inline-block + vertical-
 * align pro icone, ellipsis no proprio .pac-item) que trunca a linha
 * INTEIRA de uma vez, icone incluso, sem depender da estrutura interna
 * do HTML gerado. */
.pac-icon {
	width: 16px;
	height: 16px;
	margin: 0 8px -3px 2px;
	display: inline-block;
	background-image: none;
	background-color: var(--geo-purple);
	-webkit-mask: url(../../include/icones/images/lucide/map-pin.svg?v=1) no-repeat center / contain;
	mask: url(../../include/icones/images/lucide/map-pin.svg?v=1) no-repeat center / contain;
}
.pac-item {
	font-family: inherit;
	display: block;
	padding: 6px 8px;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-top: none;
	border-radius: var(--geo-radius-sm);
	color: #444;
	font-size: 13px;
}
.pac-item-query {
	color: #222;
	font-size: 13px;
}
.pac-item:hover,
.pac-item-selected,
.pac-item-selected:hover {
	background-color: var(--geo-purple-soft);
}
.pac-matched {
	font-weight: 600;
	color: var(--geo-purple);
}
.pac-item-error,
.pac-item-error:hover {
	color: #888;
	padding: 8px 10px;
	background-color: #fff;
	cursor: default;
}

#idPesquisaRapida {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}
.geosite-search-type {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	box-shadow: none;
	color: #767676;
	padding: 0 2px;
}
.geosite-search-type:hover,
.geosite-search-type:focus {
	color: rgb(83, 62, 118);
	background: transparent;
}

/* ---------- Dropdown "Exportar" (Importar KML + Exportar Area/Manchas) ----------
 * Consolida 3 botoes que so' tinham icone (sem rotulo, so' tooltip) num
 * unico dropdown com rotulo visivel por item -- reduz a toolbar de 3
 * controles pra 1 e da contexto textual que o icone isolado nao dava. */
.dropdown-menu-exportar {
	min-width: 190px;
	padding: 4px;
}
.dropdown-menu-exportar li {
	list-style: none;
}
.btn-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 10px;
	background: transparent;
	border: none;
	border-radius: var(--geo-radius-sm);
	font-size: 12px;
	color: #333;
	text-align: left;
	cursor: pointer;
}
.btn-dropdown-item:hover,
.btn-dropdown-item:focus {
	background-color: var(--geo-purple-soft);
	color: rgb(83, 62, 118);
}
.btn-dropdown-item em {
	flex: 0 0 auto;
}

/* Icones de contorno dos menus da barra (Mais e Novo projeto): mesma forma
 * da mask Lucide e mesma cor dos botoes da barra (#4b4560); roxo no hover,
 * igual aos itens do menu Ajuda. Substitui os PNG coloridos de estilos
 * diferentes (kml-importacao, icone-exportar-*, ploter, x-icon-add). */
.mais-ico {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	float: none;
	vertical-align: middle;
	background-color: #4b4560;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 16px; mask-size: 16px;
}
a:hover > .mais-ico,
.btn-dropdown-item:hover > .mais-ico,
.btn-dropdown-item:focus > .mais-ico {
	background-color: var(--geo-purple);
}
.dropdown-menu > li > a > .mais-ico {
	display: inline-block;
	margin: -2px 3px 0 0;
}
/* "Novo Projeto" no dropdown de Projeto: botao de verdade (contorno, raio e
 * roxo do .guia-recursos-bt) e nao uma linha de lista, que se confundia com
 * os projetos acima. O "Como funciona" abaixo segue como link. */
#idSelecionarProjeto .dropdown-menu > li > a#btn-novo-projeto {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	margin: 6px 12px 4px;
	padding: 0 12px;
	border: 1px solid #d9d4e2;
	border-radius: var(--geo-radius-md, 6px);
	background: #fff;
	color: var(--geo-purple);
	font: 500 12px/1 "Poppins", "Segoe UI", Arial, sans-serif;
	cursor: pointer;
}
#idSelecionarProjeto .dropdown-menu > li > a#btn-novo-projeto:hover,
#idSelecionarProjeto .dropdown-menu > li > a#btn-novo-projeto:focus {
	border-color: var(--geo-purple);
	background: var(--geo-purple-soft);
	color: var(--geo-purple);
}
#idSelecionarProjeto .menu-como-funciona {
	text-align: center;
}
#idSelecionarProjeto .menu-como-funciona .menu-explica-link {
	margin-right: 0;
}
#idSelecionarProjeto .dropdown-menu > li > a#btn-novo-projeto > .mais-ico {
	margin: 0;
	background-color: var(--geo-purple);
}
.mais-ico--exportar-area { -webkit-mask-image: url(../../include/icones/images/lucide/square-arrow-down.svg?v=1); mask-image: url(../../include/icones/images/lucide/square-arrow-down.svg?v=1); }
.mais-ico--exportar-manchas { -webkit-mask-image: url(../../include/icones/images/lucide/layers.svg?v=1); mask-image: url(../../include/icones/images/lucide/layers.svg?v=1); }
.mais-ico--importar-kml { -webkit-mask-image: url(../../include/icones/images/lucide/file-up.svg?v=1); mask-image: url(../../include/icones/images/lucide/file-up.svg?v=1); }
.mais-ico--plotar { -webkit-mask-image: url(../../include/icones/images/lucide/printer.svg?v=1); mask-image: url(../../include/icones/images/lucide/printer.svg?v=1); }
.mais-ico--novo { -webkit-mask-image: url(../../include/icones/images/lucide/plus.svg?v=1); mask-image: url(../../include/icones/images/lucide/plus.svg?v=1); }

/* #idExportarImportar: hoje e' so' o botao "Mais" (tres pontinhos) com o
 * dropdown; as regras do antigo split-button (icone + seta colados) sairam. */
#idExportarImportar {
	display: inline-flex;
	align-items: center;
}

/* ---------- Polimento: foco de teclado + botao de projeto ----------
 * Bootstrap 3 aplica um outline preto/azul grosso e um box-shadow de foco
 * herdado do tema padrao nos botoes -- feio e destoante quando aparece no
 * header/toolbar (ex: depois de clicar). Neutraliza o foco de MOUSE mas
 * preserva um anel discreto pra navegacao por TECLADO (:focus-visible),
 * mantendo acessibilidade. */
.app-topo .btn:focus,
.app-topo button:focus,
.app-topo a.btn:focus {
	outline: none;
	box-shadow: none;
}
.app-topo .btn:focus-visible,
.app-topo button:focus-visible {
	outline: 2px solid rgba(83, 62, 118, .5);
	outline-offset: -1px;
}
.app-topo-windows .btn:focus-visible,
.app-topo-windows button:focus-visible {
	outline-color: rgba(255, 255, 255, .7);
}

/* Botao "Selecionar projeto" (laranja): centraliza texto + caret na
 * vertical e joga o caret pro extremo direito com flex, em vez do
 * float + margin-top:7px legado (que deixava o caret levemente
 * desalinhado dentro da altura de 26px). */
#btn-projeto {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
#btn-projeto .caret {
	float: none;
	margin: 0;
	flex: 0 0 auto;
}

/* ---------- #conteudo (fora de escopo, so' o necessario pra coluna flex) ---------- */
.app-conteudo {
	flex: 1 1 auto;
	min-height: 0;
	position: relative;
	padding: 0;
}

/* ---------- Rodape ---------- */
.app-rodape {
	flex: 0 0 auto;
	height: 22px;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 12px;
	box-sizing: border-box;
	border: solid 1px silver;
	background-color: rgb(247, 247, 247);
}
.app-rodape #coordenada {
	float: none;
	margin-left: 0;
}

/* ---------- Paleta de atalhos flutuante (#paleta) ----------
 * Antes: position:fixed com o offset calculado por 2 breakpoints de
 * media query em ALTURA de tela (min-height:720px / max-height:721px)
 * usando numeros magicos (margin-top:280px/120px, margin-right:15px/71px)
 * -- um resquicio de quando o header/toolbar tinham alturas hardcoded
 * competindo com dgLayout (ver historico do #topo acima). Com o header
 * (40px) + toolbar (32px) agora fixos e conhecidos aqui no mesmo
 * arquivo, a paleta e' posicionada direto pela altura REAL do topo
 * (72px + uma folga de 8px), sem depender da altura da JANELA do
 * navegador pra decidir o offset. */
/* #paleta e' so' a ancora de posicao (fixed). O conteudo real
 * (#paleta-drag) e' position:absolute, entao #paleta tem altura ~0 -- por
 * isso borda/sombra/cantos ficam no #paleta-drag (abaixo), que de fato
 * envolve header+corpo. */
.paleta-container {
	position: fixed;
	/* 80px (topo do header+toolbar) + 10px + 204px (altura do controle de
	 * zoom padrao do OpenLayers, MapService.Control.Slider, posicionado em
	 * top:10/right:10 relativo ao container do mapa) + 6px de folga -- sem
	 * isso a paleta nascia sobreposta ao slider de zoom (mesma regiao,
	 * z-index da paleta maior, sempre desenhava por cima). */
	/* Na borda direita, na mesma linha do controle de zoom (que e' empurrado
	 * pra esquerda dela, ver "Controle de zoom" no fim deste arquivo), e nao
	 * abaixo dele: a coluna comeca em 98px (88px de header+toolbar + 10px)
	 * e sobra altura pros 15 atalhos + 4 rotulos de grupo sem scroll ate'
	 * em 768px de tela. */
	top: 98px;
	right: 15px;
	/* largura definida junto de #paleta-drag mais abaixo (grid 2 colunas) */
	/* Escala harmonizada com LayerPanel.css (2550-2570) -- fica acima do
	 * menu de camadas mas abaixo de qualquer Window aberta (piso do
	 * sistema de Window: 3000 + Window.windows.length, ver Util.js). */
	z-index: 2580;
}
/* Cabecalho: barra roxa que serve de alca de arraste (cursor:move) E de
 * botao de recolher/expandir (ver atalhoOcultar em System.js). Mostra um
 * chevron branco (estado) sobreposto por um "grip" sutil (affordance de
 * arraste). */
.paleta-header {
	position: relative;
	background: rgb(83, 62, 118);
	border-radius: var(--geo-radius-lg) var(--geo-radius-lg) 0 0;
	cursor: move;
	height: 22px;
	width: 100%;
}
.paleta-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, .95);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 15px; mask-size: 15px;
}
.paleta-header.icon-paleta-retrair::after {
	-webkit-mask-image: url(../../include/icones/images/lucide/chevron-up.svg?v=1);
	mask-image: url(../../include/icones/images/lucide/chevron-up.svg?v=1);
}
.paleta-header.icon-paleta-expandir::after {
	-webkit-mask-image: url(../../include/icones/images/lucide/chevron-down.svg?v=1);
	mask-image: url(../../include/icones/images/lucide/chevron-down.svg?v=1);
}
.paleta-header:hover {
	background: rgb(94, 71, 133);
}
/* Recolhida: a faixa e' tudo que sobra da paleta. Mostra um "+" a
 * esquerda (o que ela e': inserir) e a seta vai pra direita (o que o
 * clique faz: abrir). */
.paleta-header.icon-paleta-expandir::after {
	-webkit-mask-position: right 5px center; mask-position: right 5px center;
}
.paleta-header.icon-paleta-expandir::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	width: 14px;
	background-color: rgba(255, 255, 255, .95);
	-webkit-mask: url(../../include/icones/images/lucide/plus.svg?v=1) center / 14px no-repeat;
	mask: url(../../include/icones/images/lucide/plus.svg?v=1) center / 14px no-repeat;
}

/* Continua 1 coluna (grid 2x nao ficou bom) -- so' enxugado: botao/gap/
 * padding menores encolhem a altura total sem trocar o layout. */
.paleta-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--geo-paleta-item-gap);
	padding: var(--geo-paleta-pad) 0;
	background: #fff;
	border-radius: 0 0 var(--geo-radius-lg) var(--geo-radius-lg);
	width: 100%;
	box-sizing: border-box;
	/* Dois tetos de altura; o MENOR vence (min).
	 *
	 * 1. Viewport -- em telas baixas os atalhos nao cabem entre o topo
	 *    (300px, ver .paleta-container) e a borda inferior da janela. Em vez
	 *    de virar grid de colunas (rejeitado, mexeria no layout inteiro), o
	 *    corpo ganha teto relativo ao viewport e rola internamente.
	 *    300px do offset do topo + 22px do header + a folga inferior.
	 *
	 *    A folga voltou a 24px: ela ja' foi 96px enquanto o lancador do
	 *    chat da Blip ficava no canto inferior direito, na mesma coluna da
	 *    paleta. O chat agora abre pelo icone do cabecalho (#btn-chat) e o
	 *    canto ficou livre.
	 *
	 * 2. Numero de itens -- a paleta ganhou o "Drop de Atendimento" e passou
	 *    de 14 pra 15 atalhos, ficando mais alta do que era. Este teto a
	 *    prende na altura de 14 itens (o tamanho que ela tem na main) e o
	 *    excedente entra por scroll. Para mostrar mais/menos atalhos sem
	 *    recalcular nada, basta mudar --geo-paleta-itens-visiveis.
	 *
	 * As medidas vem de variaveis para nao repetir numero: o gap e o padding
	 * acima usam as mesmas, entao a conta nao sai de sincronia se mudarem. */
	--geo-paleta-item-h: 28px;   /* .btn-icon */
	--geo-paleta-item-gap: 2px;
	--geo-paleta-pad: 4px;
	--geo-paleta-folga-inferior: 24px;
	/* Teto so' pelo viewport (308px do topo + 22px do titulo "Inserir no
	 * mapa" + a folga inferior). O teto por numero de itens saiu: com os
	 * rotulos de grupo ele cortava o fim da lista e forcava scroll. */
	/* 22px do titulo + 22px do rodape (interruptor) */
	max-height: calc(100vh - 98px - 22px - 22px - var(--geo-paleta-folga-inferior));
	scrollbar-width: thin;
	overflow-y: auto;
}
.paleta-body button {
	margin: 0;
}
.paleta-container,
#paleta-drag {
	width: 46px;  /* 46 (era 40): o titulo "Inserir no mapa" cabe em 2 linhas */
}
#paleta-drag {
	position: absolute;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--geo-radius-lg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	overflow: hidden;
}
#ocult-paleta {
	width: 100%;
}
/* .icon-paleta-retrair / -expandir agora sao so' seletores de ESTADO pro
 * chevron do ::after acima (os PNGs bg-retrair/expandir foram aposentados). */

/* Botoes de atalho: quadrados maiores (alvo de clique mais confortavel),
 * cantos arredondados, realce roxo no hover. O icone da feicao e' o
 * background-image do proprio botao (setado inline via API ou via classe
 * .icon-*), entao aqui so' cuidamos da CAIXA -- o !important no hover vence
 * o "background: ... transparent" inline dos botoes com icone da API. */
.btn-icon {
	border: none;
	width: 28px;
	height: 28px;
	border-radius: var(--geo-radius-md);
	background-size: 17px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	transition: background-color .12s ease-in-out;
}
.btn-icon:hover,
.btn-icon:focus {
	background-color: var(--geo-purple-soft, rgba(83, 62, 118, .12)) !important;
	border-color: transparent;
	box-shadow: none;
}

/* ---------- Tooltips (Bootstrap .tooltip) ----------
 * Global: qualquer [data-toggle="tooltip"] do app usa este visual (init
 * em IndexBootstrap.js#init, container:'body' pra nao ficar
 * cortado por overflow:hidden de containers como .app-topo-ferramentas).
 *
 * Cor: NAO usa --geo-purple (roxo dos botoes/header) -- testado ao vivo e
 * ficou "lavado"/estranho pra um tooltip (elemento pequeno, transiente,
 * texto branco em cima de roxo médio nao rendia contraste bom o
 * suficiente pra algo tao pequeno). Cinza-chumbo quase preto, padrao
 * "utility tooltip" (GitHub/Linear/Material) -- neutro, alto contraste,
 * nao disputa atencao com a marca.
 *
 * Opacidade: Bootstrap por padrao poe .tooltip.in {opacity:.9} (90%) --
 * some com o "vidro" translucido, reforca solido/legivel.
 *
 * z-index: BUG REAL, o padrao do Bootstrap pro .tooltip e' 1070 -- menor
 * que o header roxo (#topo, 2600 !important, ver topo do arquivo) e que o
 * context-menu/dropdowns (3100+, resources/css/context-menu.css). O
 * tooltip de qualquer botao do header/toolbar renderizava LITERALMENTE
 * atras dessas camadas (confirmado com elementFromPoint no ponto do
 * tooltip retornando outro elemento por baixo) -- olhando pra tela dava
 * pra ver so' uma sombra/nada, parecia "quebrado". Acima de tudo relevante
 * no shell, sem chegar no exagero do hack de dropdown (2147483647). */
.tooltip {
	z-index: 3200;
}
.tooltip.in {
	opacity: 1;
}
.tooltip-inner {
	background-color: #2b2733;
	color: #fff;
	padding: 5px 9px;
	border-radius: var(--geo-radius-sm);
	font-size: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
	border-top-color: #2b2733;
}
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
	border-bottom-color: #2b2733;
}
.tooltip.left .tooltip-arrow {
	border-left-color: #2b2733;
}
.tooltip.right .tooltip-arrow {
	border-right-color: #2b2733;
}

/* ---------- Balao hover do mapa (System.js, onshowtooltip) ----------
 * A ponta do balao cai sob o cursor e o popup do OpenLayers cancela o
 * clique que recebe: parado ~1 s sobre a CTO, o clique nao abria nada.
 * Moldura e ponta deixam o clique passar; so' a caixa de texto aceita o
 * mouse (rolagem do texto longo e o mouseenter que segura o balao). */
.balao-hover {
	pointer-events: none;
}
.balao-hover .olFramedCloudPopupContent {
	pointer-events: auto;
}

/* ===================================================================
 * SIMPLIFICACAO DO TOPO E DA PALETA
 * Menu "Ajuda", avatar do usuario, grupos rotulados na toolbar, botao
 * "Mais" e paleta com titulo/grupos/trilho expansivel.
 * =================================================================== */

/* ---------- Header: busca centralizada ---------- */
.app-topo-windows-espaco {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- Header: botao Ajuda ("?" + texto) ---------- */
.header-buttons .btn-ajuda {
	padding: 0 10px 0 7px !important;
	gap: 6px;
	font-size: 12px;
	font-weight: 400;
}
.btn-ajuda-icone {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .9);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
/* ---------- Header: botao do chat (Blip) ---------- */
/* So' icone, ao lado do Ajuda. O badge (#chat-badge, mesmo visual do
 * .ajuda-badge de chamado.css) mostra as mensagens nao lidas do atendente.
 * .ativo: chat aberto (IndexBootstrap, eventos OnEnter/OnLeave do widget). */
.header-buttons .btn-chat {
	position: relative;
}
.header-buttons .btn-chat.ativo {
	background: rgba(255, 255, 255, .22) !important;
}
/* Badges do cabecalho (chat e Ajuda): o .ajuda-badge de chamado.css usa
 * top:-5px, e como o botao comeca a 4px do topo da tela, o badge e o anel
 * roxo de 2px dele saiam pela borda de cima (cortados). -1px deixa o anel
 * a 1px da borda, ainda montado no canto do botao; right:-1px nao invade o
 * botao vizinho (os botoes ficam a 2px um do outro). */
.header-buttons .btn-chat .ajuda-badge,
.header-buttons .btn-ajuda .ajuda-badge {
	top: -1px;
	right: -1px;
}
/* Balao quadrado (message-square-text), nao redondo: o message-circle de
 * 18px, branco e de contorno, se confundia com a lupa da busca ao lado.
 * O menu Ajuda e o aviso do chat usam o mesmo desenho. */
.btn-chat-icone {
	width: 18px;
	height: 18px;
	display: block;
	background-color: #fff;
	-webkit-mask: url(../../include/icones/images/lucide/message-square-text.svg?v=1) no-repeat center / 18px;
	mask: url(../../include/icones/images/lucide/message-square-text.svg?v=1) no-repeat center / 18px;
}
/* Chat aberto: o icone vira "x" (fechar). Quem abria o chat nao achava como
 * fechar: o "x" do iframe da Blip e' pequeno e fica dentro dele. */
.header-buttons .btn-chat.ativo .btn-chat-icone {
	-webkit-mask-image: url(../../include/icones/images/lucide/x.svg?v=1);
	mask-image: url(../../include/icones/images/lucide/x.svg?v=1);
}

/* Aviso "o chat mudou de lugar" (ChatPromoService): balao preso ao
 * icone do chat, com seta para cima. Mesma gramatica da dica de cabo do
 * esquematico (.esq-dica-cabo): Poppins 13px, borda lilas, raio 10px,
 * botao roxo de 30px. Nasce direto no <body>, fora dos escopos que ganham
 * Poppins (.app-topo, .dropdown-menu, .ui-dialog.window...), entao a fonte
 * vai explicita aqui e nos controles, que nao herdam do pai.
 * Acima das janelas, que nao cobrem o cabecalho, e abaixo do convite
 * mensal (9998). */
.chat-novo-local {
	position: fixed;
	z-index: 9990;
	width: 320px;
	box-sizing: border-box;
	padding: 14px 14px 12px;
	background: #fff;
	color: #2b2740;
	border: 1px solid #e0dbea;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(31, 27, 46, .18);
	font: 13px/1.4 "Poppins", "Segoe UI", Arial, sans-serif;
	animation: chat-novo-local-entra .2s ease-out;
}
.chat-novo-local::before {
	content: '';
	position: absolute;
	top: -8px;
	right: var(--seta-direita, 16px);
	width: 14px;
	height: 14px;
	margin-right: -1px;
	background: #fff;
	border-left: 1px solid #e0dbea;
	border-top: 1px solid #e0dbea;
	transform: rotate(45deg);
}
.chat-novo-local-corpo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-right: 18px;
}
.chat-novo-local-ilustra {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--geo-purple-soft);
	display: grid;
	place-items: center;
}
.chat-novo-local-ilustra::before {
	content: '';
	width: 18px;
	height: 18px;
	background-color: var(--geo-purple);
	-webkit-mask: url(../../include/icones/images/lucide/message-square-text.svg?v=1) no-repeat center / 18px;
	mask: url(../../include/icones/images/lucide/message-square-text.svg?v=1) no-repeat center / 18px;
}
.chat-novo-local-texto-bloco {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.chat-novo-local-titulo {
	font-weight: 600;
	font-size: 13.5px;
	color: #2b2740;
}
.chat-novo-local-texto {
	font-size: 12px;
	color: #5f5878;
}
.chat-novo-local-fechar {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #6b6480;
	font: 18px/22px "Poppins", "Segoe UI", Arial, sans-serif;
	cursor: pointer;
}
.chat-novo-local-fechar:hover {
	background: #f1eef7;
	color: #2b2740;
}
.chat-novo-local-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #f0edf5;
}
.chat-novo-local-rodape label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font: 400 12px/1.2 "Poppins", "Segoe UI", Arial, sans-serif;
	color: #5f5878;
	cursor: pointer;
}
.chat-novo-local-rodape input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--geo-purple);
	cursor: pointer;
}
.chat-novo-local-ok {
	flex: none;
	height: 30px;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background: var(--geo-purple);
	color: #fff;
	font: 500 12px/30px "Poppins", "Segoe UI", Arial, sans-serif;
	cursor: pointer;
}
.chat-novo-local-ok:hover {
	background: var(--geo-purple-hover);
}
.chat-novo-local-ok:focus-visible,
.chat-novo-local-fechar:focus-visible,
.chat-novo-local-rodape input:focus-visible {
	outline: 2px solid var(--geo-purple-ring);
	outline-offset: 2px;
}
@keyframes chat-novo-local-entra {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.chat-novo-local { animation: none; }
}

.dropdown-menu-ajuda {
	min-width: 270px;
	padding: 6px 0;
}
.dropdown-menu-ajuda > li > a,
.dropdown-menu-usuario > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
}
/* Itens do Ajuda: icone + (titulo / descricao em uma linha). */
.dropdown-menu-ajuda .dropdown-header {
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8e86a3;
	padding: 4px 12px 2px;
}
.dropdown-menu-ajuda > li > a {
	align-items: flex-start;
	gap: 10px;
	padding: 6px 12px;
}
.dropdown-menu-ajuda > li > a > em {
	flex: 0 0 16px;
	margin-top: 2px;
}
.ajuda-icone {
	width: 16px;
	height: 16px;
	display: block;
	background-color: var(--geo-purple);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 15px; mask-size: 15px;
}
.ajuda-icone--tour { -webkit-mask-image: url(../../include/icones/images/lucide/play.svg?v=1); mask-image: url(../../include/icones/images/lucide/play.svg?v=1); }
.ajuda-icone--faq { -webkit-mask-image: url(../../include/icones/images/lucide/circle-help.svg?v=1); mask-image: url(../../include/icones/images/lucide/circle-help.svg?v=1); }
.ajuda-icone--chamado { -webkit-mask-image: url(../../include/icones/images/lucide/file.svg?v=1); mask-image: url(../../include/icones/images/lucide/file.svg?v=1); }
.ajuda-icone--chat { -webkit-mask-image: url(../../include/icones/images/lucide/message-square-text.svg?v=1); mask-image: url(../../include/icones/images/lucide/message-square-text.svg?v=1); }
.ajuda-icone--atalhos { -webkit-mask-image: url(../../include/icones/images/lucide/keyboard.svg?v=1); mask-image: url(../../include/icones/images/lucide/keyboard.svg?v=1); }
.ajuda-icone--notas { -webkit-mask-image: url(../../include/icones/images/lucide/info.svg?v=1); mask-image: url(../../include/icones/images/lucide/info.svg?v=1); }
.ajuda-icone--videos { -webkit-mask-image: url(../../include/icones/images/lucide/youtube.svg?v=1); mask-image: url(../../include/icones/images/lucide/youtube.svg?v=1); }
.ajuda-texto {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.ajuda-titulo {
	font-weight: 500;
	color: #333;
}
.ajuda-desc {
	font-size: 11px;
	line-height: 1.3;
	color: #777;
	white-space: normal;
}

/* ---------- Header: avatar e cartao do usuario ---------- */
.avatar-usuario-sigla {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	flex: 0 0 auto;
}
.avatar-usuario-sigla--grande {
	width: 36px;
	height: 36px;
	font-size: 14px;
}
.dropdown-menu-usuario {
	min-width: 230px;
	max-width: 300px;
}
.usuario-cartao {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px 6px;
	color: #363636;
}
.usuario-cartao-texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.usuario-cartao-nome {
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.usuario-cartao-empresa {
	font-size: 11px;
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Toolbar: grupos por intencao ---------- */
/* #step-menu e' display:block (inline) com filhos float:left; o grupo
 * entra no mesmo fluxo (float) e organiza os botoes por dentro com flex
 * (floats internos deixam de valer dentro do flex, sem efeito colateral). */
.tb-grupo {
	float: left;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	/* Altura fixa e conteudo centrado: sem rotulo, o botao fica no meio da
	 * barra; quando o rotulo entra por cima (10px), o botao desce. */
	justify-content: center;
	height: 36px;
	box-sizing: border-box;
	/* Mesmo respiro dos dois lados da divisoria: 6px antes (fim do grupo
	 * anterior) e 6px depois (inicio deste). Antes eram 4px do lado de
	 * dentro e ~10px do lado de fora (margem do ultimo botao + margens dos
	 * grupos), e o icone parecia encostado na linha da esquerda. */
	padding: 0 6px;
	margin-right: 0;
	/* o rotulo e' absoluto no modo automatico (ver .tb-grupo-rotulo) */
	position: relative;
	transition: padding-top .18s ease;
}
/* modo automatico, grupo sob o mouse: abre 10px em cima e o botao desce */
body:not(.tb-rotulos-off):not(.tb-rotulos-fixos) .tb-grupo:hover {
	padding-top: 10px;
}
.tb-grupo + .tb-grupo {
	border-left: 1px solid #dcdcdc;
	margin-left: 0;
}
/* Rotulo do grupo. No modo automatico fica FORA do fluxo (absoluto,
 * centrado no grupo): mesmo escondido ele ocupava largura e um grupo de
 * um icone ficava tao largo quanto "EXPORTAR E IMPORTAR", deixando
 * vazios entre os icones. Aparece so' no grupo sob o mouse, por isso pode
 * passar da largura do grupo sem sobrepor o rotulo do vizinho. No modo
 * fixo volta ao fluxo (o usuario quer ver todos; o grupo alarga). */
.tb-grupo-rotulo {
	font-size: 8px;
	line-height: 8px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8e86a3;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	/* Tres modos (IndexBootstrap.initRotulosBarra):
	 * - auto (padrao): oculto; ao parar o mouse na barra entra por cima do
	 *   botao (altura 0 -> 10px, com atraso curto pra nao piscar ao
	 *   atravessar) e o botao desce; sai sem atraso.
	 * - fixo (body.tb-rotulos-fixos): sempre visivel, sem animacao.
	 * - desligado (body.tb-rotulos-off): nunca aparece.
	 * A barra continua com 40px. */
	/* modo automatico: absoluto, sem largura no fluxo */
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	opacity: 0;
	z-index: 2;
	transition: opacity .15s ease 0s;
}
body:not(.tb-rotulos-off):not(.tb-rotulos-fixos) .tb-grupo:hover .tb-grupo-rotulo {
	opacity: 1;
	transition-delay: .25s;
}
body.tb-rotulos-fixos .tb-grupo-rotulo {
	position: static;
	transform: none;
	height: 10px;
	opacity: 1;
	transition: none;
}
body.tb-rotulos-off .tb-grupo-rotulo {
	display: none;
}
/* Grupo largo (Projeto + Redes): rotulo alinhado a esquerda, senao fica
 * solto no meio. Os grupos de icones continuam centralizados. */
.tb-grupo-projeto {
	align-items: flex-start;
}
.tb-grupo-projeto .tb-grupo-rotulo {
	left: 10px;
	transform: none;
}
body.tb-rotulos-fixos .tb-grupo-projeto .tb-grupo-rotulo {
	margin-left: 6px;
}
/* Converter e Sair colados no seletor do projeto; um divisor fino os separa
 * do Redes, que e' da rede e nao do projeto (feedback da Suelen). O jQuery
 * .show() pode deixar display:block inline, por isso o divisor e' inline-block. */
.tb-grupo-projeto #acoes-projeto::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 18px;
	margin: 0 4px 0 8px;
	background: #dcdcdc;
}
.tb-grupo .btn-ferramenta {
	float: none;
}
/* o ultimo botao do grupo nao leva a margem de separacao: o espaco ate a
 * divisoria e' so' o padding do grupo, igual dos dois lados */
.tb-grupo .tb-grupo-itens > :last-child {
	margin-right: 0;
}
/* "Mais": icone + texto + caret no mesmo botao ghost. */

/* ---------- Paleta: titulo, grupos e trilho expansivel ---------- */
/* Cabecalho de secao (nao e' clicavel): caixa alta, cinza-roxo, sem
 * hover e sem icone -- o "+" de antes parecia um botao. */
.paleta-titulo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 3px 3px;
	border-bottom: 1px solid #ebe7f2;
	color: #8e86a3;
	text-align: center;
	line-height: 1.15;
	cursor: default;
	user-select: none;
}
.paleta-titulo-texto {
	font-size: 7px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	max-width: 42px;
}
.paleta-body {
	align-items: stretch;
}
/* Flex column com max-height: sem isto os filhos ENCOLHEM pra caber
 * (rotulos de grupo ficavam cortados, itens esmagados). */
.paleta-body > * {
	flex-shrink: 0;
}
.paleta-grupo-rotulo {
	font-size: 7.5px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8e86a3;
	text-align: center;
	padding: 4px 2px 1px;
	margin-top: 1px;
	border-top: 1px solid #ebe7f2;
	white-space: nowrap;
	overflow: hidden;
	user-select: none;
}
.paleta-grupo-rotulo:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 1px;
}
.paleta-grupo-longo {
	display: none;
}
.paleta-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--geo-paleta-item-h);
}
.paleta-item-label {
	display: none;
	font-size: 11px;
	color: #333;
	white-space: nowrap;
	cursor: pointer;
}
/* Expandido (classe posta por IndexBootstrap.initPaletaExpansao): alarga
 * pra ESQUERDA via translateX (independe de left/right -- o draggable
 * grava left inline depois do primeiro arraste) e mostra os rotulos. */
#paleta-drag.paleta-expandida {
	width: 200px;
	transform: translateX(-154px);
	transition: width .16s ease, transform .16s ease;
}
/* Sem espaco a esquerda (paleta arrastada pra borda): cresce pra direita. */
#paleta-drag.paleta-expandida.paleta-expandida--direita {
	transform: none;
}
#paleta-drag.paleta-expandida .paleta-titulo {
	justify-content: flex-start;
	padding-left: 10px;
}
#paleta-drag.paleta-expandida .paleta-titulo-texto {
	font-size: 8.5px;
	max-width: none;
}
#paleta-drag.paleta-expandida .paleta-grupo-rotulo {
	text-align: left;
	padding-left: 10px;
	font-size: 9px;
}
#paleta-drag.paleta-expandida .paleta-grupo-curto {
	display: none;
}
#paleta-drag.paleta-expandida .paleta-grupo-longo {
	display: inline;
}
#paleta-drag.paleta-expandida .paleta-item {
	justify-content: flex-start;
	padding-left: 6px;
	cursor: pointer;
}
#paleta-drag.paleta-expandida .paleta-item-label {
	display: inline;
	flex: 1 1 auto;
}
#paleta-drag.paleta-expandida .paleta-item:hover {
	background: var(--geo-purple-soft);
}

/* Rodape: interruptor "Expandir ao passar o mouse". Recolhido so' a
 * chavinha (22x12) aparece, centralizada; expandido, texto + chavinha. */
.paleta-rodape {
	border-top: 1px solid #ebe7f2;
	padding: 3px;
}
.paleta-auto {
	width: 100%;
	height: 16px;
	border: 0;
	background: transparent;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	color: #8e86a3;
	border-radius: var(--geo-radius-sm);
}
.paleta-auto:hover,
.paleta-auto:focus-visible {
	background: var(--geo-purple-soft);
	outline: none;
}
.paleta-auto-texto {
	display: none;
	font-size: 9px;
	white-space: nowrap;
}
.paleta-auto-chave {
	flex: 0 0 auto;
	width: 22px;
	height: 12px;
	border-radius: 6px;
	background: #cfc8dd;
	position: relative;
	transition: background-color .12s ease;
}
.paleta-auto-chave::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	transition: left .12s ease;
}
.paleta-auto.ligado .paleta-auto-chave {
	background: var(--geo-purple);
}
.paleta-auto.ligado .paleta-auto-chave::after {
	left: 12px;
}
#paleta-drag.paleta-expandida .paleta-auto {
	justify-content: space-between;
	padding: 0 8px 0 10px;
}
#paleta-drag.paleta-expandida .paleta-auto-texto {
	display: inline;
}
@media (prefers-reduced-motion: reduce) {
	#paleta-drag.paleta-expandida {
		transition: none;
	}
}

/* ---------- Controle de zoom do mapa x paleta ----------
 * MapService.Control.Slider (zoom + setas, 51x204) nasce com right:10px
 * INLINE (Slider.js#draw). A paleta ocupa a borda direita (right:15, 46px
 * de largura), entao o controle e' empurrado pra esquerda dela:
 * 15 + 46 + 10 de respiro = 71px. Se o usuario arrastar a paleta pra fora
 * desse canto, IndexBootstrap.atualizaPosicaoZoom poe body.paleta-fora-do-
 * canto e o controle volta pra borda. */
/* A regua antiga (zoom + bussola em imagem de 2010) fica oculta: o
 * #controle-mapa abaixo assume o lugar dela, com as mesmas regras de
 * posicao em relacao a paleta. O controle do OpenLayers continua
 * existindo (teclado e outras rotinas dependem dele). */
[id^="MapService_Control_Slider_"] {
	display: none !important;
}
#controle-mapa {
	right: 71px;
	transition: right .16s ease;
}
body.paleta-fora-do-canto #controle-mapa {
	right: 10px;
}

/* Telas baixas (notebook 768px): atalhos de 24px e gap 1px pra caber sem
 * scroll entre o topo e o rodape. */
@media (max-height: 820px) {
	.paleta-body {
		--geo-paleta-item-h: 24px;
		--geo-paleta-item-gap: 1px;
		--geo-paleta-pad: 2px;
	}
	.paleta-body .btn-icon {
		width: 24px;
		height: 24px;
		background-size: 15px !important;
	}
	.paleta-grupo-rotulo {
		padding: 3px 2px 1px;
	}
}

/* ---------- "Fechar todas": item da barra de abas ---------- */
/* Compacto (22px, 11px de fonte), tracejado, logo depois da ultima aba;
 * rola junto com as abas. Visivel so' com 2+ janelas ([hidden]). */
.app-topo-fechar-janelas {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 8px;
	margin-left: 8px;
	vertical-align: middle;
	border: 1px dashed rgba(255, 255, 255, .55);
	border-radius: 11px;
	margin-top: 2px; /* centraliza nos 26px das abas */
	background: transparent;
	color: rgba(255, 255, 255, .9);
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.app-topo-fechar-janelas:hover,
.app-topo-fechar-janelas:focus-visible {
	background: rgba(255, 255, 255, .18);
	color: #fff;
	outline: none;
}
/* [hidden] do Bootstrap 3 nao tem !important e perdia pro display acima. */
.app-topo-fechar-janelas[hidden] {
	display: none !important;
}
.app-topo-fechar-janelas-x {
	width: 11px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask: url(../../include/icones/images/lucide/x.svg?v=1) center / 11px no-repeat;
	mask: url(../../include/icones/images/lucide/x.svg?v=1) center / 11px no-repeat;
}

/* ---------- Barra de abas: itens em linha, sem quebra ----------
 * O dgScrollBar poe as abas como float:left dentro de um <div> cuja largura
 * ele calcula somando os itens no refresh(). Qualquer coisa que mude a
 * largura DEPOIS da medida -- a aba recem-aberta ganhando .active (negrito),
 * a fonte Poppins terminando de carregar -- estoura a conta e o ultimo
 * float cai pra linha de baixo (bug real visto com 3 abas + "Fechar
 * todas"). Em flex com largura de conteudo nao ha' medida pra errar: o
 * contêiner e' sempre do tamanho das abas e a rolagem segue funcionando
 * (o toolbar continua overflow:hidden com scrollLeft). */
#app_window_bar .dgScrollBar-toolbar > div {
	display: flex;
	align-items: center;
	width: max-content !important;
	height: auto !important;
	min-height: 1px;
}
#app_window_bar .dgScrollBar-toolbar .dgScrollBar-toolbar-item {
	float: none;
	flex: 0 0 auto;
}

/* ---------- Controle de zoom e navegacao (#controle-mapa) ---------- */
.controle-mapa {
	position: fixed;
	top: 98px;
	z-index: 2579; /* logo abaixo da paleta (2580) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 36px;
}
.controle-mapa-grupo {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	background: #fff;
}
.controle-mapa-btn {
	width: 36px;
	height: 34px;
	border: 0;
	background: #fff;
	color: var(--geo-purple);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.controle-mapa-grupo .controle-mapa-btn + .controle-mapa-btn {
	border-top: 1px solid #ebe7f2;
}
.controle-mapa-btn--solto {
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.controle-mapa-btn:hover,
.controle-mapa-btn:focus-visible,
.controle-mapa-seta:hover,
.controle-mapa-seta:focus-visible {
	background: #f1eef7;
	outline: none;
}
/* Camadas carregando: tres pontinhos que correm enquanto o MapService
 * esta' "busy" (onmapbusychange). O slot fica sempre reservado para o
 * controle nao pular; so' os pontos aparecem e somem. */
.controle-mapa-carregando {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 36px;
	height: 14px;
	opacity: 0;
	transition: opacity .25s;
	pointer-events: none;
}
.controle-mapa-carregando.ativo {
	opacity: 1;
	pointer-events: auto;
}
.controle-mapa-carregando span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--geo-purple);
	opacity: .35;
}
.controle-mapa-carregando.ativo span {
	animation: cm-pontinho 1s ease-in-out infinite;
}
.controle-mapa-carregando.ativo span:nth-child(2) { animation-delay: .15s; }
.controle-mapa-carregando.ativo span:nth-child(3) { animation-delay: .3s; }
@keyframes cm-pontinho {
	0%, 60%, 100% { opacity: .35; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
	.controle-mapa-carregando.ativo span { animation: none; opacity: 1; }
}
/* Setas: 3x3 com o N no centro, mesmo gesto da bussola antiga */
.controle-mapa-setas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	overflow: hidden;
}
.controle-mapa-seta {
	border: 0;
	background: transparent;
	color: var(--geo-purple);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.controle-mapa-seta.cm-n { grid-area: 1 / 2; }
.controle-mapa-seta.cm-o { grid-area: 2 / 1; }
.controle-mapa-seta.cm-l { grid-area: 2 / 3; }
.controle-mapa-seta.cm-s { grid-area: 3 / 2; }
.controle-mapa-n {
	grid-area: 2 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 8px/1 "Poppins", "Segoe UI", Arial, sans-serif;
	color: #8e86a3;
	user-select: none;
}
.cm-ico {
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 16px; mask-size: 16px;
}
.controle-mapa-seta .cm-ico {
	width: 12px;
	height: 12px;
	-webkit-mask-size: 12px; mask-size: 12px;
}
.cm-ico--mais { -webkit-mask-image: url(../../include/icones/images/lucide/plus.svg?v=1); mask-image: url(../../include/icones/images/lucide/plus.svg?v=1); }
.cm-ico--menos { -webkit-mask-image: url(../../include/icones/images/lucide/minus.svg?v=1); mask-image: url(../../include/icones/images/lucide/minus.svg?v=1); }
.cm-ico--casa { -webkit-mask-image: url(../../include/icones/images/lucide/house.svg?v=1); mask-image: url(../../include/icones/images/lucide/house.svg?v=1); }
.cm-ico--cima { -webkit-mask-image: url(../../include/icones/images/lucide/chevron-up.svg?v=1); mask-image: url(../../include/icones/images/lucide/chevron-up.svg?v=1); }
.cm-ico--baixo { -webkit-mask-image: url(../../include/icones/images/lucide/chevron-down.svg?v=1); mask-image: url(../../include/icones/images/lucide/chevron-down.svg?v=1); }
.cm-ico--esq { -webkit-mask-image: url(../../include/icones/images/lucide/chevron-left.svg?v=1); mask-image: url(../../include/icones/images/lucide/chevron-left.svg?v=1); }
.cm-ico--dir { -webkit-mask-image: url(../../include/icones/images/lucide/chevron-right.svg?v=1); mask-image: url(../../include/icones/images/lucide/chevron-right.svg?v=1); }

/* ---------- Modo atual no rodape ---------- */
.modo-atual {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 18px;
	padding: 0 8px 0 6px;
	border-radius: 9px;
	background: var(--geo-purple-soft);
	color: var(--geo-purple);
	font-weight: 500;
	white-space: nowrap;
}
.modo-atual[hidden] {
	display: none !important;
}
.modo-atual-bola {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--geo-purple);
}
.modo-atual-dica {
	color: #6b667a;
	font-weight: 400;
}
.modo-atual-dica::before {
	content: '·';
	margin-right: 6px;
	color: #b7afc8;
}

/* ---------- Fonte e escala da casca ----------
 * Poppins (ja carregada em index.jsp e usada no login e no tour) em tudo
 * que e' moldura do mapa: header, toolbar, rodape, paleta, menus e
 * tooltips. Formularios e grades das janelas ficam como estao (outra
 * rodada). Corpo da casca sobe de 12 pra 13px; rotulos miudos de 8 pra 9. */
.app-topo, .app-rodape, .paleta-container, .ctx-menu, .dropdown-menu, .tooltip, .controle-mapa, .noty_bar {
	font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}
.app-topo-ferramentas, .app-topo-windows, .dropdown-menu, .ctx-menu {
	font-size: 13px;
}
.app-rodape {
	font-size: 11px;
}
.tb-grupo-rotulo, .paleta-grupo-rotulo, .dropdown-menu-ajuda .dropdown-header {
	font-size: 9px;
}
.paleta-titulo-texto {
	font-size: 8px;
}
.paleta-item-label {
	font-size: 12px;
}

/* ---------- Mascara de carregamento (dgLoadMask) ----------
 * Em vez de apagar a tela com cinza e um gif, um veu claro e um cartao
 * branco com spinner roxo. O bloqueio continua (e' o que as 1.000+
 * chamadas esperam), so' o peso visual muda. */
.dgLoadMask {
	background-color: #fff !important;
	opacity: .45 !important;
}
.dgLoadMask-msg {
	background: #fff !important;
	border: 1px solid #e5e1ee !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	padding: 10px 14px 10px 12px !important;
}
.dgLoadMask-msg div {
	background-image: none !important;
	padding: 0 0 0 26px !important;
	position: relative;
	color: #444 !important;
	font: 500 12.5px/18px "Poppins", "Segoe UI", Arial, sans-serif !important;
}
.dgLoadMask-msg div::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border: 2px solid #e5e1ee;
	border-top-color: var(--geo-purple);
	border-radius: 50%;
	animation: geo-gira .9s linear infinite;
}
@keyframes geo-gira {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.dgLoadMask-msg div::before { animation: none; }
}

/* ---------- "Carregando..." das grades (pqgrid) ----------
 * Mesmo visual da dgLoadMask: veu claro, cartao branco, spinner roxo.
 * O pqgrid monta <div.pq-loading><div.pq-loading-bg/><div.pq-loading-mask
 * .ui-state-highlight><div>Carregando...</div></div></div> e poe a
 * opacidade do veu inline (0.2), por isso o !important. */
.pq-grid div.pq-loading div.pq-loading-bg {
	background: #fff !important;
	opacity: .45 !important;
}
.pq-grid div.pq-loading-mask,
.pq-grid div.pq-loading-mask.ui-state-highlight {
	width: 200px;
	height: auto;
	margin-left: -100px;
	margin-top: -22px;
	padding: 10px 14px 10px 12px;
	box-sizing: border-box;
	background: #fff !important;
	border: 1px solid #e5e1ee !important;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	color: #444;
}
.pq-grid div.pq-loading-mask div {
	background-image: none !important;
	padding: 0 0 0 26px !important;
	position: relative;
	line-height: 18px;
	color: #444 !important;
	font: 500 12.5px/18px "Poppins", "Segoe UI", Arial, sans-serif;
}
.pq-grid div.pq-loading-mask div::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 16px;
	height: 16px;
	border: 2px solid #e5e1ee;
	border-top-color: var(--geo-purple);
	border-radius: 50%;
	animation: geo-gira .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.pq-grid div.pq-loading-mask div::before { animation: none; }
}

/* Larguras que a Poppins (mais larga que Arial) passou a cortar. */
#btn-projeto {
	width: 218px;
}
.geosite-search--dark {
	width: 290px;
}

/* ---------- Confirmacao no mapa ao salvar (IndexBootstrap.pulsoNoMapa) ----------
 * O mesmo anel serve para o cadastro recem-salvo (3 pulsos) e para a caixa
 * cujo esquematico esta' aberto (--continuo, ate' a janela fechar). O z-index
 * e' reescrito pelo JS para ficar acima da camada vetorial mais alta. */
.salvo-pulso {
	position: absolute;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	border: 3px solid var(--geo-neon);
	box-shadow: 0 0 0 0 rgba(255, 196, 0, .6);
	pointer-events: none;
	z-index: 1500;
	animation: salvo-pulsa 1s ease-out 3;
}
.salvo-pulso--continuo {
	animation-iteration-count: infinite;
	animation-duration: 1.4s;
}
/* durante a animacao de zoom o anel sairia escalado do lugar: some e volta no moveend */
.salvo-pulso--oculto {
	visibility: hidden;
}
@keyframes salvo-pulsa {
	0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .6); transform: scale(.8); }
	100% { box-shadow: 0 0 0 22px rgba(255, 196, 0, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.salvo-pulso { animation: none; }
}

/* ---------- Aviso "o mapa esta' trabalhando" (app/MapaOcupado.js) ----------
 * Mesmo cartao e spinner da mascara (dgLoadMask). Fica no pe' do mapa; left,
 * bottom e max-width vem do JS (maior trecho livre entre as janelas). Acima
 * das janelas (3000), abaixo dos tooltips (3200) e dos toasts. Nunca recebe
 * o mouse: e' so' aviso. */
.mapa-ocupado {
	position: fixed;
	left: 50%;
	bottom: 36px;
	z-index: 3050;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	max-width: 560px;
	padding: 8px 14px 8px 12px;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid #e5e1ee;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	color: #444;
	font: 500 12.5px/18px "Poppins", "Segoe UI", Arial, sans-serif;
	pointer-events: none;
	animation: mapa-ocupado-entra .18s ease-out;
}
.mapa-ocupado[hidden] {
	display: none;
}
.mapa-ocupado-giro {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid #e5e1ee;
	border-top-color: var(--geo-purple);
	border-radius: 50%;
	animation: geo-gira .9s linear infinite;
}
.mapa-ocupado-texto {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@keyframes mapa-ocupado-entra {
	from { opacity: 0; transform: translate(-50%, 6px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Aba de janela com trabalho em andamento (minimizada ou nao): giro branco
 * no canto direito da pilula. A barra e' flex de largura de conteudo, entao
 * o padding a mais nao estoura a medida do dgScrollBar. */
.btn.btn-default.btn-sm.geosite-window-button.btn-window-color.janela-ocupada {
	position: relative;
	padding-right: 26px;
}
.geosite-window-button.janela-ocupada::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 8px;
	box-sizing: border-box;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: geo-gira .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.mapa-ocupado, .mapa-ocupado-giro, .geosite-window-button.janela-ocupada::after { animation: none; }
}

/* ---------- Resultado no mapa em amarelo neon (System.camadaNeon/featuresNeon) ----------
 * Rota sugerida, topologico aplicado, rota de servico/tecnico, OTDR: o mesmo
 * halo + nucleo do cabo que brilha do esquematico, com brilho fixo (sem a
 * pulsacao do .camada-destaque: rota longa com milhares de vertices
 * pulsando repinta sem parar). */
.camada-neon,
.camada-neon svg,
.camada-neon svg * {
	pointer-events: none;
}
.camada-neon svg polyline,
.camada-neon svg path {
	filter: drop-shadow(0 0 5px var(--geo-neon-glow));
}

/* ---------- Controles dos rotulos da barra (.tb-rotulos-controles) ----------
 * Alfinete (fixar) e olho riscado (desligar). Os grupos sao float:left
 * dentro de #step-menu (bloco): o container tambem flutua, senao cai por
 * baixo do ultimo grupo. So' aparecem com o mouse na barra, mesmo o do modo
 * ativo. */
.tb-rotulos-controles {
	float: left;
	display: flex;
	gap: 2px;
	margin: 8px 0 0 4px;
}
.tb-rotulos-btn {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #8e86a3;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .15s, background-color .12s;
	cursor: pointer;
}
.app-topo-ferramentas:hover .tb-rotulos-btn,
.app-topo-ferramentas.tb-rotulos-hover .tb-rotulos-btn,
/* mesmo ativos, os dois so' aparecem com o mouse na barra (ou no foco) */
.tb-rotulos-btn:focus-visible {
	opacity: 1;
}
.tb-rotulos-btn:hover,
.tb-rotulos-btn:focus-visible {
	background: var(--geo-purple-soft);
	outline: none;
}
.tb-rotulos-btn.ligado {
	color: var(--geo-purple);
	background: var(--geo-purple-soft);
}
.tb-rotulos-btn .cm-ico {
	width: 13px;
	height: 13px;
	-webkit-mask-size: 13px; mask-size: 13px;
}
.cm-ico--olho-off { -webkit-mask-image: url(../../include/icones/images/lucide/eye-off.svg?v=1); mask-image: url(../../include/icones/images/lucide/eye-off.svg?v=1); }
.cm-ico--pino { -webkit-mask-image: url(../../include/icones/images/lucide/pin.svg?v=1); mask-image: url(../../include/icones/images/lucide/pin.svg?v=1); }
@media (prefers-reduced-motion: reduce) {
	.tb-grupo-rotulo, .tb-rotulos-btn { transition: none; }
}

/* ====================================================================
 * Janelas de cadastro e gestao (Window = jQuery UI dialog .ui-dialog.window)
 * Prototipo-refresh, secao 2. Tudo com escopo na janela: o login, o tour e o
 * resto da tela nao mudam. "body ." na frente so' para vencer window.css e
 * style-color.css, que tem a mesma especificidade e podem vir depois.
 * ==================================================================== */

/* ---------- 1. Moldura ---------- */
body .ui-dialog.window {
	border-radius: 10px;
	border: 1px solid rgba(83, 62, 118, .22);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
	font-family: "Poppins", "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	background: #fff;
}
/* ativa: so' a borda fica roxa cheia (sem outline por fora: dava linha dupla) */
body .ui-dialog.window.window-ativa {
	box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
	outline: none;
	border-color: rgb(83, 62, 118);
}
body .ui-dialog.window .ui-dialog-titlebar {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 88px 0 14px;
	background: var(--geo-purple);
	color: #fff;
	border: 0;
	border-radius: 10px 10px 0 0;
}
body .ui-dialog.window .ui-dialog-title {
	float: none;
	flex: 1 1 auto;
	width: auto;
	margin: 0;
	font: 600 13px/36px "Poppins", "Segoe UI", Arial, sans-serif;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* botoes da barra: 24px, cantos 6px, hover translucido; icones em SVG */
body .ui-dialog.window .ui-dialog-titlebar-close,
body .ui-dialog.window .ui-dialog-titlebar-maximize,
body .ui-dialog.window .ui-dialog-titlebar-restore,
body .ui-dialog.window .ui-dialog-titlebar-minimize {
	position: absolute;
	top: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .12s;
}
body .ui-dialog.window .ui-dialog-titlebar-close { right: 8px !important; }
body .ui-dialog.window .ui-dialog-titlebar-maximize,
body .ui-dialog.window .ui-dialog-titlebar-restore { right: 36px; }
body .ui-dialog.window .ui-dialog-titlebar-minimize { right: 64px; }
body .ui-dialog.window .ui-dialog-titlebar button:hover,
body .ui-dialog.window .ui-dialog-titlebar button:focus-visible {
	background: rgba(255, 255, 255, .18);
	outline: none;
}
body .ui-dialog.window .ui-dialog-titlebar .ui-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background-color: #fff;
	background-image: none !important;
	opacity: 1 !important;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 14px; mask-size: 14px;
}
body .ui-dialog.window .ui-dialog-titlebar .ui-icon-close { -webkit-mask-image: url(../../include/icones/images/lucide/x.svg?v=1); mask-image: url(../../include/icones/images/lucide/x.svg?v=1); }
body .ui-dialog.window .ui-dialog-titlebar .ui-icon-minus { -webkit-mask-image: url(../../include/icones/images/lucide/minus.svg?v=1); mask-image: url(../../include/icones/images/lucide/minus.svg?v=1); }
body .ui-dialog.window .ui-dialog-titlebar .ui-icon-extlink { -webkit-mask-image: url(../../include/icones/images/lucide/maximize.svg?v=1); mask-image: url(../../include/icones/images/lucide/maximize.svg?v=1); }
body .ui-dialog.window .ui-dialog-titlebar .ui-icon-newwin { -webkit-mask-image: url(../../include/icones/images/lucide/minimize-2.svg?v=1); mask-image: url(../../include/icones/images/lucide/minimize-2.svg?v=1); }
body .ui-dialog.window .ui-dialog-content.ui-widget-content {
	border-radius: 0 0 10px 10px;
	background: #fff;
	color: #333;
}

/* ---------- 5. Fonte e escala (Poppins 13px dentro da janela) ---------- */
.ui-dialog.window .ui-widget,
.ui-dialog.window .ui-widget .ui-widget,
.ui-dialog.window .ui-widget input,
.ui-dialog.window .ui-widget select,
.ui-dialog.window .ui-widget textarea,
.ui-dialog.window .ui-widget button,
.ui-dialog.window .form-control,
.ui-dialog.window .btn,
.ui-dialog.window .dropdown-menu {
	/* !important: jquery-ui.css (.ui-widget input {font-size:1em}) e style.css
	 * (.ui-widget .ui-widget {12px}) empatam em especificidade e vencem pela ordem */
	font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
	font-size: 13px !important;
}
/* grade: alvos concretos, SEM !important -- ".pq-grid *" com !important
 * anulava o cabecalho de 10px em caixa alta e badges inline das celulas.
 * A especificidade (0,3,1) ja vence "div.pq-grid *" do pqgrid.dev.css. */
.ui-dialog.window .pq-grid td.pq-grid-cell,
.ui-dialog.window .pq-grid .pq-pager,
.ui-dialog.window .pq-grid .pq-pager input,
.ui-dialog.window .pq-grid .pq-grid-norows,
.ui-dialog.window .pq-grid .pq-search-txt {
	font-family: "Poppins", "Segoe UI", Arial, sans-serif;
	font-size: 13px;
}
.ui-dialog.window .pq-grid table.pq-grid-header-table div.pq-td-div {
	font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}
.ui-dialog.window label {
	font-family: "Poppins", "Segoe UI", Arial, sans-serif;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #4b4560;
	margin-bottom: 4px !important;
}
/* rotulo que envolve o proprio checkbox/radio (fora de .checkbox/.radio):
 * peso e margem normais, como no Bootstrap */
.ui-dialog.window label:has(> input[type="checkbox"]),
.ui-dialog.window label:has(> input[type="radio"]) {
	font-weight: 400 !important;
	margin-bottom: 0 !important;
}
.ui-dialog.window .form-horizontal .control-label {
	padding-top: 6px;
}
.ui-dialog.window h4 {
	margin: 6px 0 12px;
	font: 600 14px/1.3 "Poppins", "Segoe UI", Arial, sans-serif;
	color: var(--geo-purple);
}
.ui-dialog.window .card-header {
	font-weight: 600;
}

/* ---------- 2. Campos, botoes e grade ---------- */
.ui-dialog.window .form-control,
.ui-dialog.window .form-control.input-sm {
	height: 32px;
	padding: 0 10px;
	border: 1px solid #d9d4e4;
	border-radius: 6px;
	box-shadow: none;
	color: #333;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.ui-dialog.window textarea.form-control {
	height: auto;
	padding: 8px 10px;
}
.ui-dialog.window .form-control:focus {
	border-color: var(--geo-purple);
	box-shadow: 0 0 0 3px var(--geo-purple-ring);
	outline: none;
}
.ui-dialog.window .form-control[readonly],
.ui-dialog.window .form-control[disabled] {
	background: #f7f6fa;
	color: #555;
}
/* obrigatorio vazio (has-error do validador): borda vermelha fina, sem anel
 * vermelho no foco -- o anel roxo de foco continua valendo */
.ui-dialog.window .has-error .form-control {
	border-color: #e0a1a1;
	box-shadow: none;
}
.ui-dialog.window .has-error .form-control:focus {
	border-color: var(--geo-purple);
	box-shadow: 0 0 0 3px var(--geo-purple-ring);
}
.ui-dialog.window .has-error .control-label,
.ui-dialog.window .has-error .help-block {
	color: #4b4560;
}
.ui-dialog.window .form-control::placeholder {
	color: #a9a3b8;
}
.ui-dialog.window label .text-danger {
	color: #d9534f;
	margin-left: 2px;
}
/* grupos com botao do lado (ex.: posicao geografica + "+"): tudo em 32px,
 * com ou sem .input-group-sm (os filtros usam .input-group puro) */
.ui-dialog.window .input-group > .form-control,
.ui-dialog.window .input-group > .input-group-addon,
.ui-dialog.window .input-group > .input-group-btn > .btn,
.ui-dialog.window .input-group-sm > .form-control,
.ui-dialog.window .input-group-sm > .input-group-addon,
.ui-dialog.window .input-group-sm > .input-group-btn > .btn {
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.ui-dialog.window .input-group-addon {
	border-color: #d9d4e4;
	background: #f7f6fa;
	color: #6b667a;
	border-radius: 6px;
}
.ui-dialog.window .input-group .form-control:first-child,
.ui-dialog.window .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-dialog.window .input-group .form-control:last-child,
.ui-dialog.window .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ui-dialog.window .input-group-btn:last-child > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.ui-dialog.window .btn {
	border-radius: 6px;
	font-weight: 500;
	box-shadow: none;
	transition: background-color .12s, border-color .12s;
}
.ui-dialog.window .btn-sm,
.ui-dialog.window .btn-group-sm > .btn {
	height: 32px;
	padding: 0 14px;
	line-height: 30px;
}
.ui-dialog.window .btn-primary {
	background: var(--geo-purple);
	border-color: var(--geo-purple);
	color: #fff;
}
.ui-dialog.window .btn-primary:hover,
.ui-dialog.window .btn-primary:focus,
.ui-dialog.window .btn-primary:active {
	background: #43305f;
	border-color: #43305f;
	color: #fff;
}
.ui-dialog.window .btn-primary[disabled],
.ui-dialog.window .btn-primary.disabled {
	background: var(--geo-purple);
	border-color: var(--geo-purple);
	opacity: .45;
}
.ui-dialog.window .btn-default {
	background: #fff;
	border-color: #d9d4e4;
	color: #4b4560;
}
.ui-dialog.window .btn-default:hover,
.ui-dialog.window .btn-default:focus {
	background: #f3f0f8;
	border-color: #cfc8dd;
	color: #4b4560;
}
.ui-dialog.window .panel-footer {
	background: #faf9fc;
	border-top: 1px solid #e5e1ee;
	padding: 10px 14px;
	border-radius: 0 0 10px 10px;
}

/* grade (pqgrid): cabecalho em caixa alta, linhas de 36px, sem zebra,
 * hover roxo claro, selecao roxa clara */
.ui-dialog.window .pq-grid table.pq-grid-header-table div.pq-td-div {
	padding: 9px 10px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b667a;
}
.ui-dialog.window .pq-grid span.pq-grid-header,
.ui-dialog.window .pq-grid div.pq-header-outer {
	background: #faf9fc;
}
.ui-dialog.window .pq-grid div.pq-header-outer {
	border-top: 0 !important;
	border-bottom: 1px solid #e5e1ee !important;
}
.ui-dialog.window .pq-grid td.pq-grid-cell {
	padding: 6px 10px;
	border-color: #f0edf5;
}
/* botoes dentro das celulas (menu da linha, acoes): compactos, senao a regra
 * de 32px dos formularios esticava cada linha para ~76px */
.ui-dialog.window .pq-grid .btn,
.ui-dialog.window .pq-grid .btn-sm,
.ui-dialog.window .pq-grid .btn-xs {
	height: 24px;
	min-height: 0;
	padding: 0 6px;
	line-height: 22px;
	margin: 0;
	vertical-align: middle;
}
.ui-dialog.window .pq-grid .btn-link { color: #4b4560; }
.ui-dialog.window .pq-grid .btn img { vertical-align: middle; }
.ui-dialog.window .pq-grid tr.pq-grid-oddRow > td.pq-grid-cell,
.ui-dialog.window .pq-grid tr.pq-grid-row > td.pq-grid-cell {
	background: #fff;
}
/* cores de linha que tem significado (pq_rowcls, cores do style.css): o branco
 * acima e' da celula e cobria a cor da linha. Cor solida, equivalente ao tom
 * translucido sobre branco; hover e selecao, abaixo, continuam por cima */
.ui-dialog.window .pq-grid tr.feicao-projetada > td.pq-grid-cell {
	background: #fef5d8;
}
.ui-dialog.window .pq-grid tr.fibra-sem-servico > td.pq-grid-cell {
	background: #dff0d8;
}
.ui-dialog.window .pq-grid tr.fibra-com-servico > td.pq-grid-cell {
	background: #f2dede;
}
.ui-dialog.window .pq-grid tr.pq-grid-row-hover > td.pq-grid-cell {
	background: rgba(83, 62, 118, .06);
}
.ui-dialog.window .pq-grid tr.pq-row-select > td.pq-grid-cell,
.ui-dialog.window .pq-grid div.pq-grid tr.pq-row-select {
	background: rgba(83, 62, 118, .12);
}
.ui-dialog.window .pq-grid .pq-grid-footer.pq-pager {
	background: #faf9fc;
	border-top: 1px solid #e5e1ee;
	border-bottom: 0;
	padding: 8px 12px;
}
.ui-dialog.window .pq-grid .pq-pager input,
.ui-dialog.window .pq-grid button.ui-button-icon-only {
	border-radius: 6px;
	border: 1px solid #d9d4e4;
	height: 28px;
}

/* ---------- 3. Formulario que se explica ---------- */
/* dica curta embaixo do campo: <small class="form-dica" data-i18n="..."> */
.ui-dialog.window .form-dica {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.35;
	color: #8e86a3;
}

/* ---------- 4. Estado vazio que ensina (pqgrid strNoRows) ---------- */
.ui-dialog.window .pq-grid .pq-grid-norows {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 36px 24px;
	text-align: center;
	color: #6b667a;
	font-size: 13px;
	line-height: 1.45;
}
.ui-dialog.window .pq-grid .pq-grid-norows::before {
	content: '';
	width: 40px;
	height: 40px;
	margin-bottom: 10px;
	background-color: #cfc8dd;
	-webkit-mask: url(../../include/icones/images/lucide/text-search.svg?v=1) center / 40px no-repeat;
	mask: url(../../include/icones/images/lucide/text-search.svg?v=1) center / 40px no-repeat;
}
.ui-dialog.window .pq-grid .pq-grid-norows b {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}
.ui-dialog.window .pq-grid .pq-grid-norows span {
	max-width: 420px;
}
/* #6: enquanto a grade carrega (pqgrid.showLoading poe display:block no
 * .pq-loading) o "Nenhum registro por aqui" nao aparece: dava a impressao de
 * que nao havia nada ate' os registros chegarem */
.pq-grid:has(> .pq-loading[style*="block"]) .pq-grid-norows {
	visibility: hidden;
}
/* Filtro Espacial (IndexBootstrap.initColarFiltroEspacial): campo que aceita
 * colar e botao "usar a ultima area", apagado ate' haver uma area na sessao */
.campo-filtro-espacial {
	text-overflow: ellipsis;
}
.btn-ultima-area {
	opacity: .45;
	cursor: not-allowed;
}
/* o do logradouro (linha) e' o unico com o titulo ULTIMA_LINHA */
body.filtro-espacial-tem-area .btn-ultima-area:not([data-i18n$="ULTIMA_LINHA"]),
body.filtro-espacial-tem-linha .btn-ultima-area[data-i18n$="ULTIMA_LINHA"] {
	opacity: 1;
	cursor: pointer;
}
.filtro-espacial-ico-ultima {
	display: inline-block;
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	background-color: #4b4560;
	-webkit-mask: url(../../include/icones/images/lucide/history.svg?v=1) center / 14px no-repeat;
	mask: url(../../include/icones/images/lucide/history.svg?v=1) center / 14px no-repeat;
}

/* "Limpar filtros" da grade vazia (IndexBootstrap.initGradeVazia): so' aparece
 * quando a barra de filtro da mesma pagina tem filtro com X (dgFilter.js poe
 * .dgFilter-tem-removiveis no container da barra e da grade) */
.grade-vazia-limpar {
	display: none;
}
.dgFilter-tem-removiveis .pq-grid-norows .grade-vazia-limpar {
	display: inline-block;
	margin-top: 10px;
	font-weight: 600;
	color: var(--geo-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* ---------- Faixa do modo projeto (#faixa-projeto) ----------
 * Com projeto ativo, uma faixa amarela no topo do mapa diz qual e' e tem o
 * botao de sair. Fixed (fora do layout="border" do #conteudo), centrada,
 * abaixo da paleta (2580) e das janelas (3000+). */
.faixa-projeto {
	position: fixed;
	top: 90px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2570;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100vw - 420px);
	height: 36px;
	padding: 0 4px 0 14px;
	border-radius: 18px;
	background: #ffe08a;
	color: #4a3b00;
	border: 1px solid rgba(74, 59, 0, .18);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	font: 500 12.5px/1.2 "Poppins", "Segoe UI", Arial, sans-serif;
	white-space: nowrap;
}
.faixa-projeto[hidden] { display: none !important; }
.faixa-projeto-texto {
	overflow: hidden;
	text-overflow: ellipsis;
}
.faixa-projeto-texto b {
	font-weight: 700;
}
.faixa-projeto-sep {
	margin: 0 2px;
	opacity: .6;
}
.faixa-projeto-sair {
	flex: 0 0 auto;
	height: 26px;
	padding: 0 12px;
	border: 0;
	border-radius: 13px;
	background: rgba(74, 59, 0, .12);
	color: #4a3b00;
	font: 600 12px/26px "Poppins", "Segoe UI", Arial, sans-serif;
	cursor: pointer;
	transition: background-color .12s;
}
.faixa-projeto-sair:hover,
.faixa-projeto-sair:focus-visible {
	background: rgba(74, 59, 0, .22);
	outline: none;
}
@media (max-width: 1100px) {
	.faixa-projeto { max-width: calc(100vw - 120px); }
	.faixa-projeto-texto > span:last-child { display: none; }
	.faixa-projeto-sep { display: none; }
}

/* ---------- Painel de atalhos (#painel-atalhos) ---------- */
.painel-atalhos {
	position: fixed;
	inset: 0;
	z-index: 4000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 12, 36, .45);
	font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}
.painel-atalhos[hidden] { display: none !important; }
.painel-atalhos-caixa {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	padding: 16px 20px 14px;
	color: #333;
	animation: painel-entra .16s ease-out;
}
@keyframes painel-entra {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.painel-atalhos-cabecalho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.painel-atalhos-cabecalho h3 {
	margin: 0;
	font: 600 15px/1.3 "Poppins", "Segoe UI", Arial, sans-serif;
	color: var(--geo-purple);
}
.painel-atalhos-fechar {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #6b667a;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.painel-atalhos-fechar:hover,
.painel-atalhos-fechar:focus-visible {
	background: var(--geo-purple-soft);
	outline: none;
}
.cm-ico--x { -webkit-mask-image: url(../../include/icones/images/lucide/x.svg?v=1); mask-image: url(../../include/icones/images/lucide/x.svg?v=1); }
.painel-atalhos-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	row-gap: 2px;
}
.painel-atalhos-grupo {
	grid-column: 1 / -1;
	margin: 10px 0 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8e86a3;
}
.painel-atalhos-grupo:first-child { margin-top: 0; }
.painel-atalhos-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 30px;
	font-size: 13px;
	border-bottom: 1px solid #f0edf5;
}
.painel-atalhos-linha kbd {
	flex: 0 0 auto;
	font: 600 11px/1 "Poppins", "Segoe UI", Arial, sans-serif;
	color: #4b4560;
	background: #f3f0f8;
	border: 1px solid #d9d4e4;
	border-bottom-width: 2px;
	border-radius: 5px;
	padding: 4px 7px;
	box-shadow: none;
	white-space: nowrap;
}
.painel-atalhos-rodape {
	margin-top: 12px;
	font-size: 11.5px;
	color: #8e86a3;
}
@media (max-width: 640px) {
	.painel-atalhos-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.painel-atalhos-caixa { animation: none; }
}

/* faixa do projeto: "nao mostrar de novo" (link discreto) e X (fecha so' agora) */
.faixa-projeto-nunca {
	flex: 0 0 auto;
	height: 26px;
	padding: 0 6px;
	border: 0;
	background: transparent;
	color: #4a3b00;
	opacity: .7;
	font: 500 11px/26px "Poppins", "Segoe UI", Arial, sans-serif;
	text-decoration: underline;
	cursor: pointer;
}
.faixa-projeto-nunca:hover,
.faixa-projeto-nunca:focus-visible { opacity: 1; outline: none; }
.faixa-projeto-fechar {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 13px;
	background: transparent;
	color: #4a3b00;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.faixa-projeto-fechar:hover,
.faixa-projeto-fechar:focus-visible { background: rgba(74, 59, 0, .12); outline: none; }
.faixa-projeto-fechar .cm-ico { width: 13px; height: 13px; -webkit-mask-size: 13px; mask-size: 13px; }
@media (max-width: 1100px) {
	.faixa-projeto-nunca { display: none; }
}

/* ---------- Barra de filtro das grades (dgFilter) ----------
 * O dgFilter.js mede os paineis esquerdo/direito (outerWidth) ao montar e
 * desloca o painel central por isso (ver nota de larguras fixas abaixo). */
.ui-dialog.window .dgFilter {
	background: #faf9fc;
	border-bottom: 1px solid #e5e1ee;
}
/* Larguras FIXAS (nao auto): o dgFilter.js mede os paineis com outerWidth ao
 * montar, e no app isso acontece com a janela ainda oculta -- com width:auto
 * o jQuery devolve 0 e o painel central nascia por baixo do funil ("OS:").
 * 44 = 8 + botao de 36; 104 cabe "Opciones" + caret. */
.ui-dialog.window .dgFilter .dgFilter-left-panel,
.ui-dialog.window .dgFilter .dgFilter-right-panel {
	display: flex;
	align-items: center;
}
.ui-dialog.window .dgFilter .dgFilter-left-panel { width: 44px; padding: 4px 0 4px 8px; }
.ui-dialog.window .dgFilter .dgFilter-right-panel { width: 104px; padding: 4px 8px 4px 0; justify-content: flex-end; }
.ui-dialog.window .dgFilter .dgFilter-right-panel .btn-group { width: 96px; }
.ui-dialog.window .dgFilter .dgFilter-right-panel .btn-group > .btn { width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ui-dialog.window .dgFilter .dgFilter-left-panel .btn {
	width: 36px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border-color: #d9d4e4;
	background: #fff;
}
.ui-dialog.window .dgFilter .dgFilter-left-panel .btn:hover,
.ui-dialog.window .dgFilter .dgFilter-left-panel .btn:focus {
	background: #f3f0f8;
	border-color: #cfc8dd;
}
.ui-dialog.window .dgFilter .dgFilter-left-panel .dgFilter-icon-btn-add-filter {
	vertical-align: middle;
}
.ui-dialog.window .dgFilter .dgFilter-right-panel .btn {
	height: 32px;
	padding: 0 12px;
	line-height: 30px;
	border-radius: 6px;
	white-space: nowrap;
}
.ui-dialog.window .dgFilter .dgFilter-center-panel {
	margin: 4px 8px;
	background: #fff;
	background-image: none;
	border: 1px solid #d9d4e4;
	border-radius: 6px;
	box-shadow: none;
}
.ui-dialog.window .dgFilter .dgFilter-center-panel .dgFilter-tollbar-label {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 72px;
	padding: 0 8px;
	background-image: none;
	border-right: 1px solid #ebe7f2;
	font: 600 10px/30px "Poppins", "Segoe UI", Arial, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8e86a3;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog.window .dgFilter .dgFilter-center-panel .dgFilter-tollbar {
	left: 72px;
}
.ui-dialog.window .dgFilter .dgFilter-center-panel .dgFilter-tollbar .dgFilter-item {
	margin: 4px 0 0 6px;
	padding: 2px 8px;
	background: var(--geo-purple-soft);
	border: 1px solid #d9d4e4;
	border-radius: 12px;
	box-shadow: none;
	font: 500 11.5px/18px "Poppins", "Segoe UI", Arial, sans-serif;
	color: #4b4560;
}
.ui-dialog.window .dgFilter .dgFilter-center-panel .dgFilter-tollbar .dgFilter-item .dgFilter-item-title a {
	color: #4b4560;
}
.ui-dialog.window .dgFilter .dgFilter-center-panel .dgFilter-tollbar .dgFilter-item .dgFilter-item-btn-close {
	padding: 0 0 0 5px;
	background: transparent;
	color: #4b4560;
	text-shadow: none;
	font: 700 15px/1 "Poppins", "Segoe UI", Arial, sans-serif;
	opacity: .55;
}
/* Limpar filtros (dgFilter.js): fim do painel central, 32px fixos */
.ui-dialog.window .dgFilter .dgFilter-btn-limpar {
	width: 32px;
	border-left: 1px solid #ebe7f2;
	border-radius: 0 5px 5px 0;
}
.ui-dialog.window .dgFilter.dgFilter-com-limpar .dgFilter-center-panel .dgFilter-tollbar {
	right: 32px;
}
.ui-dialog.window .dgFilter .dgFilter-btn-limpar .dgFilter-icon-limpar {
	background-color: #4b4560;
}
.ui-dialog.window .dgFilter .dgFilter-btn-limpar:hover,
.ui-dialog.window .dgFilter .dgFilter-btn-limpar:focus {
	background: #f3f0f8;
	outline: 0;
}
.ui-dialog.window .dgFilter .dgFilter-btn-limpar:hover .dgFilter-icon-limpar,
.ui-dialog.window .dgFilter .dgFilter-btn-limpar:focus .dgFilter-icon-limpar {
	background-color: var(--geo-purple);
}

/* ---------- KML/Shape so' com icone (Projeto e Redes seguem com texto) ----------
 * Mesmo enquadramento dos outros botoes de ferramenta (26px, ghost), com
 * um caret pequeno colado ao icone. */
.app-topo-ferramentas .btn-mais {
	gap: 0;
	padding: 0 6px;
	min-width: 26px;
}

/* ---------- Auditoria das regras genericas das janelas ----------
 * O que elas NAO devem pegar (mesmo problema que apareceu no dgFilter). */
.ui-dialog.window label.btn,
.ui-dialog.window .checkbox label,
.ui-dialog.window .radio label,
.ui-dialog.window .checkbox-inline,
.ui-dialog.window .radio-inline {
	margin-bottom: 0 !important;
	font-weight: 400 !important;
}
.ui-dialog.window select[multiple].form-control,
.ui-dialog.window select[size].form-control {
	height: auto;
	padding: 4px 6px;
}
.ui-dialog.window input[type="checkbox"].form-control,
.ui-dialog.window input[type="radio"].form-control,
.ui-dialog.window input[type="file"].form-control,
.ui-dialog.window input[type="color"].form-control {
	height: auto;
	padding: 0;
	border: 0;
	box-shadow: none;
}
/* rodape claro so' no rodape da janela (region=south), nao em paineis internos */
.ui-dialog.window .panel .panel-footer {
	border-radius: 0;
	background: #faf9fc;
}
/* botoes miudos (.btn-xs) e de link mantem o tamanho do Bootstrap */
.ui-dialog.window .btn-xs,
.ui-dialog.window .btn-link.btn-sm {
	height: auto;
	line-height: 1.5;
	padding: 1px 5px;
}
.ui-dialog.window .btn-link.btn-sm { padding: 5px 10px; }
/* botoes com margem inline no HTML (ex.: "margin: 0 6px") continuam valendo */

/* ---------- Listas de vinculo (MEL-06) ----------
 * Conjunto de Caixas, de Lances e de Dutos, Redes, Eventos, postes do Lance
 * de Cabo e elementos de referencia do projeto. So' quem tem a classe: nada
 * de "td a" ou ".glyphicon-remove", que pegariam o pqgrid e os X de excluir
 * condicao/duto do Lance de Cabo. */
.ui-dialog.window .link-desvincular {
	color: #d9534f;
	padding: 0 4px;
}
.ui-dialog.window .link-desvincular:hover,
.ui-dialog.window .link-desvincular:focus {
	color: #a94442;
	text-decoration: none;
}
/* titulo do painel com a contagem: o texto encurta com reticencias e a
 * contagem fica sempre visivel (a janela redimensiona ate' ~360px, e o h3
 * de .panel-caixas/.panel-lance-cabo tem width 75% com overflow hidden) */
.ui-dialog.window .panel-title.titulo-com-qtd {
	display: flex;
	align-items: center;
	min-width: 0;
}
.ui-dialog.window .panel-title.titulo-com-qtd > span:first-child,
.ui-dialog.window .panel-title.titulo-com-qtd > small {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* o texto auxiliar (Postes do Lance de Cabo) so' ocupa a sobra: encurta
 * antes do nome do painel */
.ui-dialog.window .panel-title.titulo-com-qtd > small {
	flex: 1 1 0;
	margin-left: 6px;
}
.ui-dialog.window .qtd-vinculos {
	flex: none;
	display: inline-block;
	min-width: 22px;
	margin-left: 6px;
	padding: 0 7px;
	border: 1px solid #d9d4e4;
	border-radius: 999px;
	background: #fff;
	color: #6b667a;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	vertical-align: 1px;
}
/* "Desvincular todos": acao destrutiva, nao o roxo da acao principal */
.ui-dialog.window .btn-default.btn-desvincular-todos {
	color: #c9302c;
}
.ui-dialog.window .btn-default.btn-desvincular-todos:not([disabled]):hover,
.ui-dialog.window .btn-default.btn-desvincular-todos:not([disabled]):focus {
	color: #a94442;
	border-color: #e4b9b9;
	background: #fdf3f3;
}

/* botao "Mais" da barra: tres pontinhos (sem caret) */
.btn-mais .cm-ico {
	width: 18px;
	height: 18px;
	-webkit-mask-size: 18px; mask-size: 18px;
	background-color: currentColor;
}
.cm-ico--mais-pontos { -webkit-mask-image: url(../../include/icones/images/lucide/ellipsis.svg?v=1); mask-image: url(../../include/icones/images/lucide/ellipsis.svg?v=1); }

/* Sem divisoria DEPOIS do "Mais" (entre os tres pontinhos e o Projeto); a
 * de antes dele, entre Analisar e Mais, fica. */
.tb-grupo-mais + .tb-grupo {
	border-left: 0;
	margin-left: 0;
}

/* ---------- Correcoes da revisao de responsividade ---------- */
/* A2: campo de cor (minicolors, tema bootstrap) dentro das janelas: o
 * .form-control de 32px com padding 0 10px cobria o swatch. */
.ui-dialog.window .minicolors-theme-bootstrap .minicolors-input {
	padding-left: 44px;
}
.ui-dialog.window .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
	padding-left: 10px;
	padding-right: 44px;
}
.ui-dialog.window .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch,
.ui-dialog.window .minicolors-theme-bootstrap .minicolors-swatch {
	top: 4px;
}
/* M1: cabecalho recolhido (.app-topo-reduced no #topo): o que e' fixed e
 * se alinha pelo topo sobe os 40px da linha roxa que sumiu. */
.app-topo-reduced ~ .paleta-container,
.app-topo-reduced ~ #controle-mapa {
	top: 58px;
}
.app-topo-reduced ~ .faixa-projeto {
	top: 50px;
}
/* M2: rodape nao estoura -- a dica do modo encolhe com reticencias e a
 * escala nao e' espremida. */
.app-rodape .modo-atual {
	flex: 0 1 auto;
	min-width: 0;
}
.app-rodape .modo-atual-dica {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* M3: ate 1365px as duas buscas encolhem para a barra nao rolar */
@media (max-width: 1365px) {
	.app-topo-ferramentas .geosite-search--light { width: 200px; }
	.geosite-search--dark { width: 240px; }
}

/* botoes dentro das celulas da grade continuam compactos mesmo sendo
 * .btn-link.btn-sm (a exclusao da auditoria vinha depois e reabria 44px) */
.ui-dialog.window .pq-grid .btn,
.ui-dialog.window .pq-grid .btn-link.btn-sm,
.ui-dialog.window .pq-grid .btn-xs {
	height: 24px;
	min-height: 0;
	padding: 0 6px;
	line-height: 22px;
	margin: 0;
}

/* Tooltips do Bootstrap nao sao interativos: nao devem capturar o mouse
 * (um tooltip por cima da paleta fazia o mouse "sair" dela e recolher). */
.tooltip {
	pointer-events: none;
}

/* ---------- Linha de campos com um botao de texto no meio (.linha-com-acao) ----------
 * Colunas Bootstrap com um botao de texto entre campos estouram em janela
 * estreita: col-lg/md medem a TELA, nao a janela (em tela >= 1200px os 2/12 do
 * lance de cabo davam ~70px e o "Desenhar cabo", ~125px, invadia a Feicao
 * final), e col-xs-2 nao comporta "Ver historico" abaixo de ~720px. Flex com
 * quebra pela largura da propria janela: a coluna .col-acao fica do tamanho do
 * botao e os campos dividem o resto; sem espaco, o ultimo campo desce.
 * Usado no lance de cabo (optico e UTP) e no sinal do cadastro de cliente. */
.ui-dialog.window .row.linha-com-acao {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
/* aninhada numa coluna: o bootstrap.css do projeto da' 5px as colunas mas
 * deixa a .row com -15px, e a linha sobrava 10px de cada lado */
.ui-dialog.window [class*="col-"] > .row.linha-com-acao {
	margin-left: -5px;
	margin-right: -5px;
}
.ui-dialog.window .row.linha-com-acao:before,
.ui-dialog.window .row.linha-com-acao:after {
	content: none;
}
.ui-dialog.window .linha-com-acao > [class*="col-"] {
	float: none;
	width: auto;
	flex: 1 1 190px;
	min-width: 0;
}
.ui-dialog.window .linha-com-acao > .col-acao {
	flex: 0 0 auto;
}
.ui-dialog.window .linha-com-acao > .col-acao .btn {
	white-space: nowrap;
}

/* ---------- Icone do dgFilter dentro de botao de grupo (.input-group-btn) ----------
 * O .dgFilter-item-menu e' float:left (dgFilter.css); dentro da celula de
 * tabela do .input-group-btn o float nao entra na largura calculada e o
 * ultimo botao saia 16px para fora (Copiar link: o do Google Maps ficava
 * cortado, com barra de rolagem). Em linha, a celula mede o botao inteiro. */
.ui-dialog.window .input-group-btn > .btn > .dgFilter-item-menu {
	float: none;
	display: inline-block;
	vertical-align: middle;
}

/* ---------- Esquematico em janela (WindowEsquematico) ---------- */
.ui-dialog.window .esq-janela-corpo { overflow: hidden; position: relative; width: 100%; height: 100%; }
/* Tudo da janela na barra de titulo roxa: codigo no titulo, dica (icone com
 * tooltip), caixinha "sempre em nova aba" e botao "abrir em nova aba" */
body .ui-dialog.window .ui-dialog-title { min-width: 96px; }
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-acoes {
	display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; overflow: hidden;
	margin-left: 12px; white-space: nowrap;
	font: 400 12px/1 "Poppins", "Segoe UI", Arial, sans-serif; color: rgba(255, 255, 255, .92);
}
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-dica {
	display: inline-block; width: 15px; height: 15px; -webkit-mask-size: 15px; mask-size: 15px;
	background-color: rgba(255, 255, 255, .85); cursor: help; border-radius: 50%;
}
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-dica:hover,
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-dica:focus-visible { background-color: #fff; outline: none; }
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-opcao {
	display: flex; align-items: center; gap: 5px; margin: 0 !important; padding: 0;
	font: inherit; color: inherit; font-weight: 400 !important; cursor: pointer; text-transform: none; letter-spacing: 0;
}
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-opcao input {
	width: 13px; height: 13px; margin: 0; accent-color: #fff; cursor: pointer;
}
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-btn {
	height: 24px; padding: 0 10px; border-radius: 6px; cursor: pointer;
	font: 500 12px/22px "Poppins", "Segoe UI", Arial, sans-serif; color: #fff;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .5);
	transition: background-color .12s;
}
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-btn:hover,
body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-btn:focus-visible { background: rgba(255, 255, 255, .26); outline: none; }
/* janela estreita (ate 1366, notebook comum): some o texto da caixinha so'
 * visualmente; fica a caixinha com title e o nome acessivel do checkbox */
@media (max-width: 1366px) {
	body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-opcao span {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
}
/* "Carregando" por cima do iframe ate' o load (o esquematico demora a subir) */
.ui-dialog.window .esq-janela-carregando {
	position: absolute; inset: 0; z-index: 1;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	background: #fff; color: #6b6480; font-size: 14px;
}
.ui-dialog.window .esq-janela-spinner {
	width: 22px; height: 22px; border-radius: 50%;
	border: 3px solid #e4e0ee; border-top-color: var(--geo-purple, #533e76);
	animation: esq-janela-gira .8s linear infinite;
}
@keyframes esq-janela-gira { to { transform: rotate(360deg); } }
.ui-dialog.window .esq-janela-iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- Camada de destaque (hover vindo do esquematico) ----------
 * System.camadaDestaque: halo + nucleo amarelos; aqui entra o brilho
 * (drop-shadow) e a pulsacao. pointer-events none: o destaque nunca fica
 * entre o mouse e a feicao real que esta' por baixo. */
.camada-destaque,
.camada-destaque svg,
.camada-destaque svg * {
	pointer-events: none; /* vence o atributo pointer-events que o OL2 escreve em cada no */
}
/* OpenLayers 2 desenha linha como <polyline>, area como <polygon> e ponto
 * como <circle>; path so' em casos raros. */
.camada-destaque svg polyline,
.camada-destaque svg polygon,
.camada-destaque svg path,
.camada-destaque svg circle {
	filter: drop-shadow(0 0 6px rgba(255, 196, 0, 0.95));
	animation: destaque-pulso 1.1s ease-in-out infinite;
}
@keyframes destaque-pulso {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

/* ---------- Janela Propriedades: rodape numa linha ----------
 * Street View a esquerda e as acoes a direita (eram um float que, sem
 * caber, caia inteiro para a linha de baixo e deixava o Street View
 * sozinho em cima). Flex: tudo numa linha; se faltar largura, as acoes
 * quebram alinhadas a direita. */
#WindowSelection .panel-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
#WindowSelection .panel-footer > .pull-right {
	float: none;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2px;
}
#WindowSelection .panel-footer > .pull-right > .btn { margin-left: 0 !important; }
/* botoes de icone: compactos (10 acoes + Street View cabem em ~470px) */
#WindowSelection .panel-footer > .btn,
#WindowSelection .panel-footer > .pull-right > .btn {
	height: 30px;
	min-width: 34px;
	padding: 0 8px;
	line-height: 28px;
}

/* Esquematico embutido: iframe inerte enquanto a janela e' arrastada ou
 * redimensionada (senao o mouse "entra" no esquematico e a operacao trava) */
.ui-dialog.window .esq-janela-iframe--inerte { pointer-events: none; }

/* Configuracoes do Usuario: bloco do esquematico */
#ConfiguracoesUsuario .config-esquematico { padding: 0 15px 6px; }
#ConfiguracoesUsuario .config-esquematico-opcao { display: flex; align-items: center; gap: 6px; font-weight: 400 !important; margin: 0 0 2px !important; cursor: pointer; }
#ConfiguracoesUsuario .config-esquematico-opcao input { margin: 0; }
/* Janela Propriedades: uma escolha so' entre tres (era classica + fixa em dois checkboxes, um cinza) */
#ConfiguracoesUsuario .config-propriedades { display: flex; flex-direction: column; gap: 6px; }
#ConfiguracoesUsuario .config-propriedades-opcao { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 8px 10px; border: 1px solid #e3dee9; border-radius: 8px; font-weight: 400 !important; cursor: pointer; }
#ConfiguracoesUsuario .config-propriedades-opcao:hover { background: #f8f6fb; }
#ConfiguracoesUsuario .config-propriedades-opcao:has(input:checked) { border-color: var(--geo-purple); background: var(--geo-purple-soft); }
#ConfiguracoesUsuario .config-propriedades-opcao input { margin: 3px 0 0; accent-color: var(--geo-purple); }
#ConfiguracoesUsuario .config-propriedades-opcao b { display: block; font-weight: 600; color: #2b2533; }
#ConfiguracoesUsuario .config-propriedades-opcao small { display: block; color: #6d6680; font-size: 12px; line-height: 1.35; }
.cm-ico--info { -webkit-mask-image: url(../../include/icones/images/lucide/info.svg?v=1); mask-image: url(../../include/icones/images/lucide/info.svg?v=1); }

/* ---------- Cartao "novidade: o cabo brilha" sobre o desenho ----------
 * Mostrado nas 3 primeiras aberturas do esquematico em janela
 * (WindowEsquematico.mostraDicaCabo). Flutua no alto do desenho, com a
 * seta apontando para ele, sem bloquear o iframe fora do cartao. */
.ui-dialog.window .esq-dica-cabo {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	width: max-content;
	max-width: calc(100% - 32px);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 36px 10px 12px;
	background: #fff;
	color: #2b2740;
	border: 1px solid #e0dbea;
	border-left: 4px solid #ffc400;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(31, 27, 46, .18);
	font: 13px/1.4 "Poppins", "Segoe UI", Arial, sans-serif;
	animation: esq-dica-entra .25s ease-out;
}
.ui-dialog.window .esq-dica-cabo::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	background: #fff;
	border-right: 1px solid #e0dbea;
	border-bottom: 1px solid #e0dbea;
	transform: rotate(45deg);
}
.ui-dialog.window .esq-dica-cabo-ilustra {
	width: 64px;
	height: 28px;
	flex: none;
	filter: drop-shadow(0 0 4px rgba(255, 196, 0, .9));
}
.ui-dialog.window .esq-dica-cabo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 360px; }
.ui-dialog.window .esq-dica-cabo-texto b { font-weight: 600; }
.ui-dialog.window .esq-dica-cabo-texto span { color: #5f5878; font-size: 12px; }
.ui-dialog.window .esq-dica-cabo-ok {
	flex: none;
	height: 30px;
	padding: 0 14px;
	border-radius: 6px;
	border: 0;
	background: var(--geo-purple, #533e76);
	color: #fff;
	font: 500 12px/30px "Poppins", "Segoe UI", Arial, sans-serif;
	cursor: pointer;
}
.ui-dialog.window .esq-dica-cabo-ok:hover { filter: brightness(1.1); }
.ui-dialog.window .esq-dica-cabo-fechar {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #6b6480;
	font-size: 18px;
	line-height: 22px;
	cursor: pointer;
}
.ui-dialog.window .esq-dica-cabo-fechar:hover { background: #f1eef7; color: #2b2740; }
.ui-dialog.window .esq-dica-cabo--sai {
	opacity: 0;
	transform: translate(-50%, -6px);
	transition: opacity .25s, transform .25s;
}
@keyframes esq-dica-entra {
	from { opacity: 0; transform: translate(-50%, -8px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Iframe inerte enquanto o jQuery UI arrasta/redimensiona: classes que o
 * proprio draggable/resizable mantem (nunca ficam presas), alem da
 * --inerte que o JS poe e tira. */
.ui-dialog.window.ui-draggable-dragging .esq-janela-iframe,
.ui-dialog.window.ui-resizable-resizing .esq-janela-iframe { pointer-events: none; }

/* Reduzir movimento: brilho do cabo parado (mas visivel), cartao sem
 * animacao, spinner mais lento */
@media (prefers-reduced-motion: reduce) {
	.camada-destaque svg polyline, .camada-destaque svg polygon,
	.camada-destaque svg path, .camada-destaque svg circle { animation: none; opacity: 1; }
	.ui-dialog.window .esq-janela-spinner { animation-duration: 2s; }
	.ui-dialog.window .esq-dica-cabo { animation: none; }
	.ui-dialog.window .esq-dica-cabo--sai { transition: none; }
	body .ui-dialog.window .ui-dialog-titlebar .esq-titulo-btn { transition: none; }
}

/* ===================================================================
 * CASCA SEM CARA DE ANTIGO (23/10/2026) -- prototipo "Nova Casca do Mapa"
 * =================================================================== */

/* ---------- Icones do menu: novos ou classicos (System.iconesMenu) ----------
 * Os dois vao no HTML de cada item (initializeMenuAplicacao) e a classe no
 * menu escolhe qual aparece, sem remontar a arvore. */
#menu-principal .menu-ic-novo {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b667a;
}
#menu-principal .menu-ic-novo svg {
	width: 16px;
	height: 16px;
}
#menu-principal a:hover .menu-ic-novo,
#menu-principal .item-pai:hover .menu-ic-novo {
	color: var(--geo-purple);
}
/* elemento de rede: o fundo do botao da paleta, copiado ao abrir o menu */
#menu-principal .menu-simbolo {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#menu-principal .menu-ic-classico,
#menu-principal.menu-icones-classicos .menu-ic-novo {
	display: none;
}
#menu-principal.menu-icones-classicos .menu-ic-classico {
	display: block;
}
#menu-principal .menu-estilo-icones {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border-top: 1px solid #f0edf5;
	color: #6b667a;
	font-size: 12px;
}
#menu-principal .menu-estilo-seg {
	display: inline-flex;
	border: 1px solid #ddd6ea;
	border-radius: var(--geo-radius-md);
	overflow: hidden;
}
#menu-principal .menu-estilo-seg button {
	border: 0;
	background: #fff;
	color: #625c72;
	padding: 3px 10px;
	font: 500 12px/1.5 Poppins, "Segoe UI", Arial, sans-serif;
	cursor: pointer;
}
#menu-principal .menu-estilo-seg button:hover {
	background: var(--geo-purple-soft);
}
#menu-principal .menu-estilo-seg button[aria-pressed="true"] {
	background: var(--geo-purple);
	color: #fff;
}

/* ---------- Barra: icones de contorno no lugar do sprite ----------
 * A forma vem da mask e a cor do texto (background-color: currentColor), entao
 * hover/ativo seguem a cor do botao. Area = "selecao", Viabilidade = "mapa com
 * pino" (escolhas de 23/10). So' na barra: as classes icone-* do sprite
 * continuam valendo em outros lugares. */
.app-topo-ferramentas .btn-ferramenta em.icone-default-control,
.app-topo-ferramentas .btn-ferramenta em.icone-mover,
.app-topo-ferramentas .btn-ferramenta em.icone-distancia,
.app-topo-ferramentas .btn-ferramenta em.icone-area,
.app-topo-ferramentas .btn-ferramenta em.icone-caixa-ok {
	width: 18px;
	height: 18px;
	color: #4b4560;
	background: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	vertical-align: middle;
}
.app-topo-ferramentas .btn-ferramenta.active em {
	color: var(--geo-purple);
}
.app-topo-ferramentas .btn-ferramenta em.icone-default-control {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 4 7.07 17 2.51-7.39L21 11.07z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 4 7.07 17 2.51-7.39L21 11.07z'/%3E%3C/svg%3E");
}
.app-topo-ferramentas .btn-ferramenta em.icone-mover {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E");
}
.app-topo-ferramentas .btn-ferramenta em.icone-distancia {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E");
}
.app-topo-ferramentas .btn-ferramenta em.icone-area {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3a2 2 0 0 0-2 2'/%3E%3Cpath d='M19 3a2 2 0 0 1 2 2'/%3E%3Cpath d='m12 12 4 10 1.7-4.3L22 16Z'/%3E%3Cpath d='M5 21a2 2 0 0 1-2-2'/%3E%3Cpath d='M9 3h1'/%3E%3Cpath d='M9 21h2'/%3E%3Cpath d='M14 3h1'/%3E%3Cpath d='M3 9v1'/%3E%3Cpath d='M21 9v2'/%3E%3Cpath d='M3 14v1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3a2 2 0 0 0-2 2'/%3E%3Cpath d='M19 3a2 2 0 0 1 2 2'/%3E%3Cpath d='m12 12 4 10 1.7-4.3L22 16Z'/%3E%3Cpath d='M5 21a2 2 0 0 1-2-2'/%3E%3Cpath d='M9 3h1'/%3E%3Cpath d='M9 21h2'/%3E%3Cpath d='M14 3h1'/%3E%3Cpath d='M3 9v1'/%3E%3Cpath d='M21 9v2'/%3E%3Cpath d='M3 14v1'/%3E%3C/svg%3E");
}
.app-topo-ferramentas .btn-ferramenta em.icone-caixa-ok {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M8.835 14H5a1 1 0 0 0-.9.7l-2 6c-.1.1-.1.2-.1.3 0 .6.4 1 1 1h18c.6 0 1-.4 1-1 0-.1 0-.2-.1-.3l-2-6a1 1 0 0 0-.9-.7h-3.835'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M8.835 14H5a1 1 0 0 0-.9.7l-2 6c-.1.1-.1.2-.1.3 0 .6.4 1 1 1h18c.6 0 1-.4 1-1 0-.1 0-.2-.1-.3l-2-6a1 1 0 0 0-.9-.7h-3.835'/%3E%3C/svg%3E");
}

/* ---------- Rodape: coordenada em pastilha com "Copiar" ---------- */
.app-rodape .coordenada-chip {
	margin-left: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 18px;
	padding: 0 2px 0 8px;
	border: 1px solid #e5e1ee;
	border-radius: 999px;
	background: #fff;
	font-size: 11px;
	color: #4b4560;
	font-variant-numeric: tabular-nums;
}
.app-rodape .coordenada-chip[hidden] {
	display: none;
}
.app-rodape .coordenada-chip #coordenada {
	float: none;
	margin: 0;
	padding: 0;
	font-size: 11px;
}
.app-rodape .coordenada-sep {
	color: #b3abc4;
}
.app-rodape .coordenada-sep[hidden] {
	display: none;
}
.app-rodape #escala-rodape {
	font-size: 11px;
	white-space: nowrap;
}

/* ---------- Tooltip dos "title" nativos (app/TooltipTitle.js) ----------
 * Mesmo cartao dos tooltips do Bootstrap (.tooltip-inner acima). */
.geo-tip {
	position: absolute;
	z-index: 3200;
	display: none;
	pointer-events: none;
}
.geo-tip .tooltip-inner {
	max-width: 320px;
	text-align: left;
	white-space: pre-line;
}
.geo-tip-seta {
	position: absolute;
	width: 0;
	height: 0;
	margin-left: -5px;
	border: 5px solid transparent;
}
.geo-tip-cima .geo-tip-seta {
	top: 100%;
	border-top-color: #2b2733;
}
.geo-tip-baixo .geo-tip-seta {
	bottom: 100%;
	border-bottom-color: #2b2733;
}

/* ---------- Calendario (datepicker do jQuery UI) no padrao das janelas ----------
 * O tema do jQuery UI 1.11 (Verdana, cinza, cantos retos) continua no all.css;
 * aqui so' o visual, sem mexer no comportamento. */
.ui-datepicker.ui-widget {
	width: 18.5em;
	padding: 10px;
	background: #fff;
	border: 1px solid #ece8f3;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(30, 20, 50, .22);
	font: 12.5px Poppins, "Segoe UI", Arial, sans-serif;
	color: #2b2733;
	z-index: 3300 !important;
}
.ui-datepicker .ui-datepicker-header {
	padding: 0 0 8px;
	border: 0;
	background: none;
	color: #2b2733;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 34px;
	font-size: 13px;
	font-weight: 600;
	line-height: 28px;
	text-transform: capitalize;
}
.ui-datepicker .ui-datepicker-title select {
	font: 500 12.5px Poppins, "Segoe UI", Arial, sans-serif;
	border: 1px solid #cfc8dd;
	border-radius: var(--geo-radius-md);
	padding: 2px 4px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 0;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: none;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover { left: 0; }
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover { right: 0; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	background: #f1eef7;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background-image: none !important;
	background-color: #6b667a;
	-webkit-mask: center / 16px 16px no-repeat;
	mask: center / 16px 16px no-repeat;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
.ui-datepicker .ui-datepicker-next .ui-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.ui-datepicker table {
	margin: 0;
	font-size: 12.5px;
}
.ui-datepicker th {
	padding: 4px 0;
	font-size: 11px;
	font-weight: 500;
	color: #8e86a3;
}
.ui-datepicker td {
	padding: 1px;
}
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #2b2733;
	font-weight: 400;
	line-height: 32px;
	text-align: center;
}
.ui-datepicker td a.ui-state-hover {
	background: #f1eef7;
}
.ui-datepicker td a.ui-state-highlight {
	box-shadow: inset 0 0 0 1.5px var(--geo-purple);
	color: var(--geo-purple);
	font-weight: 600;
}
.ui-datepicker td a.ui-state-active {
	background: var(--geo-purple);
	box-shadow: none;
	color: #fff;
}
.ui-datepicker .ui-datepicker-buttonpane {
	margin: 8px 0 0;
	padding: 8px 0 0;
	border-top: 1px solid #f0edf5;
	background: none;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	margin: 0;
	padding: 4px 10px;
	border: 0;
	border-radius: var(--geo-radius-md);
	background: none;
	color: var(--geo-purple);
	font: 500 12.5px Poppins, "Segoe UI", Arial, sans-serif;
	opacity: 1;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
	background: #f1eef7;
}

/* ---------- Ensinar Projeto e Redes: guia lateral, avisos, menus que explicam ----------
 * Guia (#guia-recursos): painel fixo a direita, abaixo da barra, acima da
 * faixa do projeto (2570) e abaixo das janelas (3000+). Tudo declara a
 * Poppins: no <body> o padrao e' Arial. */
.guia-recursos {
	position: fixed;
	top: 96px;
	/* a esquerda do zoom (#controle-mapa, right 71 + 36) e da paleta: o passo
	 * a passo manda desenhar pela paleta, entao ela fica a mostra */
	right: 117px;
	bottom: 44px;
	width: 380px;
	max-width: calc(100vw - 141px);
	z-index: 2590;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #2b2733;
	border: 1px solid #e3e0e8;
	border-radius: var(--geo-radius-lg, 8px);
	box-shadow: 0 12px 32px rgba(30, 20, 50, .22);
	font: 400 12.5px/1.55 "Poppins", "Segoe UI", Arial, sans-serif;
	overflow: hidden;
}
.guia-recursos-cab {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 14px 8px 16px;
}
.guia-recursos-ico {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--geo-purple-soft, rgba(83, 62, 118, .10));
	color: var(--geo-purple, rgb(83, 62, 118));
}
.guia-recursos-ico svg { width: 17px; height: 17px; }
.guia-recursos-cab > div { flex: 1; min-width: 0; }
.guia-recursos-cab h3 {
	margin: 0;
	font: 600 15px/1.3 "Poppins", "Segoe UI", Arial, sans-serif;
	color: #2b2733;
}
.guia-recursos-cab small { font-size: 11.5px; color: #6b6577; }
.guia-recursos-fechar {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: #6b6577;
	font: 400 20px/28px Arial, sans-serif;
	cursor: pointer;
}
.guia-recursos-fechar:hover, .guia-recursos-fechar:focus-visible { background: rgba(83, 62, 118, .08); outline: none; }
.guia-recursos-fechar:focus-visible, .guia-aviso-x:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.guia-recursos-abas {
	display: flex;
	gap: 2px;
	padding: 0 10px;
	border-bottom: 1px solid #ece9f1;
	overflow-x: auto;
}
.guia-recursos-aba {
	flex: 0 0 auto;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	padding: 8px 10px 7px;
	font: 500 12px/1.2 "Poppins", "Segoe UI", Arial, sans-serif;
	color: #6b6577;
	cursor: pointer;
}
.guia-recursos-aba[aria-selected="true"] { color: var(--geo-purple, rgb(83, 62, 118)); border-bottom-color: var(--geo-purple, rgb(83, 62, 118)); }
.guia-recursos-aba:focus-visible { outline: 2px solid var(--geo-purple-ring, rgba(83, 62, 118, .3)); outline-offset: -2px; }
.guia-recursos-corpo {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 14px 16px 16px;
	color: #3b3446;
}
.guia-recursos-corpo p { margin: 0 0 10px; }
.guia-recursos-corpo h4 { margin: 14px 0 6px; font: 600 12.5px/1.3 "Poppins", "Segoe UI", Arial, sans-serif; color: #2b2733; }
.guia-recursos-corpo ol, .guia-recursos-corpo ul { margin: 0 0 10px; padding-left: 18px; }
.guia-recursos-corpo li { margin-bottom: 6px; }
.guia-recursos-corpo b { font-weight: 600; color: #2b2733; }
.guia-recursos-corpo .guia-caixa {
	border: 1px solid #ece9f1;
	border-radius: 8px;
	background: #faf9fc;
	padding: 9px 11px;
	margin: 0 0 10px;
}
.guia-recursos-corpo .guia-caixa--amarela { background: rgba(251, 188, 5, .1); border-color: rgba(224, 168, 0, .35); }
.guia-recursos-corpo .guia-caixa > :last-child { margin-bottom: 0; }
.guia-recursos-corpo .guia-ciclo { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; padding: 0; list-style: none; }
.guia-recursos-corpo .guia-ciclo li {
	margin: 0;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--geo-purple-soft, rgba(83, 62, 118, .10));
	color: var(--geo-purple, rgb(83, 62, 118));
	font-size: 11.5px;
	font-weight: 500;
}
.guia-recursos-corpo .guia-caso { border: 1px solid #ece9f1; border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; }
.guia-recursos-corpo .guia-caso b { display: block; }
.guia-recursos-corpo .guia-caso span { color: #5c5668; font-size: 12px; }
.guia-recursos-corpo details { border-bottom: 1px solid #ece9f1; padding: 8px 0; }
/* Duvidas (Projeto e Redes): o Bootstrap 3 poe summary em display:block e o
 * triangulo nativo some -- sem ele nao parece que abre. Seta propria que gira. */
.guia-recursos-corpo summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 -6px;
	padding: 3px 6px;
	border-radius: 6px;
	list-style: none;
	cursor: pointer;
	font-weight: 500;
	color: #2b2733;
}
.guia-recursos-corpo summary::-webkit-details-marker { display: none; }
.guia-recursos-corpo summary::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin: -4px 4px 0 0;
	border-right: 2px solid #8a8496;
	border-bottom: 2px solid #8a8496;
	transform: rotate(45deg);
	transition: transform .15s ease, margin .15s ease;
}
.guia-recursos-corpo details[open] > summary::after {
	margin-top: 4px;
	border-color: var(--geo-purple, rgb(83, 62, 118));
	transform: rotate(-135deg);
}
.guia-recursos-corpo details[open] > summary { color: var(--geo-purple, rgb(83, 62, 118)); }
.guia-recursos-corpo summary:hover { background: rgba(83, 62, 118, .06); }
.guia-recursos-corpo summary:focus-visible { outline: 2px solid var(--geo-purple-ring, rgba(83, 62, 118, .3)); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .guia-recursos-corpo summary::after { transition: none; } }
.guia-recursos-corpo details p { margin: 6px 0 2px; color: #5c5668; }
.guia-recursos-corpo a { color: var(--geo-purple, rgb(83, 62, 118)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.guia-recursos-pe {
	border-top: 1px solid #ece9f1;
	background: #faf9fc;
	padding: 10px 16px 12px;
}
.guia-recursos-pe p { margin: 0 0 8px; font-size: 11.5px; color: #6b6577; }
.guia-recursos-bts, .guia-aviso-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.guia-recursos-bt, .guia-aviso-bt {
	height: 30px;
	padding: 0 12px;
	border: 1px solid #d9d4e2;
	border-radius: var(--geo-radius-md, 6px);
	background: #fff;
	color: var(--geo-purple, rgb(83, 62, 118));
	font: 500 12px/28px "Poppins", "Segoe UI", Arial, sans-serif;
	cursor: pointer;
}
.guia-recursos-bt--p, .guia-aviso-bt--p {
	border-color: var(--geo-purple, rgb(83, 62, 118));
	background: var(--geo-purple, rgb(83, 62, 118));
	color: #fff;
}
.guia-recursos-bt:hover, .guia-aviso-bt:hover { background: rgba(83, 62, 118, .06); }
.guia-recursos-bt--p:hover, .guia-aviso-bt--p:hover { background: var(--geo-purple-hover, rgb(100, 76, 140)); }
/* anel por fora, forte o bastante sobre o roxo; o seletor com .app-topo vence
 * o .app-topo button:focus-visible (anel por dentro, invisivel no roxo) */
.guia-recursos-bt:focus-visible, .guia-aviso-bt:focus-visible,
.app-topo .guia-recursos-bt:focus-visible, .app-topo .menu-explica-link:focus-visible {
	outline: 2px solid rgba(83, 62, 118, .55);
	outline-offset: 2px;
}

/* Balao de aviso (GuiaRecursos.aviso) */
.guia-aviso {
	position: fixed;
	z-index: 2595;
	width: 330px;
	max-width: calc(100vw - 16px);
	padding: 12px 14px;
	background: #fff;
	color: #3b3446;
	border: 1px solid #e3e0e8;
	border-radius: var(--geo-radius-lg, 8px);
	box-shadow: 0 10px 30px rgba(30, 20, 50, .24);
	font: 400 12.5px/1.5 "Poppins", "Segoe UI", Arial, sans-serif;
}
.guia-aviso::before {
	content: "";
	position: absolute;
	top: -7px;
	left: var(--guia-seta, 24px);
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid #e3e0e8;
	border-top: 1px solid #e3e0e8;
	transform: rotate(45deg);
}
.guia-aviso--topo { top: 136px; left: 50%; transform: translateX(-50%); }
.guia-aviso--topo::before, .guia-aviso--sem-seta::before { display: none; }
.guia-aviso-titulo { display: block; margin: 0 22px 4px 0; font-weight: 600; font-size: 13px; color: #2b2733; }
.guia-aviso p { margin: 0 0 10px; }
.guia-aviso-x {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: #8a8496;
	font: 400 18px/24px Arial, sans-serif;
	cursor: pointer;
}
.guia-aviso-x:hover { background: rgba(83, 62, 118, .08); }

/* Menus de Projeto e Redes quando ainda nao ha' nada: explicam em vez de
 * mostrar lista vazia. Largura fixa (o dropdown de projeto ja' tem a sua). */
.menu-explica { padding: 4px 8px 6px; white-space: normal; font-family: "Poppins", "Segoe UI", Arial, sans-serif; }
.menu-explica-ilus { display: block; width: 100%; height: auto; margin: 2px 0 8px; border-radius: 6px; background: #f6f5f1; }
.menu-explica h4 { margin: 0 0 4px; font: 600 13px/1.35 "Poppins", "Segoe UI", Arial, sans-serif; color: #2b2733; }
.menu-explica p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #5c5668; }
.menu-explica .guia-recursos-bts { margin-bottom: 6px; }
.menu-explica-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	background: transparent;
	padding: 4px 0;
	margin-right: 12px;
	color: var(--geo-purple, rgb(83, 62, 118));
	font: 500 12px/1.3 "Poppins", "Segoe UI", Arial, sans-serif;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.menu-como-funciona { padding: 2px 8px 4px; }
.dropdown-menu-redes .menu-explica { width: 330px; }

/* Faixa do projeto: projeto ainda vazio e minimizada */
.faixa-projeto-vazio b { font-weight: 700; }
/* sem espaco, a dica do vazio encolhe com reticencias antes do nome do projeto */
.faixa-projeto-vazio:not([hidden]) { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.faixa-projeto-texto { flex: 0 1 auto; min-width: 60px; }
/* projeto vazio: o proximo passo entra no lugar do "tudo o que desenhar..." */
.faixa-projeto.vazio .faixa-projeto-texto > span:not(.faixa-projeto-curto) { display: none; }
.faixa-projeto.vazio .faixa-projeto-curto { display: inline; }
.faixa-projeto.minimizada { gap: 6px; padding-right: 4px; }
.faixa-projeto.minimizada .faixa-projeto-texto > span:not(.faixa-projeto-curto),
.faixa-projeto.minimizada .faixa-projeto-sep,
.faixa-projeto.minimizada #faixa-projeto-guia,
.faixa-projeto.minimizada .faixa-projeto-sair,
.faixa-projeto.minimizada .faixa-projeto-fechar,
.faixa-projeto.minimizada #faixa-projeto-vazio { display: none; }
.faixa-projeto-curto { display: none; }
.faixa-projeto.minimizada .faixa-projeto-curto { display: inline; }
/* Minimizar/Expandir: dois rotulos com data-i18n proprio, troca por CSS */
.faixa-rotulo-exp,
.faixa-projeto.minimizada .faixa-rotulo-min { display: none; }
.faixa-projeto.minimizada .faixa-rotulo-exp { display: inline; }
/* abaixo de 1100px o Minimizar some (regra antiga), mas a minimizada precisa
 * do Expandir: sem ele nao sobra X nem Sair */
@media (max-width: 1100px) {
	.faixa-projeto.minimizada .faixa-projeto-nunca { display: inline-block; }
}
.faixa-projeto button:focus-visible { outline: 2px solid #4a3b00; outline-offset: 1px; }

/* Faixa do filtro de Redes: diz o que esta' escondido e tem volta */
.faixa-redes {
	position: fixed;
	top: 90px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2569;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 420px);
	height: 32px;
	padding: 0 4px 0 12px;
	border-radius: 16px;
	background: var(--geo-purple, rgb(83, 62, 118));
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	font: 500 12px/1.2 "Poppins", "Segoe UI", Arial, sans-serif;
	white-space: nowrap;
}
.faixa-redes[hidden] { display: none !important; }
.faixa-projeto:not([hidden]) ~ .faixa-redes { top: 132px; }
.faixa-redes-texto { overflow: hidden; text-overflow: ellipsis; }
.faixa-redes-texto b { font-weight: 700; }
.faixa-redes-nota { opacity: .75; }
.faixa-redes button {
	flex: 0 0 auto;
	height: 24px;
	padding: 0 10px;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font: 600 11.5px/24px "Poppins", "Segoe UI", Arial, sans-serif;
	cursor: pointer;
}
.faixa-redes button:hover, .faixa-redes button:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.faixa-redes button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#btn-filtro-redes.filtrando { background: var(--geo-purple-soft, rgba(83, 62, 118, .10)); }
#btn-filtro-redes-count .redes-cont {
	display: inline-block;
	margin-left: 5px;
	padding: 0 7px;
	border-radius: 9px;
	background: var(--geo-purple, rgb(83, 62, 118));
	color: #fff;
	font: 500 11px/18px "Poppins", "Segoe UI", Arial, sans-serif;
}
@media (max-width: 1100px) {
	.faixa-redes { max-width: calc(100vw - 120px); }
	.faixa-redes-nota { display: none; }
}

/* Tela de conversao: explicacao curta no rodape, entre Cancelar e o botao */
.conv-dica {
	display: inline-block;
	max-width: calc(100% - 330px);
	margin-left: 12px;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 400 12px/1.3 "Poppins", "Segoe UI", Arial, sans-serif;
	color: #5c5668;
}

/* Menu de Redes: sem nenhuma rede, so' a explicacao; com redes, a lista de sempre */
.dropdown-menu-redes > .menu-explica { display: none; }
.dropdown-menu-redes.sem-redes > li { display: none !important; }
.dropdown-menu-redes.sem-redes > .menu-explica { display: block !important; }

/* "Como funciona" das faixas: botao ? compacto (o texto vai na dica) */
.faixa-ajuda-ico {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 11px;
	background: transparent;
	color: #4a3b00;
	font: 700 12px/19px "Poppins", "Segoe UI", Arial, sans-serif;
	text-align: center;
	cursor: pointer;
	opacity: .8;
}
.faixa-ajuda-ico:hover, .faixa-ajuda-ico:focus-visible { opacity: 1; outline: none; background: rgba(74, 59, 0, .1); }
.faixa-ajuda-ico:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.faixa-redes .faixa-ajuda-ico--clara { width: 22px; height: 22px; padding: 0; border-radius: 11px; border: 1.5px solid rgba(255, 255, 255, .8); background: transparent; color: #fff; font: 700 12px/19px "Poppins", "Segoe UI", Arial, sans-serif; text-decoration: none; }
.faixa-redes .faixa-ajuda-ico--clara:hover { background: rgba(255, 255, 255, .18); }
/* ate' 1440px a frase longa sai (a faixa cortava o nome do projeto em 1366) */
@media (max-width: 1440px) {
	.faixa-projeto .faixa-projeto-depois,
	.faixa-projeto .faixa-projeto-sep { display: none; }
	.faixa-redes-naofiltra { display: none; }
}

/* Botao "Abrir chamado" do guia enquanto o print da tela e' tirado */
.guia-recursos-bt.guia-recursos-bt--ocupado { cursor: progress; opacity: .85; padding-left: 30px; position: relative; }
.guia-recursos-bt.guia-recursos-bt--ocupado::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	box-sizing: border-box;
	border: 2px solid #e5e1ee;
	border-top-color: var(--geo-purple, rgb(83, 62, 118));
	border-radius: 50%;
	animation: geo-gira .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .guia-recursos-bt.guia-recursos-bt--ocupado::before { animation: none; } }

/* Menus que explicam: botao principal e links centralizados (pedido do Carlos) */
.menu-explica .guia-recursos-bts { justify-content: center; margin-bottom: 4px; }
.menu-explica-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
.menu-explica-links .menu-explica-link { margin-right: 0; }

/* Cabecalho recolhido (#topo.app-topo-reduced): a faixa de Redes e o guia
 * sobem os 40px como a faixa do projeto (50px, 36 de altura + 6 de folga) */
.app-topo-reduced ~ .faixa-redes { top: 50px; }
.app-topo-reduced ~ .faixa-projeto:not([hidden]) ~ .faixa-redes { top: 92px; }
.app-topo-reduced ~ .guia-recursos { top: 56px; }

/* Guia aberto: as faixas centralizam no espaco a esquerda dele, senao o guia
 * cobria o X do projeto e o "Mostrar tudo" das Redes em 1366 */
body.guia-aberto .faixa-projeto,
body.guia-aberto .faixa-redes {
	left: calc((100vw - 497px) / 2);
	max-width: calc(100vw - 533px);
}
/* ... e com o painel de camadas aberto (overlay de 290px a esquerda), entre
 * ele e o guia; a paleta, que expande para a esquerda ao passar o mouse,
 * fica por cima do guia enquanto expandida (o guia e' 2590) */
body.guia-aberto:has(.layerPanel-west-icon.expanded) .faixa-projeto,
body.guia-aberto:has(.layerPanel-west-icon.expanded) .faixa-redes {
	left: calc(320px + (100vw - 817px) / 2);
	max-width: calc(100vw - 841px);
}
body.guia-aberto .paleta-container:has(#paleta-drag.paleta-expandida) { z-index: 2595; }

/* "Preparando o chamado": o texto quebra em vez de cortar com reticencias */
.chamado-preparando .mapa-ocupado-texto { white-space: normal; }

/* Textos que dependem do perfil (locales com data-perfil): quem e' Projetista
 * Sem Conversao nao ve "converta" (nao tem o botao) e ve o caminho dele */
[data-perfil~="sem-conversao"],
body.perfil-sem-conversao [data-perfil~="converter"] { display: none; }
body.perfil-sem-conversao li[data-perfil~="sem-conversao"] { display: list-item; }
body.perfil-sem-conversao span[data-perfil~="sem-conversao"] { display: inline; }

/* Menu de projeto de quem ja' teve projetos (todos fechados) e a entrada do
 * guia no menu de Redes, sob o Aplicar */
.menu-explica .menu-explica-nota { margin: -4px 0 10px; font-size: 11.5px; color: #6b6577; }
.redes-como-funciona { padding: 4px 0 0; text-align: center; }
.redes-como-funciona .menu-explica-link { margin-right: 0; }

/* ---------- Janela Propriedades nova (WindowSelectionNova) ----------
 * Escolhida em Configuracoes do usuario; a classica (#WindowSelection com
 * arvore) nao usa nada daqui. Tudo escopado em .janela-propriedades-nova /
 * .jp para nao herdar as regras genericas de formulario das janelas. */
body .ui-dialog.window.janela-propriedades-nova .ui-dialog-content.jp-conteudo {
	padding: 0 !important;
	overflow: hidden;
}
.jp {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	color: #2b2533;
	font: 13px/1.45 "Poppins", "Segoe UI", Arial, sans-serif;
}
.jp button { font-family: inherit; }
.jp .icone-svg { flex: none; }
.jp-ico-antigo { display: inline-block; width: 16px; height: 16px; background-size: 16px !important; flex: none; }

/* cabecalho: simbolo da camada, tipo, nome, chips */
.jp-cab {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 12px 10px 8px 14px;
}
.jp-simb {
	width: 34px; height: 34px; border-radius: 8px;
	background: var(--geo-purple-soft);
	display: grid; place-items: center;
}
.jp-ico-camada { width: 20px; height: 20px; object-fit: contain; display: inline-block; flex: none; }
.jp-tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6d6680; font-weight: 500; }
.jp-nome { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.jp-ib--chip { width: 18px; height: 18px; border-radius: 999px; }
.jp-simb .icone-svg { color: var(--geo-purple); }
.jp-cab-bts { display: flex; gap: 2px; }
.jp-ib {
	width: 28px; height: 28px; border: 0; border-radius: 6px; background: none;
	color: #6d6680; display: inline-grid; place-items: center; cursor: pointer; padding: 0;
}
.jp-ib:hover, .jp-ib:focus-visible { background: #f4f1f8; color: #2b2533; outline: none; }
.jp-ib[disabled] { opacity: .35; cursor: default; background: none; }
.jp-ib[aria-pressed="true"] { color: var(--geo-purple); }
.jp-ib--mini { width: 22px; height: 22px; }

/* varios no ponto / voltar ao pai */
.jp-nav {
	display: flex; align-items: center; gap: 4px;
	margin: 0 12px 8px; padding: 3px 4px 3px 6px;
	border-radius: 8px; background: #f6f3fa; color: #5f5878; font-size: 12px;
}
.jp-nav > span { flex: 1; text-align: center; }
.jp-lnk {
	display: inline-flex; align-items: center; gap: 5px;
	border: 0; background: none; padding: 4px 6px; border-radius: 5px;
	font: 500 12px "Poppins", "Segoe UI", Arial, sans-serif; color: var(--geo-purple); cursor: pointer;
}
.jp-lnk:hover, .jp-lnk:focus-visible { background: #fff; outline: none; text-decoration: underline; }

/* acoes: principal roxa, com rotulo em grade, "Mais" com menu */
.jp-acoes { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 12px 10px; border-bottom: 1px solid #ece8f1; }
.jp-bt {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 0; height: 32px; padding: 0 10px;
	border: 1px solid #e3dee9; border-radius: 6px; background: #fff; color: #2b2533;
	font: 500 12.5px "Poppins", "Segoe UI", Arial, sans-serif; cursor: pointer; white-space: nowrap;
}
.jp-bt-rot { white-space: nowrap; }
.jp-bt:hover, .jp-bt:focus-visible { background: #f6f3fa; border-color: #cfc6dc; outline: none; }
.jp-bt--pri { height: 36px; background: var(--geo-purple); border-color: var(--geo-purple); color: #fff; font-size: 13px; }
.jp-bt--pri:hover, .jp-bt--pri:focus-visible { background: var(--geo-purple-hover); border-color: var(--geo-purple-hover); color: #fff; }
.jp-bt[disabled] { opacity: .5; cursor: not-allowed; }
.jp-bt[aria-expanded="true"] { background: #f1ecf8; border-color: #cfc6dc; }
.jp-cadeado { display: inline-grid; place-items: center; color: #8a5a00; }
.jp-bt--pri .jp-cadeado { color: #fff; }
/* "Todas as acoes" (antes o menu "Mais"): grade no proprio painel, abaixo
 * da fila de botoes; recolhe clicando de novo ou com Esc */
.jp-bt-n { font-size: 11px; font-weight: 600; color: var(--geo-purple); background: var(--geo-purple-soft); border-radius: 999px; padding: 0 6px; }
.jp-bt--mais[aria-expanded="true"] > .icone-svg:last-child { transform: rotate(180deg); }
.jp-todas {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 4px;
	max-height: min(300px, 45vh); overflow-y: auto;
	padding: 4px; border: 1px solid #e3dee9; border-radius: 8px; background: #fbfafd;
}
.jp-todas-it {
	display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
	border: 0; background: none; border-radius: 6px; padding: 6px 8px; text-align: left;
	font: 12.5px "Poppins", "Segoe UI", Arial, sans-serif; color: #2b2533; cursor: pointer;
}
.jp-todas-rot { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.jp-todas-it:hover, .jp-todas-it:focus-visible { background: #f1ecf8; outline: none; }
.jp-todas-it[disabled] { opacity: .45; cursor: not-allowed; }
.jp-todas-sep { grid-column: 1 / -1; height: 0; margin: 3px 2px; border-top: 1px solid #ece8f1; }
.jp-todas .jp-perigo { color: #b42318; }
.jp-todas .jp-perigo:hover, .jp-todas .jp-perigo:focus-visible { background: #fdecea; }
/* Acoes em chips: botao branco 40x36 com o icone colorido da janela classica
 * (20 px), borda e sombra de tecla para ler como botao; nome so' na dica */
.jp-acoes--chips { gap: 8px; padding-bottom: 12px; }
/* colunas repartidas pelo JS (_equilibraChips) para as linhas sairem
 * cheias; sem ele, o quanto couber */
.jp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.jp-chip {
	position: relative;
	display: inline-grid; place-items: center; width: 100%; min-width: 0; height: 36px; padding: 0;
	border: 1px solid #d6d0e0; border-bottom-color: #bfb7cd; border-radius: 7px;
	background: #fff; color: #2b2533; cursor: pointer;
	box-shadow: 0 1px 0 rgba(40, 28, 64, .08), 0 1px 3px rgba(40, 28, 64, .08);
	transition: background-color .12s, border-color .12s, box-shadow .12s, transform .08s;
}
.jp-chip .icone-svg { width: 20px; height: 20px; }
.jp-chip:hover { background: #f8f5fc; border-color: #b9a9d6; box-shadow: 0 2px 6px rgba(83, 62, 118, .18); }
.jp-chip:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.jp-chip:focus-visible { outline: none; border-color: var(--geo-purple); box-shadow: 0 0 0 3px var(--geo-purple-ring); }
.jp-chip[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* o nome fica para o leitor de tela; quem ve le' na dica */
.jp-chip .jp-todas-rot {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.jp-chip .jp-bt-n {
	position: absolute; top: -6px; right: -6px; min-width: 16px; padding: 0 4px; line-height: 16px;
	background: #fff; border: 1px solid #d9cdec; color: var(--geo-purple); font-size: 10px; text-align: center;
}
.jp-chip .jp-cadeado {
	position: absolute; top: -5px; right: -5px; width: 16px; height: 16px;
	border-radius: 999px; background: #fff5df; border: 1px solid #f1d9a6; color: #8a5a00;
}
/* Excluir: no fim, separado; o vermelho aparece tambem na borda ao passar */
.jp-chip.jp-perigo:hover { background: #fdecea; border-color: #f4c7c3; }
.jp-chips > .jp-trava { display: flex; min-width: 0; }
.jp-trava > .jp-chip { pointer-events: none; }
/* acao travada (cadeado ou trabalhando): o title fica num span em volta,
 * porque botao disabled nao dispara mouseover em todo navegador */
.jp-trava { display: inline-flex; min-width: 0; }
.jp-acoes > .jp-trava, .jp-todas > .jp-trava { display: flex; }
.jp-trava > .jp-bt, .jp-trava > .jp-todas-it { flex: 1 1 auto; pointer-events: none; }
/* esperando as propriedades do elemento: parado, mas sem cara de bloqueado */
.jp-bt.jp-bt--espera[disabled], .jp-todas-it.jp-bt--espera[disabled] { opacity: .7; }
.jp-trava:has(> .jp-bt--espera) { cursor: progress; }
.jp-aviso {
	display: flex; gap: 8px; align-items: flex-start;
	margin: 8px 12px 0; padding: 8px 10px; border-radius: 8px;
	background: #fff5df; color: #8a5a00; font-size: 12px;
}
.jp-aviso .icone-svg { margin-top: 2px; }

/* abas e corpo */
.jp-abas { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid #ece8f1; }
.jp-aba {
	border: 0; background: none; margin-bottom: -1px; padding: 8px 8px;
	border-bottom: 2px solid transparent; color: #6d6680; font-weight: 500; font-size: 12.5px; cursor: pointer;
}
.jp-aba[aria-selected="true"] { color: var(--geo-purple); border-bottom-color: var(--geo-purple); }
.jp-n { background: var(--geo-purple-soft); color: var(--geo-purple); border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 600; }
.jp-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 10px; }
.jp-props { margin: 0; }
.jp-prop {
	display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) 24px;
	gap: 8px; align-items: center; min-height: 30px; padding: 3px 6px 3px 14px;
}
.jp-prop:hover { background: #f8f6fb; }
.jp-prop dt { color: #6d6680; font-weight: 400; overflow-wrap: anywhere; }
.jp-prop dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.jp-prop .jp-prop-vazio { color: #a7a1b5; font-weight: 400; }
.jp-prop .jp-copiar { opacity: 0; }
.jp-prop:hover .jp-copiar, .jp-prop .jp-copiar:focus-visible { opacity: 1; }
.jp-vazios { margin: 6px 8px 0; }
.jp-carregando, .jp-vazio { padding: 18px 14px; color: #8b8499; text-align: center; }
/* falha ao carregar: diz o que houve e oferece de novo (antes parecia elemento vazio) */
.jp-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #8a1c13; font-size: 12.5px; }
.jp-erro .jp-lnk { padding: 2px 4px; }
.jp-legados { display: none !important; }
.jp-filhos { list-style: none; margin: 0; padding: 4px 0; }
.jp-filhos button {
	display: flex; align-items: center; gap: 10px; width: 100%;
	border: 0; background: none; padding: 7px 12px 7px 14px; text-align: left; cursor: pointer; color: #2b2533;
}
.jp-filhos button:hover, .jp-filhos button:focus-visible { background: #f6f3fa; outline: none; }
.jp-filho-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jp-filho-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-filho-txt small { color: #6d6680; font-size: 11.5px; }
.jp-rodape {
	display: flex; align-items: center; gap: 4px;
	border-top: 1px solid #ece8f1; padding: 5px 10px 5px 14px; color: #8b8499; font-size: 11.5px;
}
.jp-mono { font-family: Consolas, "Courier New", monospace; color: #5f5878; }

/* aba Dados: "Filtrar campos" (mais de 8 campos) */
.jp-filtro { position: relative; margin: 6px 12px 4px; }
.jp-filtro .icone-svg { position: absolute; left: 8px; top: 8px; color: #a7a1b5; pointer-events: none; }
.jp .jp-filtro-campos {
	width: 100%; height: 30px; box-sizing: border-box; margin: 0; padding: 0 8px 0 28px;
	border: 1px solid #e3dee9; border-radius: 6px; background: #fff; box-shadow: none;
	font: 13px "Poppins", "Segoe UI", Arial, sans-serif; color: #2b2533;
}
.jp .jp-filtro-campos:focus { outline: none; border-color: var(--geo-purple); box-shadow: 0 0 0 3px var(--geo-purple-ring); }

/* aba Fibras do lance: contagem por condicao, ocupacao e lista por tubete */
.jp-fib-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 14px 4px; }
.jp-fib-total { font-weight: 600; margin-right: 2px; }
.jp-fib-cont { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; }
.jp-fib-ocup { display: flex; align-items: center; gap: 8px; padding: 2px 14px 6px; font-size: 11.5px; color: #6d6680; }
.jp-fib-barra { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 999px; background: #ece8f1; overflow: hidden; }
.jp-fib-barra > span { display: block; height: 100%; background: #2f6fd6; }
.jp-fib-pct { flex: none; white-space: nowrap; }
.jp-fib-topo { padding: 0 8px 4px; }
.jp-fib-tubete {
	position: sticky; top: 0; z-index: 1; padding: 5px 14px;
	background: #f8f6fb; border-top: 1px solid #ece8f1; border-bottom: 1px solid #f1eef5;
	font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #7a7290;
}
.jp-fib-lista { list-style: none; margin: 0; padding: 2px 0; }
.jp-fib-linha {
	display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
	border: 0; background: none; padding: 5px 10px 5px 14px; text-align: left; color: #2b2533; font: inherit;
}
button.jp-fib-linha { cursor: pointer; }
button.jp-fib-linha:hover, button.jp-fib-linha:focus-visible, .jp-fib-item--aberta > .jp-fib-linha { background: #f6f3fa; outline: none; }
button.jp-fib-linha > .icone-svg { color: #a7a1b5; }
.jp-fib-item--aberta > .jp-fib-linha > .icone-svg { transform: rotate(180deg); }
.jp-fib-num { flex: none; min-width: 30px; text-align: right; font: 600 12.5px Consolas, "Courier New", monospace; color: #2b2533; }
.jp-fib-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.jp-fib-cor { font-weight: 500; overflow-wrap: anywhere; }
/* cor da fibra e, quando a lista nao da para agrupar por tubete (tubetes
 * vizinhos da mesma cor), a cor do tubete ao lado */
.jp-fib-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.jp-fib-tub { color: #6d6680; font-size: 11.5px; overflow-wrap: anywhere; }
.jp-fib-serv { color: #6d6680; font-size: 11.5px; overflow-wrap: anywhere; }
.jp-fib-cond { flex: none; max-width: 45%; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; overflow-wrap: anywhere; }
.jp-fib-cond--servico { background: #e8f0fe; color: #1a56b0; border-color: #c9dbfb; }
.jp-fib-cond--livre { background: #e6f4ea; color: #1e7a34; border-color: #c4e5cd; }
.jp-fib-cond--morta { background: #ededed; color: #4d4d4d; border-color: #d9d9d9; }
.jp-fib-cond--defeituosa { background: #fdecea; color: #b42318; border-color: #f6c9c4; }
.jp-fib-cond--reserva { background: #fff5df; color: #8a5a00; border-color: #f1d9a6; }
.jp-fib-cond--outro, .jp-fib-cond--indefinida { background: #f4f1f8; color: #5f5878; border-color: #e7e2ee; }
/* com servico numa fibra marcada (morta, defeituosa, reserva): chama a atencao */
.jp-fib-cond.jp-fib-cond--marcada { background: #fdecea; color: #b42318; border-color: #f6c9c4; }
.jp-fib-exp { padding: 4px 12px 10px 54px; background: #f6f3fa; }
.jp-fib-bts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jp-fib-bts > .jp-bt, .jp-fib-bts > .jp-trava { flex: 0 1 auto; }
.jp-fib-aviso { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; color: #8a5a00; font-size: 12px; }
.jp-fib-aviso .icone-svg { margin-top: 2px; }
/* Aba Fibras em bolinhas (28/10): cor da fibra no fundo, condicao no contorno */
.jp-fib-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 2px 8px 6px 14px; }
.jp-fib-vista { display: inline-flex; border: 1px solid #e2deea; border-radius: 8px; overflow: hidden; }
.jp-fib-vista > button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 0; background: #fff; color: #6d6680; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.jp-fib-vista > button + button { border-left: 1px solid #e2deea; }
.jp-fib-vista > button[aria-pressed="true"] { background: var(--geo-purple-soft); color: var(--geo-purple); }
.jp-fib-vista > button:focus-visible { outline: 2px solid var(--geo-purple); outline-offset: -2px; }
.jp-fbols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 9px 6px; padding: 10px 14px 12px; }
.jp-fbol {
	position: relative; box-sizing: border-box; width: 100%; max-width: 26px; aspect-ratio: 1 / 1; justify-self: center;
	border-radius: 50%; border: 1px solid rgba(0, 0, 0, .28); padding: 0; margin: 0; display: grid; place-items: center;
	font: 600 10.5px/1 Consolas, "Courier New", monospace; background: #f1eef5; color: #1f1b2e;
}
button.jp-fbol { cursor: pointer; }
button.jp-fbol:hover { transform: scale(1.1); }
.jp-fbol--n3 { font-size: 9px; letter-spacing: -.03em; }
.jp-fbol--n4 { font-size: 7.5px; letter-spacing: -.05em; }
.jp-fbol--semcor { background: repeating-linear-gradient(45deg, #f4f1f8 0 3px, #e3dded 3px 6px); color: #2b2533; }
.jp-fbol--servico, .jp-fbol--outro { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #1a56b0; }
.jp-fbol--outro { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #8fb3ea; }
.jp-fbol--reserva { outline: 2px dashed #b77900; outline-offset: 1px; }
.jp-fbol--x-reserva { outline: 1.5px dashed #b77900; outline-offset: 4px; }
.jp-fbol--indefinida { outline: 2px dotted #8a8299; outline-offset: 1px; }
.jp-fbol--morta::after, .jp-fbol--defeituosa::after, .jp-fbol--x-morta::after, .jp-fbol--x-defeituosa::after {
	content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px;
	transform: rotate(-45deg); background: #4d4d4d; box-shadow: 0 0 0 1px #fff; pointer-events: none;
}
.jp-fbol--defeituosa::after, .jp-fbol--x-morta::after, .jp-fbol--x-defeituosa::after { background: #b42318; }
.jp-fbol[aria-pressed="true"] { outline: 2px solid var(--geo-purple); outline-offset: 2px; transform: scale(1.12); z-index: 1; }
.jp-fbol--servico[aria-pressed="true"], .jp-fbol--outro[aria-pressed="true"], .jp-fbol--x-reserva[aria-pressed="true"] { outline-offset: 4.5px; }
button.jp-fbol:focus-visible { outline: 2px solid var(--geo-purple); outline-offset: 3px; }
.jp-fbol-leg { position: relative; display: inline-block; box-sizing: border-box; width: 10px; height: 10px; margin: 0 6px 0 2px; vertical-align: -1px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .35); background: #fff; }
.jp-fbol-leg.jp-fbol--servico { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1a56b0; }
.jp-fbol-leg.jp-fbol--outro { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #8fb3ea; }
.jp-fbol-leg.jp-fbol--reserva, .jp-fbol-leg.jp-fbol--indefinida { outline-width: 1.5px; outline-offset: 1px; }
.jp-fbol-leg::after { left: -2px; right: -2px; height: 1.5px; }
.jp-fib-card { margin: 0 14px 12px; border: 1px solid var(--geo-purple); border-radius: 10px; padding: 10px 12px; background: #f6f3fa; display: flex; flex-direction: column; gap: 6px; }
.jp-fib-card-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.jp-fib-card-cab b { font-weight: 600; color: #2b2533; }
.jp-fib-card .jp-fib-cond { max-width: none; }
.jp-fib-card-sub, .jp-fib-card-serv { font-size: 12px; color: #6d6680; overflow-wrap: anywhere; }
.jp-fib-dica { margin: 0 14px 10px; font-size: 12px; color: #6d6680; }
.jp-bt--pri .jp-bt-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* aba Cabos da caixa: lances com ponta nela */
.jp-legenda { padding: 8px 14px 4px; color: #6d6680; font-size: 12px; }
.jp-cabos { list-style: none; margin: 0; padding: 2px 0; }
.jp-cabos li { display: flex; flex-direction: column; padding: 6px 14px; border-bottom: 1px solid #f4f1f8; }
.jp-cabos-cod { font-weight: 600; overflow-wrap: anywhere; }
.jp-cabos small { color: #6d6680; font-size: 11.5px; overflow-wrap: anywhere; }

/* ---------- Painel mais leve (30/10) ----------
 * O time achou o painel de 27/10 pesado: ~300 px de chips e 4 linhas de
 * botoes antes do 1o dado da CTO em 1366x768. Agora: cabecalho com o nome e
 * uma linha de texto, acoes numa linha (principal, Editar, Mais) e abas
 * segmentadas; o dado comeca a ~180 px. Estas regras vencem as de cima. */
.jp { position: relative; }
.jp-cab { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; padding: 12px 8px 10px 14px; }
.jp-simb { width: 22px; height: 22px; background: none; }
.jp-simb .jp-ico-camada { width: 18px; height: 18px; }
.jp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 1px; font-size: 11.5px; color: #6d6680; }
.jp-meta-sep { color: #b8b2c4; }
.jp-meta-proj, .jp-meta-alerta { color: #8a5a00; font-weight: 500; }
.jp-meta-fid { display: inline-flex; align-items: center; gap: 3px; }
.jp-nav-mini { display: inline-flex; align-items: center; margin-right: 2px; }
.jp-nav-n {
	border: 0; background: none; padding: 2px 4px; border-radius: 5px; cursor: pointer;
	font: 500 11.5px "Poppins", "Segoe UI", Arial, sans-serif; color: #5f5878; font-variant-numeric: tabular-nums;
}
.jp-nav-n:hover, .jp-nav-n:focus-visible { background: #f4f1f8; color: #2b2533; outline: none; }
/* acoes numa linha: so' a principal cresce; Editar e Mais no tamanho do rotulo */
.jp-acoes-linha { display: flex; gap: 6px; }
.jp-acoes-linha > .jp-bt, .jp-acoes-linha > .jp-trava { flex: 0 0 auto; min-width: 0; }
.jp-acoes-linha > .jp-bt--pri, .jp-acoes-linha > .jp-trava:has(> .jp-bt--pri) { flex: 1 1 0; }
/* sem principal (lance, poste...): os dois botoes dividem a linha */
.jp-acoes-linha:not(:has(.jp-bt--pri)) > :not(.jp-bt--mais) { flex: 1 1 0; }
.jp-acoes-linha .jp-bt-rot { overflow: hidden; text-overflow: ellipsis; }
.jp-acoes-linha .jp-bt--pri { height: 34px; }
/* trava (projeto, evento): selo no canto, sem roubar a largura do rotulo; o motivo vem no aviso amarelo logo abaixo */
.jp-acoes-linha .jp-cadeado { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 999px; background: #fff5df; border: 1px solid #f1d9a6; }
.jp-acoes-linha .jp-bt--pri .jp-cadeado { color: #8a5a00; }
/* abas segmentadas, mais baixas */
.jp-abas { margin: 10px 12px 2px; padding: 3px; gap: 3px; border: 0; border-radius: 8px; background: #f4f1f8; }
.jp-aba { flex: 1 1 0; margin: 0; padding: 4px 6px; border: 0; border-radius: 6px; font-size: 12px; }
.jp-aba[aria-selected="true"] { background: #fff; color: #2b2533; box-shadow: 0 1px 2px rgba(43, 37, 51, .12); }
/* Fibras: uma frase; as contagens com legenda em "detalhes" */
.jp-fib-resumo--curto { flex-wrap: nowrap; justify-content: space-between; gap: 8px; font-size: 12px; color: #4a4455; }
/* rodape: a chave Nova | Classica (antes o link cinza "Usar a janela classica") */
.jp-rodape--chave { gap: 8px; padding: 6px 10px 6px 14px; }
.jp-chave-rot { margin-right: auto; }
.jp-chave { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: #f1eef5; }
.jp-chave button {
	border: 0; background: none; border-radius: 5px; padding: 3px 9px; cursor: pointer;
	font: 11.5px "Poppins", "Segoe UI", Arial, sans-serif; color: #5f5878;
}
.jp-chave button:hover, .jp-chave button:focus-visible { background: rgba(255, 255, 255, .7); color: #2b2533; outline: none; }
.jp-chave button[aria-pressed="true"] { background: #fff; color: #2b2533; font-weight: 600; box-shadow: 0 1px 2px rgba(43, 37, 51, .12); }
/* aviso das 3 primeiras aberturas, apontando a chave */
.jp-aviso-classica {
	position: absolute; left: 10px; right: 10px; bottom: 44px; z-index: 5;
	padding: 12px 14px; border-radius: 8px; background: #2b2733; color: #fff; font-size: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.jp-aviso-classica b { display: block; margin-bottom: 3px; font-weight: 600; }
.jp-aviso-classica p { margin: 0; color: #ddd8e6; }
.jp-aviso-classica::after {
	content: ""; position: absolute; right: 30px; bottom: -6px;
	width: 12px; height: 12px; background: #2b2733; transform: rotate(45deg);
}
.jp-aviso-classica-bts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.jp-aviso-classica-bts button {
	height: 30px; padding: 0 12px; border: 1px solid #6b6577; border-radius: 6px; background: transparent;
	font: 12px "Poppins", "Segoe UI", Arial, sans-serif; color: #fff; cursor: pointer;
}
.jp-aviso-classica-bts button:hover, .jp-aviso-classica-bts button:focus-visible { border-color: #fff; outline: none; }
.jp-aviso-classica-bts .jp-aviso-classica-ok { border-color: #fff; background: #fff; color: #2b2533; font-weight: 500; }

/* ---------- Janela classica: a mesma chave e o aviso de que existe a nova ---------- */
.ws-chave { float: right; display: inline-flex; gap: 2px; margin-right: 6px; padding: 2px; border-radius: 7px; background: #f1eef5; }
.ws-chave button {
	border: 0; background: none; border-radius: 5px; padding: 2px 9px; cursor: pointer;
	font: 11.5px "Poppins", "Segoe UI", Arial, sans-serif; color: #5f5878;
}
.ws-chave button:hover, .ws-chave button:focus-visible { background: rgba(255, 255, 255, .7); color: #2b2533; outline: none; }
.ws-chave button[aria-pressed="true"] { background: #fff; color: #2b2533; font-weight: 600; box-shadow: 0 1px 2px rgba(43, 37, 51, .12); cursor: default; }
.ws-aviso-nova {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
	margin: 8px 8px 4px; padding: 10px 12px; border-radius: 8px;
	background: #f4effa; border: 1px solid #e2d8f0; color: #2b2533; font: 12px/1.45 "Poppins", "Segoe UI", Arial, sans-serif;
}
.ws-aviso-nova-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.ws-aviso-nova-txt b { font-weight: 600; font-size: 12.5px; }
.ws-aviso-nova-txt span { color: #5f5878; }
.ws-aviso-nova-bts { display: flex; gap: 6px; margin-left: auto; }
.ws-aviso-nova-bts button {
	height: 30px; padding: 0 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
	font: 500 12px "Poppins", "Segoe UI", Arial, sans-serif;
}
.ws-aviso-nova-nao { border: 1px solid #d9d1e5; background: #fff; color: #5f5878; }
.ws-aviso-nova-usar { border: 1px solid var(--geo-purple); background: var(--geo-purple); color: #fff; }
.ws-aviso-nova-usar:hover, .ws-aviso-nova-usar:focus-visible { background: var(--geo-purple-hover); border-color: var(--geo-purple-hover); outline: none; }

/* ---------- Propriedades fixa a direita do mapa ----------
 * Painel com a altura do mapa, sem arrastar nem redimensionar. A paleta de
 * atalhos, o zoom e as faixas do topo andam para a esquerda dele enquanto
 * ele esta aberto (--propriedades-fixa-w vem do JS, pela largura do mapa). */
body .ui-dialog.window.janela-propriedades-fixa {
	border-radius: 0;
	border-width: 0 0 0 1px;
	border-color: rgba(83, 62, 118, .25);
	box-shadow: -8px 0 22px rgba(40, 28, 64, .14);
}
body .ui-dialog.window.janela-propriedades-fixa .ui-dialog-titlebar,
body .ui-dialog.window.janela-propriedades-fixa .ui-dialog-content.ui-widget-content { border-radius: 0; }
body .ui-dialog.window.janela-propriedades-fixa .ui-dialog-titlebar { cursor: default; padding-right: 64px; }
body .ui-dialog.window.janela-propriedades-fixa .ui-dialog-titlebar-minimize { right: 36px; }
body .ui-dialog.window.janela-propriedades-fixa .ui-resizable-handle { display: none !important; }
.paleta-container { transition: right .16s ease; }
body.propriedades-fixa-aberta:not(.paleta-fora-do-canto) .paleta-container {
	right: calc(15px + var(--propriedades-fixa-w, 380px));
}
body.propriedades-fixa-aberta #controle-mapa {
	right: calc(71px + var(--propriedades-fixa-w, 380px));
}
body.propriedades-fixa-aberta.paleta-fora-do-canto #controle-mapa {
	right: calc(10px + var(--propriedades-fixa-w, 380px));
}
body.propriedades-fixa-aberta .faixa-projeto,
body.propriedades-fixa-aberta .faixa-redes {
	left: calc(50% - var(--propriedades-fixa-w, 380px) / 2);
	max-width: calc(100% - var(--propriedades-fixa-w, 380px) - 32px);
}

/* ---------- Lista no ponto do clique (SeletorClique) ---------- */
.seletor-clique {
	/* acima das janelas (3000 + quantidade), abaixo do tooltip .geo-tip (3200) */
	position: fixed; z-index: 3190;
	width: 320px; max-height: min(420px, calc(100vh - 140px));
	display: flex; flex-direction: column;
	background: #fff; color: #2b2533; border: 1px solid #e3dee9; border-radius: 10px;
	box-shadow: 0 12px 32px rgba(40, 28, 64, .24);
	font: 13px/1.4 "Poppins", "Segoe UI", Arial, sans-serif;
}
.seletor-clique::before {
	content: ""; position: absolute; left: -6px; top: var(--sc-pino, 20px);
	width: 10px; height: 10px; background: #fff;
	border-left: 1px solid #e3dee9; border-top: 1px solid #e3dee9; transform: rotate(-45deg);
}
.seletor-clique.sc-esquerda::before { left: auto; right: -6px; transform: rotate(135deg); }
/* arrastada pelo cabecalho: solta do ponto, sem a setinha */
.seletor-clique.sc-solta::before { display: none; }
.seletor-clique.sc-arrastando { box-shadow: 0 16px 40px rgba(40, 28, 64, .3); user-select: none; }
.sc-cab { display: flex; align-items: center; gap: 8px; padding: 9px 8px 7px 14px; border-bottom: 1px solid #ece8f1; cursor: move; }
.sc-cab strong { flex: 1; font-weight: 600; }
.sc-ib {
	width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; padding: 0;
	color: #6d6680; display: inline-grid; place-items: center; cursor: pointer;
}
.sc-ib:hover, .sc-ib:focus-visible { background: #f4f1f8; color: #2b2533; outline: none; }
.sc-busca { position: relative; margin: 8px 10px 2px; }
.sc-busca .icone-svg { position: absolute; left: 8px; top: 8px; color: #a7a1b5; }
.sc-filtro {
	width: 100%; height: 30px; box-sizing: border-box; padding: 0 8px 0 28px;
	border: 1px solid #e3dee9; border-radius: 6px; font: 13px "Poppins", "Segoe UI", Arial, sans-serif; color: #2b2533;
}
.sc-filtro:focus { outline: none; border-color: var(--geo-purple); box-shadow: 0 0 0 3px var(--geo-purple-ring); }
.sc-lista { overflow-y: auto; padding: 0 0 6px; min-height: 0; }
/* Grupo (Caixas, Lances...): faixa clara com linha em cima, para ver onde
 * muda o tipo (pedido do Marcos, 27/10); presa no topo ao rolar */
.sc-grupo {
	display: flex; align-items: center; gap: 8px; padding: 6px 8px 5px 14px;
	position: sticky; top: 0; z-index: 1;
	background: #f8f6fb; border-top: 1px solid #ece8f1; border-bottom: 1px solid #f1eef5;
	font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #7a7290;
}
.sc-linha + .sc-grupo { margin-top: 6px; }
.sc-lista > .sc-grupo:first-child { border-top: 0; }
.sc-grupo .jp-ico-camada { width: 16px; height: 16px; }
.sc-grupo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-grupo-nome em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sc-ocultar {
	display: inline-flex; align-items: center; gap: 4px; flex: none;
	border: 0; background: none; border-radius: 4px; padding: 2px 6px; cursor: pointer;
	font: 500 11px "Poppins", "Segoe UI", Arial, sans-serif; text-transform: none; letter-spacing: 0; color: #6d6680;
}
.sc-ocultar:hover, .sc-ocultar:focus-visible { background: #f4f1f8; color: #2b2533; outline: none; }
.sc-linha { display: flex; align-items: center; padding-right: 8px; }
.sc-linha:hover, .sc-linha:focus-within { background: #f6f3fa; }
.sc-item {
	display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
	border: 0; background: none; padding: 5px 8px 5px 38px; text-align: left; cursor: pointer; color: #2b2533;
}
.sc-item:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--geo-purple); }
.sc-editar {
	flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; padding: 0;
	color: #6d6680; display: inline-grid; place-items: center; cursor: pointer;
}
.sc-editar:hover, .sc-editar:focus-visible { background: #ebe4f5; color: var(--geo-purple); outline: none; }
/* lapis: entre o clique e o cadastro abrir (propriedades chegando) */
body.jp-abrindo-edicao, body.jp-abrindo-edicao * { cursor: progress !important; }
.sc-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-item-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-item-txt small { color: #6d6680; font-size: 11.5px; }
.sc-nada { padding: 14px; color: #8b8499; text-align: center; }
.sc-corpo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* Chips por tipo (com dois ou mais): filtram a lista; de novo, voltam todos */
/* muitos tipos (233 itens, 20 camadas) empurravam a lista para fora da janela:
 * com chips a janela cresce, a faixa para em ~5 linhas e rola sozinha, e a
 * lista guarda o resto */
.seletor-clique.sc-com-tipos { max-height: min(640px, calc(100vh - 140px)); }
.sc-tipos {
	display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 4px;
	flex: none; max-height: min(184px, 25vh); overflow-y: auto; overscroll-behavior: contain;
	border-bottom: 1px solid #f1eef5;
}
.sc-busca, .sc-muitos { flex: none; }
.sc-lista { flex: 1 1 auto; min-height: 96px; }
.sc-tipo {
	display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0;
	border: 1px solid #e3dee9; border-radius: 999px; background: #fff; padding: 2px 8px 2px 6px; cursor: pointer;
	font: 500 12px "Poppins", "Segoe UI", Arial, sans-serif; color: #2b2533;
}
.sc-tipo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sc-tipo em { font-style: normal; color: #7a7290; }
.sc-tipo .jp-ico-camada { width: 14px; height: 14px; flex: none; }
.sc-tipo:hover, .sc-tipo:focus-visible { border-color: var(--geo-purple); outline: none; }
.sc-tipo.sc-tipo-ativo { background: #f4effa; border-color: var(--geo-purple); color: var(--geo-purple); }
.sc-tipo.sc-tipo-ativo em { color: var(--geo-purple); }
/* Grupo recolhivel: o nome vira botao com a setinha */
.sc-grupo-bt {
	display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
	font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.sc-grupo-bt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-grupo-bt .icone-svg { flex: none; transition: transform .15s; }
.sc-grupo-fechado .sc-grupo-bt .icone-svg:first-child { transform: rotate(-90deg); }
.sc-grupo-bt:hover, .sc-grupo-bt:focus-visible { color: #2b2533; outline: none; }
/* Muitos elementos com o mapa longe: aproximar em vez de despejar a lista */
.sc-muitos { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.sc-muitos p { margin: 0; color: #5f5878; }
.sc-aproximar {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px;
	border: 0; border-radius: 6px; background: var(--geo-purple); color: #fff; cursor: pointer;
	font: 600 13px "Poppins", "Segoe UI", Arial, sans-serif;
}
.sc-aproximar:hover, .sc-aproximar:focus-visible { filter: brightness(1.08); outline: none; box-shadow: 0 0 0 3px var(--geo-purple-ring); }
.sc-ver-todos {
	border: 0; background: none; padding: 2px; cursor: pointer; color: var(--geo-purple);
	font: 500 12px "Poppins", "Segoe UI", Arial, sans-serif; text-decoration: underline;
}
.sc-rodape { border-top: 1px solid #ece8f1; padding: 5px 14px; color: #a7a1b5; font-size: 11px; }

/* Chip "ocultas ate recarregar" no canto do mapa */
.propriedades-ocultas {
	position: fixed; z-index: 2575;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 60vw;
	font: 12px "Poppins", "Segoe UI", Arial, sans-serif; color: #5f5878;
}
.propriedades-ocultas-rot {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
	background: rgba(255, 255, 255, .94); border: 1px solid #e3dee9;
}
.propriedades-ocultas button {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 10px; border-radius: 999px;
	background: #fff; border: 1px solid #e3dee9; color: #2b2533; cursor: pointer;
	font: 500 12px "Poppins", "Segoe UI", Arial, sans-serif; box-shadow: 0 2px 6px rgba(40, 28, 64, .12);
}
.propriedades-ocultas button:hover, .propriedades-ocultas button:focus-visible { border-color: var(--geo-purple); outline: none; }
/* "Mostrar todas": a acao do grupo, em roxo, depois das camadas */
.propriedades-ocultas button.propriedades-ocultas-todas { padding: 3px 10px 3px 8px; color: var(--geo-purple); border-color: #d9cdec; }
.propriedades-ocultas button.propriedades-ocultas-todas:hover, .propriedades-ocultas button.propriedades-ocultas-todas:focus-visible { background: #f4effa; }

/* ---------- Ponto de acesso (Aereo | Subterraneo) nos cadastros ----------
 * Seletor segmentado na largura da coluna. O escolhido vem do radio escondido
 * (rv-checked), entao a escolha que o mapa faz ao vincular poste ou caixa
 * subterranea tambem aparece. Antes era cinza, escrito no style pelo JS. */
.ui-dialog.window .seg-acesso { display: flex; width: 100%; }
.ui-dialog.window .seg-acesso > label.btn {
	flex: 1 1 0; min-width: max-content; height: 32px; margin: 0; padding: 0 8px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #d9d4e4; border-radius: 0; background: #fff; color: #555;
	font-weight: 500; box-shadow: none; white-space: nowrap;
}
.ui-dialog.window .seg-acesso > label.btn:first-child { border-radius: 6px 0 0 6px; }
.ui-dialog.window .seg-acesso > label.btn:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.ui-dialog.window .seg-acesso > label.btn:hover { background: var(--geo-purple-soft); color: var(--geo-purple); }
.ui-dialog.window .seg-acesso > label.btn:has(input:checked) { position: relative; z-index: 1; background: var(--geo-purple); border-color: var(--geo-purple); color: #fff; }
.ui-dialog.window .seg-acesso-erro .seg-acesso:not(:has(input:checked)) > label.btn { border-color: #c0392b; }
/* Janela estreita (arrastada/redimensionada): as colunas das linhas marcadas
 * empilham antes de o seletor Aereo/Subterraneo ou os campos ficarem cortados.
 * O container e' a propria linha (nao o form): containment no form inteiro
 * mudaria a referencia de calendarios e dicas posicionados dentro dele.
 * O Drop (cabo GPON) tem o seletor em 1/3 da linha e empilha mais cedo. */
.ui-dialog.window .linha-empilha { container-type: inline-size; }
@container (max-width: 450px) {
	.ui-dialog.window .linha-empilha > [class*="col-xs-"] { width: 100%; }
}
@container (max-width: 590px) {
	.ui-dialog.window .linha-empilha-cedo > [class*="col-xs-"] { width: 100%; }
}

/* Limite invalido (Gestao de Empresas, MEL-34): o campo com min="1" fica
 * :invalid e o Confirmar desabilita sozinho (rv-form-validate), mas a
 * mensagem nativa so' aparece ao submeter -- e o submit nunca acontece. A
 * mensagem fica visivel logo abaixo do campo enquanto ele estiver invalido. */
.campo-invalido-msg { display: none; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #b3261e; }
input:invalid + .campo-invalido-msg { display: block; }

/* Menu do cabecalho aberto: o cabecalho sobe acima das janelas (3000+), mas
 * fica abaixo das confirmacoes modais do noty (500000). Ver
 * IndexBootstrap.initialize (show/hidden.bs.dropdown em .app-topo). */
.app-topo.app-topo--menu-aberto { z-index: 400000 !important; }

/* Acao bloqueada por projeto (cadeado) na Propriedades: com cara de
 * desabilitada, mas clicavel -- o clique explica e oferece abrir o projeto. */
.jp-bt.jp-trancada, .jp-chip.jp-trancada, .jp-todas-it.jp-trancada { opacity: .55; box-shadow: none; }
.jp-bt.jp-trancada:hover, .jp-chip.jp-trancada:hover, .jp-todas-it.jp-trancada:hover { opacity: .8; }