/* =========================================================================
   MAPA DO ÔNIBUS · compartilhado entre a página pública e o painel
   Markup gerado por js/onibus.js (htmlMapa). Cada fila é uma grade:
   lado esquerdo, corredor, lado direito. A frente do ônibus é o topo.
   ========================================================================= */

:root { --polt: 44px; --corredor: 22px; }

.onibus {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 24px;
}
.onibus--compacto { --polt: 38px; --corredor: 16px; gap: 16px; }

.onibus__andar {
  flex: none;
  padding: 14px 16px 18px;
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: 26px 26px 18px 18px;
  box-shadow: var(--shadow-sm);
}
.onibus__andar-nome {
  margin: 0 0 8px; text-align: center;
  font-size: var(--txt-2xs); font-weight: var(--peso-bold);
  letter-spacing: var(--ls-etiqueta); text-transform: uppercase;
  color: var(--cor-suave-texto);
}
.onibus__frente { display: flex; justify-content: center; margin-bottom: 10px; }
.onibus__frente span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: var(--radius-full);
  background: var(--cor-suave); color: var(--cor-suave-texto);
  font-size: 10px; font-weight: var(--peso-bold); letter-spacing: .08em; text-transform: uppercase;
}
.onibus__frente span::before {
  content: ""; width: 10px; height: 10px; border-radius: 50% 50% 3px 3px;
  border: 2px solid currentColor; border-bottom-width: 3px; box-sizing: border-box;
}

.onibus__grade { display: grid; gap: 6px; }
.onibus__fila {
  display: grid; align-items: center; gap: 6px;
  grid-template-columns: repeat(var(--e), var(--polt)) var(--corredor) repeat(var(--d), var(--polt));
}
.onibus__corredor { width: var(--corredor); height: 100%; }

/* ---- a poltrona ---- */
.poltrona {
  position: relative;
  width: var(--polt); height: var(--polt);
  display: grid; place-items: center;
  border: 1.5px solid var(--cor-borda);
  border-radius: 9px 9px 6px 6px;
  background: var(--cor-card);
  color: var(--cor-texto);
  font: inherit; font-size: calc(var(--polt) * .29); font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  padding: 0; margin: 0;
  cursor: pointer;
  transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido), transform var(--t-rapido);
}
/* o encosto */
.poltrona::before {
  content: ""; position: absolute; left: 22%; right: 22%; top: 9%; height: 8%;
  border-radius: 3px; background: currentColor; opacity: .22;
}
.poltrona__num { margin-top: 12%; line-height: 1; }

.poltrona--livre:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-tipo); transform: translateY(-1px); }
.poltrona--selecionada {
  background: var(--gradiente-primaria); border-color: transparent;
  color: var(--cor-primaria-texto); box-shadow: var(--shadow-md);
}
.poltrona--selecionada::before { opacity: .55; }
.poltrona--pendente {
  background: hsl(var(--accent) / .16); border-color: hsl(var(--accent) / .55);
  color: var(--cor-acento-tipo);
}
.poltrona--confirmada {
  background: hsl(var(--success) / .14); border-color: hsl(var(--success) / .5);
  color: var(--cor-sucesso);
}
.poltrona--ocupada {
  background: var(--cor-suave); border-color: transparent;
  color: var(--cor-suave-texto); opacity: .7; cursor: not-allowed;
}
.poltrona--ocupada::before { opacity: .35; }
.poltrona:disabled { cursor: default; transform: none; }
.poltrona--bloqueada { opacity: .45; }

/* células que não são poltrona */
.poltrona--especial {
  border-style: dashed; background: transparent; cursor: default;
  font-size: 9px; font-weight: var(--peso-bold); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cor-suave-texto);
}
.poltrona--especial::before { display: none; }
.poltrona--vazio { visibility: hidden; pointer-events: none; }

/* ---- legenda ---- */
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 0 0 18px; }
.legenda__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--txt-sm); color: var(--cor-suave-texto); }
.legenda__item .poltrona { --polt: 22px; cursor: default; border-radius: 6px 6px 4px 4px; font-size: 0; }
.legenda__item .poltrona::before { left: 22%; right: 22%; top: 12%; height: 12%; }

@media (max-width: 480px) {
  :root { --polt: 40px; --corredor: 18px; }
  .onibus { gap: 16px; }
  .onibus__andar { padding: 12px 12px 16px; }
}