/* CampFlow — mapa vivo (planta vetorial + linha do tempo do feriado). Componente: _inc/_mapa_vivo.php */

.cfm { container: cfm / inline-size; --cfm-livre: #fff; --cfm-ocupada: var(--floresta, #0b3b2c); --cfm-chega: var(--brasa, #f2711c); --cfm-sai: #f6c343; --cfm-sai-borda: #dda21a; }
.cfm-cartao { padding: 18px; border-radius: 28px; background: #fff; border: 1px solid var(--linha, #e3ebe7); box-shadow: 0 30px 70px -40px rgba(11, 59, 44, .45), 0 2px 6px rgba(11, 59, 44, .04); }

/* cabeçalho */
.cfm-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 6px 14px; }
.cfm-topo__nome { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cfm-topo__selo { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--musgo, #12b07c); color: #fff; }
.cfm-topo__selo svg { width: 22px; height: 22px; }
.cfm-topo__nome strong { display: block; font-family: var(--titulo, sans-serif); font-weight: 800; font-size: 16px; color: var(--tinta, #0f1f19); letter-spacing: -.01em; line-height: 1.2; }
.cfm-topo__nome div span { display: block; font-size: 13px; color: var(--suave, #5c6b64); line-height: 1.3; }
.cfm-manchete { font-family: var(--titulo, sans-serif); font-weight: 700; font-size: 16px; color: var(--tinta-2, #34443d); text-align: right; line-height: 1.3; }
.cfm-manchete b { font-weight: 800; font-size: 24px; color: var(--floresta-2, #0c7a54); letter-spacing: -.02em; }
.cfm-manchete span { white-space: nowrap; }
.cfm-manchete span::before { content: "· "; }

/* palco: terreno em SVG + vagas como botões por cima */
.cfm-palco { container: palco / inline-size; position: relative; aspect-ratio: 1200 / 700; }
.cfm-terreno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 20px; }
.cfm-terreno--P { display: none; }
.cfm-t-zona { font-family: var(--titulo, sans-serif); font-weight: 800; letter-spacing: .06em; fill: var(--floresta, #0b3b2c); }
.cfm-t-extra { font-family: var(--fonte, sans-serif); font-weight: 500; fill: #4f7a66; }
.cfm-t-agua { fill: #2f7f97; letter-spacing: .2em; }
.cfm-t-est { font-family: var(--titulo, sans-serif); font-weight: 700; fill: var(--floresta, #0b3b2c); }
.cfm-t-portaria { font-family: var(--titulo, sans-serif); font-weight: 800; letter-spacing: .12em; fill: #fff; }

.cfm-vaga {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  margin: 0; padding: 0; border: 2px solid var(--esmeralda, #19c48c); border-radius: 11px;
  background: var(--cfm-livre); color: var(--floresta-2, #0c7a54); cursor: pointer;
  box-shadow: 0 2px 0 rgba(11, 59, 44, .12);
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.cfm-vaga--glamping { border-radius: 50%; }
.cfm-vaga--chale { border-radius: 9px 9px 12px 12px; }
.cfm-vaga__ic { width: clamp(12px, 2.1cqw, 24px); height: clamp(12px, 2.1cqw, 24px); }
.cfm-vaga--barraca .cfm-vaga__ic { width: clamp(11px, 1.8cqw, 20px); height: clamp(11px, 1.8cqw, 20px); }
.cfm-vaga__cod { font-family: var(--fonte, sans-serif); font-weight: 700; font-size: clamp(8px, .88cqw, 11px); line-height: 1; letter-spacing: .02em; }
.cfm-vaga__plug { position: absolute; top: -7px; right: -7px; width: 17px; height: 17px; padding: 2.5px; border-radius: 50%; background: #f2b417; color: var(--floresta, #0b3b2c); border: 2px solid #fff; }
.cfm-vaga:hover, .cfm-vaga.is-sel { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(11, 59, 44, .55); z-index: 2; }
.cfm-vaga.is-sel { outline: 3px solid var(--brasa-clara, #ffb07a); outline-offset: 2px; }
.cfm-vaga:focus-visible { outline: 3px solid var(--floresta, #0b3b2c); outline-offset: 2px; z-index: 3; }

.cfm-vaga.is-ocupada { background: var(--cfm-ocupada); border-color: var(--cfm-ocupada); color: #fff; }
.cfm-vaga.is-ocupada .cfm-vaga__cod { color: #9fe6c8; }
.cfm-vaga.is-chega { background: var(--cfm-chega); border-color: var(--cfm-chega); color: #fff; }
.cfm-vaga.is-sai { background: var(--cfm-sai); border-color: var(--cfm-sai-borda); color: var(--floresta, #0b3b2c); }
.cfm-vaga.is-limpeza { background: repeating-linear-gradient(-45deg, #eef1ef 0 5px, #d6ddd9 5px 10px); border-color: #b7c2bd; color: #6b7a73; }

/* chegada / nova reserva */
.cfm-vaga.is-pop { animation: cfm-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.cfm-vaga.is-nova::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid var(--brasa, #f2711c); animation: cfm-onda 1.1s ease-out 3; pointer-events: none; }
@keyframes cfm-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes cfm-onda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

/* aviso (nova pré-reserva) */
.cfm-aviso { position: absolute; z-index: 6; top: 14px; left: 50%; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--floresta, #0b3b2c); color: #fff; font-size: 14px; line-height: 1.3; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); opacity: 0; transform: translate(-50%, -10px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.cfm-aviso.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cfm-aviso__ponto { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--brasa, #f2711c); }
.cfm-aviso__ponto svg { width: 14px; height: 14px; color: #fff; }
.cfm-aviso b { font-weight: 700; }
.cfm-aviso a { color: var(--brasa-clara, #ffb07a); font-weight: 600; white-space: nowrap; }

/* ficha da vaga */
.cfm-ficha { position: absolute; z-index: 8; width: 300px; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--linha, #e3ebe7); box-shadow: 0 26px 60px -24px rgba(11, 59, 44, .5); font-size: 14px; color: var(--tinta-2, #34443d); line-height: 1.45; }
.cfm-ficha[hidden] { display: none; }
.cfm-ficha:focus { outline: none; }
.cfm-ficha__fechar { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--areia-2, #f2f8f5); color: var(--tinta-2, #34443d); cursor: pointer; }
.cfm-ficha__fechar svg { width: 16px; height: 16px; }
.cfm-ficha__cab { display: flex; align-items: center; gap: 12px; padding-right: 34px; }
.cfm-ficha__ic { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; border: 2px solid var(--esmeralda, #19c48c); color: var(--floresta-2, #0c7a54); background: #fff; }
.cfm-ficha__ic svg { width: 24px; height: 24px; }
.cfm-ficha__ic.is-ocupada { background: var(--cfm-ocupada); border-color: var(--cfm-ocupada); color: #fff; }
.cfm-ficha__ic.is-chega { background: var(--cfm-chega); border-color: var(--cfm-chega); color: #fff; }
.cfm-ficha__ic.is-sai { background: var(--cfm-sai); border-color: var(--cfm-sai-borda); color: var(--floresta, #0b3b2c); }
.cfm-ficha__ic.is-limpeza { background: repeating-linear-gradient(-45deg, #eef1ef 0 5px, #d6ddd9 5px 10px); border-color: #b7c2bd; color: #6b7a73; }
.cfm-ficha h3 { font-family: var(--titulo, sans-serif); font-size: 20px; font-weight: 800; color: var(--tinta, #0f1f19); letter-spacing: -.02em; line-height: 1.1; }
.cfm-ficha__tipo { display: block; font-size: 13px; color: var(--suave, #5c6b64); }
.cfm-ficha__st { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--salvia, #e2f6ed); color: var(--floresta-2, #0c7a54); }
.cfm-ficha__st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cfm-ficha__st.is-ocupada { background: #dfe9e4; color: var(--floresta, #0b3b2c); }
.cfm-ficha__st.is-chega { background: #fde6d6; color: #c4520c; }
.cfm-ficha__st.is-sai { background: #fdf0c8; color: #8a6200; }
.cfm-ficha__st.is-limpeza { background: #eceff0; color: #56635d; }
.cfm-ficha__hosp { margin-top: 12px; }
.cfm-ficha__hosp strong { display: block; font-family: var(--titulo, sans-serif); font-weight: 800; font-size: 16.5px; color: var(--tinta, #0f1f19); }
.cfm-ficha__hosp p { margin-top: 2px; font-size: 13.5px; color: var(--suave, #5c6b64); }
.cfm-ficha__troca { margin-top: 8px; font-size: 12.5px; color: var(--suave, #5c6b64); }
.cfm-conta { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--areia-2, #f2f8f5); font-size: 13.5px; }
.cfm-conta__tit { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado, #84918b); }
.cfm-conta div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.cfm-conta div span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta, #0f1f19); }
.cfm-conta .cfm-conta__total { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--linha-2, #cddad3); font-weight: 800; color: var(--tinta, #0f1f19); }
.cfm-conta .cfm-conta__total span:last-child { font-family: var(--titulo, sans-serif); font-size: 16px; }
.cfm-ficha__livre { margin-top: 12px; font-size: 14px; }
.cfm-ficha__acoes { display: grid; gap: 8px; margin-top: 14px; }
.cfm-ficha__reservar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--brasa, #f2711c); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .2s; }
.cfm-ficha__reservar:hover { background: #d95f0e; }
.cfm-ficha__link { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--floresta-2, #0c7a54); }
.cfm-ficha__alca { display: none; }

/* bottom sheet (celular) */
.cfm-ficha.is-folha { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 78vh; overflow: auto; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border: 0; box-shadow: 0 -20px 50px -10px rgba(11, 59, 44, .45); animation: cfm-folha .28s ease-out; }
.cfm-ficha.is-folha .cfm-ficha__alca { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--linha-2, #cddad3); }
.cfm-ficha.is-folha .cfm-ficha__fechar { top: 14px; right: 14px; }
@keyframes cfm-folha { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* linha do tempo do feriado */
.cfm-linha { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding: 14px 18px 12px; border-radius: 18px; background: var(--areia-2, #f2f8f5); }
.cfm-play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 158px; flex-shrink: 0; min-height: 46px; padding: 10px 20px 10px 14px; border: 0; border-radius: 999px; background: var(--floresta, #0b3b2c); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .2s; }
.cfm-play:hover { background: var(--floresta-2, #0c7a54); }
.cfm-play svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--esmeralda, #19c48c); color: var(--floresta, #0b3b2c); box-sizing: content-box; }
.cfm-play.is-tocando svg { background: var(--brasa, #f2711c); color: #fff; }
.cfm-tempo { flex: 1; min-width: 0; }
.cfm-dias { display: grid; grid-template-columns: repeat(5, 1fr); }
.cfm-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; padding: 4px 0; border: 0; background: none; color: var(--suave, #5c6b64); cursor: pointer; font-size: 13px; line-height: 1.1; border-radius: 12px; }
.cfm-dia__barra { position: relative; width: 30px; height: 40px; border-radius: 8px; background: #dcebe3; overflow: hidden; }
.cfm-dia__barra i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #9fd8bd; border-radius: 6px 6px 0 0; transition: height .45s ease, background .3s; }
.cfm-dia b { margin-top: 3px; font-family: var(--titulo, sans-serif); font-weight: 800; font-size: 14px; color: var(--tinta-2, #34443d); }
.cfm-dia small { font-size: 12px; font-variant-numeric: tabular-nums; }
.cfm-dia[aria-pressed="true"] .cfm-dia__barra i { background: var(--musgo, #12b07c); }
.cfm-dia[aria-pressed="true"] b { color: var(--floresta-2, #0c7a54); }
.cfm-dia[aria-pressed="true"] small { color: var(--floresta-2, #0c7a54); font-weight: 700; }
.cfm-dia:hover .cfm-dia__barra { background: #cfe5d9; }
.cfm .cfm-range { display: block; width: calc(80% + 24px); margin: 6px calc(10% - 12px) 0; height: 24px; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 50%; }
.cfm-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--musgo, #12b07c) var(--p), #d2e3da var(--p)); }
.cfm-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--musgo, #12b07c) var(--p), #d2e3da var(--p)); }
.cfm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 5px solid var(--floresta-2, #0c7a54); box-shadow: 0 3px 8px rgba(11, 59, 44, .3); }
.cfm-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 5px solid var(--floresta-2, #0c7a54); box-shadow: 0 3px 8px rgba(11, 59, 44, .3); }
.cfm-range:focus-visible { outline: none; }
.cfm-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(18, 176, 124, .35); }
.cfm-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(18, 176, 124, .35); }

/* legenda com contagem */
.cfm-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 14px 0 2px; padding: 0; list-style: none; font-size: 13.5px; color: var(--tinta-2, #34443d); }
.cfm-legenda li { display: inline-flex; align-items: center; gap: 7px; }
.cfm-legenda i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--esmeralda, #19c48c); background: #fff; }
.cfm-legenda [data-s="ocupada"] i { background: var(--cfm-ocupada); border-color: var(--cfm-ocupada); }
.cfm-legenda [data-s="chega"] i { background: var(--cfm-chega); border-color: var(--cfm-chega); }
.cfm-legenda [data-s="sai"] i { background: var(--cfm-sai); border-color: var(--cfm-sai-borda); }
.cfm-legenda [data-s="limpeza"] i { background: repeating-linear-gradient(-45deg, #eef1ef 0 3px, #d6ddd9 3px 6px); border-color: #b7c2bd; }
.cfm-legenda b { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--areia-2, #f2f8f5); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta, #0f1f19); }

/* cartão médio: a contagem vai para a linha de baixo */
@container cfm (max-width: 900px) {
  .cfm-manchete span { display: block; font-size: 13.5px; }
  .cfm-manchete span::before { content: none; }
}

/* tela do palco estreita: some o código dentro da vaga */
@container palco (max-width: 820px) {
  .cfm-vaga__cod { display: none; }
  .cfm-vaga__plug { width: 14px; height: 14px; top: -6px; right: -6px; padding: 2px; }
}

/* celular: desenho em pé */
@container cfm (max-width: 640px) {
  .cfm-cartao { padding: 10px; border-radius: 22px; }
  .cfm-topo { flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 4px 12px; }
  .cfm-manchete { text-align: left; font-size: 14.5px; }
  .cfm-manchete b { font-size: 21px; }
  .cfm-manchete span { display: block; font-size: 13px; font-weight: 600; color: var(--suave, #5c6b64); }
  .cfm-manchete span::before { content: none; }
  .cfm-palco { aspect-ratio: 600 / 1240; }
  .cfm-terreno { border-radius: 16px; }
  .cfm-terreno--L { display: none; }
  .cfm-terreno--P { display: block; }
  .cfm-vaga { left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); border-radius: 9px; }
  .cfm-vaga--glamping { border-radius: 50%; }
  .cfm-vaga__ic, .cfm-vaga--barraca .cfm-vaga__ic { width: 17px; height: 17px; }
  .cfm-aviso { font-size: 12.5px; top: 8px; padding: 7px 12px 7px 7px; border-radius: 16px; width: max-content; }
  .cfm-linha { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 10px 10px; }
  .cfm-play { align-self: center; }
  .cfm-dia__barra { width: 24px; height: 34px; }
  .cfm-legenda { justify-content: flex-start; gap: 8px 14px; font-size: 12.5px; padding: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .cfm-vaga, .cfm-aviso, .cfm-dia__barra i { transition: none; }
  .cfm-vaga.is-pop, .cfm-vaga.is-nova::after, .cfm-ficha.is-folha { animation: none; }
}