/* =====================================================================
   O desenho da SALA (includes/sala.php). Fica num arquivo só porque
   DUAS telas mostram a mesma sala e carregam folhas diferentes: a página
   de vendas (site.css) e o Escritório (portal.css).
   ===================================================================== */
.sala{ width:100%; height:auto; display:block; }
.sala-nome{ font:700 8.5px 'Inter', system-ui, sans-serif; fill:#fff; letter-spacing:-.01em; }
.sala-papel{ font:600 9px 'Inter', system-ui, sans-serif; fill:#6b7280; }
.sala-zona{ font:700 10px 'Inter', system-ui, sans-serif; letter-spacing:.08em; }

/* o anel laranja que pulsa = está trabalhando agora */
.sala-anel{ transform-box:fill-box; transform-origin:center; animation:sala-pulsa 1.8s ease-out infinite; }
@keyframes sala-pulsa{
  0%{ transform:scale(.85); opacity:.9; }
  100%{ transform:scale(1.5); opacity:0; }
}
/* o papel do pedido, boiando de leve sobre a mesa */
.sala-doc{ animation:sala-flutua 2.6s ease-in-out infinite; }
@keyframes sala-flutua{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
@media (prefers-reduced-motion: reduce){
  .sala-anel, .sala-doc{ animation:none; }
}

/* ---------------------------------------------------------------------
   AS MESAS CLICÁVEIS (10/09/2026). Só existe quando quem desenha a sala
   passa `links` — na página de vendas a sala continua sendo ilustração,
   sem cursor de mão e sem hover.
   --------------------------------------------------------------------- */
.sala-clic{ cursor:pointer; }
.sala-clic > g{
  transform-box:fill-box; transform-origin:center;
  transition:transform .16s ease, filter .16s ease;
}
.sala-clic:hover > g{ transform:translateY(-3px); filter:drop-shadow(0 5px 8px rgba(11,18,38,.22)); }
.sala-clic:focus-visible > g{ filter:drop-shadow(0 0 0 3px rgba(31,95,168,.55)); }
@media (prefers-reduced-motion: reduce){
  .sala-clic:hover > g{ transform:none; }
}