/* =========================================================
   Mapa BTM — tela cheia, mobile first
   Mapa ocupa a tela toda; lista numa gaveta à direita;
   lupa à esquerda abre o spotlight de busca.
   ========================================================= */

:root {
	--azul: #0a4fd6;
	--navy: #111666;
	--ocupado: rgba(255, 0, 0, 0.527);
	--reservado: rgba(255, 217, 0, 0.658);
	--livre: #00ff377e;
	--borda: #e3e3e3;
	--toque: 4.4rem;
	--sombra: 0 2px 10px rgba(0, 0, 0, .18);
	--sat: env(safe-area-inset-top, 0px);
	--sab: env(safe-area-inset-bottom, 0px);
	--sal: env(safe-area-inset-left, 0px);
	--sar: env(safe-area-inset-right, 0px);
	--gaveta: 100vw;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
	margin: 0;
	overflow: hidden;
	font-family: 'Rubik', sans-serif;
	font-size: 1.5rem;
	color: #222;
	background: #fafafa;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior: none;
}
button { font: inherit; cursor: pointer; touch-action: manipulation; }

/* ===== mapa ===== */
.map-container {
	position: fixed;
	inset: 0;
	display: flex;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-x pan-y;   /* a pinça fica por conta do JS */
	background: #fafafa;
}
.map-zoom {
	flex: 0 0 auto;
	width: 100%;                 /* o JS troca pela escala */
	margin: auto;                /* centraliza quando sobra espaço */
}
.map-container__scroll svg { display: block; width: 100%; height: auto; }
.map-container__entrada-saida img { width: 100%; display: block; }

/* cores dos estandes (copiado do site).
   Os paths são recortados pela própria forma (clipPath no JS), então o
   stroke só aparece para dentro: as larguras aqui são o dobro da visual. */
.tooltip { fill: var(--livre); cursor: pointer; }
.tooltip:hover,
.tooltip.is-hover { stroke: var(--navy); stroke-width: 8px; }
.tooltip.is-flash { animation: flash .9s ease-in-out 2; }
@keyframes flash {
	0%, 100% { stroke: var(--navy); stroke-width: 8px; }
	50%      { stroke: #baff28; stroke-width: 20px; }
}

/* material Bione: cor por lote (--cor-lote vem do data.js via JS) */
.tooltip.tem-material { stroke: var(--cor-lote, var(--azul)); stroke-width: 10px; }  /* 5px visíveis */
.tooltip.tem-material:hover,
.tooltip.tem-material.is-hover { stroke: var(--navy); stroke-width: 14px; }
.etiqueta rect { fill: var(--cor-lote, var(--azul)); }
.etiqueta text {
	fill: #fff;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
}
body.filtro-ativo .tooltip:not(.lote-ativo) { opacity: .2; }
body.filtro-ativo .etiqueta:not(.lote-ativo) { opacity: .2; }

/* tooltip */
.tooltipster-sidetip.tooltipster-punk .tooltipster-content { font-size: 1.4rem; }
.tooltip__material {
	display: block;
	margin-top: .4rem;
	padding-top: .4rem;
	border-top: 1px solid rgba(255,255,255,.3);
	font-size: 1.3rem;
	color: #9ec5ff;
}
.tooltip__material em { color: #ddd; font-size: 1.15rem; }
.tooltip__lote {
	display: inline-block;
	padding: .1rem .6rem;
	border-radius: 3px;
	background: var(--cor-lote, var(--azul));
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	margin-right: .4rem;
	vertical-align: middle;
}

/* ===== botões flutuantes (HUD) ===== */
.hud {
	position: fixed;
	top: calc(1.2rem + var(--sat));
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	height: var(--toque);
	min-width: var(--toque);
	padding: 0 1.2rem;
	border: none;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	box-shadow: var(--sombra);
}
.hud:active { background: #0b1050; }
.hud--esq { left: calc(1.2rem + var(--sal)); padding: 0; width: var(--toque); justify-content: center; }
.hud--dir { right: calc(1.2rem + var(--sar)); }
.hud__texto { font-size: 1.4rem; font-weight: 500; }
.hud__badge {
	min-width: 2rem;
	padding: 0 .5rem;
	border-radius: 999px;
	background: #baff28;
	color: var(--navy);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 2rem;
	text-align: center;
}

/* ===== zoom (canto inferior esquerdo) ===== */
.zoom {
	position: fixed;
	left: calc(1.2rem + var(--sal));
	bottom: calc(1.2rem + var(--sab));
	z-index: 20;
	display: inline-flex;
	align-items: center;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--sombra);
}
.zoom__btn {
	min-width: var(--toque);
	height: var(--toque);
	padding: 0 1rem;
	border: none;
	border-right: 1px solid #e3e6ee;
	background: #fff;
	color: var(--navy);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
}
.zoom__btn:last-child { border-right: none; }
.zoom__btn:active { background: #e8ebf7; }
.zoom__btn:disabled { color: #bbb; }
.zoom__btn--texto { font-size: 1.4rem; font-weight: 500; }
.zoom__nivel {
	min-width: 5.2rem;
	height: var(--toque);
	line-height: var(--toque);
	text-align: center;
	font-size: 1.3rem;
	color: #555;
	border-right: 1px solid #e3e6ee;
}

/* ===== gaveta lateral ===== */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: 29;
	background: rgba(17, 22, 102, .35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
body.lista-aberta .backdrop { opacity: 1; pointer-events: auto; }

.drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 30;
	width: var(--gaveta);
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	background: #f7f8fb;
	box-shadow: -4px 0 16px rgba(0, 0, 0, .18);
	transform: translateX(105%);
	transition: transform .22s ease-out;
	will-change: transform;
	padding-top: var(--sat);
}
body.lista-aberta .drawer { transform: none; }

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.2rem 1rem 1.6rem;
	background: var(--navy);
	color: #fff;
}
.drawer__head h2 {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.drawer__fechar {
	width: var(--toque); height: var(--toque);
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 3rem;
	line-height: 1;
}
.drawer__fechar:active { background: rgba(255,255,255,.15); }
.drawer__sub {
	padding: 1rem 1.6rem;
	background: #fff;
	border-bottom: 1px solid var(--borda);
}
.lista__resumo { margin: 0; font-size: 1.25rem; color: #666; line-height: 1.5; }
.lista__resumo-material { color: var(--azul); font-weight: 700; }
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1rem 0 0;
}
.chip {
	--cor-lote: var(--navy);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 3.4rem;
	padding: 0 1.2rem;
	border: 2px solid var(--cor-lote);
	border-radius: 999px;
	background: #fff;
	color: var(--cor-lote);
	font-size: 1.3rem;
	font-weight: 500;
	user-select: none;
}
.chip.is-ativo { background: var(--cor-lote); color: #fff; }
.chip__n {
	min-width: 1.8rem;
	padding: 0 .4rem;
	border-radius: 999px;
	background: rgba(0,0,0,.08);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.8rem;
	text-align: center;
}
.chip.is-ativo .chip__n { background: rgba(255,255,255,.25); }

.lista__itens {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--sab);
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.lista__item {
	display: grid;
	grid-template-columns: 4.8rem 1fr auto;
	align-items: center;
	gap: .4rem 1rem;
	min-height: 5.2rem;
	padding: .8rem 1.6rem;
	border-bottom: 1px solid #ebedf2;
	cursor: pointer;
	line-height: 1.25;
}
.lista__item:active,
.lista__item.is-hover { background: #e8ebf7; }
.lista__item.is-hidden,
.lista__secao.is-hidden { display: none; }
.lista__num {
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--navy);
	text-align: center;
	padding: .4rem 0;
	border-radius: 4px;
	border: 1px solid #111;
}
.lista__item--ocupado   .lista__num { background: var(--ocupado); }
.lista__item--reservado .lista__num { background: var(--reservado); }
.lista__item--livre     .lista__num { background: var(--livre); }
.lista__nome { font-size: 1.4rem; text-transform: uppercase; }
.lista__nome--vazio { color: #999; font-style: italic; text-transform: none; }
.lista__status { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.lista__item--material {
	background: #f1f4fb;
	border-left: 5px solid var(--cor-lote, var(--azul));
	padding-left: calc(1.6rem - 5px);
}
.lista__item--material:active,
.lista__item--material.is-hover { background: #e3e8f7; }
.lista__item--material .lista__num { border-color: var(--cor-lote, var(--azul)); box-shadow: 0 0 0 2px var(--cor-lote, var(--azul)) inset; }
.lista__material { grid-column: 1 / -1; font-size: 1.2rem; color: #333; line-height: 1.35; }
.lista__material b {
	display: inline-block;
	background: var(--cor-lote, var(--azul));
	color: #fff;
	font-size: 1rem;
	padding: .1rem .5rem;
	border-radius: 3px;
	margin-right: .4rem;
	vertical-align: middle;
}
.lista__material em { color: #555; font-size: 1.1rem; }
.lista__secao {
	padding: 1.2rem 1.6rem .6rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--azul);
	text-transform: uppercase;
	letter-spacing: .05em;
	background: #f0f3fa;
	border-bottom: 1px solid var(--borda);
}
.lista__item--extra { cursor: default; }
.lista__item--extra .lista__nome { text-transform: none; }
.lista__num--tipo { font-size: 1.1rem; background: var(--cor-lote, var(--azul)); color: #fff; border-color: var(--cor-lote, var(--azul)); }
.lista__vazio { padding: 2rem 1.6rem; color: #777; text-align: center; }

/* ===== spotlight ===== */
.spotlight {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: calc(12vh + var(--sat)) 1.6rem 1.6rem;
	background: rgba(17, 22, 102, .45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.spotlight[hidden] { display: none; }
.spotlight__caixa {
	width: 100%;
	max-width: 56rem;
	max-height: calc(100vh - 14vh - var(--sat) - 1.6rem);
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
	overflow: hidden;
}
.spotlight__campo {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 1.2rem 0 1.6rem;
	border-bottom: 1px solid var(--borda);
	color: var(--navy);
}
.spotlight__campo input {
	flex: 1 1 auto;
	min-width: 0;
	height: 6rem;
	border: none;
	outline: none;
	font: inherit;
	font-size: 2rem;
	color: #222;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}
.spotlight__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.spotlight__fechar {
	height: 3rem;
	padding: 0 .8rem;
	border: 1px solid #cfd3dc;
	border-radius: 6px;
	background: #f4f5f9;
	color: #666;
	font-size: 1.2rem;
	font-weight: 500;
}
.spotlight__resultados {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.spotlight__resultados:empty { display: none; }
.spotlight__item {
	display: grid;
	grid-template-columns: 4.8rem 1fr auto;
	align-items: center;
	gap: .2rem 1.2rem;
	min-height: 5.2rem;
	padding: .8rem 1.6rem;
	border-bottom: 1px solid #f0f1f5;
	cursor: pointer;
}
.spotlight__item:last-child { border-bottom: none; }
.spotlight__item.is-ativo,
.spotlight__item:active { background: #e8ebf7; }
.spotlight__item .lista__nome { font-size: 1.5rem; }
.spotlight__item .lista__material { font-size: 1.2rem; }
.spotlight__item mark { background: #fff2a8; color: inherit; border-radius: 2px; padding: 0 .1em; }
.spotlight__dica {
	margin: 0;
	padding: 1.2rem 1.6rem;
	font-size: 1.3rem;
	color: #777;
}
.spotlight__dica--vazio { color: #c0392b; }
.spotlight__dica[hidden] { display: none; }

/* ===== hover só onde existe mouse ===== */
@media (hover: hover) {
	.hud:hover { background: #1a2080; }
	.zoom__btn:hover:not(:disabled) { background: #f0f3fa; }
	.lista__item:hover { background: #e8ebf7; }
	.lista__item--material:hover { background: #e3e8f7; }
	.chip:hover:not(.is-ativo) { background: #f0f2fa; }
	.spotlight__item:hover { background: #f0f2fa; }
	.drawer__fechar:hover { background: rgba(255,255,255,.15); }
}

/* ===== iPad em pé (≥ 600px): gaveta não ocupa a tela toda ===== */
@media (min-width: 600px) {
	:root { --gaveta: 38rem; }
}

/* ===== iPad deitado e desktop (≥ 1024px): a gaveta empurra o mapa ===== */
@media (min-width: 1024px) {
	:root { --gaveta: 40rem; }
	body.lista-aberta .map-container { right: var(--gaveta); }
	body.lista-aberta .hud--dir { right: calc(var(--gaveta) + 1.2rem); }
	body.lista-aberta .backdrop { opacity: 0; pointer-events: none; }
	.drawer { box-shadow: none; border-left: 1px solid var(--borda); }
}