/* ============================================================
   CEFS — Mapa interativo (reprodução do projeto 3D do salão)
   ============================================================ */
.mapa-top{background:radial-gradient(120% 130% at 50% 0%, #ef4444, var(--c-red) 55%, #7c1717);color:#fff;padding:28px 0 24px}
.mapa-top h1{font-family:var(--display);font-size:clamp(26px,4.4vw,40px);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.mapa-top p{color:#ffe9c7;margin-top:6px}

.legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.legenda span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#fff;font-weight:600}
.legenda i{width:18px;height:18px;border-radius:50%;display:inline-block;border:2px solid rgba(0,0,0,.2)}
.lg-azul{background:#3a6fb0}.lg-laranja{background:#e07b2e}.lg-cam{background:#f3c218}
.lg-vend{background:#b9b4ab}.lg-sel{background:#fff;box-shadow:0 0 0 2px var(--c-red)}

.mapa-area{padding:24px 0 150px}
.stage-wrap{max-width:1060px;margin:0 auto;overflow-x:auto;padding-bottom:6px}
.stage{position:relative;width:100%;aspect-ratio:16/10;min-width:900px;
  background:linear-gradient(160deg,#62ab48,#4d8f37);
  border:4px solid #3f7a2c;border-radius:12px;box-shadow:inset 0 2px 30px rgba(0,0,0,.12);overflow:hidden}

/* ---- Zonas de referência ---- */
.zone{position:absolute;pointer-events:none}
.zone--pave{background:repeating-linear-gradient(45deg,#cfcabf 0 12px,#c8c3b7 12px 24px);
  box-shadow:inset 0 -4px 10px rgba(0,0,0,.08)}
.zone--build{background:linear-gradient(90deg,#bdb9b0,#a9a59c);box-shadow:inset 3px 0 10px rgba(0,0,0,.1)}
.palco{position:absolute;background:linear-gradient(180deg,#a9763e,#7c5022);border-radius:6px;
  display:grid;place-items:center;color:#ffe9c7;font-family:var(--display);font-size:15px;letter-spacing:.18em;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.6);pointer-events:none}

.ctx-label{position:absolute;pointer-events:none;display:grid;place-items:center;text-align:center}
.ctx-label b{background:rgba(255,255,255,.92);border-radius:7px;padding:3px 9px;font-size:11px;font-weight:800;
  color:#6b5640;box-shadow:0 3px 8px -4px rgba(0,0,0,.4)}

/* Barraquinhas de comida */
.barraca{position:absolute;transform:translate(-50%,-50%);width:26px;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.barraca__awning{height:6px;border-radius:3px 3px 0 0;background:repeating-linear-gradient(90deg,#d62828 0 4px,#fff 4px 8px)}
.barraca__body{height:13px;background:#ead9bb;border:1px solid #c2a06a;border-top:0;border-radius:0 0 3px 3px;
  display:grid;place-items:center;font-size:8px;font-weight:800;color:#8a6a3a}

/* ---- Mesa ---- */
.mesa{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:0;padding:0;
  cursor:pointer;display:grid;place-items:center;background:#ccc;
  box-shadow:0 0 0 3px #999,0 6px 12px -6px rgba(0,0,0,.5);transition:transform .12s,box-shadow .12s;z-index:3}
.mesa__code{font-family:var(--sans);font-size:11px;font-weight:800;color:#fff;z-index:2;position:relative}
.mesa__chair{position:absolute;width:9px;height:6px;border-radius:2px;background:#5a4636}
.mesa__chair.t{top:-4px;left:50%;transform:translateX(-50%)}
.mesa__chair.b{bottom:-4px;left:50%;transform:translateX(-50%)}
.mesa__chair.l{left:-4px;top:50%;transform:translateY(-50%);width:6px;height:9px}
.mesa__chair.r{right:-4px;top:50%;transform:translateY(-50%);width:6px;height:9px}
.mesa:hover{transform:translate(-50%,-50%) scale(1.18);z-index:8}

/* cores por bloco (iguais ao projeto 3D) */
.mesa--azul{background:#3a6fb0;box-shadow:0 0 0 3px #28508a,0 6px 12px -6px rgba(0,0,0,.5)}
.mesa--laranja{background:#e07b2e;box-shadow:0 0 0 3px #b85f1b,0 6px 12px -6px rgba(0,0,0,.5)}
.mesa--cam{background:#f3c218;box-shadow:0 0 0 3px #ca9b0e,0 6px 12px -6px rgba(0,0,0,.5)}
.mesa--cam .mesa__code{color:#5a4500}

/* estados sobrepõem a cor */
.mesa--reservada{background:repeating-linear-gradient(45deg,#f4d472 0 5px,#e3ad33 5px 10px)!important;box-shadow:0 0 0 3px #c79a2e!important;cursor:not-allowed}
.mesa--reservada .mesa__code{color:#5a4500}
.mesa--vendida{background:#b4afa6!important;box-shadow:0 0 0 3px #928d84!important;cursor:not-allowed}
.mesa--vendida .mesa__code{color:#fff}
.mesa--bloqueada{background:repeating-linear-gradient(45deg,#cfcabf 0 6px,#bdb8ac 6px 12px)!important;box-shadow:0 0 0 3px #a39e92!important;cursor:not-allowed}
.mesa--vendida .mesa__chair,.mesa--reservada .mesa__chair,.mesa--bloqueada .mesa__chair{opacity:.4}
.mesa--sel{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--c-red),0 12px 22px -8px rgba(0,0,0,.6)!important;
  transform:translate(-50%,-50%) scale(1.28)!important;z-index:9}

/* Barra de seleção */
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(120%);transition:transform .25s ease;
  background:#fff;border-top:3px solid var(--c-yellow);box-shadow:0 -16px 40px -20px rgba(74,47,27,.4)}
.selbar.show{transform:translateY(0)}
.selbar__in{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.selbar__info{display:flex;align-items:center;gap:16px}
.selbar__dot{width:48px;height:48px;border-radius:50%;background:var(--c-red);box-shadow:0 0 0 3px var(--c-yellow);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.selbar__txt b{font-family:var(--head);font-size:19px;color:var(--c-red)}
.selbar__txt span{display:block;color:var(--c-muted);font-size:14px}
.selbar__price{font-family:var(--head);font-size:24px;color:var(--c-green-2);margin-right:6px}

.empty-state{max-width:600px;margin:40px auto;text-align:center;color:var(--c-muted)}
.empty-state .ic{font-size:40px}
.mapa-hint{text-align:center;color:var(--c-muted);font-size:13px;margin-top:14px}

@media(max-width:600px){
  .selbar__in{justify-content:center}
  .selbar__price{width:100%;text-align:center;margin:0}
}