/* MÓDULO mapas2026 — cara da SEPEC por cima do módulo de mapas: cantos retos, azul-marinho e laranja, botões grandes. */
:root {
  --mp-primaria: #0f2a52;
  --mp-primaria-escura: #0a1d3a;
  --mp-laranja: #f26a1b;
  --mp-texto: #0f2a52;
  --mp-texto-fraco: #4a5d78;
  --mp-borda: #d3dce8;
  --mp-fundo: #f3f6fa;
  --mp-fonte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mp-raio: 0;
  --mp-sombra: 0 18px 50px rgba(8, 25, 52, .35);
}
.mp-btn, .mp-input, .mp-modal-box, .mp-toast, .mp-sel-escolhido, .mp-vw-obs, .mp-vw-fotos img, .mp-foto img, .mp-ed-ajuda,
.mp-lupa, .mp-vw-tip, .mp-vw-legenda, .mp-lightbox img, .mp-ed-item, .mp-badge { border-radius: 0 !important; }
.mp-btn { font-weight: 700; }
.mp-btn-primary { background: var(--mp-laranja); border-color: var(--mp-laranja); }
.mp-btn-primary:hover { background: #d95a10; border-color: #d95a10; }
.mp-btn.mp-ativo { background: #e7eef8; border-color: var(--mp-primaria); color: var(--mp-primaria); }
.mp-toast-ok { background: #1d6b34; }
.mp-sel-lista li.mp-ativo { background: #e7eef8; box-shadow: inset 4px 0 0 var(--mp-laranja); }
.mp-sel-escolhido { background: #eef7f0; border-color: #1d6b34; color: #124d24; font-size: 15px; }

/* ---------- nome do local que abre o mapa (programação, área do participante) ---------- */
.mp-sp-lugar {
  display: inline-flex; align-items: center; gap: .35rem; padding: 0 .1rem; margin: 0; border: 0; background: none;
  font: inherit; font-weight: 800; color: #0f2a52; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: #f26a1b; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.mp-sp-lugar svg { color: #f26a1b; flex: 0 0 auto; }
.mp-sp-lugar:hover, .mp-sp-lugar:focus-visible { color: #f26a1b; outline: none; }


/* ---------- janelas do módulo: cabeçalho limpo (título + fechar) ---------- */
.mp-modal { background: rgba(10, 29, 58, .78); }
.mp-modal-box { border-top: 6px solid var(--mp-laranja); }
.mp-modal-h { padding: 12px 16px; gap: 12px; background: #fff; }
.mp-modal-h h2 { font-size: 20px; font-weight: 800; color: #0f2a52; white-space: normal; }
.mp-modal-h h2 small { font-size: 15px; font-weight: 600; color: #4a5d78; }
.mp-sp-x { flex: 0 0 auto; width: 48px; height: 48px; border: 2px solid #0f2a52; background: #fff; color: #0f2a52; font: 400 30px/1 var(--mp-fonte); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mp-sp-x:hover, .mp-sp-x:focus-visible { background: #0f2a52; color: #fff; outline: none; }

/* ---------- popup do participante ---------- */
.mp-sp-vw { background: #fff; width: min(1180px, 100%); height: min(780px, 100%); display: flex; flex-direction: column; overflow: hidden; border-top: 6px solid #f26a1b; box-shadow: var(--mp-sombra); font-family: var(--mp-fonte); color: #0f2a52; }
.mp-sp-vw-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e3e9f1; }
.mp-sp-vw-h h2 { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.mp-sp-vw-h h2 small { display: block; font-size: 15px; font-weight: 600; color: #4a5d78; margin-top: 2px; }
.mp-sp-vw-corpo { flex: 1; min-height: 0; display: flex; }
.mp-sp-vw-mapa { position: relative; flex: 1; min-width: 0; background: #eef1f5; }
.mp-sp-vw-tip { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -150%); background: #0f2a52; color: #fff; font: 700 13px var(--mp-fonte); padding: 5px 9px; white-space: nowrap; }
.mp-sp-vw-tip[hidden] { display: none; }
.mp-sp-vw-tip.baixo { transform: translate(-50%, 60%); }
/* os outros locais: cinza e apagados; o da atividade aceso; o "Você" em azul */
.mp-sp-vw .mp-poly.mp-est-esmaecido { fill: #0f2a52; stroke: #0f2a52; fill-opacity: .14; stroke-opacity: .62; stroke-width: 2; }
.mp-sp-vw .mp-poly.mp-est-esmaecido:hover { fill-opacity: .3; stroke-opacity: .9; }
.mp-sp-vw .mp-poly.mp-est-vivo { fill: #f26a1b; stroke: #fff; filter: drop-shadow(0 0 6px #f26a1b); }
.mp-sp-vw .mp-poly.mp-est-destaque { fill: #0f2a52; stroke: #0f2a52; fill-opacity: .45; stroke-width: 3; }
.mp-sp-vw .mp-label.mp-est-vivo, .mp-sp-vw .mp-label.mp-est-destaque { display: none; }
.mp-sp-vw .mp-img { filter: grayscale(.4); }

.mp-sp-vw-lado { width: 340px; flex: none; overflow: auto; border-left: 1px solid #e3e9f1; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.mp-sp-vw-alvo { background: #0f2a52; color: #fff; padding: 14px 16px 16px; position: relative; }
.mp-sp-vw-alvo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #f26a1b; }
.mp-sp-vw-et { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #ffb27f; }
.mp-sp-vw-alvo strong { display: block; font-size: 21px; line-height: 1.2; margin-top: 6px; }
.mp-sp-vw-det, .mp-sp-vw-onde { display: block; font-size: 16px; font-weight: 700; margin-top: 4px; color: #dfe7f2; }
.mp-sp-vw-det { color: #fff; }
/* vários locais: um nome embaixo do outro */
.mp-sp-vw-alvo.varios strong { font-size: 19px; margin-top: 10px; padding-left: 12px; border-left: 4px solid #f26a1b; }
.mp-sp-vw-alvo.varios .mp-sp-vw-onde { padding-left: 16px; margin-top: 2px; font-size: 15px; }
.mp-sp-vw-alvo.varios .mp-sp-vw-det { margin-top: 10px; }
.mp-sp-vw-campus { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; color: #ffb27f; }
.mp-sp-vw-capa { position: relative; padding: 0; border: 0; background: #e8edf3; cursor: zoom-in; display: block; width: 100%; }
.mp-sp-vw-capa img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mp-sp-vw-mais { position: absolute; right: 0; bottom: 0; background: rgba(15, 42, 82, .9); color: #fff; font: 800 16px var(--mp-fonte); padding: 8px 12px; }
.mp-sp-vw-todas { width: 100%; }
/* galeria em tela cheia */
.mp-sp-gal { position: fixed; inset: 0; z-index: 10002; background: rgba(5, 15, 32, .94); display: flex; align-items: center; justify-content: center; padding: 64px 16px; }
.mp-sp-gal img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pan-y; user-select: none; }
.mp-sp-gal > .mp-sp-x { position: absolute; top: 12px; right: 12px; }
.mp-sp-gal-s { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 72px; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 400 54px/1 var(--mp-fonte); cursor: pointer; }
.mp-sp-gal-s:hover, .mp-sp-gal-s:focus-visible { background: #f26a1b; outline: none; }
.mp-sp-gal-s.ant { left: 8px; } .mp-sp-gal-s.prox { right: 8px; }
.mp-sp-gal-n { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font: 800 16px var(--mp-fonte); background: rgba(0,0,0,.4); padding: 6px 12px; }
/* miniaturas das fotos do local (comissão) */
.mp-sp-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 0 0 4px; }
.mp-sp-fotos:empty { display: none; }
.mp-sp-fotos figure { position: relative; margin: 0; }
.mp-sp-fotos-ver { display: block; width: 100%; padding: 0; border: 0; background: #e8edf3; cursor: zoom-in; }
.mp-sp-fotos-ver img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mp-sp-fotos-x { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; border: 0; background: rgba(142, 28, 28, .92); color: #fff; font: 400 24px/1 var(--mp-fonte); cursor: pointer; }
.mp-sp-tile-ic { display: inline-flex; }
.mp-sp-vw-voce { border: 2px solid #d3dce8; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mp-sp-vw-voce-t { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; }
.mp-sp-voce-ic { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: #0f2a52; color: #fff; border-radius: 50%; }
.mp-sp-vw-sel { min-height: 50px; font: 600 16px var(--mp-fonte); color: #0f2a52; border: 2px solid #c5d1e0; background: #fff; padding: 0 10px; width: 100%; }
.mp-sp-link { border: 0; background: none; color: #8e1c1c; font: 800 14px var(--mp-fonte); text-decoration: underline; cursor: pointer; padding: 6px; }
.mp-sp-vw-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 15px; }
.mp-sp-vw-dl dt { color: #4a5d78; font-weight: 600; }
.mp-sp-vw-dl dd { margin: 0; font-weight: 700; }
.mp-sp-vw-obs { margin: 0; font-size: 14px; line-height: 1.45; border-left: 4px solid #f26a1b; padding: 4px 0 4px 10px; color: #33496b; }

/* alfinetes de tamanho fixo na tela (qualquer zoom): "É aqui" laranja e "Você" azul */
.mp-sp-pin { position: absolute; width: 0; height: 0; transform: scale(calc(var(--mp-inv, 1) * .82)); transform-origin: 0 0; pointer-events: none; z-index: 3; }
.mp-sp-pin.voce { z-index: 2; }
.mp-sp-pin > i { position: absolute; left: -22px; bottom: 0; width: 44px; height: 58px; transform-origin: 50% 100%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.mp-sp-pin.alvo > i { animation: mp-sp-pula 1.4s ease-in-out infinite; }
.mp-sp-pin.alvo > b { position: absolute; left: -24px; top: -9px; width: 48px; height: 18px; border-radius: 50%; border: 3px solid #f26a1b; animation: mp-sp-onda 1.8s ease-out infinite; }
.mp-sp-pin > em { position: absolute; bottom: 64px; left: 0; transform: translateX(-50%); white-space: nowrap; color: #fff; font: 800 15px/1 var(--mp-fonte); font-style: normal; padding: 7px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.mp-sp-pin.alvo > em { background: #f26a1b; }
.mp-sp-pin.voce > em { background: #0f2a52; }
@keyframes mp-sp-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mp-sp-onda { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-sp-pin > i, .mp-sp-pin > b, .mp-poly.mp-est-vivo { animation: none !important; } }

@media (max-width: 760px) {
  .mp-modal.mp-sp-vw-fundo { padding: 0; }
  .mp-sp-vw { width: 100%; height: 100%; border-top-width: 5px; }
  .mp-sp-vw-h { padding: 10px 12px; }
  .mp-sp-vw-h h2 { font-size: 19px; }
  .mp-sp-vw-corpo { flex-direction: column; }
  .mp-sp-vw-mapa { flex: 0 0 auto; height: clamp(260px, 82vw, 52vh); }
  .mp-sp-vw .mp-sp-pin { transform: scale(calc(var(--mp-inv, 1) * .64)); }
  .mp-sp-vw-lado { width: auto; flex: 1; border-left: 0; border-top: 1px solid #e3e9f1; padding: 12px; }
}

/* ---------- janela "Escolher no mapa" (comissão e Panorâmica II) ---------- */
.mp-sp-esc { width: min(1100px, 100%); height: min(820px, 100%); }
.mp-sp-esc .mp-sp-esc-corpo { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; }
.mp-sp-esc .mp-sel-topo label { font-weight: 800; font-size: 15px; }
.mp-sp-esc .mp-input { min-height: 48px; font-size: 16px; border: 2px solid #c5d1e0; }
.mp-sp-esc .mp-sel-canvas { height: min(52vh, 480px); }
.mp-sp-esc .mp-sel-lista { max-height: min(52vh, 480px); }
.mp-sp-esc .mp-sel-lista li { font-size: 15px; padding: 12px; min-height: 48px; }
.mp-sp-esc .mp-sel-escolhido .mp-btn { min-height: 40px; }
.mp-sp-esc-pe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--mp-borda); background: #fff; }
.mp-sp-b { min-height: 52px; padding: 10px 20px; border: 3px solid #0f2a52; background: #fff; color: #0f2a52; font: 800 16px var(--mp-fonte); cursor: pointer; }
.mp-sp-b.la { background: #f26a1b; border-color: #f26a1b; color: #fff; }
.mp-sp-b.pq { min-height: 44px; font-size: 15px; padding: 6px 14px; border-width: 2px; }
.mp-sp-b:disabled { opacity: .45; cursor: default; }
.mp-sp-b.fora { margin-right: auto; border-color: #8e1c1c; color: #8e1c1c; }
@media (max-width: 760px) {
  .mp-sp-esc-pe .mp-sp-b { flex: 1 1 45%; }
  .mp-sp-esc .mp-sel-canvas { height: 42vh; }
}

/* ---------- "Foto e mapa do local": botões grandes lado a lado ---------- */
.mp-sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.mp-sp-tile { position: relative; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border: 3px solid #0f2a52; background: #fff; color: #0f2a52; font: 800 17px var(--mp-fonte); cursor: pointer; text-align: left; }
.mp-sp-tile:hover, .mp-sp-tile:focus-within, .mp-sp-tile:focus-visible { background: #0f2a52; color: #fff; outline: none; }
.mp-sp-tile svg { flex: 0 0 auto; color: #f26a1b; }
.mp-sp-tile.carregando { opacity: .55; pointer-events: none; }
.mp-sp-arq { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mp-sp-ficha { width: min(600px, 100%); height: auto; max-height: 100%; }
.mp-sp-ficha .mp-modal-h h2 { display: flex; flex-direction: column; }
.mp-sp-ficha-nome { display: block; font-size: 15px; font-weight: 600; color: #4a5d78; }
.mp-sp-ficha-corpo { padding: 14px 16px; overflow: auto; }

/* ---------- ícone discreto no campo Local (editar atividade) ---------- */
.mp-sp-campo { position: relative; display: block; }
.mp-sp-campo > input { padding-right: 46px !important; width: 100%; box-sizing: border-box; }
.mp-sp-campo-b { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: #8a97a9; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mp-sp-campo-b:hover, .mp-sp-campo-b:focus-visible { color: #f26a1b; outline: 2px solid #f26a1b; outline-offset: -2px; }
.mp-sp-campo-b.tem { color: #f26a1b; }

/* ---------- situação "No mapa: ..." ---------- */
.mp-sp-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: .5rem 0; padding: .7rem .8rem; border: 2px dashed #c5d1e0; background: #f7f9fc; color: #0f2a52; }
.mp-sp-linha.tem { border-style: solid; border-color: #1d6b34; background: #eef7f0; }
.mp-sp-linha .st { flex: 1 1 220px; font-weight: 700; font-size: 1rem; }
.mp-sp-linha .st small { display: block; font-weight: 600; color: #4a5d78; }

/* ---------- mapas6: janela "Escolher no mapa" com vários locais; nomes só ao passar o mouse ---------- */
.mp-sp-esc .mp-sp-esc-canvas { position: relative; }
.mp-sp-esc .mp-sp-esc-mapa { flex: 0 1 320px; }
.mp-sp-esc .mp-sp-esc-mapa[hidden] { display: none; }
.mp-sp-esc-dica { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #4a5d78; }
.mp-sp-esc .mp-poly.mp-est-esmaecido { fill: #0f2a52; stroke: #0f2a52; fill-opacity: .14; stroke-opacity: .62; stroke-width: 2; cursor: pointer; }
.mp-sp-esc .mp-poly.mp-est-esmaecido:hover, .mp-sp-esc .mp-poly.mp-est-destaque { fill: #0f2a52; stroke: #0f2a52; fill-opacity: .4; stroke-opacity: 1; stroke-width: 3; }
.mp-sp-esc .mp-poly.mp-est-vivo { fill: #f26a1b; stroke: #fff; filter: drop-shadow(0 0 6px #f26a1b); }
.mp-sp-esc .mp-img { filter: grayscale(.4); }
.mp-sp-esc-lista li { gap: 10px; }
.mp-sp-esc-ck { flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid #0f2a52; background: #fff; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 900 17px/1 var(--mp-fonte); }
.mp-sp-esc-lista li.mp-ativo .mp-sp-esc-ck { background: #f26a1b; border-color: #f26a1b; }
.mp-sp-esc-lista li:focus-visible { outline: 3px solid #f26a1b; outline-offset: -3px; }
.mp-sp-esc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 8px; min-height: 44px; }
.mp-sp-esc-rot { font-weight: 800; font-size: 15px; }
.mp-sp-esc-nada { font-size: 15px; font-weight: 600; color: #4a5d78; }
.mp-sp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 14px; border: 2px solid #f26a1b; background: #fff4ec; color: #0f2a52; font: 800 15px var(--mp-fonte); cursor: pointer; }
.mp-sp-chip b { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: #f26a1b; color: #fff; font: 400 22px/1 var(--mp-fonte); }
.mp-sp-chip:hover, .mp-sp-chip:focus-visible { background: #f26a1b; color: #fff; outline: none; }
.mp-sp-esc .mp-sp-esc-det { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
  .mp-sp-esc .mp-sel-canvas.mp-sp-esc-canvas { height: clamp(240px, 72vw, 42vh); }
  .mp-sp-esc-dica { font-size: 14px; }
}
