/* CSS para plano que respeta celdas en blanco */
.plano-bus-container { background:#f8f9fb;padding:16px;border-radius:10px;display:inline-block; }
.plano-title { font-weight:600;margin-bottom:10px;color:#2d3b4f; }
.plano-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 48px);
  grid-auto-rows: 48px;
  gap: 6px;
  justify-content: center;
  padding: 8px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* celda vacía / pasillo (puntos en blanco) */
.plano-cell {
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:13px;
  box-sizing:border-box;
}
/* default empty look (white) */
.plano-cell-empty {
  background: #ffffff; /* blanco puro - respeta puntos en blanco */
  border: 1px dashed rgba(0,0,0,0.06);
}
/* seat styling */
.plano-seat { color:#fff; cursor:default; box-shadow: 0 1px 4px rgba(0,0,0,0.12); display:flex;align-items:center;justify-content:center; }
.plano-seat-label { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);color:#fff; }
.plano-seat.disponible { background: linear-gradient(145deg,#43a047,#2e7d32); }
.plano-seat.ocupado { background: linear-gradient(145deg,#e53935,#b71c1c); }
.plano-seat.reservado { background: linear-gradient(145deg,#ff9800,#ef6c00); }

/* leyenda */
.plano-leyenda { margin-top:10px;font-size:13px;color:#555; }
.plano-leyenda span { margin:0 8px;padding-left:18px;position:relative; }
.plano-leyenda span::before { content:'';position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:3px;}
.plano-leyenda .disp::before{ background:#43a047 } .plano-leyenda .ocp::before{ background:#e53935 } .plano-leyenda .res::before{ background:#ff9800 }